设计器前端工程¶

宿主 obpm-designer-vue3 + 嵌入库群。总览见 [[frontend-architecture]]。

1. 宿主 obpm-designer-vue3¶

Vue 3 + TS + Vite 6 + Element Plus 2.9（zh-cn）+ Vuex 4 + vue-i18n（zh-CN/zh-TW/en-US）。构建：npm run build（vue-tsc 类型检查 + vite build，base: './' 相对路径部署）。

路由结构（hash 模式）¶

flowchart TD
    L["/login"] --> H["/home（Home.vue 主布局）"]
    H --> SL["softwarelist 软件列表"]
    H --> UI["userinfo / baseicinformation"]
    H --> APP["apps/:appId（SoftwareDetails 应用工作区壳）"]
    APP --> BASE["base 应用基本信息"]
    APP --> MOD["modules/:moduleId<br/>（含 new / :id）"]
    APP --> RES["modules/:moduleId/<b>forms|views|processes|charts|reports|cross-reports</b><br/>各含 /new 与 /:id"]
    APP --> COM["common/*<br/>roles·tasks·status-labels·widgets·big-screens·pc-menu·mobile-menu"]
    APP --> ADV["advanced/*<br/>developer·excel-conf·eip·metadata·data-sources·data-models·api-interfaces·out-interfaces"]
    APP --> LIB["libraries/:libType · multi-languages · cb-info"]

beforeEach 把 route.params.appId/moduleId 同步到 sessionStorage 与 Pinia useAppStore；登录态由 sessionStorage.token 控制。

分层¶

层	位置	说明
API	`src/service/`	`ajax.js`（Axios 实例，401→登录页；PUT/DELETE 转 POST + `_method` 参数）+ 按域分模块（ModulesApi/FormApi/ViewApi/ReportApi/BigScreenApi/LibraryAPI/MultiLanguageAPI/AdvancedToolAPI/CommontoolsAPI）+ 路径常量（`staticPath.js`/`contextPath.js`）
桥实现	`src/service/*HostBridge.js`	`HostRequestBridgeImpl`（表单设计器）、`HostWorkflowRequestBridge`（流程）、`ObpmPrintHostBridge`、`ObpmExcelHostBridge`——各嵌入库的宿主侧适配
组件	`src/components/Modules/`	表单/视图/流程/统计图/报表/交叉报表/大屏等业务模块组件
状态	`src/store.js`（Vuex）	`params`（appId/appName）、菜单树选中、各设计器可见性标志、`dataSourceId`、`formData` 等

2. 嵌入库群¶

obpm-designer-web-formbuilder2（表单设计器，二代 webpack）¶

产物形态：UMD npm 库，main: dist/formDesign.js，默认导出 render；npm run build → dist/，npm pack 发布
双桥契约（component-usage.md）：render(el, { hostActionBridge, hostRequestBridge, ... })；桥必传，挂到内部 FormApp 实例
独立开发：npm run watch + 根目录 index.html（Live Server）；假数据桥 src/utility/FakeHostRequestBridge.js
画布约定：Props 面板不直接操作画布 DOM，DOM 操作集中在画布侧 AbstractElement

产出即 .form 的 templatecontext（JsonTemplate：fields + layout.pc/mobile.formPanel 树 + 可选 mobileAutoLayout；字段布局键写在 fieldRef，不进 fields），Schema 见 [[../workspace-mechanism/xml-schemas/form-file]]。

obpm-designer-workflow（流程编辑器，Vite + AntV G6 5）¶

src/
├── embed.js          # 嵌入宿主入口
├── editor/           # FlowEditor、propertyPanel（属性面板）、nodePanels、
│                     # nodeActionOverlay / edgeActionOverlay（节点/线浮动操作）、
│                     # flowHistoryPanel、paramPassingDialog（子流程参数传递）
├── g6/               # G6 图定制（节点/边渲染）
├── service/          # 经桥转发的 API 封装
└── constants/ utils/

产出即 .flow 内嵌的 FlowDiagram JSON（短 className + subelems；加载兼容旧 XML）。后端对应 cn.myapps.core.runtime.workflow.element.*，见 [[../java/classes/workflow-node-hierarchy]]。保存：payload.flow 为 JSON 字符串；磁盘上 <flow> 用 CDATA 包裹。GET 详情须保持 flow 为字符串（勿让 json-lib 把 {...} morph 成对象）。监控图走 FlowDiagram.toJSON()。

其余嵌入库¶

库	集成桥	产出
obpm-designer-printer	`ObpmPrintHostBridge`	打印模板（模块下 `*.report`）
obpm-designer-excelimp	`ObpmExcelHostBridge`	`.excelconfig` 的 jsonTemplate
obpm-designer-datamodelbuilder	ESM/UMD 双产物	数据模型
obpm-designer-bigscreen	独立预览模式（`PREVIEW_STANDALONE_README.md`）	应用 `bigscreen/` 大屏
obpm-iscript-editor	Monaco + `baselib.api.ts`（iScript API 补全源；含 `executeQLExpress`）	脚本编辑器（表单/视图/任务脚本字段共用）

旧设计器 obpm-designer-web-camel¶

一代 jQuery+Bootstrap 多页应用，维护态（README 仅注意事项，无新功能开发）；新需求一律走 obpm-designer-vue3 宿主体系。

3. 嵌入时序（以表单设计器为例）¶

sequenceDiagram
    participant U as 设计者
    participant H as 宿主 FormFormat.vue
    participant F as formDesign.render()
    participant B as HostRequestBridgeImpl
    participant S as 后端 designtime

    U->>H: 打开表单编辑
    H->>F: render(el, {hostRequestBridge:B, hostActionBridge:…})
    F->>B: http(GET …/forms/{id})
    B->>S: Axios（统一鉴权）
    S-->>B: Form JSON（templatecontext）
    B-->>F: 响应
    F->>F: 解析 JsonTemplate 渲染画布
    U->>F: 拖拽字段/改属性
    F->>B: http(PUT …/forms/{id})
    B->>S: 保存（触发动态表同步副作用）
    F->>H: hostActionBridge.onSaved()