AdmSysV2【公共组件库】@前端(For Git Submodule)
edit | blame | history | raw

1. 项目初始化

  • [x] 1.1 创建 src/framework/sideMenu/ 目录结构
  • [x] 1.2 创建类型定义文件 sideMenuTypes.ts(MenuTree、MenuItem、CSideMenuProps)
  • [x] 1.3 创建组件文件:CSideMenu.tsxcSideMenu.scss
  • [x] 1.4 创建 src/index.ts 统一导出入口

2. example 基础结构

  • [x] 2.1 创建 example/pages/side-menu/SideMenuPage.tsx 组件示例页
  • [x] 2.2 在 example/App.tsx 中添加组件列表入口

3. 核心组件实现

  • [x] 3.1 实现 CSideMenu 组件框架,定义 props 接口
  • [x] 3.2 使用 antd Menu 的 items 属性实现三级菜单嵌套
  • [x] 3.3 实现 tree 到 antd items 的转换函数
  • [x] 3.4 处理 type 字段的图标映射(chart、setting 等,缺省为默认图标)

4. 手风琴行为

  • [x] 4.1 实现全局手风琴逻辑:在 onOpenChange 中用新 key 替换 openKeys
  • [x] 4.2 实现 openKeys 受控展开状态

5. 响应式固定模式

  • [x] 5.1 添加 antd Layout.Sider,设置 breakpoint="lg"
  • [x] 5.2 实现移动端覆盖样式(CSS 媒体查询)
  • [x] 5.3 实现遮罩层及其点击关闭逻辑

6. 交互与回调

  • [x] 6.1 实现叶子项点击 → onClickMenuItem 回调,传入完整菜单项对象
  • [x] 6.2 移动端点击叶子时:先 onSetMenuCollapse(true),300ms 延迟后再调用导航回调
  • [x] 6.3 支持 onSetMenuCollapse 的 boolean 和无参两种调用模式

7. 选中与指示器

  • [x] 7.1 连接 selectedKeyscurActivePaneKey
  • [x] 7.2 SubMenu 下叶子被选中时应用子树选中样式
  • [x] 7.3 在 panesOnShelf 键匹配时显示"已打开"指示器

8. 空状态与类型处理

  • [x] 8.1 空树时渲染标题和空区域,不报错
  • [x] 8.2 支持 id/key 比较,包含数值类型键(string/number)的类型转换

9. 测试

  • [x] 9.1 创建 test/unit/CSideMenu.test.tsx 单元测试