|
|
@@ -0,0 +1,130 @@
|
|
|
+# shadcn全栈管理后台启动模板 Product Requirements Document (PRD)
|
|
|
+
|
|
|
+## 目标和背景上下文
|
|
|
+
|
|
|
+### 目标
|
|
|
+基于项目简报，PRD将实现以下目标：
|
|
|
+- 提供基于shadcn/ui和Hono框架的现代化全栈管理后台模板
|
|
|
+- 建立标准化的技术栈规范和项目结构
|
|
|
+- 实现完整的用户认证和权限管理系统
|
|
|
+- 确保代码质量和生产就绪状态
|
|
|
+- 提供管理后台和Web端的统一技术体系
|
|
|
+- 降低开发者的技术决策成本和时间
|
|
|
+
|
|
|
+### 背景上下文
|
|
|
+这个PRD旨在解决全栈开发中技术栈选择复杂、架构设计不一致、基础功能重复开发的问题。基于项目简报的分析，我们需要创建一个生产就绪的启动模板，为开发者提供标准化的技术栈和最佳实践，使他们能够专注于业务逻辑开发而非基础设施搭建。
|
|
|
+
|
|
|
+### 变更日志
|
|
|
+
|
|
|
+| 日期 | 版本 | 描述 | 作者 |
|
|
|
+|------|------|------|------|
|
|
|
+| 2025-09-13 | v1.0 | 初始PRD文档创建 | PM Agent |
|
|
|
+
|
|
|
+## 需求
|
|
|
+
|
|
|
+### 功能性需求
|
|
|
+
|
|
|
+**FR1**: 基于JWT的完整用户认证系统，包括注册、登录功能（移除密码重置）
|
|
|
+**FR2**: 用户权限管理系统，支持基本的角色和权限控制
|
|
|
+**FR3**: 基于shadcn/ui的现代化管理后台界面设计
|
|
|
+**FR4**: Hono框架的RESTful API系统，包含完整的CRUD操作
|
|
|
+**FR5**: TypeORM + MySQL数据库集成和配置
|
|
|
+**FR6**: React Query数据状态管理实现
|
|
|
+**FR7**: React Hook Form + Zod的表单验证系统
|
|
|
+**FR8**: 基于Lucide和Heroicons的图标系统集成
|
|
|
+**FR9**: 响应式设计，支持移动端友好的管理界面
|
|
|
+**FR10**: 完整的TypeScript严格模式支持和类型定义
|
|
|
+
|
|
|
+### 非功能性需求
|
|
|
+
|
|
|
+**NFR1**: 首屏加载时间小于2秒，API响应时间小于100毫秒
|
|
|
+**NFR2**: 支持现代浏览器（Chrome 90+, Firefox 88+, Safari 14+, Edge 90+）
|
|
|
+**NFR3**: 代码质量要求：TypeScript严格模式通过，ESLint检查满分
|
|
|
+**NFR4**: 生产环境部署就绪，支持容器化部署
|
|
|
+**NFR5**: 安全性要求：JWT认证、密码加密、CORS配置、输入验证
|
|
|
+**NFR6**: 文档完整性：提供完整的技术文档和开发指南
|
|
|
+
|
|
|
+## 用户界面设计目标
|
|
|
+
|
|
|
+### 整体UX愿景
|
|
|
+创建一个现代化、专业的管理后台界面，专注于开发者的使用体验。设计应该简洁、直观，提供流畅的操作流程和清晰的视觉层次。采用shadcn/ui的设计语言，确保组件一致性和可维护性。
|
|
|
+
|
|
|
+### 关键交互范式
|
|
|
+- **数据驱动界面**: 以数据表格和卡片为主要展示形式
|
|
|
+- **表单优先**: 优化表单填写体验，减少用户操作步骤
|
|
|
+- **即时反馈**: 操作后立即提供视觉反馈和状态提示
|
|
|
+- **渐进式披露**: 复杂功能按需展示，避免界面拥挤
|
|
|
+
|
|
|
+### 核心屏幕和视图
|
|
|
+从产品角度，最关键的屏幕包括：
|
|
|
+- **登录页面**: 简洁的认证界面
|
|
|
+- **主仪表板**: 数据概览和关键指标展示
|
|
|
+- **用户管理**: 用户列表、创建、编辑界面
|
|
|
+- **数据表格**: 标准化的数据展示和操作界面
|
|
|
+- **设置页面**: 系统配置和个人偏好设置
|
|
|
+
|
|
|
+### 可访问性: WCAG AA
|
|
|
+遵循WCAG AA标准，确保界面对于残障用户的可访问性，包括适当的颜色对比度、键盘导航支持和屏幕阅读器兼容性。
|
|
|
+
|
|
|
+### 品牌设计
|
|
|
+采用专业的技术产品风格，使用中性色调和现代设计元素。保持与shadcn/ui设计系统的一致性，同时提供足够的自定义空间。
|
|
|
+
|
|
|
+### 目标设备和平台: Web响应式
|
|
|
+支持Web响应式设计，确保在桌面、平板和移动设备上都有良好的用户体验。主要针对现代Web浏览器优化。
|
|
|
+
|
|
|
+## 技术假设
|
|
|
+
|
|
|
+### 仓库结构: Monorepo
|
|
|
+采用Monorepo结构管理前端和后端代码，便于代码共享、统一构建和依赖管理。这种结构适合全栈项目，能够保持前后端技术栈的一致性。
|
|
|
+
|
|
|
+### 服务架构
|
|
|
+采用单体架构（Monolith），所有功能模块在同一个代码库中开发部署。这种选择基于：
|
|
|
+- 项目规模属于中小型，单体架构足够应对
|
|
|
+- 降低分布式系统的复杂度
|
|
|
+- 简化部署和运维流程
|
|
|
+- 符合MVP快速迭代的要求
|
|
|
+
|
|
|
+### 测试要求
|
|
|
+采用完整的测试金字塔策略，包括：
|
|
|
+- **单元测试**: 覆盖核心业务逻辑和工具函数
|
|
|
+- **集成测试**: 验证API接口和数据库交互
|
|
|
+- **端到端测试**: 关键用户流程的完整验证
|
|
|
+- **手动测试便利性**: 提供测试工具和调试支持
|
|
|
+
|
|
|
+### 其他技术假设和请求
|
|
|
+基于项目简报的技术栈选择：
|
|
|
+
|
|
|
+**前端技术栈**:
|
|
|
+- React 19 + TypeScript + Vite 7 + Tailwind CSS 4
|
|
|
+- React Query (TanStack) 5 用于状态管理
|
|
|
+- React Hook Form 7 + Zod 4.0.14 用于表单处理
|
|
|
+- React Router 7 用于路由管理
|
|
|
+- shadcn/ui + Lucide React + Heroicons 用于UI组件
|
|
|
+- Recharts 用于数据可视化
|
|
|
+- Vitest 用于测试
|
|
|
+
|
|
|
+**后端技术栈**:
|
|
|
+- Hono 4 + @hono/swagger-ui + hono/client + @hono/zod-openapi
|
|
|
+- TypeORM 用于数据库操作
|
|
|
+- MySQL 2 作为主数据库
|
|
|
+- Redis (ioredis) 用于缓存
|
|
|
+- JWT + bcrypt 用于认证
|
|
|
+- MinIO 用于文件存储（后续阶段）
|
|
|
+- OpenAI SDK 用于AI集成（后续阶段）
|
|
|
+- Vitest 用于测试
|
|
|
+
|
|
|
+**开发工具链**:
|
|
|
+- TypeScript严格模式
|
|
|
+- Vite + SWC 构建工具
|
|
|
+- Tailwind CSS 4 样式方案
|
|
|
+- dotenv + cross-env 环境管理
|
|
|
+- dayjs、uuid、axios、debug 工具库
|
|
|
+
|
|
|
+**架构考虑**:
|
|
|
+- 清晰的src/client和src/server分离结构
|
|
|
+- RESTful API规范，基于@hono/zod-openapi的OpenAPI文档生成
|
|
|
+- 集成@hono/swagger-ui提供交互式API文档
|
|
|
+- 使用hono/client确保前后端类型一致性
|
|
|
+- TypeORM迁移脚本，数据模型规范化
|
|
|
+- 安全性措施：JWT认证、密码加密、CORS配置、输入验证
|
|
|
+- 容器化部署就绪，环境变量配置
|
yourname