# modelManagement

**Repository Path**: huyan12138/model-management

## Basic Information

- **Project Name**: modelManagement
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 模型管理系统（Model Management）

一个基于 **Vue 3** 的可视化模型管理前端项目，集成了 **Three.js / PixiJS 双画布编辑**、**Cesium 三维地球场景**、**AntV X6 流程图绘制** 与 **仿真画布** 四大可视化模块，并配以数据管理（模型 / 场景 / 节点）后台维护页面，以及统一的撤销/重做、属性面板等编辑能力。

## 功能特性

- **双画布编辑器（画布）**：同屏嵌入 Three.js 三维画布与 PixiJS 二维画布，共享网格设置与选中状态，通过 `DualCanvasSyncManager` 同步模型/精灵的增删与变换。
  - 移动（W）/ 旋转（E）/ 缩放（R）三种变换模式
  - 撤销（Ctrl+Z）/ 重做（Ctrl+Y）/ 删除（Del）
  - 网格数量设置、属性面板（位置/旋转/缩放）
  - 场景的保存与加载：按路由 `sceneId` 拉取场景（`GET /api/scene/{id}/with-models`），保存时通过 `POST` / `PUT /api/scene/with-models` 聚合提交场景与其关联模型
- **Cesium 三维地球（Cesium）**：基于 CesiumJS 的三维场景，可拖拽模型到地球加载、点击选中并操作控制器。
  - 左键选择/拖拽加载，右键旋转视角，滚轮缩放，中键平移
  - 平移/旋转/缩放模式切换，属性面板实时编辑，支持撤销/重做
  - 底图瓦片地址由环境变量 `VITE_MAP_TILE_URL` 配置
- **流程图绘制（流程绘制）**：基于 AntV X6 的流程图编辑器。
  - 左侧图形面板拖拽/点击添加节点，连线编排
  - 复制 / 剪切 / 粘贴 / 删除、放大 / 缩小 / 适应：工具栏按钮
  - 撤销（Ctrl+Z）/ 重做（Ctrl+Y、Ctrl+Shift+Z）/ 重置视图（Ctrl+0）：仅快捷键可用，工具栏上对应的「撤销 / 重做 / 重置」按钮当前已在代码中注释
  - 导出：`FlowchartManager` 内置 `exportPNG()` / `exportJSON()`（`Export` 由 `@antv/x6` 主包直接导出，无需额外安装插件包），但工具栏「导出 PNG / JSON」按钮当前已注释，界面上暂无入口
  - 流程图节点、连线与绑定关系随场景聚合保存到后端（`PUT /api/scene/with-models`）
  - 联动视图：选中场景后主区一分为三（绑定面板 / X6 流程图 / 3D 或 2D 画布），可把流程图节点与画布中的模型或精灵绑定，绑定关系随场景一起保存与加载
- **仿真画布（仿真画布）**：按路由 query 的 `sceneId` 拉取场景数据，在同一页面上下堆叠展示 **2D 画布 / 3D 画布 / 流程图** 三个面板。
  - 顶部开关可关闭或恢复任一画布（关闭即 `v-if` 卸载组件、释放资源），每个面板支持聚焦放大与浏览器全屏；默认仅展开「流程图」面板，2D / 3D 画布默认关闭
  - 「流程图」面板当前以 `iframe` 嵌入外部地址（硬编码 `http://192.168.2.23:5175/`），本地 `SimulationFlowchart` 组件的调用处于注释状态
  - 底部时间轴提供播放 / 暂停 / 重置 / 倍速（0.5x / 1x / 2x / 10x / 50x / 100x）/ 拖拽跳转，默认总时长 120 秒
  - 由 `AgentMotionPlayer` 按智能体运动时间线驱动 2D / 3D 画布中的智能体沿路径移动，仿真过程中节点状态（如剩余数量）实时更新
- **数据管理**：一组后台维护页面，用于维护画布与流程图所消费的基础数据。
  - **模型管理**：表格展示名称 / 类型 / 精灵图 / 模型 / 宽 / 高 / 描述 / 状态（1=启用、0=停用），支持关键字搜索、新增、编辑、删除、批量删除，以及 `.7z` / `.zip` 压缩包批量导入；点击精灵图或模型名可打开预览弹框
  - **场景管理**：表格展示场景编码 / 场景名称 / 描述 / 状态 / 创建时间，支持搜索、删除与批量删除；「编辑」跳转到画布页并带上 `sceneId`，「仿真」跳转到仿真画布页并带上 `sceneId`
  - **节点管理**：表格展示编码 / 名称 / 类型 / 对象名称（精灵图）/ 描述，支持按节点类型（开始 / 结束 / 普通 / 判断）与关键字筛选，支持新增、编辑、删除与批量删除
- 左侧导航栏（`AppSidebar`）依据路由配置动态生成菜单，支持完整 / 简化 / 隐藏三种显示模式并持久化偏好；小屏（< 1024px）自动切换为抽屉式导航。
- 使用 **Element Plus** 提供 UI 组件，**Pinia** 管理状态，**Tailwind CSS** 与 **Sass** 进行样式布局。

## 页面与路由

