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

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; }