cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fdeb455e474142ff60bd3260c5408f8b2f03224a
smart-crop-ui/docs/stories/story-1-9-三级菜单实现.md

5.0 KiB
Raw Blame History

用户故事：多级菜单布局系统重构

故事标题

多级菜单布局系统重构 - 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. 右侧内容区域

  • 根据路由对应显示具体页面内容
  • 无路由对应时显示空页面状态
  • 内容区域自适应高度和宽度
  • 保持现有页面组件的功能不变

集成需求

  1. 现有导航功能继续正常工作: 保持与 src/App.tsx 中现有路由逻辑的兼容性
  2. 新布局遵循现有的设计模式和样式: 使用 shadcn/ui 组件库，保持绿色主题
  3. 与现有认证系统和路由系统无缝集成: 保持 AuthContext 和路径状态管理

质量需求

  1. 响应式设计: 适配不同屏幕尺寸（桌面、平板、移动端）
  2. 保持现有功能不回退: 所有现有页面和功能必须正常工作
  3. 代码符合现有项目规范: 遵循 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 布局

兼容性验证

  • 无对现有API的破坏性更改
  • 无数据库变更（纯前端重构）
  • UI更改遵循现有设计模式
  • 对性能的影响可忽略不计

验证清单

范围验证

  • 故事可在一次开发会话内完成（预计2-4小时）
  • 集成方法直接明了
  • 完全遵循现有模式
  • 无需设计或架构工作

清晰度检查

  • 故事要求明确无误
  • 集成点明确指定
  • 成功标准可测试
  • 回滚计划简单

完成标准

  • 顶部菜单栏正确显示，占15%视口高度
  • 7大子系统菜单项正确显示并可点击
  • 消息铃铛和用户下拉菜单功能正常
  • 左侧二级菜单根据一级菜单选择动态更新
  • 右侧内容区域正确显示对应页面内容
  • 响应式设计在不同屏幕尺寸下正常工作
  • 现有功能回归测试通过
  • 代码遵循现有模式和标准
  • 与现有认证系统正常集成
  • 无浏览器控制台错误或警告

重要的注意事项

  • 这个故事主要涉及UI结构调整，不需要复杂的后端集成
  • 重构过程中应保持所有现有页面的功能和数据流
  • 重点关注用户体验的一致性和导航的流畅性
  • 如果复杂度超出预期，考虑拆分为多个较小的故事
  • 预计开发时间：2-4小时的专注开发工作

故事创建时间: 2025-10-17 创建人: PM Agent (John) 预计工作量: 0.5 story points (小型重构任务)