Files
user-system/docs/team/FRONTEND_STATUS_AUDIT_2026-03-22.md

6.2 KiB
Raw Permalink Blame History

前端实现状态审计报告

审计时间: 2026-03-22
审计依据: docs/plans/ADMIN_FRONTEND_EXECUTION_PLAN.md
当前状态: 13个页面已实现但存在功能缺口和UI规范问题


1. 功能实现状态

1.1 已完成的页面 (13/13)

页面 路由 状态 备注
登录页 /login 支持密码、邮箱、短信登录
忘记密码 /forgot-password -
重置密码 /reset-password -
总览 /dashboard 统计卡片已实现
用户管理 /users ⚠️ 缺少创建用户功能
角色管理 /roles -
权限管理 /permissions -
登录日志 /logs/login -
操作日志 /logs/operation -
Webhooks /webhooks -
导入导出 /import-export -
个人资料 /profile -
安全设置 /profile/security -

1.2 功能缺口(与执行计划对比)

用户管理页 (/users)

执行计划明确不做(后端不支持):

  • 新建用户 - 后端没有 POST /api/v1/users 接口
  • 批量操作 - 后端没有批量接口
  • 管理员代改他人密码 - PUT /users/:id/password 只允许本人修改
  • 为其他用户上传头像 - 头像上传只支持当前用户

当前实现状态:

  • 用户列表、分页、筛选
  • 查看用户详情
  • 编辑用户资料
  • 删除用户
  • 修改用户状态
  • 分配角色
  • 创建用户按钮缺失(符合执行计划,但用户体验不完整)

建议: 虽然执行计划明确不做,但从用户体验角度,应该添加一个提示说明,告知用户为何不能创建用户。


2. UI规范检查

2.1 设计Tokens检查

规范文件: docs/design/admin-ui-tokens.css

Token 规范值 当前状态 问题
--color-canvas #f4f1ea -
--color-layout #e9e3d5 -
--color-surface #ffffff -
--color-primary #0e5a6a -
--radius-sm 10px ⚠️ 部分页面使用Ant Design默认值
--shadow-card 0 10px 30px rgba(23, 33, 43, 0.06) ⚠️ 部分卡片未使用统一阴影

2.2 页面布局一致性

问题发现:

  1. 页面标题不统一

    • 有些页面使用 PageHeader 组件
    • 有些页面直接使用 <h1><Title>
    • 建议:所有页面统一使用 PageHeader 组件
  2. 操作按钮位置不统一

    • 有些页面在右上角
    • 有些页面在表格上方
    • 建议:统一放在表格右上方
  3. 筛选表单样式不统一

    • 有些页面使用 Card 包裹
    • 有些页面直接放在页面中
    • 建议:统一使用 Card 包裹或统一不使用

2.3 表格样式一致性

问题:

  • 表格列宽未统一
  • 操作列按钮样式不一致(有的用图标,有的用文字)
  • 状态标签颜色未完全统一

3. 代码质量问题

3.1 已修复的问题

  1. CSS语法错误 (::root:root)
  2. CSS伪元素错误 (:::-webkit-scrollbar::-webkit-scrollbar)
  3. 循环依赖问题 (csrf.tsclient.ts)
  4. 字段名不匹配 (token vs csrf_token)
  5. 菜单点击问题 (改为 defaultOpenKeys)
  6. React Router警告 (添加 v7_startTransition)
  7. Ant Design警告 (destroyOnClosedestroyOnHidden)
  8. router.tsx 文件重复问题

3.2 待改进的代码质量

  1. 错误处理不一致

    • 有些页面使用 getErrorMessage()
    • 有些页面直接显示 error.message
    • 建议:统一使用 getErrorMessage()
  2. 加载状态处理

    • 有些页面使用 PageEmptyPageError 组件
    • 有些页面直接内联处理
    • 建议:统一使用反馈组件

4. 建议修复清单

高优先级(影响用户体验)

  1. 统一页面标题组件

    // 所有页面统一使用
    <PageHeader title="用户管理" subtitle="管理系统用户账户" />
    
  2. 统一操作按钮位置

    // 统一放在表格右上方
    <div className={styles.tableActions}>
      <Button type="primary">导出</Button>
    </div>
    
  3. 统一筛选表单样式

    // 统一使用 Card 包裹或不使用
    <Card className={styles.filterCard}>
      {/* 筛选表单 */}
    </Card>
    

中优先级(提升代码质量)

  1. 统一错误处理

    // 统一使用
    import { getErrorMessage } from '@/lib/errors'
    message.error(getErrorMessage(err))
    
  2. 统一加载状态

    // 统一使用反馈组件
    import { PageEmpty, PageError, PageLoading } from '@/components/feedback'
    

低优先级(优化体验)

  1. 添加用户创建提示 虽然后端不支持创建用户,但可以在用户管理页添加提示:
    <Alert 
      type="info" 
      message="用户创建功能暂不可用,请联系系统管理员" 
    />
    

5. 执行计划延期项确认

以下功能执行计划明确标注为延期或不实现,当前状态正确:

功能 状态 原因
用户创建 未实现 后端无 POST /api/v1/users 接口
批量操作 未实现 后端无批量接口
管理员重置密码 未实现 后端只允许本人修改密码
系统设置 未实现 后端无配置接口
全局设备管理 未实现 后端只有当前用户设备接口
社交登录 未实现 OAuth回调非SPA友好格式

6. 总结

当前状态

  • 页面数量: 13个页面已全部实现
  • 功能完整性: 基本功能完整,但缺少用户创建
  • UI一致性: 存在不一致问题 ⚠️
  • 代码质量: 已修复关键问题,仍有改进空间 ⚠️

建议行动

  1. 短期: 统一UI组件使用方式提升一致性
  2. 中期: 统一错误处理和加载状态
  3. 长期: 推动后端补齐 POST /api/v1/users 接口

风险点

  • 用户管理缺少创建功能,管理员体验不完整
  • UI不一致影响产品专业感
  • 代码风格不统一增加维护成本