|
|
@@ -0,0 +1,131 @@
|
|
|
+# Story 009.001: 首页核心服务展示模块开发
|
|
|
+
|
|
|
+**父史诗**: 史诗009 - 首页优化 - 命理咨询平台转换
|
|
|
+docs/prd/epic-009-homepage-optimization.md
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 用户
|
|
|
+**I want** 在首页看到命理咨询的核心服务展示，包括手机改运、八字详批、风水调整
|
|
|
+**so that** 快速了解平台提供的服务并选择感兴趣的服务
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. [ ] 首页顶部展示横向三栏布局的核心服务模块
|
|
|
+2. [ ] 每个服务模块包含图标、标题、描述和行动按钮
|
|
|
+3. [ ] 手机改运模块显示手机图标和"立即分析"按钮
|
|
|
+4. [ ] 八字详批模块显示日历图标和"立即详批"按钮
|
|
|
+5. [ ] 风水调整模块显示房屋图标和"立即调整"按钮
|
|
|
+6. [ ] 所有服务模块在桌面端和移动端都有良好的响应式布局
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 分析现有首页组件结构和布局 (AC: 1,6)
|
|
|
+ - [ ] 查看现有 HomePage.tsx 组件结构
|
|
|
+ - [ ] 分析现有 Grid 布局系统
|
|
|
+ - [ ] 确认响应式设计模式
|
|
|
+- [ ] 设计核心服务展示模块组件 (AC: 1,2,3,4,5)
|
|
|
+ - [ ] 创建三栏布局 Grid 组件
|
|
|
+ - [ ] 设计手机改运服务卡片组件
|
|
|
+ - [ ] 设计八字详批服务卡片组件
|
|
|
+ - [ ] 设计风水调整服务卡片组件
|
|
|
+- [ ] 实现服务卡片内容和样式 (AC: 2,3,4,5)
|
|
|
+ - [ ] 添加手机改运模块：手机图标、标题、描述、"立即分析"按钮
|
|
|
+ - [ ] 添加八字详批模块：日历图标、标题、描述、"立即详批"按钮
|
|
|
+ - [ ] 添加风水调整模块：房屋图标、标题、描述、"立即调整"按钮
|
|
|
+- [ ] 实现响应式布局适配 (AC: 6)
|
|
|
+ - [ ] 桌面端三栏布局实现
|
|
|
+ - [ ] 移动端垂直堆叠布局实现
|
|
|
+ - [ ] 测试不同屏幕尺寸的显示效果
|
|
|
+- [ ] 添加单元测试 (AC: 1-6)
|
|
|
+ - [ ] 编写核心服务模块组件测试
|
|
|
+ - [ ] 编写响应式布局测试
|
|
|
+ - [ ] 验证组件渲染和交互
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 技术栈信息 [Source: architecture/tech-stack.md#现有技术栈维护]
|
|
|
+- **前端框架**: React 19.1.0 + TypeScript
|
|
|
+- **样式系统**: Tailwind CSS 4.1.11
|
|
|
+- **UI组件库**: shadcn/ui (基于Radix UI)
|
|
|
+- **构建工具**: Vite 7.0.0
|
|
|
+- **路由**: React Router v7
|
|
|
+
|
|
|
+### 前端组件架构 [Source: architecture/component-architecture.md#前端组件架构]
|
|
|
+- **项目结构**: `src/client/home/` - 用户前台应用
|
|
|
+- **页面位置**: `src/client/home/pages/HomePage.tsx` - 首页组件
|
|
|
+- **组件位置**: `src/client/home/components/` - 首页专用组件
|
|
|
+- **共享组件**: `src/client/components/ui/` - shadcn/ui 组件库
|
|
|
+
|
|
|
+### 源码树结构 [Source: architecture/source-tree.md#实际项目结构]
|
|
|
+```text
|
|
|
+src/client/
|
|
|
+├── home/ # 用户前台应用
|
|
|
+│ ├── components/ # 首页专用组件
|
|
|
+│ ├── pages/ # 页面组件
|
|
|
+│ │ └── HomePage.tsx # 首页组件
|
|
|
+│ ├── hooks/ # Hooks
|
|
|
+│ ├── layouts/ # 布局组件
|
|
|
+│ └── routes.tsx # 路由配置
|
|
|
+├── components/ # 共享UI组件
|
|
|
+│ └── ui/ # shadcn/ui组件库
|
|
|
+└── api.ts # API客户端配置
|
|
|
+```
|
|
|
+
|
|
|
+### 现有首页组件分析
|
|
|
+- **文件位置**: `src/client/home/pages/HomePage.tsx`
|
|
|
+- **当前功能**: 云存储平台首页，包含文件管理功能展示
|
|
|
+- **布局模式**: 使用 Tailwind CSS Grid 和 Flexbox
|
|
|
+- **响应式设计**: 已支持桌面端和移动端适配
|
|
|
+
|
|
|
+### 核心服务展示布局设计
|
|
|
+基于史诗要求，实现横向三栏布局：
|
|
|
+```
|
|
|
+┌─────────────┬─────────────┬─────────────┐
|
|
|
+│ 手机改运 │ 八字详批 │ 风水调整 │
|
|
|
+│ 📱 │ 📅 │ 🏠 │
|
|
|
+│ 号码能量分析 │ 命运精准预测 │ 环境优化方案 │
|
|
|
+│ 立即分析 → │ 立即详批 → │ 立即调整 → │
|
|
|
+└─────────────┴─────────────┴─────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### 兼容性要求
|
|
|
+- 保持现有 API 不变
|
|
|
+- 保持现有路由结构不变
|
|
|
+- 保持现有用户认证系统不变
|
|
|
+- 保持现有响应式设计模式
|
|
|
+
|
|
|
+### Testing
|
|
|
+
|
|
|
+#### 测试标准 [Source: architecture/testing-strategy.md#单元测试]
|
|
|
+- **测试框架**: Vitest + Testing Library
|
|
|
+- **测试位置**: `src/client/home/pages/__tests__/HomePage.test.tsx`
|
|
|
+- **覆盖率目标**: ≥ 80%
|
|
|
+- **测试类型**: 组件单元测试
|
|
|
+
|
|
|
+#### 测试要求 [Source: architecture/testing-strategy.md#测试代码规范]
|
|
|
+- 测试组件渲染和基本功能
|
|
|
+- 测试响应式布局在不同屏幕尺寸下的表现
|
|
|
+- 测试按钮点击交互
|
|
|
+- 验证图标和文本内容正确显示
|
|
|
+
|
|
|
+#### 测试文件命名约定 [Source: architecture/testing-strategy.md#测试命名约定]
|
|
|
+- 组件测试: `HomePage.test.tsx`
|
|
|
+- 集成测试: `HomePage.integration.test.tsx`
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-09-30 | 1.0 | 初始故事草稿 | Bob (SM) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+## QA Results
|
yourname