|
|
@@ -0,0 +1,299 @@
|
|
|
+# shadcn管理后台前后端全栈启动模板 Product Requirements Document (PRD)
|
|
|
+
|
|
|
+## Goals and Background Context
|
|
|
+
|
|
|
+### Goals
|
|
|
+- 提供一个基于shadcn/ui的现代化管理后台全栈启动模板
|
|
|
+- 实现基本的用户管理功能(CRUD操作)
|
|
|
+- 建立完整的认证和授权体系
|
|
|
+- 提供可扩展的项目结构和开发规范
|
|
|
+- 支持快速开始新项目的开发
|
|
|
+
|
|
|
+### Background Context
|
|
|
+随着现代Web应用开发的复杂性增加,开发团队需要一个高质量、标准化、可扩展的全栈启动模板来加速项目开发。shadcn/ui作为一个流行的React UI组件库,提供了优秀的开发体验和现代化的设计。本模板旨在结合shadcn/ui的优秀特性,提供一个完整的全栈管理后台解决方案,帮助开发团队快速启动新项目,减少重复性工作,确保代码质量和一致性。
|
|
|
+
|
|
|
+### Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-09-12 | v1.0 | 初始PRD创建 | PM Agent |
|
|
|
+
|
|
|
+## Requirements
|
|
|
+
|
|
|
+### Functional
|
|
|
+1. **FR1**: 用户应该能够注册新账户
|
|
|
+2. **FR2**: 用户应该能够登录到系统
|
|
|
+3. **FR3**: 用户应该能够查看用户列表
|
|
|
+4. **FR4**: 用户应该能够创建新用户
|
|
|
+5. **FR5**: 用户应该能够编辑现有用户信息
|
|
|
+6. **FR6**: 用户应该能够删除用户
|
|
|
+7. **FR7**: 用户应该能够重置密码
|
|
|
+8. **FR8**: 系统应该提供角色基础的权限控制
|
|
|
+9. **FR9**: 系统应该提供用户状态管理(激活/禁用)
|
|
|
+10. **FR10**: 系统应该提供用户个人资料管理
|
|
|
+
|
|
|
+### Non Functional
|
|
|
+1. **NFR1**: 前端应该使用React + TypeScript + shadcn/ui
|
|
|
+2. **NFR2**: 后端应该使用Node.js + Express或类似框架
|
|
|
+3. **NFR3**: 数据库应该支持PostgreSQL或SQLite
|
|
|
+4. **NFR4**: 代码应该遵循ESLint和Prettier规范
|
|
|
+5. **NFR5**: 项目应该包含完整的开发环境配置
|
|
|
+6. **NFR6**: 模板应该提供Docker开发环境
|
|
|
+7. **NFR7**: 应该包含基本的单元测试和集成测试
|
|
|
+8. **NFR8**: 应该提供API文档(Swagger/OpenAPI)
|
|
|
+9. **NFR9**: 应该支持环境变量配置
|
|
|
+10. **NFR10**: 应该提供部署脚本和配置示例
|
|
|
+
|
|
|
+## User Interface Design Goals
|
|
|
+
|
|
|
+### Overall UX Vision
|
|
|
+创建一个现代化、直观、响应式的管理后台界面,专注于用户体验和开发效率。界面应该简洁明了,操作流程顺畅,符合现代Web应用的设计标准。
|
|
|
+
|
|
|
+### Key Interaction Paradigms
|
|
|
+- 基于表单的数据输入和编辑
|
|
|
+- 表格数据的浏览和操作
|
|
|
+- 模态框进行详细操作
|
|
|
+- 面包屑导航和侧边栏菜单
|
|
|
+- 实时反馈和状态提示
|
|
|
+
|
|
|
+### Core Screens and Views
|
|
|
+1. 登录页面
|
|
|
+2. 主仪表板
|
|
|
+3. 用户列表页面
|
|
|
+4. 用户创建/编辑表单
|
|
|
+5. 用户详情页面
|
|
|
+6. 个人资料设置页面
|
|
|
+
|
|
|
+### Accessibility: WCAG AA
|
|
|
+确保界面符合WCAG AA可访问性标准,支持键盘导航和屏幕阅读器。
|
|
|
+
|
|
|
+### Branding
|
|
|
+采用shadcn/ui的默认设计语言,保持简洁专业的风格,支持自定义主题。
|
|
|
+
|
|
|
+### Target Device and Platforms: Web Responsive
|
|
|
+支持桌面端、平板和移动端的响应式设计。
|
|
|
+
|
|
|
+## Technical Assumptions
|
|
|
+
|
|
|
+### Repository Structure: Monorepo
|
|
|
+采用monorepo结构管理前后端代码,便于协同开发和依赖管理。
|
|
|
+
|
|
|
+### Service Architecture
|
|
|
+采用前后端分离架构,前端使用React应用,后端提供RESTful API服务。
|
|
|
+
|
|
|
+### Testing Requirements
|
|
|
+采用完整的测试金字塔策略,包括单元测试、集成测试和端到端测试。
|
|
|
+
|
|
|
+### Additional Technical Assumptions and Requests
|
|
|
+- 使用JWT进行身份认证
|
|
|
+- 使用bcrypt进行密码加密
|
|
|
+- 支持CORS配置
|
|
|
+- 提供日志记录机制
|
|
|
+- 支持数据库迁移
|
|
|
+- 包含错误处理中间件
|
|
|
+- 提供请求验证
|
|
|
+- 支持分页和过滤
|
|
|
+- 包含健康检查端点
|
|
|
+
|
|
|
+## Epic List
|
|
|
+
|
|
|
+1. **Epic 1: 项目基础架构和认证系统** - 建立项目基础结构,实现用户认证和授权功能
|
|
|
+2. **Epic 2: 用户管理功能实现** - 实现完整的用户CRUD操作和管理界面
|
|
|
+3. **Epic 3: 开发工具和部署配置** - 配置开发环境、测试框架和部署脚本
|
|
|
+
|
|
|
+## Epic 1 项目基础架构和认证系统
|
|
|
+
|
|
|
+建立完整的项目基础架构,包括前后端项目初始化、数据库配置、认证系统和基本的安全措施。
|
|
|
+
|
|
|
+### Story 1.1 项目初始化设置
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 初始化前后端项目结构,
|
|
|
+so that 可以开始开发工作。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建React + TypeScript前端项目
|
|
|
+2. 创建Node.js + Express后端项目
|
|
|
+3. 配置package.json和基本依赖
|
|
|
+4. 设置Git仓库和.gitignore
|
|
|
+5. 配置开发环境启动脚本
|
|
|
+
|
|
|
+### Story 1.2 数据库配置和模型定义
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 配置数据库连接和定义用户模型,
|
|
|
+so that 可以存储和操作用户数据。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 配置数据库连接(PostgreSQL/SQLite)
|
|
|
+2. 定义User模型包含基本字段
|
|
|
+3. 创建数据库迁移脚本
|
|
|
+4. 提供种子数据示例
|
|
|
+5. 配置环境变量管理
|
|
|
+
|
|
|
+### Story 1.3 用户认证系统实现
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 实现用户注册和登录功能,
|
|
|
+so that 用户可以安全访问系统。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 实现用户注册API端点
|
|
|
+2. 实现用户登录API端点
|
|
|
+3. 使用JWT进行身份验证
|
|
|
+4. 使用bcrypt加密密码
|
|
|
+5. 提供token刷新机制
|
|
|
+6. 实现登录状态管理
|
|
|
+
|
|
|
+### Story 1.4 路由保护和中间件
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 实现路由保护和认证中间件,
|
|
|
+so that 可以保护敏感路由和API端点。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建认证中间件验证JWT
|
|
|
+2. 保护需要认证的路由
|
|
|
+3. 实现错误处理中间件
|
|
|
+4. 提供统一的响应格式
|
|
|
+5. 记录请求日志
|
|
|
+
|
|
|
+## Epic 2 用户管理功能实现
|
|
|
+
|
|
|
+实现完整的用户管理功能,包括用户列表、创建、编辑、删除和详情查看。
|
|
|
+
|
|
|
+### Story 2.1 用户列表界面
|
|
|
+
|
|
|
+As a 管理员,
|
|
|
+I want 查看用户列表,
|
|
|
+so that 可以管理所有用户账户。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建用户列表页面组件
|
|
|
+2. 实现用户数据表格显示
|
|
|
+3. 支持分页功能
|
|
|
+4. 支持搜索和过滤
|
|
|
+5. 显示用户基本信息和状态
|
|
|
+6. 提供操作按钮(编辑、删除)
|
|
|
+
|
|
|
+### Story 2.2 用户创建功能
|
|
|
+
|
|
|
+As a 管理员,
|
|
|
+I want 创建新用户,
|
|
|
+so that 可以添加新的系统用户。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建用户创建表单
|
|
|
+2. 实现表单验证
|
|
|
+3. 调用创建用户API
|
|
|
+4. 显示创建成功反馈
|
|
|
+5. 处理创建错误情况
|
|
|
+6. 支持角色分配
|
|
|
+
|
|
|
+### Story 2.3 用户编辑功能
|
|
|
+
|
|
|
+As a 管理员,
|
|
|
+I want 编辑用户信息,
|
|
|
+so that 可以更新用户资料和权限。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建用户编辑表单
|
|
|
+2. 预填充现有用户数据
|
|
|
+3. 实现表单验证
|
|
|
+4. 调用更新用户API
|
|
|
+5. 显示更新成功反馈
|
|
|
+6. 处理更新错误情况
|
|
|
+
|
|
|
+### Story 2.4 用户删除功能
|
|
|
+
|
|
|
+As a 管理员,
|
|
|
+I want 删除用户,
|
|
|
+so that 可以移除不再需要的用户账户。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 实现用户删除确认对话框
|
|
|
+2. 调用删除用户API
|
|
|
+3. 显示删除成功反馈
|
|
|
+4. 更新用户列表显示
|
|
|
+5. 处理删除错误情况
|
|
|
+6. 防止误删除操作
|
|
|
+
|
|
|
+### Story 2.5 用户详情页面
|
|
|
+
|
|
|
+As a 管理员,
|
|
|
+I want 查看用户详细信息,
|
|
|
+so that 可以了解用户的完整信息。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建用户详情页面
|
|
|
+2. 显示用户完整信息
|
|
|
+3. 显示用户活动记录
|
|
|
+4. 提供返回列表的导航
|
|
|
+5. 支持快速编辑操作
|
|
|
+
|
|
|
+## Epic 3 开发工具和部署配置
|
|
|
+
|
|
|
+配置完整的开发工具链、测试框架和部署配置,确保项目质量和可部署性。
|
|
|
+
|
|
|
+### Story 3.1 代码质量和格式化配置
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 配置代码质量工具,
|
|
|
+so that 可以保持代码风格一致。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 配置ESLint规则
|
|
|
+2. 配置Prettier格式化
|
|
|
+3. 设置Git hooks
|
|
|
+4. 配置编辑器配置
|
|
|
+5. 提供代码检查脚本
|
|
|
+
|
|
|
+### Story 3.2 测试框架配置
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 配置测试框架,
|
|
|
+so that 可以编写和运行测试。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 配置Jest测试框架
|
|
|
+2. 配置React Testing Library
|
|
|
+3. 配置API测试工具
|
|
|
+4. 提供测试示例
|
|
|
+5. 配置测试覆盖率报告
|
|
|
+
|
|
|
+### Story 3.3 Docker开发环境
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 配置Docker开发环境,
|
|
|
+so that 可以快速搭建开发环境。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 创建Dockerfile
|
|
|
+2. 配置docker-compose.yml
|
|
|
+3. 包含数据库服务
|
|
|
+4. 支持热重载开发
|
|
|
+5. 提供环境变量配置
|
|
|
+
|
|
|
+### Story 3.4 部署配置和文档
|
|
|
+
|
|
|
+As a 开发者,
|
|
|
+I want 配置部署脚本和文档,
|
|
|
+so that 可以轻松部署应用到生产环境。
|
|
|
+
|
|
|
+#### Acceptance Criteria
|
|
|
+1. 提供生产环境Docker配置
|
|
|
+2. 创建部署脚本示例
|
|
|
+3. 配置环境变量示例
|
|
|
+4. 编写部署文档
|
|
|
+5. 提供健康检查配置
|
|
|
+
|
|
|
+## Checklist Results Report
|
|
|
+
|
|
|
+PRD文档已完成,包含完整的功能需求、技术假设和用户故事。文档结构符合BMAD标准格式,涵盖了shadcn管理后台模板的核心需求。
|
|
|
+
|
|
|
+## Next Steps
|
|
|
+
|
|
|
+### UX Expert Prompt
|
|
|
+基于此PRD文档,请设计shadcn管理后台的用户界面和用户体验方案。
|
|
|
+
|
|
|
+### Architect Prompt
|
|
|
+基于此PRD文档,请设计shadcn管理后台的技术架构和系统设计方案。
|