NovoAdmin 文档

Appearance

开发计划文档 ​

2025年4月10日 - 现有功能完成和优化 ​

加班太忙没有精力继续开发了，也没有做新功能，主要是调整了权限逻辑，将用户和角色绑定关系的逻辑重新调整，等后续开发新功能再继续更新吧。。

2025年3月13日 - 权限模块前后端对接 ​

工作摘要 ​

今天完成了权限管理模块的前后端对接工作，主要围绕权限与菜单的关联关系进行开发，实现了权限接口对接、菜单权限关联以及相关后端逻辑。

详细工作内容 ​

1. 权限接口对接（前端部分） ​

完成了权限模块的前端接口对接工作，具体内容包括：

  • 优化了usePagination钩子，使用useMemo和构建参数函数解决了查询参数更新不及时的问题
  • 实现了权限管理页面的新增/编辑统一表单，根据状态动态切换表单标题和行为
  • 为权限标识字段在编辑模式下添加了禁用属性，保护关键标识不被误改
  • 使用toast.promise优化接口调用的状态反馈，提升用户体验
  • 重构了搜索逻辑，确保获取到最新的查询参数

2. 菜单管理新增权限对接 ​

为菜单管理模块增加了权限关联功能：

  • 集成getPermissionsByType接口获取菜单类型权限列表用于下拉选择
  • 在菜单表单中新增"关联权限"下拉选择和"自动创建对应权限"复选框
  • 区分新增和编辑模式的表单行为，编辑模式下不显示自动创建选项
  • 使用Row和Col组件实现响应式布局，支持不同设备尺寸下的良好展示
  • 优化模态框宽度和表单标签布局，提升用户操作体验

3. 后端权限模块新增和菜单关联查询逻辑 ​

  • 实现了权限按类型筛选的接口
  • 设计了权限与菜单的关联存储和查询逻辑
  • 完成自动创建权限的后端支持
  • 建立菜单与权限的双向关联机制

修改文件 ​

文件路径修改内容
src/hooks/usePagination.ts优化查询参数构建逻辑，解决状态更新异步问题
src/pages/system/permission/index.tsx实现权限管理页面，新增/编辑共用表单
src/pages/system/menu/index.tsx添加权限关联功能，优化表单布局
src/api/permissions/index.ts实现权限类型筛选接口
src/api/system/permission/index.ts完善权限管理相关接口

遇到的问题与解决方案 ​

问题1：表单查询参数更新不及时

在使用usePagination钩子进行表单查询时，由于React状态更新是异步的，导致调用getList()函数时使用的仍是旧的查询参数。

解决方案：

重构usePagination钩子，使handleSearch和handleReset函数立即返回最新的查询参数，而不依赖于状态更新：

typescript
// 处理搜索 - 返回最新参数
const handleSearch = useCallback(() => {
  if (form) {
    // 获取最新表单值
    const values = form.getFieldsValue() as Omit<T, "page" | "pageSize">;
    
    // 构建最新参数
    const newParams = buildParams(values, 1, pagination.pageSize);
    
    // 异步更新状态
    setSearchParams(values);
    setPagination(prev => ({ ...prev, current: 1 }));
    
    // 立即返回最新参数
    return newParams;
  }
  return params;
}, [form, pagination.pageSize]);

然后在组件中这样使用：

typescript
const handleSearch = () => {
  const newParams = triggerSearch(); // 获取最新参数
  getList(newParams); // 使用最新参数查询
};

问题2：权限与菜单关联展示不合理

菜单与权限关联信息需要在不同场景下有不同展示方式。

解决方案：

使用条件渲染和响应式布局结合，根据菜单类型和操作模式动态显示表单项：

typescript
{type === "menu" ? (
  <Col xs={24} xl={12}>
    <Form.Item label="关联权限" name="permissionId">
      <Select
        placeholder="请选择关联权限"
        allowClear
        showSearch
        optionFilterProp="label"
        options={permissionOptions}
      />
    </Form.Item>
  </Col>
) : null}

{/* 仅在新增菜单时显示 */}
{type === "menu" ? (
  <Col xs={24} xl={24}>
    <Form.Item
      label="自动创建"
      name="autoCreatePermission"
      valuePropName="checked"
      tooltip="选中后将自动创建与菜单同名的权限"
    >
      <Checkbox>自动创建对应权限</Checkbox>
    </Form.Item>
  </Col>
) : null}

下一步计划 ​

  1. 角色权限分配功能

    • 实现角色权限树状选择组件
    • 完成角色权限分配与保存

  2. 权限前端集成

    • 实现基于权限的路由控制
    • 开发操作级别权限控制组件

  3. 权限缓存与性能优化

    • 优化权限数据加载和缓存策略
    • 减少权限验证对性能的影响

  4. 权限系统文档完善

    • 编写权限使用指南
    • 完成权限设计文档

