diff --git a/src/utils/diagramImg.ts b/src/utils/diagramImg.ts
new file mode 100644
index 0000000..164595b
--- /dev/null
+++ b/src/utils/diagramImg.ts
@@ -0,0 +1,12 @@
+/**
+ * 流程示意图 PNG 显示口径(2026-10-10 用户反馈:嵌入页图过大):服务端 DiagramImageService
+ * 按 SCALE=2 出图(视网膜清晰度),页面若按自然尺寸渲染等于整体放大一倍。
+ * 须按逻辑尺寸(自然宽一半)显示;>3 分支等超宽长图再收缩到容器宽。
+ * 用法:
,onMounted 里对 complete 的图补调一次。
+ */
+export function fitDiagram(el: HTMLImageElement | null | undefined): void {
+ if (!el || !el.naturalWidth) return;
+ const want = el.naturalWidth / 2;
+ const cap = (el.parentElement?.clientWidth || 0) - 8; // Card body 左右衬
+ el.style.width = Math.round(Math.min(want, cap > 120 ? cap : want)) + "px";
+}
diff --git a/src/views/flow/EmbedInstance.vue b/src/views/flow/EmbedInstance.vue
index 57bfbe3..d8668db 100644
--- a/src/views/flow/EmbedInstance.vue
+++ b/src/views/flow/EmbedInstance.vue
@@ -3,11 +3,12 @@
// 展示"进度 + 流程示意图",零样式复制、单点维护。全程零 CAS 交互——数据走 /open/flow/embed/data
// 免签端点(只认 token),示意图 token 两用(/open/flow/diagram/img 同一 token 出图)。
// 本页只读(方案 §9):不做任何审批动作;办理入口仍是待办站内信 → /task/:taskId 既有链路。
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import { Tag } from "view-ui-plus";
import { INSTANCE_STATUS, INSTANCE_STATUS_COLOR, TASK_STATUS } from "@/api/module/flow";
import TraceTimeline from "@/views/flow/components/TraceTimeline.vue";
+import { fitDiagram } from "@/utils/diagramImg";
import config from "@/assets/config/host.config";
const route = useRoute();
@@ -29,6 +30,10 @@ const token = computed(() => String(route.query.token || ""));
const diagramSrc = computed(
() => `${config.serviceHost}/open/flow/diagram/img?token=${token.value}`,
);
+const diagramEl = ref(null);
+function onDiagramLoad() {
+ fitDiagram(diagramEl.value);
+}
const snapshotRows = computed(() => {
const raw = detail.value?.bizSnapshot;
@@ -186,6 +191,11 @@ onMounted(async () => {
} finally {
loading.value = false;
}
+ // 缓存命中的图可能在监听器挂上之前就 complete,补一次适配
+ await nextTick();
+ if (diagramEl.value?.complete) {
+ fitDiagram(diagramEl.value);
+ }
});
@@ -217,7 +227,7 @@ onMounted(async () => {
流程示意图
-
+
@@ -255,7 +265,9 @@ onMounted(async () => {