Nuxt管理仪表板
一个全栈、生产就绪的SaaS管理仪表板，由以下组件构建 Nuxt 3, Tailwind CSS, 更佳认证，以及 Drizzle ORM 在PostgreSQL上。包括多租户组织管理、AI聊天、订阅计费、配置文件管理和黑暗模式。
______________________________________________________________________
技术栈
| 层 | 技术 |
|---|---|
| 框架 | Nuxt 3 + 视图3 |
| 造型 | Tailwind CSS · 黛西在 · @nuxt/ui |
| 身份验证 | 更佳认证 （电子邮件/密码） |
| 数据库 | PostgreSQL+ Drizzle ORM |
| 国家管理 | 精确定位 |
| 图表 | Chart.js · 顶点图表 |
| 图片上传 | 多云 + @nuxt/图像 |
| AI/LLM | OpenAI API ·Ollama（当地） |
| 付款方式 | SSLCommerz |
| MCP | @模型上下文协议/sdk |
| 测试 | Vitest + @nuxt/test-utils |
| 皮绒 | ESLint·精致·时尚·哈士奇+皮绒上演 |
______________________________________________________________________
特性
- 认证 --注册、登录、注销、忘记密码、电子邮件验证（生产）
- 多租户组织 --创建和转换组织；基于角色的访问（所有者/管理员/成员/查看者）
- 订阅和计费 --通过SSLCommerz提供免费/初级/标准/专业/企业计划
- 仪表板 --分析卡、财务表、交易列表、趋势图
- 用户管理 --查看、管理和筛选用户
- 简介 --编辑个人资料、上传头像（Cloudinary）、管理支付方式、安全设置
- AI聊天 --由OpenAI或本地Ollama实例支持的集成聊天
- 深色模式 --通过手动切换实现系统偏好感知
- MCP服务器 --AI工具的模型上下文协议集成
- 表单验证 --带vee验证的Zod模式
- 完全打字 --TypeScript严格模式贯穿始终
______________________________________________________________________
项目结构
├── server/
│ ├── auth.ts # BetterAuth configuration
│ ├── db/ # Drizzle schema, migrations, validators
│ └── api/ # REST API routes (auth, dashboard, profile, payment…)
├── pages/
│ ├── auth/ # Login, Signup, Forgot Password
│ ├── dashboard/ # Main dashboard, users, messages, settings
│ ├── profile/ # Profile edit & add
│ └── sidebar/ # Overview, pricing, tables, UI demos
├── components/ # Reusable Vue components
├── composables/ # useAuth, useProfile, useOrganization, useChat…
├── stores/ # Pinia stores
├── middleware/ # Auth & organization route guards
└── tests/ # Unit, integration, and e2e tests______________________________________________________________________
入门指南
先决条件
- Node.js≥20
- pnpm≥9
- PostgreSQL数据库
1.克隆和安装
git clone https://github.com/Mst-Farzana/tailwind-vue-nuxt-mcp.git
cd tailwind-vue-nuxt-mcp
pnpm install2.环境变量
复制示例文件并填写您的值：
cp .env.example .env| 变量 | 描述 |
|---|---|
DATABASE_URL | PostgreSQL连接字符串 |
BETTER_AUTH_SECRET | 随机64个字符的秘密 |
BETTER_AUTH_URL | 应用程序的公共基础URL |
NUXT_PUBLIC_SITE_URL | 生产域（用于支付重定向） |
GITHUB_CLIENT_ID | GitHub OAuth应用程序客户端ID |
GITHUB_CLIENT_SECRET | GitHub OAuth应用程序客户端密钥 |
CLOUDINARY_CLOUD_NAME | 云名称 |
CLOUDINARY_API_KEY | Cloudinary API密钥 |
CLOUDINARY_API_SECRET | Cloudinary API秘密 |
OPENAI_API_KEY | OpenAI API密钥 |
SSLC_STORE_ID | SSLCommerz商店ID |
SSLC_STORE_PASS | SSLCommerz存储密码 |
OLLAMA_URL | Ollama端点（默认值： http://127.0.0.1:11434/v1/chat/completions) |
3.数据库设置
运行迁移以创建所有表：
pnpm drizzle-kit generate
pnpm drizzle-kit migrate4.启动开发服务器
pnpm dev______________________________________________________________________
脚本
| 命令 | 描述 |
|---|---|
pnpm dev | 启动开发服务器 |
pnpm build | 为生产而建 |
pnpm preview | 在本地预览生产构建 |
pnpm lint | 运行ESLint |
pnpm lint:fix | 自动修复棉绒错误 |
pnpm format | 带Prettier的格式 |
pnpm nuxi typecheck | TypeScript类型检查 |
pnpm test | 运行所有测试 |
pnpm test:unit | 仅运行单元测试 |
pnpm test:e2e | 仅运行端到端测试 |
pnpm test:coverage | 使用覆盖率报告运行测试 |
pnpm check | Lint+格式+类型检查+测试（完整CI检查） |
______________________________________________________________________
生产部署
pnpm build
node .output/server/index.mjs注： 在部署之前，在托管平台上设置所有环境变量。这DATABASE_URL,BETTER_AUTH_SECRET，以及NUXT_PUBLIC_SITE_URL是应用程序在生产中正常运行所必需的。
对于容器化部署，中的构建输出 .output/ 是自包含的，可以复制到任何Node.js Docker镜像中。
______________________________________________________________________
测试
pnpm test # Run all tests
pnpm test:watch # Watch mode
pnpm test:unit # Unit tests only
pnpm test:e2e # End-to-end tests only
pnpm test:coverage # With coverage report______________________________________________________________________
许可证
麻省理工学院