2025年3月12日 ​

今日完成 ​

✅ 角色权限管理功能与动画组件优化

角色权限管理 ​

  • 完成角色权限绑定的树形组件实现
  • 添加全选/全不选功能
  • 添加全部展开/收起功能
  • 优化权限树的布局和滚动行为
  • 实现菜单权限数据接口对接

动画组件优化 ​

  • 修复 Slide Out 类动画无法正确预览的问题
  • 优化过渡动画的缓动函数，解决结束时卡顿现象
  • 使用 easeInOut 替换复杂的贝塞尔曲线，提高动画流畅度
  • 提升动画性能，减少资源占用

后续计划 ​

  • 完成角色与菜单权限的保存功能
  • 添加权限变更的历史记录
  • 优化树组件的性能，处理大量节点时的渲染问题
  • 考虑添加权限预设方案

2025年3月11日 ​

今日完成 ​

✅ 系统设置模块优化与角色管理功能实现

代码格式优化 ​

  • 对系统设置模块的代码进行了格式化和规范化
  • 优化了组件结构和命名规范
  • 改进了注释和文档说明

角色管理功能 ​

  • 完成角色管理模块的增删改查接口对接
  • 实现了角色列表的分页查询和筛选功能
  • 添加了角色创建、编辑和删除的交互功能
  • 优化了表单验证和错误处理逻辑
  • 集成了 toast 提示，提升用户体验

权限管理界面 ​

  • 设计并实现了角色权限管理的侧边栏界面
  • 添加了平滑的过渡动画效果
  • 实现了权限面板的展开/收起功能

后续计划 ​

  • 完善角色权限管理绑定功能
  • 实现菜单权限的树形选择界面
  • 添加权限变更的保存和同步功能
  • 优化权限管理的用户体验

2025年3月10日 ​

今日问题总结 ​

  1. 菜单导航逻辑优化

    • 实现了菜单项点击事件的智能导航功能，确保用户在点击菜单项时，能够自动导航到其子菜单的最深层级。
    • 修复了菜单项激活状态的判断逻辑，确保在复杂的菜单结构中，始终正确高亮当前路径所属的一级菜单。此优化通过分析路径层级关系并结合用户权限数据实现。

  2. 布局调整

    • 引入了 VerticalSplitMini 布局模式，支持菜单栏的动态折叠和展开。此功能通过调整布局组件的宽度和样式实现，增强了界面的灵活性和适应性。

  3. 代码优化

    • 重构了路由地址查询方法,封装hooks,减少重复代码。
    • 改进了 changeMenu 函数的实现，确保导航路径的准确性和可靠性。此改进通过引入递归算法来处理复杂的菜单层级结构。

后续计划 ​

  • 完善主题配置面板的其他选项，提供更多的自定义功能。
  • 添加更多的预设颜色主题，提升用户界面的多样性。

2025年3月8日 ​

今日完成 ​

✅ 主题配置系统升级与布局优化

主题颜色配置系统 ​

  • 实现了颜色主题选择器组件
  • 添加了实时预览效果，用户可直接看到颜色变化
  • 使用Tooltip显示主题名称，提升用户体验
  • 优化了选中状态的视觉反馈（阴影效果）

布局系统升级 ​

  • 完成垂直分栏布局（VerticalSplit）的实现
  • 修复了布局切换时的间距和宽度计算问题
  • 为不同布局类型设置适当的导航栏宽度配置
  • 修复了TypeScript类型错误，提高代码健壮性

侧边栏暗色模式 ​

  • 新增侧边栏暗色切换功能
  • 实现了暗色模式与亮色模式下不同的配色方案
  • 优化了活跃菜单项的样式，提高可识别性
  • 为垂直分栏布局左侧导航添加了主题色高亮

主题颜色系统优化 ​

  • 实现了与Ant Design主题颜色系统的兼容
  • 生成了一套完整的主题色梯度（color0-color9）
  • 优化了暗黑模式下的配色表现
  • 使用CSS变量实现了无刷新的主题切换

路由系统优化 ​

  • 实现了智能重定向组件，解决登录后404问题
  • 添加了权限路由加载状态提示
  • 优化了路由跳转逻辑，提升用户体验

后续计划 ​

  • 完善主题配置面板其他选项
  • 添加更多的预设颜色主题
  • 优化黑暗模式下的组件显示
  • 考虑添加自定义主题颜色功能

2025年3月7日 ​

今日完成 ​

✅ VitePress静态文档自动部署

实现细节 ​

  • 使用GitHub Actions配置自动化部署流程
  • 通过 gh-pages分支部署到GitHub Pages
  • 配置构建命令：npm run build
  • 添加部署工作流文件 .github/workflows/deploy.yml

此文档使用cursor辅助生成,使用 VitePress 构建

© 2025 React Admin Team