Halaman utama Jelajahi Bantuan
Daftar Masuk
172-template-159
/
file-starter
ter-fork dari 140-template-117/file-starter
2
0
Fork 0
Berkas
Cabang: bmad-method
Ranting Tag
file-starter
/
docs
/
stories
/
009.001.homepage-core-services.md

009.001.homepage-core-services.md 7.8 KB
Permalink Riwayat Mentahan

Story 009.001: 首页核心服务展示模块开发

父史诗: 史诗009 - 首页优化 - 命理咨询平台转换 docs/prd/epic-009-homepage-optimization.md

Status

Done

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#实际项目结构]

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

James (dev)

Debug Log References

  • 分析现有首页组件结构：src/client/home/pages/HomePage.tsx
  • 设计核心服务展示模块：三栏布局，响应式设计
  • 实现服务卡片内容和样式：手机改运、八字详批、风水调整

Completion Notes List

  • 已完成首页组件结构分析
  • 已完成核心服务展示模块设计
  • 已完成服务卡片内容和样式实现
  • 已完成响应式布局适配测试
  • 已完成单元测试编写

File List

  • src/client/home/pages/HomePage.tsx (已修改)
  • src/client/home/pages/tests/HomePage.test.tsx (新建)
  • vitest.config.components.ts (已更新)

QA Results

Review Date: 2025-09-30

Reviewed By: Quinn (Test Architect)

Code Quality Assessment

实现质量优秀。代码遵循React和TypeScript最佳实践，经过重构后消除了重复代码，提高了可维护性。所有验收标准都已满足，测试覆盖完整。

Refactoring Performed

  • File: src/client/home/components/ServiceCard.tsx

    • Change: 创建可重用的ServiceCard组件
    • Why: 消除HomePage中的重复代码模式
    • How: 提高了代码复用性和可维护性

  • File: src/client/home/pages/HomePage.tsx

    • Change: 使用ServiceCard组件替换重复的服务卡片代码
    • Why: 减少代码重复，提高可维护性
    • How: 使代码更简洁，便于未来扩展

  • File: src/client/home/components/tests/ServiceCard.test.tsx

    • Change: 添加ServiceCard组件单元测试
    • Why: 确保重构后的组件功能正确
    • How: 提供完整的测试覆盖，验证组件行为

Compliance Check

  • Coding Standards: ✓ 完全符合TypeScript和React最佳实践
  • Project Structure: ✓ 遵循现有项目结构
  • Testing Strategy: ✓ 符合项目测试标准
  • All ACs Met: ✓ 所有6个验收标准都已实现

Improvements Checklist

  • 重构服务卡片组件消除重复代码
  • 添加ServiceCard组件单元测试
  • 验证所有验收标准测试覆盖
  • 为服务按钮添加实际交互功能（未来改进）
  • 考虑添加更多可访问性标签（未来改进）

Security Review

无安全问题。实现为静态内容展示，不涉及用户输入或敏感数据处理。

Performance Considerations

性能良好。使用Tailwind CSS响应式设计，组件化架构，无性能瓶颈。

Files Modified During Review

  • src/client/home/components/ServiceCard.tsx (新建)
  • src/client/home/pages/HomePage.tsx (修改)
  • src/client/home/components/tests/ServiceCard.test.tsx (新建)

Gate Status

Gate: PASS → docs/qa/gates/009.001-homepage-core-services.yml Quality Score: 95/100

Recommended Status

✓ Ready for Done - 所有功能需求已满足，代码质量优秀，测试覆盖完整。