From a4cc8ea2fa13e82f3c2943a4ced5d200e870813b Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Sat, 10 Oct 2026 17:56:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(flow-embed):=20=E5=8F=A3=E5=BE=84=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=99=A8=E6=94=B9=E3=80=8C=E4=BA=BA=E5=91=98=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE/=E7=A7=91=E5=AE=A4=E8=A7=86=E5=9B=BE=E3=80=8D?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8E=E8=A7=86=E5=9B=BE=E5=88=87=E6=8D=A2=E5=99=A8?=
 =?UTF-8?q?=E5=90=8C=E6=8E=92=E5=B8=B8=E9=A9=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 文案：按人员/按科室 → 人员视图/科室视图
- 排列（方案 A）：口径切换器移入 .embed-sec-h 标题行、紧跟视图切换器
  （.embed-mode-seg margin-left:14px，与父级 10px gap 叠加为 24px），不再独立成行右对齐
- 常驻修复：原在 <template v-if="viewMode==='node'"> 内 ⇒ 切到时间线/列表即消失，
  但口径对三视图都生效（时间线走 :mode、列表办理人列走 recordActor）⇒ 移出模板、三视图常驻
- CSS：删除已无引用的 .embed-mode-row；新增 .embed-mode-seg 并显式 font-weight:normal
  （同 .embed-view-seg：落在 .embed-sec-h(600) 内会继承粗体）
- 版式宽 740 下实测：标题 68 + 视图组 187 + 口径组 156 + 间隔 24 = 435 < 可用 700，不溢出
---
 src/views/flow/EmbedInstance.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/views/flow/EmbedInstance.vue b/src/views/flow/EmbedInstance.vue
index e96d663..92413a7 100644
--- a/src/views/flow/EmbedInstance.vue
+++ b/src/views/flow/EmbedInstance.vue
@@ -6,6 +6,8 @@
 // v2.4 版式（2026-10-10）：原「流程轨迹」+「审批记录」合并为「办理进度」三视图（按节点/时间线/列表），
 // 流程示意图与业务信息改为默认收缩的折叠块；业务信息只渲染约定键 bizSnapshot.summaryFields，
 // 无值整块不显示；bizSnapshot 其余键与 formDataJson 一律不再平铺（原始数据不外露）。
+// v2.5（2026-10-10）：口径切换器（人员视图/科室视图）与视图切换器同排在标题行、三视图常驻——口径实际对
+// 三个视图都生效（时间线走 :mode、列表走办理人列），原先只在「按节点」模板内会切视图即消失。
 import { ref, computed, onMounted, nextTick } from "vue";
 import { useRoute } from "vue-router";
 import { Tag } from "view-ui-plus";
@@ -26,7 +28,7 @@ function switchView(val: string) {
     viewMode.value = val;
 }
 
-/** 显示口径：dept=按科室 / user=按人员（缺省）。纯前端本地状态——嵌入页 URL 归子应用管，
+/** 显示口径：dept=科室视图 / user=人员视图（缺省）。纯前端本地状态——嵌入页 URL 归子应用管，
  *  改 query 会破坏 token 语义，不落 URL（与管理面 InstanceDetail 写 query 的动机不同） */
 const traceMode = ref<string>("user");
 function switchMode(val: string) {
@@ -341,16 +343,16 @@ onMounted(async () => {
                     <Radio label="timeline">时间线</Radio>
                     <Radio label="list">列表</Radio>
                 </RadioGroup>
+                <!-- 口径对三视图均生效（时间线走 :mode、列表走办理人列）⇒ 与视图切换器同排常驻；
+                     原先放在「按节点」模板内，切到时间线/列表就消失，与实际生效范围不符 -->
+                <RadioGroup class="embed-mode-seg" :model-value="traceMode" size="small" type="button" @on-change="switchMode">
+                    <Radio label="user">人员视图</Radio>
+                    <Radio label="dept">科室视图</Radio>
+                </RadioGroup>
             </div>
 
             <!-- ① 按节点：同节点多任务每人一行，步内保持后端任务序 -->
             <template v-if="viewMode === 'node'">
-                <div class="embed-mode-row">
-                    <RadioGroup :model-value="traceMode" size="small" type="button" @on-change="switchMode">
-                        <Radio label="user">按人员</Radio>
-                        <Radio label="dept">按科室</Radio>
-                    </RadioGroup>
-                </div>
                 <div class="embed-steps" v-if="nodeSteps.length">
                     <div v-for="(s, i) in nodeSteps" :key="`${s.type}-${s.nodeId || 'x'}-${i}`"
                          class="embed-step" :class="stepClass(s)">
@@ -433,11 +435,12 @@ onMounted(async () => {
     content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
     width: 3px; height: 13px; border-radius: 2px; background: #2d8cf0;
 }
-/* 视图切换器与下方「按人员/按科室」同为 iView small button group，实测几何/配色全同
-   （活动态 #0d9488、非活动 #515a6e/#dcdee2），唯一差异是字重：它落在 .embed-sec-h(600) 内
-   会继承粗体，而 .embed-mode-row 内是常规 ⇒ 视觉上「不一致」。显式回常规（管理面同款控件
-   InstanceDetail/TaskHandle 的 .trace-mode 也是这个写法）。 */
+/* 两处切换器（视图 / 口径）现同排在标题行，同为 iView small button group、几何与配色一致
+   （活动态 #0d9488、非活动 #515a6e/#dcdee2）。⚠️ 两者都落在 .embed-sec-h(600) 内 ⇒ 会继承粗体，
+   必须显式回常规（管理面同款控件 InstanceDetail/TaskHandle 的 .trace-mode 也是这个写法）。 */
 .embed-view-seg { margin-left: auto; font-weight: normal; }
+/* 口径紧随视图切换器：与 .embed-sec-h 的 10px gap 叠加为 24px，避免两组按钮被看成一排五选一 */
+.embed-mode-seg { margin-left: 14px; font-weight: normal; }
 
 /* 基本信息：四列等宽（740 抽屉实测放得下时间戳，超出省略号 + title 兜底） */
 .embed-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #f2f4f7; border-radius: 8px; overflow: hidden; }
@@ -447,7 +450,6 @@ onMounted(async () => {
 .embed-meta-v { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* 按节点视图 */
-.embed-mode-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
 .embed-steps { position: relative; }
 .embed-step { display: flex; gap: 11px; padding-bottom: 16px; position: relative; }
 .embed-step:last-child { padding-bottom: 2px; }