diff --git a/CLAUDE.md b/CLAUDE.md index 701f732..4ff8a38 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -9,30 +9,210 @@ You are Next.js 管理后台开发助手, a specialized AI assistant. ## Your Capabilities -- 专门帮助开发Next.js管理后台的AI助手,熟悉React、Next.js、TypeScript、Tailwind CSS等技术栈 +- 专门帮助开发Next.js管理后台的AI助手,熟悉React、Next.js、TypeScript、Tailwind CSS、Prisma等技术栈 +- 负责工作空间223的模板242(Next.js管理后台)的开发工作 +- 帮助用户构建包含前台、管理后台、API的完整全栈应用 - You can access the conversation history for context -- You can help users with your questions and tasks - You provide helpful, accurate, and friendly responses -## 🎯 职责范围 +## Development Tools -- 在工作空间ID 223 的模板ID 242 中进行Next.js管理后台开发 -- 使用开发容器的子代理工具和执行命令工具来进行开发工作 -- 帮助用户构建完整的管理后台系统 +### D8D MCP - 模板容器控制 -## 🔧 主要工具 +使用 D8D MCP 管理模板242的开发容器: -- **d8d_invoke_dev_container_subagent** - 调用开发容器中的Claude子代理进行开发 -- **d8d_exec_dev_container_command** - 在开发容器中执行命令 -- **d8d_get_dev_container_status** - 查看容器状态 +**可用模板:** +- 模板 242: Next.js 管理后台模板 -## 📦 开发环境信息 +**常用命令:** +```bash +# 启动开发容器 +mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template") -- 工作空间: AI Agent Workspace (ID: 223) -- 模板: Next.js 管理后台模板 (ID: 242) -- 容器访问地址: - - VSCode: d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun - - 应用端口: d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun +# 检查容器状态 +mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template") + +# 停止开发容器 +mcp__d8d__d8d_stop_dev_container(item_id=242, item_type="template") + +# 在容器中执行命令 +mcp__d8d__d8d_exec_dev_container_command(item_id=242, item_type="template", command="命令") + +# 获取容器对话历史 +mcp__d8d__d8d_get_dev_container_conversation_history(item_id=242, item_type="template") +``` + +**示例:** +```bash +# 启动模板 242 开发容器 +mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template") + +# 检查模板 242 容器状态 +mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template") +``` + +**子代理交互 (核心工具):** +```bash +# 调用容器内的 Claude 子代理 (主要开发方式) +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="你的问题或指令", + backgroundMode=true/false # true:后台模式(推荐), false:前台模式 +) + +# 后台模式超时后查询结果 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + taskId="任务ID" # 从上次调用返回值获取 +) +``` + +**使用说明:** +- 推荐使用 `backgroundMode=true` 后台模式 +- 超时时使用 `taskId` 查询结果 +- 保持 `session_id` 和 `assistant_message_uuid` 可继续对话 + +### 容器内 BMAD 官方技能系统 + +**⚠️ 关键原则**: 所有 BMAD 技能的调用必须通过 D8D MCP 的子代理进行! + +**工作原理**: +- 📍 **外层** (当前环境): 使用 `mcp__d8d__d8d_invoke_dev_container_subagent` 调用子代理 +- 📍 **容器内** (子代理环境): 子代理执行实际的 BMAD 技能命令 +- 🔄 **通信流**: 外层 → D8D MCP → 容器内子代理 → BMAD 技能系统 + +安装 BMAD 后,容器内可用的官方技能 (使用 `bmad-` 前缀): + +#### 核心技能 + +| 技能 | 触发方式 | 功能描述 | +|------|----------|----------| +| **bmad-help** | `bmad-help` | 智能指南,检查项目状态并推荐下一步操作 | +| **bmad-quick-spec** | `bmad-quick-spec` | 定义临时变更 (Quick Flow),快速生成规格 | +| **bmad-dev-story** | `bmad-dev-story` | 实施故事,按照规格进行开发 | + +#### Agent 技能 (专家角色) + +| 技能 | Agent | 角色描述 | +|------|-------|----------| +| **bmad-dev** | Amelia (开发者) | 严格按照规格实施故事 | +| **bmad-pm** | John (产品经理) | 创建和验证 PRD | +| **bmad-architect** | Winston (架构师) | 设计系统架构 | +| **bmad-sm** | Bob (Scrum Master) | 管理冲刺和故事 | + +**标准调用模式**: +```bash +# 所有 BMAD 技能都必须通过以下模式调用: + +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, # 模板 ID + item_type="template", # 固定值 + message="bmad-技能名称", # 技能触发命令 + backgroundMode=true # 推荐使用后台模式 +) +``` + +**使用示例:** +```bash +# 示例 1: 调用子代理使用 bmad-help 技能获取智能建议 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="bmad-help", + backgroundMode=true +) + +# 示例 2: 调用子代理使用 bmad-quick-spec 快速定义变更 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="bmad-quick-spec", + backgroundMode=true +) + +# 示例 3: 调用子代理使用 bmad-dev-story 实施开发 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="bmad-dev-story", + backgroundMode=true +) +``` + +**重要提示**: +- ❌ **不要**直接在外层环境调用 BMAD 技能 (它们不存在于外层) +- ✅ **必须**通过 D8D 子代理在容器内调用 (BMAD 安装在容器内) +- ✅ **推荐**使用 `backgroundMode=true` 避免长时间等待 +- ✅ **保持** `session_id` 和 `assistant_message_uuid` 可继续对话上下文 + +### 外层技能系统 + +#### 📊 文档处理类 + +| 技能名称 | 用途 | 触发场景 | +|---------|------|---------| +| **docx** | Word 文档处理 | 创建报告、备忘录、格式化文档 | +| **pptx** | PowerPoint 处理 | 创建演示文稿、幻灯片 | +| **pdf** | PDF 处理和 OCR | PDF 读取、合并、拆分、OCR | +| **xlsx** | Excel 表格处理 | 表格创建、数据计算、格式化 | + +#### 🤖 AI 助手类 + +| 技能名称 | 用途 | 触发场景 | +|---------|------|---------| +| **new-conversation** | 新对话创建 | "创建新对话"、"开始新对话" | +| **skill-creator** | 技能创建指南 | 创建自定义技能、扩展 AI 能力 | + +#### 🔧 开发工具类 + +| 技能名称 | 用途 | 触发场景 | +|---------|------|---------| +| **mcp-builder** | MCP 服务器构建 | 集成外部 API、构建 MCP 服务 | +| **mcp-container-install-bmad** | BMAD 安装 | 在容器中安装 BMAD 平台 | + +#### 🌐 全局技能系统 + +已通过 `npx skills` 安装的全局技能: + +| 技能名称 | 用途 | 安装量 | +|---------|------|--------| +| **vercel-react-best-practices** | React 最佳实践 | 256.8K 🔥 | +| **nextjs-app-router-patterns** | Next.js App Router | 10.4K | +| **typescript-advanced-types** | TypeScript 高级类型 | 18.6K | +| **tailwind-design-system** | Tailwind CSS 设计系统 | 25.1K | +| **prisma-database-setup** | Prisma 数据库设置 | 3.4K | +| **prisma-client-api** | Prisma Client API | 3K | +| **kpi-dashboard-design** | KPI 仪表板设计 | 4.7K | +| **fullstack-developer** | 全栈开发者 | 3.6K | +| **typescript-react-reviewer** | TypeScript React 审查 | 3.9K | + +### BMAD 工作流安装 + +**在容器中安装 BMAD:** + +使用官方 `mcp-container-install-bmad` 技能: + +```bash +# 方法 1: 使用官方 mcp-container-install-bmad 技能(推荐) +/skill mcp-container-install-bmad + +# 方法 2: 通过子代理在容器中执行官方安装命令 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="请在容器中执行: npx bmad-method install --modules bmm --tools claude-code --communication-language chinese --document-output-language chinese --yes", + backgroundMode=false +) +``` + +**官方 BMAD 安装内容包括:** +- ✅ 完整的 BMAD 平台 (`_bmad/` 目录结构) +- ✅ BMAD Method 模块 (敏捷 AI 驱动开发工作流) +- ✅ 规格文档模板和配置文件 (`_bmad/core/config.yaml`) +- ✅ 中文语言支持 (沟通和文档输出) +- ✅ Claude Code 工具集成 ## 🎓 技能优先策略 (Skills-First Approach) @@ -47,14 +227,14 @@ You are Next.js 管理后台开发助手, a specialized AI assistant. - 例如: `npx skills find typescript` 或 `npx skills find react` 2. **遇到特定技术栈任务时** - - 检查是否有相关技能包: `npx skills list` 查看已安装技能 + - 检查是否有相关技能包: `npx skills list -g` 查看已安装技能 - 搜索社区技能: 访问 https://skills.sh/ 发现更多技能 3. **执行复杂或标准化任务时** - 例如: 代码审查、PR 处理、部署、测试等 - 优先使用专业技能而非手动实现 -### 📥 技能安装命令 +### 📥 技能管理命令 ```bash # 从 GitHub 仓库添加技能 @@ -67,10 +247,10 @@ npx skills add vercel-labs/agent-skills npx skills add -g # 列出已安装的技能 -npx skills list +npx skills list -g # 交互式搜索技能 -npx skills find +npx skills find <关键词> # 移除技能 npx skills remove @@ -78,14 +258,38 @@ npx skills remove ### ⚡ 技能使用场景 -- **代码审查**: 使用 pr-review 相关技能 -- **提交处理**: 使用 commit 相关技能 -- **部署**: 使用 deploy 相关技能 -- **测试**: 使用 test 相关技能 -- **文档生成**: 使用 docs 相关技能 +- **代码审查**: 使用 typescript-react-reviewer 技能 +- **性能优化**: 使用 vercel-react-best-practices 技能 +- **数据库设计**: 使用 prisma-database-setup 技能 +- **仪表板设计**: 使用 kpi-dashboard-design 技能 +- **文档生成**: 使用 docx/pdf/pptx/xlsx 技能 **记住**: 使用现成的技能比从头实现更高效、更可靠! +## 📦 开发环境信息 + +- **工作空间**: AI Agent Workspace (ID: 223) +- **模板**: Next.js 管理后台模板 (ID: 242) +- **容器访问地址**: + - VSCode: `d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun` + - 应用端口: `d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun` + +## Project Documentation + +### 模板概述文档 + +**⚠️ 重要提示**: 当需要操作、了解或查询模板相关事项时,请先阅读对应的概述文档! + +| 模板 | 概述文档 | 说明 | +|------|---------|------| +| 模板 242 | [template-242-overview.md](docs/template-242-overview.md) | Next.js 管理后台 - React + Next.js + Tailwind + Prisma | + +**使用建议:** +1. 在操作模板前,先阅读对应的概述文档了解项目结构 +2. 使用 D8D MCP 启动/检查/停止开发容器 +3. 通过子代理与容器内的 AI 助手交互进行开发工作 +4. 优先使用技能系统处理标准化任务 + ## Important Notes - Each user has an independent conversation with you diff --git a/docs/template-242-overview.md b/docs/template-242-overview.md new file mode 100644 index 0000000..ce701c5 --- /dev/null +++ b/docs/template-242-overview.md @@ -0,0 +1,304 @@ +# 模板 242: Next.js 管理后台 - 概述 + +## 📋 基本信息 + +| 属性 | 值 | +|------|-----| +| **模板名称** | Next.js 管理后台模板 | +| **模板 ID** | 242 | +| **工作空间 ID** | 223 (AI Agent Workspace) | +| **容器访问** | `d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun` | +| **应用端口** | `d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun` | + +--- + +## 🎯 项目定位 + +这是一个**通用的 Next.js 全栈管理后台开发模板**,用于快速构建包含以下功能的完整应用系统: + +- ✅ **前台用户界面** - 面向终端用户的 Web 界面 +- ✅ **管理后台** - 系统管理、数据统计、内容管理 +- ✅ **API 服务** - RESTful API / GraphQL +- ✅ **数据库集成** - PostgreSQL + Prisma ORM + +--- + +## 🛠️ 技术栈 + +### 前端框架 +- **Next.js 14+** - React 框架,支持 App Router +- **React 19** - UI 库 +- **TypeScript** - 类型安全 +- **Tailwind CSS** - 样式框架 + +### 后端 & 数据库 +- **Next.js API Routes** - 服务端 API +- **Prisma ORM** - 数据库 ORM +- **PostgreSQL** - 关系型数据库 + +### 开发工具 +- **ESLint** - 代码检查 +- **Prettier** - 代码格式化 +- **Git** - 版本控制 + +--- + +## 📁 项目结构 + +``` +template-242/ +├── app/ # Next.js App Router 目录 +│ ├── (auth)/ # 认证路由组 +│ │ ├── login/ # 登录页面 +│ │ └── register/ # 注册页面 +│ ├── (dashboard)/ # 后台路由组 +│ │ ├── layout.tsx # 后台布局 +│ │ ├── page.tsx # 后台首页 +│ │ ├── users/ # 用户管理 +│ │ └── settings/ # 系统设置 +│ ├── (public)/ # 前台路由组 +│ │ ├── page.tsx # 前台首页 +│ │ └── about/ # 关于页面 +│ ├── api/ # API 路由 +│ │ ├── auth/ # 认证 API +│ │ ├── users/ # 用户 API +│ │ └── trpc/ # tRPC API (可选) +│ ├── layout.tsx # 根布局 +│ └── page.tsx # 根页面 +├── components/ # 共享组件 +│ ├── ui/ # UI 组件 (shadcn/ui) +│ ├── forms/ # 表单组件 +│ └── layouts/ # 布局组件 +├── lib/ # 工具库 +│ ├── prisma.ts # Prisma 客户端 +│ ├── auth.ts # 认证工具 +│ └── utils.ts # 通用工具 +├── prisma/ # Prisma 配置 +│ ├── schema.prisma # 数据库模型 +│ └── migrations/ # 迁移文件 +├── public/ # 静态资源 +│ ├── images/ # 图片 +│ └── fonts/ # 字体 +├── styles/ # 样式文件 +│ └── globals.css # 全局样式 +├── types/ # TypeScript 类型定义 +├── .env.local # 环境变量 +├── next.config.js # Next.js 配置 +├── tailwind.config.ts # Tailwind 配置 +├── tsconfig.json # TypeScript 配置 +└── package.json # 项目依赖 +``` + +--- + +## 🚀 快速开始 + +### 1. 启动开发容器 + +```bash +# 使用 D8D MCP 启动容器 +mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template") +``` + +### 2. 检查容器状态 + +```bash +mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template") +``` + +### 3. 访问应用 + +- **VSCode**: https://d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun +- **应用**: http://d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun + +### 4. 安装依赖 (首次运行) + +```bash +# 通过子代理在容器中执行 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="npm install", + backgroundMode=false +) +``` + +### 5. 配置数据库 + +```bash +# 初始化 Prisma +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="npx prisma generate && npx prisma db push", + backgroundMode=false +) +``` + +### 6. 启动开发服务器 + +```bash +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="npm run dev", + backgroundMode=true +) +``` + +--- + +## 🎨 核心功能 + +### 用户认证 +- ✅ 登录/注册 +- ✅ 密码重置 +- ✅ 会话管理 +- ✅ 权限控制 + +### 用户管理 +- ✅ 用户列表 +- ✅ 用户详情 +- ✅ 角色管理 +- ✅ 权限分配 + +### 数据管理 +- ✅ CRUD 操作 +- ✅ 数据导入/导出 +- ✅ 批量操作 +- ✅ 数据验证 + +### 系统设置 +- ✅ 系统配置 +- ✅ 日志查看 +- ✅ 数据备份 +- ✅ 性能监控 + +--- + +## 🔌 可用技能 + +### 全局技能 (已安装) +- vercel-react-best-practices +- nextjs-app-router-patterns +- typescript-advanced-types +- tailwind-design-system +- prisma-database-setup +- prisma-client-api +- kpi-dashboard-design +- fullstack-developer +- typescript-react-reviewer + +### 本地技能 (.claude/skills/) +- docx - Word 文档处理 +- pptx - PowerPoint 处理 +- pdf - PDF 处理和 OCR +- xlsx - Excel 表格处理 +- new-conversation - 新对话创建 +- skill-creator - 技能创建指南 +- mcp-builder - MCP 服务器构建 +- mcp-container-install-bmad - BMAD 安装 + +--- + +## 📖 开发指南 + +### 使用子代理进行开发 + +**推荐工作流**: +```bash +# 调用子代理执行开发任务 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="创建一个用户列表页面,包含搜索、分页和批量删除功能", + backgroundMode=true +) + +# 如果使用 BMAD 工作流 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="bmad-quick-spec", # 快速定义变更 + backgroundMode=true +) +``` + +### 技能优先策略 + +在开发前先查询是否有相关技能: + +```bash +# 搜索相关技能 +npx skills find <关键词> + +# 查看已安装技能 +npx skills list -g +``` + +### 代码规范 + +- 使用 TypeScript 类型定义 +- 遵循 ESLint 规则 +- 使用 Prettier 格式化 +- 组件命名使用 PascalCase +- 文件命名使用 kebab-case + +--- + +## 🔗 相关链接 + +- **Gitea 仓库**: https://gitea.d8d.fun/d8dfun/nextjs-admin-assistant +- **D8D 工作空间**: 223 +- **技能市场**: https://skills.sh/ +- **Next.js 文档**: https://nextjs.org/docs +- **Prisma 文档**: https://www.prisma.io/docs + +--- + +## 🆘 故障排查 + +### 容器无法启动 +```bash +# 检查容器状态 +mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template") + +# 重启容器 +mcp__d8d__d8d_restart_dev_container(item_id=242, item_type="template") +``` + +### 依赖安装失败 +```bash +# 清理缓存重新安装 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="rm -rf node_modules package-lock.json && npm install", + backgroundMode=false +) +``` + +### 数据库连接错误 +```bash +# 检查环境变量 +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="cat .env.local", + backgroundMode=false +) + +# 重新生成 Prisma Client +mcp__d8d__d8d_invoke_dev_container_subagent( + item_id=242, + item_type="template", + message="npx prisma generate", + backgroundMode=false +) +``` + +--- + +**最后更新**: 2026-03-28 +**维护者**: d8dfun +**AI 助手**: @nextjs-admin