135 lines
5.0 KiB
Markdown
135 lines
5.0 KiB
Markdown
# 用户故事：多级菜单布局系统重构
|
||
|
||
## 故事标题
|
||
**多级菜单布局系统重构 - 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 (小型重构任务) |