路由定义见 `src/router/index.js`，导航菜单直接依据该文件生成，新增路由后菜单自动同步。

| 路径 | 路由名称 | 页面标题（meta.title） | 说明 |
| --- | --- | --- | --- |
| `/` | — | — | 重定向到 `/canvas` |
| `/canvas` | Canvas | 画布 | 双画布（Three + Pixi）联合编辑页 |
| `/three` | — | — | 重定向到 `/canvas`（非独立入口，Three 画布作为子组件内嵌于画布页） |
| `/pixi` | — | — | 重定向到 `/canvas`（非独立入口，Pixi 画布作为子组件内嵌于画布页） |
| `/cesium` | Cesium | Cesium | Cesium 三维地球页 |
| `/flowchart` | Flowchart | 流程绘制 | X6 流程图绘制页 |
| `/simulation` | Simulation | 仿真画布 | 仿真画布页 |
| `/data` | DataManagement | 数据管理 | 父级容器，自动重定向到子路由列表第一项（`/data/model`） |
| `/data/model` | Model | 模型管理 | 模型维护页 |
| `/data/scene` | Scene | 场景管理 | 场景维护页 |
| `/data/node` | Node | 节点管理 | 流程节点维护页 |

## 技术栈

| 分类 | 技术 |
| --- | --- |
| 框架 | Vue 3 |
| 构建 | Vite 8 |
| 路由 | vue-router 5 |
| 状态管理 | Pinia 4 |
| UI 组件 | Element Plus 2 |
| 样式 | Tailwind CSS 4（@tailwindcss/postcss）+ Sass 1 |
| 三维渲染 | Three.js 0.185 |
| 2D 渲染 | PixiJS 8 |
| 三维地球 | Cesium 1.144（vite-plugin-cesium） |
| 流程图 | @antv/x6 3 + @antv/x6-vue-shape 3 |
| HTTP | Axios 1 |

各依赖的精确版本范围见 `package.json`；上表仅标注主版本，0.x 依赖标注到次版本。

## 环境要求

- Node.js 20.19+ 或 22.12+（依据：`package.json` 未声明 `engines`，此处沿用 Vite 8 官方要求 `^20.19.0 || >=22.12.0`）
- 包管理器 npm

## 安装与运行

```bash
# 安装依赖
npm install

# 启动开发服务器（已配置 --host，可局域网访问）
npm run dev

# 构建生产版本
npm run build

# 预览构建产物
npm run preview
```

运行前请先配置项目根目录的 `.env`：

```bash
# 后端接口基础地址（request.js 的 axios baseURL）
VITE_API_BASE_URL=http://<backend-host>/api

# Cesium 底图瓦片地址（{s} 为子域占位符，{x}/{y}/{z} 为瓦片行列号与层级）
VITE_MAP_TILE_URL=https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
```

> 注意：`.env` 中记录的 `VITE_MAP_TILE_URL` 目前指向高德瓦片，这是临时替代方案——原计划的水经注地址 `https://api.jl1mall.com/getMap/{z}/{y}/{x}.jpg` 当前对任意坐标都返回同一张占位图，需与服务商确认有效 URL 与鉴权后才能切回。

启动后访问终端输出的本地地址即可（默认 `/` 会重定向到 `/canvas` 画布页面）。

## 目录结构

```
model-management/
├── index.html                 # 应用入口 HTML
├── vite.config.js             # Vite 配置（@vitejs/plugin-vue + vite-plugin-cesium）
├── postcss.config.js          # PostCSS 配置（@tailwindcss/postcss）
├── .env                       # 环境变量：VITE_API_BASE_URL / VITE_MAP_TILE_URL
├── public/                    # 静态资源，原样拷贝至构建产物（示例模型 assets/、Draco 解码器 draco/、图标）
└── src/
    ├── main.js                # 应用引导（挂载 Pinia / Router / Element Plus / v-app-loading 指令）
    ├── App.vue                # 根组件：左侧导航栏 + 右侧内容区（小屏另有顶栏）
    ├── router/
    │   └── index.js           # 路由表与全局前置守卫；导航菜单依据此配置动态生成
    ├── stores/
    │   ├── models.js          # 模型分页列表（消费 GET /api/model/page）
    │   └── nodes.js           # 后端节点目录（分页缓存 + 目录项回查 resolveCatalogItem）
    ├── api/
    │   ├── index.js           # 统一导出入口
    │   ├── request.js         # axios 实例与请求/响应拦截器（Token 注入、错误提示）
    │   ├── models.js          # 模型接口 + 场景聚合接口
    │   ├── scenes.js          # 场景接口占位（当前仅注释，未导出任何函数）
    │   ├── processNodes.js    # 流程节点接口（另含场景聚合更新与文件预览）
    │   └── files.js           # 文件上传与预览
    ├── components/
    │   ├── DataTable.vue      # 通用表格（列配置 + 分页 + 多选 + 操作列插槽）
    │   ├── Loading.vue        # 通用加载遮罩组件
    │   ├── NameInputDialog.vue # 命名输入弹框
    │   └── loading.js         # v-app-loading 自定义指令（不覆盖 element-plus 的 v-loading）
    ├── assets/
    │   ├── main.css           # 全局样式（Tailwind v4 入口 + 主题基础样式）
    │   └── img/               # 画布面板按钮图标（放大 / 缩小 / 重置 / 聚焦 / 全屏 / 关闭）
    ├── class/                 # 预留目录（当前为空）
    └── views/
        ├── layout/            # 布局层：AppSidebar / NavIcon / useNavMode（导航模式与响应式）
        ├── header/            # 预留目录（当前为空）
        ├── canvas/            # 双画布编辑页；components/ 放面板，uilt/ 放编辑器与控制器
        ├── three/             # Three.js 三维画布（由画布页内嵌）；components/ + uilt/
        ├── pixi/              # PixiJS 二维画布（由画布页内嵌）；uilt/
        ├── cesium/            # Cesium 三维地球页；components/ + uilt/
        ├── flowchart/         # 流程图绘制页；按功能块组织：x6/（X6 建模画布）+ svg/（2D 编辑画布）+ linkage/（联动视图）+ business/ + rules/
        ├── simulation/        # 仿真画布页；components/（三画布 + 时间轴）+ uilt/
        └── data-management/   # 数据管理：父容器 + model/ scene/ node/ 三个子页面
```

