少儿运动培训的日常运营，往往不只有“管理学员”这一件事。教练信息、会员等级、动作素材、小游戏、课程音乐和后台权限，都会随着业务增长变成需要统一维护的数据资产。
核心力量少儿跑酷管理系统就是为这一场景打造的运营后台。它将分散在不同业务环节的信息汇总到一个面向运营人员和管理员的 Web 应用中，帮助团队更高效地完成内容维护、人员管理与权限协作。
项目解决什么问题？
项目聚焦“少儿跑酷教练助手”的后台运营场景，主要解决三类问题：
- 人员与会员管理：集中维护用户资料、用户详情和会员等级信息；
- 课程内容管理：对小程序技能、动作库、游戏、游戏类型与音乐素材进行维护；
- 运营安全与可追溯性：通过角色、菜单、接口权限和操作日志，控制不同岗位的可见范围与操作能力。
对于管理者来说，进入数据看板即可快速查看用户总量、当日活跃、付费会员和新增用户等核心指标；对于运营人员，则可以按权限进入对应的内容模块进行维护。
功能一览
| 模块 | 主要能力 |
|---|---|
| 数据看板 | 展示用户、活跃度、会员与新增数据，并提供最新操作动态 |
| 用户管理 | 管理用户列表与用户详情 |
| 会员等级管理 | 维护会员等级及相关业务信息 |
| 小程序技能管理 | 维护技能内容及问答类素材 |
| 动作库管理 | 维护少儿跑酷动作素材 |
| 游戏管理 | 管理游戏列表、管理员收藏、游戏类型与游戏详情 |
| 音乐管理 | 维护课程或内容场景使用的音乐素材 |
| 系统设置 | 管理管理员、角色、菜单和 API 权限 |
| 操作日志 | 查询后台操作记录，辅助审计与问题追踪 |
| 个人中心 | 支持修改昵称、邮箱和密码等个人信息 |
技术选型
前端采用成熟的中后台技术组合，兼顾交付效率、类型安全和后续可维护性：
| 技术 | 作用 |
|---|---|
| Umi Max 4 | 应用框架，提供路由、运行时配置、模型和权限能力 |
| React 18 | 页面与交互开发 |
| TypeScript 5 | 通过类型约束降低接口与业务改动风险 |
| Ant Design 5 + Pro Components | 表单、表格、布局和中后台页面组件 |
| Tailwind CSS 4 | 快速组织常规页面样式 |
| Axios | 统一处理接口请求、鉴权和异常响应 |
| ECharts | 支撑数据可视化场景 |
| pnpm | 依赖管理和脚本执行 |
架构设计：让业务模块保持清晰
项目按页面、状态、服务与基础能力分层，避免页面组件直接堆叠接口逻辑。
1 | pages / components |
pages负责页面呈现和交互；models与hooks承载可复用的状态和业务逻辑；services集中定义 API 调用；utils处理 HTTP、鉴权、存储、导出和错误处理等通用能力；types为接口数据和业务实体提供 TypeScript 类型定义。
路由统一定义在 .umirc.ts 中，菜单则根据登录后服务端返回的菜单数据动态生成。这样既能避免手写菜单与路由不一致，也能将菜单可见性纳入权限系统。
权限与登录：兼顾体验与安全
系统使用基于角色的权限控制思路：登录后获取当前用户、菜单和权限集合；前端依据权限决定页面入口、操作按钮和数据区域是否可见。
请求层会自动附加访问令牌。当令牌过期且仍有刷新令牌时，请求会进入刷新队列，待刷新完成后自动重试，从而尽量避免用户因短期令牌失效而被迫中断操作。对于无权限、服务端异常和未登录状态，应用会统一提示或跳转到相应页面。
需要说明的是：前端权限控制用于改善交互体验，真正的数据访问边界仍应由服务端接口再次校验。
项目结构
1 | src/ |
