Web 前端架构总览¶

源码：trunk2018/web（20 个子工程，独立 git 仓库集合）。后端总览见 [[../java/backend-architecture]]。

OBPM 前端按**使用者角色**分为四类工程，技术栈**三代并存**（历史演进未做统一迁移）：

代际	技术栈	工程示例
一代（静态）	多页 HTML + jQuery，无构建，原样部署	`obpm-signon-web`、`obpm-runtime-web`（静态部分）、`obpm-designer-web-camel`
二代（webpack + npm 库）	Webpack，产物发布为 UMD npm 库供宿主嵌入	`obpm-designer-web-formbuilder2`（表单设计器）、`obpm-designer-bigscreen`、`obpm-report-olap`
三代（Vite + Vue3 + TS）	Vite 6、Vue 3、Element Plus、Pinia/Vuex、vue-i18n	`obpm-designer-vue3`、`obpm-runtime-web/portal/vue3`、`obpm-kms-pc` 等

1. 工程地图（按角色）¶

flowchart TD
    subgraph LOGIN["登录（一代静态）"]
        SIGNON["obpm-signon-web<br/>登录/多域选择/扫码 jQuery"]
    end
    subgraph DESIGNER["设计器（宿主 + 嵌入库）"]
        VUE3["obpm-designer-vue3 ★宿主<br/>Vue3+Vite+ElementPlus"]
        FB2["obpm-designer-web-formbuilder2<br/>表单设计器（UMD 库）"]
        WF["obpm-designer-workflow<br/>流程编辑器（AntV G6 5）"]
        PRINT["obpm-designer-printer<br/>打印模板"]
        DM["obpm-designer-datamodelbuilder"]
        EXCEL["obpm-designer-excelimp<br/>Excel 导入配置"]
        BIG["obpm-designer-bigscreen（webpack）"]
        EDITOR["obpm-iscript-editor<br/>iScript Monaco 编辑器"]
        CAMEL["obpm-designer-web-camel<br/>旧设计器（jQuery，维护态）"]
    end
    subgraph RUNTIME["运行时（用户侧）"]
        PORTAL["obpm-runtime-web/portal/vue3 ★门户<br/>流程/表单渲染/视图/待办"]
        MOBILE["obpm-runtime-mobile-vue3<br/>移动端"]
        RTSTATIC["obpm-runtime-web 静态部分<br/>UEditor/viewer/login"]
    end
    subgraph BIZ["业务域前端"]
        KMS_PC["obpm-kms-pc"]
        KMS_MOB["obpm-kms-mobile"]
        MGR["obpm-manager-vue3<br/>管理中心"]
        MON["obpm-manager-monitor"]
        OLAP["obpm-report-olap（webpack 库）"]
        JOB["obpm-job-web"]
        CONV["obpm-converter-web<br/>预览转换静态页"]
    end

    SIGNON -->|登录成功| PORTAL
    VUE3 -->|"hostRequestBridge 嵌入"| FB2
    VUE3 -->|"embed 嵌入"| WF
    VUE3 -->|嵌入| PRINT & DM & EXCEL & BIG & EDITOR
    PORTAL -->|读设计产物| RTSTATIC

★ = 该角色的核心工程。obpm-designer-vue3 是设计器**宿主**（应用/模块/视图/菜单管理等页面自身实现），重编辑器以 npm 库/子应用嵌入（机制见 §3）。

2. 各工程速览¶

