# 前端模块总览

## 1. 当前原型入口

Studio 原型页面位于 `frontend/src/pages/studio/`，路由集中在 `frontend/src/router/index.ts`，模拟数据位于 `frontend/src/data/studioMock.ts`。

## 2. 页面与模块映射

| 页面 | 模块 |
|------|------|
| `StudioDashboardPage.vue` | 工作台与发布就绪 |
| `KnowledgeWorkspacePage.vue` | 知识资产 |
| `IngestionPipelinePage.vue` | 文件解析管道 |
| `ModelWorkspacePage.vue` | 模型与路由 |
| `WorkflowBuilderPage.vue` | Workflow 编排 |
| `AgentWorkspacePage.vue` | Agent 对话调试 |
| `McpImportPage.vue` | MCP 能力接入 |
| `SkillWorkspacePage.vue` | Skill 编辑 |
| `ObservabilityPage.vue` | 运行观测 |

## 3. 前端实现原则

- 页面使用聚合 ViewModel，避免页面直接拼多个低层接口。
- 已落地旧接口保持兼容，新 Studio 接口以聚合资源为主。
- Long ID 继续按字符串处理，避免 JS 精度问题。
- 枚举值按整型协议处理，页面展示通过枚举字典或常量映射。
- 管理后台保持信息密度、稳定布局和清晰状态提示。