[M8] 模型导航与实体 ER 关系图

## M8

模型导航与实体 ER 关系图

> **一句话**：左导航列出实体模型，右侧用 Mermaid ER 图 + 字段表展示结构与关系。

| 项 | 内容 |
|----|------|
| **难度** | 中 |
| **主要改动的包** | `packages/extension` |
| **建议标题** | `[M8] 模型导航与实体 ER 关系图` |
| **前置依赖** | M7 |

**背景**

工作台已有单实体预览组件；模型页签的增量是多文件导航、多实体关系全景与外部关联节点。应复用 `entity-preview-model.ts`，避免重造预览体系。

**你要做什么**

1. 新建 `model-preview-model.ts`，聚合 `EntityPreviewModel` 为导航 + 图数据；
2. 新建 `ubml-model-panel.tsx`：左导航 + 右图 / 文件视图切换；
3. 集成 Mermaid `erDiagram`（或现有 mermaid 组件），区分包含边与关联边；
4. 补充 `model-preview-model.test.ts`。

**主要涉及的文件**

- `packages/extension/src/lib/model-preview-model.ts`
- `packages/extension/src/pages/workbench/ubml-model-panel.tsx`
- `packages/extension/src/components/mermaid-diagram.tsx`（若需）
- `packages/extension/src/lib/model-preview-model.test.ts`

**怎样算做完**

- [ ] FYBXD 预览可见 FYBXD ↔ FYBXDMX 包含、GspUser 等外部关联；
- [ ] 点击节点可展开字段表；文件视图可读 YAML；
- [ ] `bun test packages/extension/src/lib/model-preview-model.test.ts` 通过。

---

**文档**：https://gitee.com/ubml/code-agent/blob/main/docs/product-design/11-mof-entity-community-issues.md

认领前请在评论说明意向。

UBML/code-agent

Content Risk Flag

Comments (1)

UBML/code-agent .gitee-modal { width: 500px !important; }

Content Risk Flag