vue3）¶

用户侧核心前端：流程办理、表单渲染、视图展示、待办中心。总览见 [[frontend-architecture]]；表单定义 Schema 见 [[../workspace-mechanism/xml-schemas/form-file]]。

1. 工程定位¶

Vue 3 组合式 API（<script setup>，旧组件选项式）+ Vite + Element Plus + Pinia + Vue Router（hash）+ vue-i18n + Axios + SCSS； Handsontable（Sheet 视图）、ECharts（图表/仪表盘）；jQuery 全局保留（window.$，遗留脚本注入用）。开发时 Vite 代理多前缀（/obpm、/static、/converter、/static/kms/kmspc…）到 localhost:8888（Lite 单体）。

2. 组件体系（src/components/）¶

门户的组件目录即**运行时能力的分块**：

flowchart TD
    MAIN["main/ 主框架<br/>门户布局·菜单·导航"]
    FC["flowcenter/ 流程中心<br/>launch·pending·processing·unread·read·meter"]
    FORM["form/ 表单容器<br/>按 JsonTemplate 动态渲染"]
    FIELD["field/ 字段渲染器<br/>o_input·o_date_picker·o_select…<br/>o_file_kms·o_flow_history·o_gps…"]
    VIEW["view/ 视图渲染<br/>列表·树·日历·甘特·折叠·卡片"]
    ACT["activity/ 工具栏操作<br/>保存·提交·打印…（.activity 定义）"]
    WIDGET["widget/ 首页组件"]
    AI["ai_assistant/ AI 助手"]
    DIALOG["o_action_dialog/ 操作弹层"]

    MAIN --> FC & FORM & VIEW & WIDGET
    FORM --> FIELD
    FORM --> ACT
    VIEW --> ACT
    ACT --> DIALOG

关键机制——字段渲染器映射：form/ 拿到 .form 的 templatecontext（JsonTemplate）后，field/field.js 按 fields[].scope 分发到对应 o_*.vue 渲染器（与后端 FormField 子类一一对应，见 [[../java/classes/form-field-hierarchy]]）——设计器定义什么字段，运行时就渲染什么控件，同构映射。

标题栏是否显示由当前布局 fieldRef.showTitle 决定（Java 编译到字段包装 HTML 的 showTitle 属性；PC 端 field_label.vue 读 isFieldTitleVisible，Mobile 端 CSS 按 .baseField[showtitle=false] 隐藏）。自定义 mobile 布局时必须以包装 HTML 为准，不能只信 PC 解析出的字段 JSON。

3. 路由（hash 模式）¶

路由	组件	用途
`/`	`views/Main.vue`	门户主布局
`/launch`	`flowcenter/main_launch.vue`	发起流程
`/pending` / `/processing`	`flowcenter/*`	待办 / 经办
`/unread` / `/read`	`flowcenter/*`	未读 / 已读（消息）
`/meter`	仪表盘
`/open`	`views/Opener.vue`	统一资源打开入口（菜单/待办跳转进表单或视图）
`/printView` / `/formPrint` / `/print_pdf`	Print*.vue	打印/表单打印/PDF
`/ui-spec`	`views/UiSpec.vue`	UI 规范页

路由按 chunk 懒加载（webpackChunkName 注释）。

4. 静态伴生资源（obpm-runtime-web 其余部分）¶

目录/文件	用途
`login/`	登录落地页（与 signon-web 配合）
`UEditor/`	富文本编辑器（HTMLEditorField 字段的运行时控件）
`viewer/pdf`、`viewer/wps`	文档在线预览
`dingding.html`、`feishu.html`	钉钉/飞书 OAuth 回调页
`config.js`	全局配置

这些与 portal/vue3 同仓不同代——门户是 Vite 工程，伴生资源是原样部署的静态文件，由后端 magic-static / /static 路径托管。

5. 一次流程办理的数据流¶

sequenceDiagram
    participant U as 用户
    participant P as 门户 /pending
    participant R as 后端 runtime
    participant F as form/ + field/

    U->>P: 打开待办
    P->>R: GET 待办列表（ActorRT 视图）
    R-->>P: 待办（docId + formId + flowState）
    U->>P: 点击办理
    P->>R: GET 文档 + Form 定义（templatecontext）
    R-->>P: Document/Items + JsonTemplate
    P->>F: 按 scope 分发渲染 o_* 字段
    U->>F: 填写并点工具栏（activity type=5 流程处理）
    F->>R: 保存文档（TLK_）+ 流程流转（FlowStateRT/NodeRT/ActorRT）
    R-->>P: 下一节点待办人
    P->>U: 办结/刷新待办

后端运行态实体与表见 [[../java/classes/workflow-node-hierarchy]] 与 [[../table-schema/core-tables]]。