知习 Admin

企业知识管理中台 — 后台管理系统前端。

技术栈

• React 19 + TypeScript 6
• Vite 8
• Ant Design 5 + @ant-design/pro-components 2.8
• @tanstack/react-query 5
• ECharts 5 + echarts-for-react 3
• dayjs
• react-router-dom v7

项目结构

src/
├── components/          # 共享组件
│   ├── AuditLogTable    # 审计日志 ProTable
│   ├── ConfirmDangerModal # 高危操作确认弹窗
│   ├── DetailDrawer     # 侧滑详情抽屉
│   ├── EChartsChartContainer # 图表容器
│   ├── EmptyState       # 空状态占位
│   ├── MetricCard       # 指标卡
│   ├── StatusTag        # 状态标签
│   ├── AuthGuard        # 登录鉴权守卫
│   ├── PageLoading      # 路由懒加载 Spin
│   └── PermissionGuard  # 角色权限守卫
├── config/
│   └── menu.tsx         # 菜单树与角色过滤
├── constants/
│   └── roles.ts         # 角色标签/颜色/层级
├── contexts/
│   └── AuthContext.tsx   # 认证上下文
├── hooks/
│   └── use-auth-query.ts # React Query 认证 hooks
├── layouts/
│   └── AdminLayout.tsx  # 管理后台布局（侧边栏/顶栏/面包屑）
├── pages/
│   ├── Dashboard        # 数据看板（指标卡 + 图表 + 审计日志）
│   ├── UserManagement   # 管理员 CRUD
│   ├── Login            # 登录页
│   ├── Placeholder      # 占位页
│   ├── 403/404/500      # 错误页
├── routes/
│   └── index.tsx        # 路由配置（懒加载 + 角色要求）
├── services/
│   ├── admin-api.ts     # 类型化 API 函数
│   ├── http-client.ts   # Fetch 封装（401 自动刷新队列）
│   ├── token-store.ts   # Token 本地存储
│   └── mock-data.ts     # DEV 模式 Mock 数据
└── types/
    ├── admin.ts         # AdminUser, DashboardStats, AuditLog 等
    └── api.ts           # PaginatedResult, ApiError

启动

npm install
npm run dev      # 开发模式，默认 http://localhost:5173
npm run build    # 生产构建

认证流程

1. AuthGuard 检查登录状态，未登录跳转 /login
2. PermissionGuard 检查角色权限，不足跳转 /403
3. HTTP 客户端自动处理 401 → refresh token → 重试请求
4. refresh token 失败时强制退出到 /login

角色体系

角色	说明	权限范围
SUPER_ADMIN	超级管理员	全部权限，可管理其他管理员
ADMIN	管理员	用户管理、仪表盘、审计日志
OPERATIONS	运营人员	仪表盘、审计日志（只读）
DEVELOPER	开发者	仪表盘（只读）
READONLY	只读用户	仪表盘（只读）