工程	代际	职责	备注
obpm-signon-web	一代	登录门户：账密/扫码（微信/钉钉）/多域选择	`signon.config.js` 全局路径配置；`Api` 对象 jQuery 封装；checkin→signin 两步登录
obpm-designer-vue3	三代	设计器宿主：软件/模块/表单列表/视图/菜单/角色/常用工具/高级工具	hash 路由 `apps/:appId/...`；Vuex（Pinia 仅示例）；Axios PUT/DELETE 转 POST `_method`
obpm-designer-web-formbuilder2	二代	表单设计器画布（拖拽/属性面板/JsonTemplate）	UMD 库 `dist/formDesign.js`，`render()` + 双桥契约
obpm-designer-workflow	三代(Vite)	流程图编辑器	AntV G6 5；`src/editor/`（propertyPanel/nodePanels/FlowEditor）；经 `embed.js` 嵌入宿主
obpm-designer-printer	三代	打印模板设计器	宿主桥 `ObpmPrintHostBridge`
obpm-designer-excelimp	三代	Excel 导入配置（jsonTemplate 编辑）	桥 `ObpmExcelHostBridge`
obpm-designer-datamodelbuilder	二代	数据模型构建器（ESM/UMD 双产物）
obpm-designer-bigscreen	二代	大屏设计器	webpack；独立预览模式
obpm-iscript-editor	二代	iScript 编辑器	Monaco（`editor.worker.bundle.js`、`baselib.api.ts` iScript API 提示）
obpm-designer-web-camel	一代	旧版设计器（jQuery+Bootstrap）	维护态，勿新增功能
obpm-runtime-web	一代+三代	运行时静态资源集：`portal/vue3`（门户）、`login/`、`UEditor/`、`viewer/`（pdf/wps）、钉钉/飞书回调页
obpm-runtime-mobile-vue3	三代	移动端运行时	含天地图（TIANDITU）集成
obpm-kms-pc / obpm-kms-mobile	三代	KMS 知识管理 PC/移动	Vue 3.5 + CodeMirror
obpm-manager-vue3	三代	管理中心（域/用户/软件分配）	有 CLAUDE.md
obpm-manager-monitor	三代	监控面板	ECharts
obpm-report-olap	二代	OLAP 报表组件（`lib/obpm-report.js`）	webpack 三配置；mondrian XMLA
obpm-job-web	三代	定时任务管理页
obpm-converter-web	一代	文件转换预览静态页（office/image/audio/3D glb/ifc）	按格式分目录

3. 宿主-嵌入桥接机制（设计器工程的核心模式）¶

重编辑器不整进宿主仓库，而是**独立构建为库 + 桥接契约**嵌入 obpm-designer-vue3：

flowchart TD
    HOST["宿主 obpm-designer-vue3<br/>src/service/*HostBridge.js"] -->|"render(el, options)<br/>options.hostRequestBridge / hostActionBridge"| LIB["嵌入库<br/>formbuilder2 / workflow / printer / excelimp …"]
    LIB -->|"hostRequestBridge.http(config)<br/>库内不发真实请求，全部转发宿主"| HOST
    LIB -->|"hostActionBridge.onXxx()<br/>通知宿主（保存/选资源等）"| HOST
    HOST -->|Axios| BE["后端 /api/designtime/*"]

桥	方向	职责
`hostRequestBridge`	库 → 宿主	库内所有 HTTP 经宿主 Axios 发出（统一鉴权/代理/上下文路径）；宿主实现如 `HostRequestBridgeImpl.js`、`HostWorkflowRequestBridge.js`
`hostActionBridge`	库 → 宿主	动作回调（保存、打开资源选择器等），formbuilder2 挂在 `FormApp` 实例

价值：编辑器库零后端耦合（换宿主只换桥）、独立发版（npm pack）、可独立预览（FakeHostRequestBridge.js 假数据跑通）。

4. 前后端交互¶

端	后端入口	开发代理
设计器宿主	网关 `/designer/*` → designtime REST（`/api/designtime/applications/{appId}/...`）	Vite 代理 `/designer` → `localhost:8888`
运行时门户	网关 `/obpm/*` → runtime REST；`magic-static/{软件名}/` 静态托管	Vite 代理多前缀（`/obpm`、`/static`、`/converter`…）→ `localhost:8888`（Lite）
登录页	`/signon/api/*`（checkin/signin/getDomainList）；`signonPath`/`runtimePath` 由 `signon.config.js` 配置	微服务/传统双模式路径解析
KMS	网关 `/kms/*`	`/static/kms/kmspc` 代理

后端路由详见 [[../java/backend-architecture]] §3；workspace 设计产物（.form/.view…）机制见 [[../workspace-mechanism/overview]]。

5. 专题文档¶

文档	内容
[[designer-frontend]]	设计器宿主与嵌入库的工程细节（路由、桥契约、构建发布）
[[runtime-portal]]	运行时门户（表单渲染/视图/流程中心组件结构）