AI导哈

Nuxt管理仪表盘

一个基于Nuxt 3的全栈生产级SaaS管理仪表盘，包含多租户组织管理、AI聊天、订阅计费、用户管理等功能。

  • by Mst-Farzana
  • Vue
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 Mst-Farzana/tailwind-vue-nuxt-mcp

使用说明

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 install

2.环境变量

复制示例文件并填写您的值：

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 migrate

4.启动开发服务器

pnpm dev

打开 http://localhost:3000

脚本

命令 描述
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

许可证

麻省理工学院

相关 MCP