各业务模块下的 `uilt/` 为项目内沿用命名（即 utils 层），存放该模块专属的画布管理器、控制器与组合式函数；`components/` 存放该模块专用的 Vue 组件。`flowchart/` 已按功能块重组：块目录内 Vue 与 JS 同置（`x6/`、`svg/`、`linkage/`），跨块复用的用例编排与纯规则分别放在 `business/`、`rules/`，不再保留 `uilt/` 与 `components/`。

## 接口约定

前端通过 Axios 与后端交互，基础地址取自 `import.meta.env.VITE_API_BASE_URL`。响应拦截器按 `{ code, data, message }` 统一结构处理，`code` 为 `0` 或 `200` 视为成功并直接返回 `data`；请求头自动携带 `localStorage.token`。

### 模型（`src/api/models.js`）

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| GET | `/api/model/page` | 分页获取模型列表（参数 `current` / `size` / `keyword`） |
| POST | `/api/model` | 新增模型 |
| PUT | `/api/model` | 修改模型（请求体携带主键 `id`） |
| DELETE | `/api/model/{id}` | 删除单个模型 |
| POST | `/api/model/batch-delete` | 批量删除模型（请求体 `{ ids: [...] }`） |
| POST | `/api/model/import-archive` | 压缩包批量导入（`.7z` / `.zip`，`multipart/form-data`，字段名 `file`） |

### 场景（`src/api/models.js`）

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| GET | `/api/scene/page` | 分页获取场景列表（参数 `current` / `size` / `keyword`） |
| GET | `/api/scene/{id}/with-models` | 获取场景详情及关联数据（`scene` / `sceneModels` / `nodes` / `links` / `bindings`） |
| POST | `/api/scene/with-models` | 新建场景并聚合提交关联模型 |
| PUT | `/api/scene/with-models` | 更新场景及其关联模型、流程节点与绑定关系（同名函数在 `src/api/processNodes.js` 中亦有声明，流程图页从后者导入） |
| DELETE | `/api/scene/{id}` | 删除单个场景 |
| POST | `/api/scene/batch-delete` | 批量删除场景（请求体 `{ ids: [...] }`） |

### 流程节点（`src/api/processNodes.js`）

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| GET | `/api/process-node/page` | 分页获取流程节点（参数 `current` / `size` / `nodeType` / `keyword`） |
| GET | `/api/process-node/list` | 获取全部流程节点（不分页） |
| POST | `/api/process-node` | 新增流程节点 |
| PUT | `/api/process-node` | 修改流程节点（请求体携带 `id`） |
| DELETE | `/api/process-node/{id}` | 删除单个流程节点 |
| POST | `/api/process-node/batch-delete` | 批量删除流程节点（请求体 `{ ids: [...] }`） |

### 文件（`src/api/files.js`）

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| POST | `/api/file/upload` | 上传文件（`multipart/form-data`，字段名 `file`，返回 `objectName`，带上传进度回调） |
| GET | `/api/file/preview?objectName=` | 获取文件预览地址（失败返回空串） |

### 尚为内存态 / 预留的能力

- `src/api/scenes.js`：仅保留说明注释，未导出任何函数，为后续场景接口预留。
- `src/api/index.js` 使用 `export *` 聚合各子模块，其中 `updateSceneWithModels`（`models.js` 与 `processNodes.js`）与 `getFilePreviewUrl`（`files.js` 与 `processNodes.js`）为同名导出，ES 模块会静默忽略歧义名——从 `@/api/index.js` 解构这两个名字会得到 `undefined`。业务代码均从具体子模块文件导入，故暂不影响运行。
- Cesium 页的场景保存 / 加载 / 删除尚未接入后端（既无接口调用也无本地缓存），场景持久化能力目前由画布页与场景管理页提供。

## 参与贡献

1. Fork 本仓库
2. 新建特性分支 `Feat_xxx`
3. 提交代码
4. 新建 Pull Request