Browse Source

📝 docs(story): add homepage brand visual update story for fortune-telling platform

- 创建命理咨询平台品牌和视觉设计更新故事文档
- 定义首页视觉设计和品牌内容更新的验收标准
- 规划品牌元素分析、设计和实现的任务分解
- 提供技术栈信息和现有首页组件分析
- 包含命理咨询平台品牌设计建议和兼容性要求
yourname 2 months ago
parent
commit
7351ab0ad6
1 changed files with 142 additions and 0 deletions
  1. 142 0
      docs/stories/009.002.homepage-brand-visual-update.md

+ 142 - 0
docs/stories/009.002.homepage-brand-visual-update.md

@@ -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