美心管理端（Upmarket Admin）

基金运营后台面对的是内部运营、风控与客服角色，权限边界比C 端复杂得多：同一页面不同角色可见的按钮完全不同，误操作会直接造成资金与客户权益问题；同时赎回、份额确认、批量文件下发这类流程单次涉及上千条记录，一旦卡顿或失败没有可追溯的中间态，运营只能靠人工核对。后台还要对接多语言客服团队与外部审计口径。

以 React + TypeScript + Vite 构建单页应用，Ant Design 承担后台高频表格与表单的一致性，react-intl 做多语言以支撑跨境客服团队。架构：

分层组织——页面层 / 业务组件层 / 数据访问层 / 通用组件层，避免后台页面之间互相引用形成耦合；路由级做权限守卫，未授权路由直接拦截。权限：

实现按钮级权限控制（与已有的动态路由权限配合），后台所有写操作按钮按角色 × 资源 × 动作三元组判定，前端隐藏 + 后端二次校验双保险。性能：

列表统一走分页 + 服务端筛选，避免一次性拉全量；长列表虚拟滚动；批量文档处理走队列化提交并给进度反馈，防止重复提交与界面假死。安全与可审计：

敏感信息（联系方式、证件号、银行卡）在列表与详情中默认脱敏，展开需二次确认；所有写操作记录操作人与时间戳，满足审计留痕要求；输入侧做长度与格式校验，前端不作为唯一防线。可维护性：

抽离通用组件与请求层，统一错误提示与异常兜底；表单与表格逻辑收敛到模板层，新页面复制成本低。技术难点与解决方式：

• 同一页面不同角色可见按钮完全不同，漏判一个就是越权或误操作。→ 权限按角色 × 资源 × 动作三元组集中判定，页面只消费判定结果而不各自实现；前端隐藏之外，后端再校验一次。
• 批量文档下发、批量份额调整这类操作一旦部分失败，很难说清到底改了哪些。→ 批量任务队列化提交并返回可查询的任务标识，逐条记录成功与失败明细，支持失败项重试而不重复执行成功项。
• 运营需要看到信息，但页面又不能直接铺开证件号与银行卡。→ 默认脱敏、展开需二次确认并记录操作，所有写操作留操作人与时间戳，既满足审计又不影响日常作业。
• 财务与运营场景动辄上万行，全量渲染直接卡死。→ 分页 + 服务端筛选为默认路径，长列表走虚拟滚动，筛选项变化只重取必要字段。
• 跨境客服团队要求多语言，但后台控件库自带文案易漏译。→ 用 react-intl 统一收口文案，并对残留硬编码做构建期检查，避免漏译上线。

管理端稳定支撑基金日常运营，用户与权限、投资赎回、批量文档处理等核心流程线上化；按钮级权限与操作留痕让风控与审计有据可查，运营不再依赖人工二次核对。