forge_admin/.qoder/plans/对象设计器 — 关系与级联 + 业务流程配置 页面优化.md

对象设计器 — 关系与级联 + 业务流程配置 页面优化

一、关系与级联页面（BusinessRelationDesigner.vue）

现状问题

• 右侧配置区展开 6 个 section 全部平铺（基础信息 / 匹配与回显 / 新增编辑内嵌 / 子表选择器 / 字段映射 / 审批后处理），信息爆炸
• 用户选完"关系类型 + 目标对象"后，剩余字段大部分可以自动推断，但都要手动填
• "字段联动"和"对象关系"混在一个页面，概念混乱
• 新手不知道最少需要配什么

设计方案：基本信息 + 高级配置折叠

布局改造

┌───────────────────────────────────────────────────────────────────┐
│ 关系与级联                                 [刷新] [新增关系] [保存] │
├────────────────┬──────────────────────────────────────────────────┤
│                │                                                  │
│ 对象关系       │  ┌─────────────────────────────────────────────┐ │
│  ● 采购明细    │  │ 基本信息                          [删除]     │ │
│  ○ 供应商      │  │ ─────────────────────────────────────────── │ │
│                │  │ 关系类型    目标对象     启用                 │ │
│ [+ 新增]       │  │ [包含明细▾] [采购明细▾]  [✓]                 │ │
│                │  │                                              │ │
│ ──────         │  │ 关系名称    匹配字段（自动推断）              │ │
│ 字段联动       │  │ [采购单→明细] id → purchase_id ✓ 已推断      │ │
│  ○ 供应商→省份 │  └─────────────────────────────────────────────┘ │
│  ○ 省份→城市   │                                                  │
│                │  ▶ 显示与内嵌 ──────────────────── [2项已配置]   │
│ [+ 新增联动]   │  ▶ 子表选择器 ─────────────────── [未启用]      │
│                │  ▶ 字段映射 ───────────────────── [3条映射]      │
│                │  ▶ 审批后处理 ─────────────────── [未启用]       │
│                │                                                  │
└────────────────┴──────────────────────────────────────────────────┘

具体改动

1. 基本信息区（始终可见）

只展示必要字段：

• 关系类型（下拉）
• 目标对象（下拉）
• 启用状态（开关）
• 关系名称（输入，可自动生成）
• 匹配字段状态标签（"id → purchase_id 已自动推断" 或点击可手动修改）

匹配字段的交互改进：

• 选完"目标对象"后，自动调用 autoInferRelationFields 推断 sourceFieldCode / targetFieldCode
• 推断成功显示绿色标签："已自动推断：id → purchase_id"
• 用户点击标签可展开修改
• 推断失败显示黄色提示："未能推断匹配字段，请手动选择"

2. 高级配置区（默认折叠，n-collapse）

将现有的 section 2-6 收入 4 个折叠面板：

面板标题	内容	右侧状态
显示与内嵌	新增表单维护/编辑表单维护/详情页展示/子表保存模式/详情页签/排序	"2项已开启" 或 "未配置"
子表选择器	启用开关/候选对象/按钮文案/选择器标题	"已启用" 或 "未启用"
字段映射	弹窗展示字段/搜索字段/映射规则/筛选条件	"3条映射" 或 "无映射"
审批后处理	启用开关/处理方式/归属字段/对象字段/数量字段	"已启用" 或 "未启用"

每个面板标题右侧显示配置摘要标签，让用户无需展开就知道状态。

3. 字段联动区（独立分隔线下方）

• 和"对象关系"在左侧 rail 中视觉分开（分隔线 + 独立区域）
• 联动规则用更简洁的卡片展示：供应商 → 过滤 → 省份 一行式
• 高级字段（字典配置/远程接口/请求方式）默认折叠

4. 自动推断增强

选择"目标对象"时自动：

• 推断 sourceFieldCode = "id"
• 推断 targetFieldCode = 当前对象Code的外键（如 purchase_id）
• 推断 displayField = 目标对象的 displayField 配置
• 如果是 DETAIL 类型，自动开启 inlineCreateEnabled / inlineEditEnabled / showInDetail

---

二、业务流程配置页面（BusinessFlowBindingPanel.vue）

现状问题

• "业务记录绑定"卡片展示 7 个底层字段（业务表/主键/租户/状态字段...），低代码用户看不懂
• "流程节点配置"卡片只是一个按钮 + 统计数字，空间浪费
• 右侧"运行摘要"和主内容大量重复
• 用户的正常路径是"选流程 → 绑好 → 配回调"，但页面没有引导

