生产管理系统前端-上边栏搭建与侧边栏搭建

docs/stories/story-1-9-三级菜单实现.md

@@ -0,0 +1,135 @@
+# 用户故事：多级菜单布局系统重构
+
+## 故事标题
+**多级菜单布局系统重构 - Brownfield Addition**
+
+## 用户故事
+作为系统用户，
+我需要一个新的多级菜单布局系统，
+以便更好地组织和访问系统的各个功能模块。
+
+## 故事上下文
+
+### 现有系统集成
+- **集成与**: 现有 `Navigation.tsx` 和 `Sidebar.tsx` 组件
+- **技术**: React + TypeScript + Tailwind CSS
+- **遵循模式**: 现有 shadcn/ui 组件库和项目架构
+- **接触点**: `src/App.tsx`, 路由系统, 菜单配置
+
+## 验收标准
+
+### 功能需求
+
+#### 1. 顶部菜单栏 (占15%视口高度)
+- **左侧**: Logo + "智慧农业生产管理系统"标题
+  - 显示绿色拖拉机图标和系统名称
+  - 包含英文副标题 "Smart Agriculture Management System"
+- **中间**: 7大子系统菜单项与图标
+  - 智能农机管理系统 (Tractor图标)
+  - 地块信息管理系统 (Map图标)
+  - 农事操作管理系统 (Clipboard图标)
+  - 农业资产管理系统 (Package图标)
+  - AI作物模型精准决策系统 (Brain图标)
+  - 水肥一体化控制系统 (Droplets图标)
+  - 中心配置管理系统 (Settings图标)
+- **右侧**: 用户功能区域
+  - 消息铃铛图标（显示未读消息数量）
+  - 系统管理员用户信息（头像+用户名）
+  - 用户下拉菜单（个人中心、退出登录等选项）
+
+#### 2. 左侧二级菜单
+- 根据选中的一级菜单动态显示对应的二级菜单项
+- 支持多级展开/折叠功能
+- 当前选中页面高亮显示（绿色背景）
+- 菜单项层次清晰，缩进合理
+
+#### 3. 右侧内容区域
+- 根据路由对应显示具体页面内容
+- 无路由对应时显示空页面状态
+- 内容区域自适应高度和宽度
+- 保持现有页面组件的功能不变
+
+### 集成需求
+4. **现有导航功能继续正常工作**: 保持与 `src/App.tsx` 中现有路由逻辑的兼容性
+5. **新布局遵循现有的设计模式和样式**: 使用 shadcn/ui 组件库，保持绿色主题
+6. **与现有认证系统和路由系统无缝集成**: 保持 `AuthContext` 和路径状态管理
+
+### 质量需求
+7. **响应式设计**: 适配不同屏幕尺寸（桌面、平板、移动端）
+8. **保持现有功能不回退**: 所有现有页面和功能必须正常工作
+9. **代码符合现有项目规范**: 遵循 TypeScript 严格模式，使用现有工具函数
+
+## 技术说明
+
+### 集成方法
+- **目录结构**: 在 `src/components/layouts/` 目录创建新的布局组件系统
+- **文件组织**:
+  - `MainLayout.tsx` - 主布局容器
+  - `TopNavigation.tsx` - 顶部导航栏
+  - `SideNavigation.tsx` - 侧边栏导航
+  - `ContentArea.tsx` - 内容区域组件
+
+### 现有模式参考
+- **组件样式**: 参考现有的 `Navigation.tsx` 实现模式
+- **菜单数据处理**: 保持与 `types/navigation.ts` 中菜单结构的一致性
+- **状态管理**: 使用现有的 `useState` 和路径状态管理模式
+- **UI组件**: 使用现有的 shadcn/ui 组件（Button, Popover, Badge等）
+
+### 关键约束
+- **保持现有菜单结构**: 7个子系统的菜单配置和层级结构不能改变
+- **保持路由逻辑**: 现有的路径导航和页面渲染逻辑必须保持兼容
+- **保持认证集成**: 用户认证状态和权限控制逻辑保持不变
+- **保持主题风格**: 绿色主题和整体视觉风格保持一致
+
+## 风险和兼容性检查
+
+### 最小风险评估
+- **主要风险**: 布局重构可能影响现有页面的显示和交互
+- **缓解措施**: 渐进式重构，保持现有组件接口不变
+- **回滚方案**: 可快速回退到现有的 Navigation + Sidebar 布局
+
+### 兼容性验证
+- [x] 无对现有API的破坏性更改
+- [x] 无数据库变更（纯前端重构）
+- [x] UI更改遵循现有设计模式
+- [x] 对性能的影响可忽略不计
+
+## 验证清单
+
+### 范围验证
+- [x] 故事可在一次开发会话内完成（预计2-4小时）
+- [x] 集成方法直接明了
+- [x] 完全遵循现有模式
+- [x] 无需设计或架构工作
+
+### 清晰度检查
+- [x] 故事要求明确无误
+- [x] 集成点明确指定
+- [x] 成功标准可测试
+- [x] 回滚计划简单
+
+## 完成标准
+
+- [ ] 顶部菜单栏正确显示，占15%视口高度
+- [ ] 7大子系统菜单项正确显示并可点击
+- [ ] 消息铃铛和用户下拉菜单功能正常
+- [ ] 左侧二级菜单根据一级菜单选择动态更新
+- [ ] 右侧内容区域正确显示对应页面内容
+- [ ] 响应式设计在不同屏幕尺寸下正常工作
+- [ ] 现有功能回归测试通过
+- [ ] 代码遵循现有模式和标准
+- [ ] 与现有认证系统正常集成
+- [ ] 无浏览器控制台错误或警告
+
+## 重要的注意事项
+
+- 这个故事主要涉及UI结构调整，不需要复杂的后端集成
+- 重构过程中应保持所有现有页面的功能和数据流
+- 重点关注用户体验的一致性和导航的流畅性
+- 如果复杂度超出预期，考虑拆分为多个较小的故事
+- 预计开发时间：2-4小时的专注开发工作
+
+---
+**故事创建时间**: 2025-10-17
+**创建人**: PM Agent (John)
+**预计工作量**: 0.5 story points (小型重构任务)