|
|
@@ -0,0 +1,142 @@
|
|
|
+# Story 009.002: 命理咨询平台品牌和视觉设计更新
|
|
|
+
|
|
|
+**父史诗**: 史诗009 - 首页优化 - 命理咨询平台转换
|
|
|
+docs/prd/epic-009-homepage-optimization.md
|
|
|
+
|
|
|
+## Status
|
|
|
+Approved
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 用户
|
|
|
+**I want** 首页的视觉设计和品牌内容符合命理咨询平台的定位,包括更新的Logo、配色和文案
|
|
|
+**so that** 建立专业信任感
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. [ ] 更新Logo为命理咨询相关图标(如八卦、罗盘等)
|
|
|
+2. [ ] 更新平台名称为"命理咨询平台"或类似专业名称
|
|
|
+3. [ ] 配色方案调整为符合命理咨询行业的专业色调
|
|
|
+4. [ ] 英雄区域文案更新为命理咨询相关内容
|
|
|
+5. [ ] 功能特性模块内容替换为命理服务介绍
|
|
|
+6. [ ] 页脚信息更新为命理咨询平台相关信息
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 分析现有首页品牌元素和视觉设计 (AC: 1,2,3)
|
|
|
+ - [ ] 查看现有Logo和品牌标识位置
|
|
|
+ - [ ] 分析当前配色方案和样式系统
|
|
|
+ - [ ] 识别需要更新的文本内容
|
|
|
+- [ ] 设计命理咨询平台品牌视觉方案 (AC: 1,2,3)
|
|
|
+ - [ ] 设计新的Logo图标(八卦/罗盘等)
|
|
|
+ - [ ] 定义新的配色方案(符合命理行业)
|
|
|
+ - [ ] 更新平台名称和品牌文案
|
|
|
+- [ ] 实现Logo和品牌名称更新 (AC: 1,2)
|
|
|
+ - [ ] 更新首页Logo图标
|
|
|
+ - [ ] 更新平台名称文本
|
|
|
+ - [ ] 验证Logo在不同设备上的显示效果
|
|
|
+- [ ] 实现配色方案更新 (AC: 3)
|
|
|
+ - [ ] 更新Tailwind CSS颜色配置
|
|
|
+ - [ ] 调整现有组件颜色样式
|
|
|
+ - [ ] 验证新配色方案的视觉一致性
|
|
|
+- [ ] 更新英雄区域文案内容 (AC: 4)
|
|
|
+ - [ ] 更新英雄区域标题和描述
|
|
|
+ - [ ] 调整行动召唤按钮文案
|
|
|
+ - [ ] 验证文案与命理咨询定位一致
|
|
|
+- [ ] 更新功能特性模块内容 (AC: 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`
|
|
|
+- **当前品牌元素**:
|
|
|
+ - Logo: 云存储图标 (SVG)
|
|
|
+ - 平台名称: "云存储平台"
|
|
|
+ - 配色: 蓝色到紫色渐变
|
|
|
+ - 英雄区域: 云存储相关文案
|
|
|
+ - 功能特性: 文件管理功能描述
|
|
|
+ - 页脚: 云存储平台相关信息
|
|
|
+
|
|
|
+### 命理咨询平台品牌设计建议
|
|
|
+基于史诗要求,建议品牌更新方向:
|
|
|
+- **Logo**: 八卦图、罗盘、太极等命理相关图标
|
|
|
+- **配色**: 深蓝色、金色、深红色等传统命理色调
|
|
|
+- **文案**: 专业命理咨询相关内容,强调精准预测和改运服务
|
|
|
+- **视觉风格**: 传统与现代结合,体现专业性和可信度
|
|
|
+
|
|
|
+### 兼容性要求
|
|
|
+- 保持现有组件结构不变
|
|
|
+- 保持现有响应式设计模式
|
|
|
+- 保持现有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
|