设计方案：精简 + 自动推断

布局改造

┌────────────────────────────────────────────────────────────────────┐
│ 流程与自动化                                    [刷新] [保存流程]   │
├────────────────────────────────────────────────────────────────────┤
│                                                                    │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 1. 选择流程模型                              [已绑定 ✓]         │ │
│ │ ──────────────────────────────────────────────────────────────  │ │
│ │ 流程模型           谁来发起                                     │ │
│ │ [采购审批流程 ▾]    [用户点击按钮 ▾]                             │ │
│ │                                                                 │ │
│ │ 流程标题模板                                                    │ │
│ │ [${applicant}-${opportunityName}-采购审批_______________]        │ │
│ └────────────────────────────────────────────────────────────────┘ │
│                                                                    │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 2. 流程节点一览                     3个审批节点 · 配置字段权限   │ │
│ │ ──────────────────────────────────────────────────────────────  │ │
│ │  节点名称          审批人         表单权限状态                   │ │
│ │  ├── 部门经理审批  角色:部门经理   ✓ 已配置 (5/12字段)           │ │
│ │  ├── 财务审核      角色:财务       ⚠ 未配置                     │ │
│ │  └── 总经理审批    角色:总经理     ✓ 已配置 (8/12字段)           │ │
│ │                                                                 │ │
│ │              [打开流程设计器 →]                                  │ │
│ └────────────────────────────────────────────────────────────────┘ │
│                                                                    │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 3. 审批结果动作                              2个动作已配置       │ │
│ │ ──────────────────────────────────────────────────────────────  │ │
│ │  审批通过后        审批驳回后        流程取消后                   │ │
│ │  [更新状态为已通过▾] [回退为草稿▾]    [— 不处理 —▾]              │ │
│ └────────────────────────────────────────────────────────────────┘ │
│                                                                    │
│ ▶ 高级配置 ─────────────────────────────────── [业务记录绑定]     │
│   接入方式: 低代码对象（自动）                                     │
│   状态字段: flow_status                                            │
│   标题字段: title                                                  │
│                                                                    │
└────────────────────────────────────────────────────────────────────┘

具体改动

1. 去掉右侧摘要栏

现有 <aside class="flow-side"> 中的"运行摘要"信息和主内容完全重复。去掉后主内容区全宽，信息更清晰。

2. "业务记录绑定"卡片 → 收入高级折叠

对低代码对象（大多数场景），绑定是全自动的：

• 接入方式 = "低代码对象"（自动）
• 业务表 = 对象发布后自动填充
• 主键字段 = id
• 租户字段 = tenant_id
• 状态字段 = 自动推断（从表单字段中找 flow_status 或 status）
• 标题字段 = 自动推断（从表单字段中找 title 或 name）

改造：

• 默认场景（低代码对象）隐藏这个卡片，改为底部一个折叠面板"高级配置 > 业务记录绑定"
• 自动推断 statusField 和 titleField
• 只在"简单业务表"或"代码适配器"模式时展开完整配置

3. "流程节点配置"卡片 → 改为节点列表

现有卡片只有一个"打开流程设计器"按钮，浪费空间。改为直接展示节点列表：

• 表格行：节点名称 | 审批人（摘要） | 表单权限状态
• 每行可点击直接跳转到该节点的配置
• 底部保留"打开流程设计器"按钮
• 如果没有节点数据，显示"选择流程模型后自动读取节点信息"

4. 整体结构改为带编号的步骤卡片

用 1/2/3 编号暗示操作顺序：

1. 选择流程模型（必填）
2. 流程节点一览（只读 + 快捷入口）
3. 审批结果动作（可选）
4. 高级配置（折叠）

---

文件变更清单

文件	操作	说明
BusinessRelationDesigner.vue	重构模板	基本信息区精简 + 高级配置折叠 + 自动推断增强
BusinessFlowBindingPanel.vue	重构模板	去右侧摘要 + 业务绑定收折叠 + 节点列表 + 编号步骤

实施顺序

1. 关系页面 — 基本信息精简 + 匹配字段自动推断标签（体感改善最大）
2. 关系页面 — 高级配置折叠 + 状态摘要标签
3. 流程页面 — 去右侧摘要 + 业务绑定折叠 + 自动推断
4. 流程页面 — 节点列表展示 + 编号步骤卡片