feat(ui): 详情页父子导航/列表链接按钮/办件详情内嵌流程图（办件进度抽屉数据源就绪）

src/components/layout.vue

@@ -49,7 +49,7 @@ const menuArr = computed(() => flaten(modList.value));
 
 const routeChange = (to: any) => {
     const meta: any = to.meta || {};
-    const { modId, title, parentId } = meta;
+    const { modId, title } = meta;
     const navArr: any[] = [];
 
     // 优先按 path 匹配菜单（平台模块 id 与路由 meta.modId 不保证一致），
@@ -68,6 +68,9 @@ const routeChange = (to: any) => {
         return;
     }
 
+    // 详情页父级（左侧高亮 + 面包屑"父页＞本页"）：路由 meta.parentId 静态默认，
+    // 可被来源列表跳转时的 ?pid=<父菜单modId> 动态覆盖（同一详情页多个入口，UserBase 同款范式）
+    const parentId = Number(to.query?.pid) || meta.parentId;
     if (parentId) {
         const parent = menuArr.value.find((x: any) => x.modId === parentId);
         if (parent) {

src/router/routes.ts

@@ -7,6 +7,10 @@ import type { RouteRecordRaw } from "vue-router";
  * ② meta.modId = 对应 app_module.custom_id（后端 FlowBaseController 取 custom_id 作 modId）。
  * 数据/授权维护见 UserBase 侧「模块管理」与 flow-center接入UserBase菜单.sql。
  * 办理页 /task/:taskId 为 UserMsg jumpPath 落地页（不挂菜单）。
+ * <p>
+ * 详情/深链页（不挂菜单）通过 meta.parentId 关联父级菜单（UserBase 同款范式）：左侧菜单保持
+ * 父级高亮、面包屑补全"父页＞本页"。同一详情页可能被多个列表进入（如办件详情既可从"我的办件"
+ * 也可从"办件记录"），此时列表页跳转带 ?pid=<父菜单modId> 动态覆盖 meta.parentId 静态默认。
  */
 const routes: RouteRecordRaw[] = [
     {
@@ -25,20 +29,21 @@ const routes: RouteRecordRaw[] = [
         path: "/task/:taskId",
         name: "flow_task_handle",
         component: () => import("@/views/flow/TaskHandle.vue"),
-        meta: { title: "任务办理" },
+        // 父级默认指向我的待办所在的"工作台"（外部消息落地页无 pid，走静态默认）
+        meta: { title: "任务办理", parentId: 100 },
     },
     {
         path: "/instance/:instanceId",
         name: "flow_instance_detail",
         component: () => import("@/views/flow/InstanceDetail.vue"),
-        meta: { title: "办件详情" },
+        meta: { title: "办件详情", parentId: 102 },
     },
     {
         // 流程示意图深链页（不挂菜单，同 /task/:taskId 模式）；跨应用入口 window.open 整页跳转
         path: "/diagram",
         name: "flow_diagram",
         component: () => import("@/views/flow/FlowDiagram.vue"),
-        meta: { title: "流程示意图" },
+        meta: { title: "流程示意图", parentId: 103 },
     },
     {
         path: "/admin/instances",
@@ -58,7 +63,7 @@ const routes: RouteRecordRaw[] = [
         path: "/admin/defs/editor",
         name: "flow_def_editor",
         component: () => import("@/views/flow/admin/def-editor/index.vue"),
-        meta: { title: "流程编辑器" },
+        meta: { title: "流程编辑器", parentId: 103 },
     },
     {
         path: "/admin/maps",

src/views/flow/InstanceDetail.vue

@@ -53,6 +53,9 @@ const branchText = computed(() => {
     return `${arrived}/${branches.length} 分支已到达汇聚点`;
 });
 
+/** 流程示意图图片直嵌（2026-09-16 "CAS 验证码式"：后端 /diagram.png 返回 PNG 流，img 直显） */
+const diagramSrc = computed(() => `/api/flow/diagram.png?instanceId=${route.params.instanceId}`);
+
 function statusName(s: number) {
     return INSTANCE_STATUS[s] || s;
 }
@@ -110,6 +113,14 @@ onMounted(async () => {
             </template>
         </Card>
 
+        <Card class="block" :bordered="false" dis-hover>
+            <template #title>
+                流程示意图
+                <a class="diagram-more" @click="router.push({ path: '/diagram', query: { instanceId: String(route.params.instanceId) } })">查看大图</a>
+            </template>
+            <img class="diagram-img" :src="diagramSrc" alt="流程示意图" />
+        </Card>
+
         <Card class="block" :bordered="false" dis-hover>
             <template #title>流程轨迹</template>
             <Timeline>
@@ -145,6 +156,9 @@ export default { methods: { taskStatusName } };
 .k { width: 120px; color: #888; flex-shrink: 0; }
 .v { white-space: pre-wrap; word-break: break-all; }
 .muted { color: #999; }
+.diagram-box { display: flex; justify-content: center; }
+.diagram-img { max-width: 100%; }
+.diagram-more { float: right; font-size: 12px; font-weight: normal; margin-right: 16px; }
 .node { font-weight: 600; margin-right: 6px; }
 .opinion { color: #666; }
 .time { color: #aaa; font-size: 12px; }

src/views/flow/MyInstances.vue

@@ -4,6 +4,7 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import { flowApi, INSTANCE_STATUS } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const router = useRouter();
 const loading = ref(false);
@@ -23,13 +24,13 @@ const columns = [
     { title: "当前节点", key: "currentNodes", width: 150 },
     { title: "提交时间", width: 170, render: (h: any, p: any) => h("span", (p.row.submitTime || "").replace("T", " ")) },
     { title: "办结时间", width: 170, render: (h: any, p: any) => h("span", (p.row.finishTime || "").replace("T", " ") || "-") },
-    { title: "操作", width: 180, render: (h: any, p: any) => {
+    { title: "操作", width: 150, render: (h: any, p: any) => {
-        const btns = [h("Button", { size: "small", onClick: () => router.push(`/instance/${p.row.instanceId}`) }, () => "详情")];
+        const btns = [Utils.operatingTextHandle(h, "详情", "", () => router.push(`/instance/${p.row.instanceId}?pid=101`))];
         if (p.row.status === 10) {
-            btns.push(h("Button", { size: "small", onClick: () => onWithdraw(p.row) }, () => "撤回"));
+            btns.push(Utils.operatingTextHandle(h, "撤回", "", () => onWithdraw(p.row)));
-            btns.push(h("Button", { size: "small", onClick: () => onUrge(p.row) }, () => "催办"));
+            btns.push(Utils.operatingTextHandle(h, "催办", "", () => onUrge(p.row)));
         }
-        return h("div", { style: "display:flex;gap:4px" }, btns);
+        return btns;
     } },
 ];
 

src/views/flow/Workbench.vue

@@ -4,6 +4,7 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import { flowApi, TASK_STATUS, INSTANCE_STATUS } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const router = useRouter();
 const tab = ref<"todo" | "done">("todo");
@@ -18,7 +19,7 @@ const todoColumns = [
     { title: "当前节点", key: "nodeName", width: 160 },
     { title: "提交人", key: "submitter", width: 100, render: (h: any, p: any) => h("span", p.row.submitterName || "-") },
     { title: "到达时间", key: "arriveTime", width: 170, render: (h: any, p: any) => h("span", (p.row.arriveTime || "").replace("T", " ")) },
-    { title: "操作", width: 90, render: (h: any, p: any) => h("Button", { size: "small", type: "primary", onClick: () => goHandle(p.row) }, () => "办理") },
+    { title: "操作", width: 90, render: (h: any, p: any) => Utils.operatingTextHandle(h, "办理", "", () => goHandle(p.row)) },
 ];
 
 const doneColumns = [
@@ -28,7 +29,7 @@ const doneColumns = [
     { title: "意见", key: "opinion", minWidth: 140 },
     { title: "办理时间", width: 170, render: (h: any, p: any) => h("span", (p.row.handleTime || "").replace("T", " ")) },
     { title: "办件状态", width: 100, render: (h: any, p: any) => h("span", INSTANCE_STATUS[p.row.instanceStatus] || p.row.instanceStatus) },
-    { title: "操作", width: 90, render: (h: any, p: any) => h("Button", { size: "small", onClick: () => router.push(`/instance/${p.row.instanceId}`) }, () => "详情") },
+    { title: "操作", width: 90, render: (h: any, p: any) => Utils.operatingTextHandle(h, "详情", "", () => router.push(`/instance/${p.row.instanceId}?pid=100`)) },
 ];
 
 function submitterNameFallback(row: any) {
@@ -36,7 +37,7 @@ function submitterNameFallback(row: any) {
 }
 
 function goHandle(row: any) {
-    router.push(`/task/${row.taskId}`);
+    router.push(`/task/${row.taskId}?pid=100`);
 }
 
 async function load() {

src/views/flow/admin/Callbacks.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted } from "vue";
 import { Message, Modal } from "view-ui-plus";
 import { flowApi } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const LOG_STATUS: Record<number, string> = { 0: "待推/重试中", 1: "成功", 2: "死信" };
 const EVENT_OPTIONS = ["flow.submitted", "flow.task.created", "flow.task.handled", "flow.completed", "flow.rejected", "flow.withdrawn"];
@@ -19,11 +20,10 @@ const regColumns = [
     { title: "订阅事件", key: "eventTypes", width: 200, render: (h: any, p: any) => h("span", p.row.eventTypes || "全部") },
     { title: "状态", width: 80, render: (h: any, p: any) => h("Tag", { color: p.row.status === 0 ? "green" : "gray" }, () => (p.row.status === 0 ? "启用" : "停用")) },
     { title: "操作", width: 220, render: (h: any, p: any) => {
-        const btns: any[] = [
+        return [
-            h("Button", { size: "small", onClick: () => onRegStatus(p.row, p.row.status === 0) }, () => (p.row.status === 0 ? "停用" : "启用")),
+            Utils.operatingTextHandle(h, p.row.status === 0 ? "停用" : "启用", "", () => onRegStatus(p.row, p.row.status === 0)),
-            h("Button", { size: "small", type: "warning", onClick: () => onResetSecret(p.row) }, () => "重置secret"),
+            Utils.operatingTextHandle(h, "重置secret", "text-error", () => onResetSecret(p.row)),
         ];
-        return h("div", { style: "display:flex;gap:4px" }, btns);
     } },
 ];
 
@@ -60,7 +60,7 @@ const hungColumns = [
     { title: "末次结果", key: "lastError", minWidth: 220, render: (h: any, p: any) => h("span", p.row.lastError || p.row.lastHttpStatus || "-") },
     { title: "下次重推", width: 160, render: (h: any, p: any) => h("span", (p.row.nextRetryTime || "").replace("T", " ") || "-") },
     { title: "操作", width: 120, render: (h: any, p: any) =>
-        h("Button", { size: "small", type: "error", onClick: () => onMarkDead(p.row) }, () => "标记死信") },
+        Utils.operatingTextHandle(h, "标记死信", "text-error", () => onMarkDead(p.row)) },
 ];
 
 async function loadRegs() {

src/views/flow/admin/Defs.vue

@@ -6,6 +6,7 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import { flowApi } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const router = useRouter();
 const DEF_STATUS: Record<number, string> = { 0: "草稿", 1: "已发布", 2: "停用" };
@@ -25,18 +26,18 @@ const columns = [
     } },
     { title: "GUID", key: "flowGuid", width: 200 },
     { title: "发布时间", width: 160, render: (h: any, p: any) => h("span", (p.row.publishTime || "").replace("T", " ") || "-") },
-    { title: "操作", width: 330, render: (h: any, p: any) => {
+    { title: "操作", width: 320, fixed: "right", render: (h: any, p: any) => {
         const btns: any[] = [];
         if (p.row.status === 0) {
-            btns.push(h("Button", { size: "small", type: "primary", onClick: () => onEdit(p.row) }, () => "编辑"));
+            btns.push(Utils.operatingTextHandle(h, "编辑", "", () => onEdit(p.row)));
-            btns.push(h("Button", { size: "small", type: "success", onClick: () => onPublish(p.row) }, () => "发布"));
+            btns.push(Utils.operatingTextHandle(h, "发布", "", () => onPublish(p.row)));
         } else if (p.row.status === 1) {
-            btns.push(h("Button", { size: "small", onClick: () => onNewVersion(p.row) }, () => "升版本"));
+            btns.push(Utils.operatingTextHandle(h, "升版本", "", () => onNewVersion(p.row)));
-            btns.push(h("Button", { size: "small", type: "warning", onClick: () => onOffline(p.row) }, () => "停用"));
+            btns.push(Utils.operatingTextHandle(h, "停用", "text-error", () => onOffline(p.row)));
         }
-        btns.push(h("Button", { size: "small", onClick: () => onDiagram(p.row) }, () => "图示"));
+        btns.push(Utils.operatingTextHandle(h, "图示", "", () => onDiagram(p.row)));
-        btns.push(h("Button", { size: "small", onClick: () => onVersions(p.row) }, () => "版本历史"));
+        btns.push(Utils.operatingTextHandle(h, "版本历史", "", () => onVersions(p.row)));
-        return h("div", { style: "display:flex;gap:4px" }, btns);
+        return btns;
     } },
 ];
 

src/views/flow/admin/Instances.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { flowApi, INSTANCE_STATUS } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const router = useRouter();
 const loading = ref(false);
@@ -21,7 +22,7 @@ const columns = [
     { title: "提交人", key: "submitterName", width: 100 },
     { title: "提交时间", width: 160, render: (h: any, p: any) => h("span", (p.row.submitTime || "").replace("T", " ")) },
     { title: "操作", width: 90, render: (h: any, p: any) =>
-        h("Button", { size: "small", onClick: () => router.push(`/instance/${p.row.id}`) }, () => "详情") },
+        Utils.operatingTextHandle(h, "详情", "", () => router.push(`/instance/${p.row.id}?pid=102`)) },
 ];
 
 async function load() {

src/views/flow/admin/Maps.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted } from "vue";
 import { Message } from "view-ui-plus";
 import { flowApi } from "@/api/module/flow";
+import Utils from "@/utils";
 
 const loading = ref(false);
 const deptKeyFilter = ref("");
@@ -60,7 +61,7 @@ const columns = [
     { title: "状态", width: 90, render: (h: any, p: any) => h("Tag", { color: p.row.status === 0 ? "green" : "gray" }, () => (p.row.status === 0 ? "启用" : "停用")) },
     { title: "操作", width: 100, render: (h: any, p: any) =>
         p.row.status === 0
-            ? h("Button", { size: "small", type: "warning", onClick: () => onDisable(p.row) }, () => "停用")
+            ? Utils.operatingTextHandle(h, "停用", "text-error", () => onDisable(p.row))
             : h("span", "-") },
 ];