📝 docs(story): add homepage top navigation development story

- 创建首页顶部导航栏开发故事文档
- 定义用户需求和验收标准
- 列出开发任务和子任务
- 提供技术栈和组件架构信息
- 包含测试要求和导航菜单项配置

docs/stories/009.003.homepage-top-navigation.story.md

@@ -0,0 +1,112 @@
+# Story 009.003: 首页顶部导航栏开发
+
+## Status
+Draft
+
+## Story
+**As a** 用户,
+**I want** 在首页顶部看到清晰的导航菜单，包含所有主要服务类别,
+**so that** 快速找到所需的服务并浏览相关内容
+
+## Acceptance Criteria
+1. [ ] 首页顶部显示水平导航栏
+2. [ ] 导航菜单包含以下项目：首页、手机改运、八字详批、取名及改名、风水调整、职业规划、案例分享、行业资讯、道德经悟道、联系我们
+3. [ ] 导航栏在桌面端显示完整菜单项
+4. [ ] 移动端显示汉堡菜单，点击展开完整导航
+5. [ ] 当前页面高亮显示对应导航项
+6. [ ] 导航项点击后平滑跳转到对应页面或锚点
+7. [ ] 导航栏固定在页面顶部，滚动时保持可见
+
+## Tasks / Subtasks
+- [ ] 创建导航栏组件 (AC: 1, 2)
+  - [ ] 在 `src/client/home/components/` 创建 `Navigation.tsx` 组件
+  - [ ] 实现水平导航菜单，包含所有10个导航项
+  - [ ] 使用 shadcn/ui 组件库确保设计一致性
+- [ ] 实现响应式设计 (AC: 3, 4)
+  - [ ] 桌面端显示完整水平导航
+  - [ ] 移动端实现汉堡菜单和侧边导航
+  - [ ] 使用 Tailwind CSS 响应式断点
+- [ ] 添加导航交互功能 (AC: 5, 6)
+  - [ ] 实现当前页面高亮显示
+  - [ ] 添加平滑滚动到对应页面/锚点
+  - [ ] 集成现有路由系统
+- [ ] 实现固定导航栏 (AC: 7)
+  - [ ] 使用 CSS `position: sticky` 或 `fixed`
+  - [ ] 确保滚动时导航栏保持可见
+  - [ ] 测试不同屏幕尺寸下的表现
+- [ ] 编写组件测试 (AC: 所有)
+  - [ ] 在 `src/client/home/components/__tests__/` 创建 `Navigation.test.tsx`
+  - [ ] 测试桌面端和移动端导航显示
+  - [ ] 测试导航项点击行为
+  - [ ] 测试响应式切换
+
+## Dev Notes
+
+### 技术栈信息 [Source: architecture/tech-stack.md#现有技术栈维护]
+- **前端框架**: React 19.1.0 + TypeScript
+- **样式**: Tailwind CSS 4.1.11
+- **UI组件库**: shadcn/ui (基于Radix UI)
+- **路由**: React Router v7
+- **状态管理**: @tanstack/react-query (服务端状态) + Context (本地状态)
+- **构建工具**: Vite 7.0.0
+
+### 组件架构信息 [Source: architecture/component-architecture.md#前端组件架构]
+- **组件位置**: `src/client/home/components/Navigation.tsx`
+- **共享组件位置**: `src/client/components/ui/` (shadcn/ui组件库)
+- **路由配置**: 使用现有React Router v7系统
+- **样式系统**: 遵循现有Tailwind CSS配置
+
+### 项目结构信息 [Source: architecture/source-tree.md#实际项目结构]
+- **前端应用根目录**: `src/client/`
+- **用户前台应用**: `src/client/home/`
+- **共享组件**: `src/client/components/`
+- **测试文件位置**: `src/client/home/components/__tests__/`
+
+### 导航菜单项配置
+需要实现的导航菜单项：
+- 首页
+- 手机改运
+- 八字详批
+- 取名及改名
+- 风水调整
+- 职业规划
+- 案例分享
+- 行业资讯
+- 道德经悟道
+- 联系我们
+
+### Testing
+
+#### 测试标准 [Source: architecture/testing-strategy.md#单元测试]
+- **测试框架**: Vitest + Testing Library
+- **测试位置**: `src/client/home/components/__tests__/Navigation.test.tsx`
+- **覆盖率目标**: ≥ 80%
+- **测试类型**: 单元测试
+
+#### 测试要求 [Source: architecture/testing-strategy.md#测试代码规范]
+- 使用「应该...」格式描述测试行为
+- 遵循Arrange-Act-Assert模式
+- 测试桌面端和移动端导航显示
+- 测试导航项点击行为
+- 测试响应式切换功能
+
+#### 测试文件命名约定 [Source: architecture/testing-strategy.md#测试命名约定]
+- 文件名: `Navigation.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