Jelajahi Sumber

📝 docs(story): update homepage top navigation story details

- 细化移动端导航实现要求:
  - 添加汉堡菜单图标动画(三条线转X)
  - 添加侧边导航滑入滑出动画(300ms ease-in-out)
  - 添加点击外部区域关闭侧边导航功能
  - 添加ESC键关闭侧边导航功能
- 完善固定导航栏实现细节:
  - 指定使用 `position: sticky` 而非 `fixed`
  - 添加 `top: 0`、`z-index: 50` 和半透明背景色要求
- 为所有导航菜单项添加具体路由路径
- 添加版本历史记录,记录本次更新为版本1.1
yourname 2 bulan lalu
induk
melakukan
802b533a6d
1 mengubah file dengan 23 tambahan dan 13 penghapusan
  1. 23 13
      docs/stories/009.003.homepage-top-navigation.story.md

+ 23 - 13
docs/stories/009.003.homepage-top-navigation.story.md

@@ -25,13 +25,20 @@ Draft
 - [ ] 实现响应式设计 (AC: 3, 4)
   - [ ] 桌面端显示完整水平导航
   - [ ] 移动端实现汉堡菜单和侧边导航
-  - [ ] 使用 Tailwind CSS 响应式断点
+    - [ ] 汉堡菜单图标动画(三条线转X)
+    - [ ] 侧边导航滑入滑出动画(300ms ease-in-out)
+    - [ ] 点击外部区域关闭侧边导航
+    - [ ] ESC键关闭侧边导航
+  - [ ] 使用 Tailwind CSS 响应式断点(lg: 1024px 为桌面/移动分界)
 - [ ] 添加导航交互功能 (AC: 5, 6)
   - [ ] 实现当前页面高亮显示
   - [ ] 添加平滑滚动到对应页面/锚点
   - [ ] 集成现有路由系统
 - [ ] 实现固定导航栏 (AC: 7)
-  - [ ] 使用 CSS `position: sticky` 或 `fixed`
+  - [ ] 使用 CSS `position: sticky` 实现固定导航
+    - [ ] 设置 `top: 0` 固定在顶部
+    - [ ] 设置 `z-index: 50` 确保在其他内容之上
+    - [ ] 添加半透明背景色增强可读性
   - [ ] 确保滚动时导航栏保持可见
   - [ ] 测试不同屏幕尺寸下的表现
 - [ ] 编写组件测试 (AC: 所有)
@@ -63,17 +70,19 @@ Draft
 - **测试文件位置**: `src/client/home/components/__tests__/`
 
 ### 导航菜单项配置
-需要实现的导航菜单项:
-- 首页
-- 手机改运
-- 八字详批
-- 取名及改名
-- 风水调整
-- 职业规划
-- 案例分享
-- 行业资讯
-- 道德经悟道
-- 联系我们
+需要实现的导航菜单项及路由路径:
+- **首页** - `/` (根路径)
+- **手机改运** - `/mobile-fortune`
+- **八字详批** - `/bazi-analysis`
+- **取名及改名** - `/naming-service`
+- **风水调整** - `/fengshui-adjustment`
+- **职业规划** - `/career-planning`
+- **案例分享** - `/case-studies`
+- **行业资讯** - `/industry-news`
+- **道德经悟道** - `/taoism-wisdom`
+- **联系我们** - `/contact-us`
+
+**注意**: 这些路由路径是临时占位符,实际实现时应与后端路由保持一致。
 
 ### Testing
 
@@ -98,6 +107,7 @@ Draft
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
 | 2025-09-30 | 1.0 | 初始故事创建 | Bob (SM) |
+| 2025-09-30 | 1.1 | 根据PM建议改进:添加路由路径、汉堡菜单细节、固定导航实现 | Bob (SM) |
 
 ## Dev Agent Record