业务模块地图

本章用于回答三个问题：现有页面在哪里、当前数据来自哪里、如果保留到生产环境需要建设什么后端。它适合在项目立项、需求裁剪和接口排期时使用。

仪表盘

页面范围

src/views/dashboard/
├── console
├── analysis
├── analytics
├── crm
├── ecommerce
├── hrm
├── jobs
├── sales
├── social-media
└── crypto

路由入口：src/router/modules/dashboard.ts。

生产接入

仪表盘通常不是单表 CRUD，应由后端提供聚合接口。建议按页面首屏需要组织指标，避免前端为了一个看板串行请求大量明细接口。

重点考虑：

• 统计口径与时区。
• 趋势周期和同比、环比规则。
• 数据权限与组织范围。
• 缓存和大查询性能。
• 图表空数据与部分失败。

数据大屏

页面位于 src/views/data-screen，路由入口为 src/router/modules/data-screen.ts，包含经营、生产、SaaS 和销售等大屏示例。

大屏前端已经提供布局和图表表现，生产环境需要：

• 聚合指标 API。
• 地图或地理数据授权。
• 轮询、WebSocket 或离线刷新策略。
• 大屏分辨率和缩放策略。
• 长时间运行的内存与断线恢复验证。

系统管理

页面与数据

页面	视图目录	主要预置数据
用户	views/system/user	mock/system/organization.ts
角色	views/system/role	mock/system/organization.ts
部门	views/system/department	mock/system/organization.ts
岗位	views/system/post	mock/system/organization.ts
菜单	views/system/menu	mock/system/menu-manage.ts
字典	views/system/dict	mock/system/dicts.ts
系统参数	views/system/system-param	mock/system/system-params.ts
站点设置	views/system/site-setting	mock/system/site-setting*.ts

路由入口：src/router/modules/system.ts。

推荐阅读顺序

1. 用户管理：学习标准搜索、表格、分页、弹窗和按钮权限。
2. 角色管理：理解角色与菜单、按钮权限的关系。
3. 菜单管理：理解动态路由字段和组件路径。
4. 部门与岗位：理解树形组织数据。

生产后端重点

• 用户唯一性、密码策略和账号状态。
• 角色、按钮权限和数据范围。
• 部门树移动、循环引用和删除约束。
• 菜单路由契约与发布一致性。
• 字典和参数的缓存失效。
• 所有管理操作的审计。

日志、监控与审计

页面包括：

• 登录日志、操作日志。
• 在线用户。
• 服务与缓存监控。
• 安全审计。
• 访客分析。

相关预置数据主要位于 src/mock/system/logs.ts 和 src/mock/monitor，路由分布在 system.ts 与 monitor.ts。

生产环境不能由浏览器自行生成可信审计记录。后端或基础设施需要完成：

• 服务端日志采集。
• 不可由普通用户篡改的审计存储。
• 在线会话识别和强制下线。
• 指标采集、告警与留存周期。
• 敏感字段脱敏与访问控制。

内容管理

src/views/content/
├── category
├── tag
├── list
├── detail
└── recycle

数据入口：src/mock/content，路由入口：src/router/modules/content.ts。

后端通常需要实现分类和标签约束、草稿与发布状态、富文本净化、附件关系、软删除与回收站、审核流程和版本记录。

前端渲染富文本时继续使用 ArtSafeHtml，不能因为内容来自自有后端就直接使用 v-html。

通知中心

页面位于 src/views/system/notification 及相关通知组件，预置数据位于 src/mock/notification，路由入口为 src/router/modules/notification.ts。

当前前端可以展示收件箱、通知列表和已读交互，但生产环境需要后端提供：

• 消息持久化。
• 用户与组织投递范围。
• 已读状态跨设备同步。
• WebSocket、SSE 或轮询。
• 重试、失效和通知模板。

工作流

src/views/workflow/
├── category
├── definition
├── instance
├── task
├── modules
└── shared

预置数据：src/mock/workflow，路由入口：src/router/modules/workflow.ts。

工作流前端提供定义、列表、任务和设计器等交互。生产运行必须接入流程引擎，至少包括：

• 流程定义版本与发布。
• 实例状态机。
• 用户任务与候选人。
• 条件、网关和并行分支。
• 事务、补偿、超时和审计。
• 表单快照与历史数据。

不要尝试在浏览器中长期执行流程或只保存画布 JSON 后宣称流程已经运行。

任务调度

页面位于 src/views/scheduler，预置数据位于 src/mock/scheduler，路由入口为 src/router/modules/scheduler.ts。

前端可以管理任务配置和执行日志，后端需要调度器、执行器、并发控制、失败重试、超时、幂等、日志和告警。

任务表达式必须在服务端再次校验，浏览器校验只能提供输入提示。

文件与资源

文件和资源选择能力分布在 src/views/widgets/resource-select、文件相关组件和 src/mock/files。

生产能力需要：

• 上传接口或对象存储短期凭证。
• 文件元数据与业务关系。
• 下载与预览鉴权。
• 文件类型、大小和病毒扫描。
• 删除、回收和生命周期策略。

浏览器生成的临时 URL 只适合当前会话预览，刷新后不保证继续存在。

组件与模板

src/views/widgets 和 src/views/template 提供图表、编辑器、Excel、视频、二维码、拖拽、日历、聊天、卡片等示例。

它们适合：

• 复制局部交互到真实业务页面。
• 验证第三方依赖是否满足需求。
• 作为视觉与编码参考。

不需要的示例应在客户项目中删除，并同步清理路由、语言包和重型依赖，避免增加构建体积和维护面。

AI 助手

当前 AI 相关页面或交互只适合演示。真实模型调用必须经过服务端代理，原因包括：

• API Key 不能放在浏览器。
• 需要配额、限流和成本控制。
• 需要内容安全、日志和隐私策略。
• 需要流式连接的断线与重试管理。

制定迁移计划

建议建立一张项目清单：

模块	保留/删除	数据来源	后端负责人	权限模型	验收时间
用户管理	保留	真实 API	身份团队	RBAC + 数据范围	第 1 期
工作流	深度改造	流程引擎	流程团队	任务候选人	第 2 期
组件示例	删除	无	前端	无	初始化

先确定模块边界，再进入扩展开发指南实施页面和接口。