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 () => {