fix(diagram): 流程示意图 PNG 按逻辑尺寸显示（SCALE=2 图按自然尺寸渲染整体放大一倍）——详情 Modal 与两处流程图 Drawer 统一走 fitDiagram

src/utils/diagramImg.ts

@@ -0,0 +1,12 @@
+/**
+ * 流程示意图 PNG 显示口径（2026-10-10 用户反馈：嵌入页图过大，同 flow-center/front 同名工具）：
+ * 服务端按 SCALE=2 出图（视网膜清晰度），按自然尺寸渲染等于整体放大一倍。
+ * 须按逻辑尺寸（自然宽一半）显示；超宽长图收缩到容器宽。
+ * 用法：<img ref="diagramEl" :src="..." @load="onDiagramLoad">（图均为打开时挂载，@load 必触发）。
+ */
+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;
+    el.style.width = Math.round(Math.min(want, cap > 120 ? cap : want)) + "px";
+}

src/views/notice/NewNotice.vue

@@ -10,6 +10,7 @@ import type { NoticeDetailVo, NoticeRequest, UpFileVo, FlowBindingVo } from "@/t
 import UserCheckInput from "@/components/UserCheckInput.vue";
 import NoticeUpload from "@/components/NoticeUpload.vue";
 import config from "@/assets/config/host.config";
+import { fitDiagram } from "@/utils/diagramImg";
 
 const route = useRoute();
 const router = useRouter();
@@ -87,6 +88,7 @@ onMounted(async () => {
 
 /** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token；与设置页同款，修复旧深链 404） */
 const flowDiagramVisible = ref(false);
+const flowDiagramEl = ref<HTMLImageElement | null>(null);
 const flowDiagramSrc = computed(() =>
     flowDiagramVisible.value && auditFlowGuid.value
         ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(auditFlowGuid.value)}`
@@ -422,7 +424,7 @@ async function saveEditAndLeave(data: NoticeRequest) {
         <Drawer v-model="flowDiagramVisible" title="流程示意图" :width="860" :transfer="false"
                 :styles="{ body: { padding: '0' } }">
             <div class="flow-diagram-frame">
-                <img v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @error="onFlowDiagramError" />
+                <img ref="flowDiagramEl" v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @load="fitDiagram(flowDiagramEl)" @error="onFlowDiagramError" />
             </div>
         </Drawer>
         </div>
@@ -468,5 +470,6 @@ async function saveEditAndLeave(data: NoticeRequest) {
     display: block;
     margin: 0 auto;
     max-width: 100%;
+    height: auto;
 }
 </style>

src/views/notice/NoticeDetails.vue

@@ -6,6 +6,7 @@ import { noticeApi } from "@/api/module/notice";
 import type { NoticeDetailVo, NextPrevVo, ReadGroup, FlowTraceVo } from "@/types/notice";
 import FilePreviewModal from "@/components/FilePreviewModal.vue";
 import Utils from "@/utils";
+import { fitDiagram } from "@/utils/diagramImg";
 import config from "@/assets/config/host.config";
 
 const route = useRoute();
@@ -77,6 +78,7 @@ async function flowAction(action: "withdraw" | "urge") {
 
 /* 流程图弹窗（2026-09-17：后端同源出图 /flow/Diagram，img 免 token 免跨域，不再深链 flow-center） */
 const diagramVisible = ref(false);
+const diagramEl = ref<HTMLImageElement | null>(null);
 function openFlowDiagram() {
     if (!detail.value?.flowGuid || !detail.value?.flowInstanceId) return;
     diagramVisible.value = true;
@@ -345,7 +347,7 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
         <!-- 流程图弹窗（后端同源出图，免 token 免跨域） -->
         <Modal v-model="diagramVisible" title="流程示意图" :width="860" footer-hide>
             <div class="diagram-wrap">
-                <img v-if="diagramSrc" :src="diagramSrc" alt="流程示意图" @error="onDiagramError" />
+                <img v-if="diagramSrc" ref="diagramEl" :src="diagramSrc" alt="流程示意图" @load="fitDiagram(diagramEl)" @error="onDiagramError" />
             </div>
         </Modal>
 
@@ -511,6 +513,7 @@ function openPreview(item: { name?: string; filename?: string; fileid?: number;
 }
 .diagram-wrap img {
     max-width: 100%;
+    height: auto;
 }
 /* 嵌入页 iframe 撑满 Drawer body（body padding 已由 :styles 置 0），嵌入页内部滚动 */
 .embed-frame-wrap {

src/views/notice/NoticeSetting.vue

@@ -9,6 +9,7 @@ import { settingApi, baseApi, noticeApi } from "@/api/module/notice";
 import type { DeptManageItem, ContactGroupPage, ContactUserPage, SchoolTreeNode, FlowOption } from "@/types/notice";
 import config from "@/assets/config/host.config";
 import Utils from "@/utils";
+import { fitDiagram } from "@/utils/diagramImg";
 import { useElementHeight } from "@/utils/hook/useElementHeight";
 
 /* ============ Tab 切换（单卡片 yh-tabs-card 内含线性 Tabs，切换只 v-show 对应 tab-body） ============ */
@@ -83,6 +84,7 @@ function unbindFlow() {
 /** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token 免跨域。修复旧深链 404——
  *  生产前端静态挂 /flow-center/front*，Caddy 无 /flow-center/ 根路由，window.open 深链必 404） */
 const flowDiagramVisible = ref(false);
+const flowDiagramEl = ref<HTMLImageElement | null>(null);
 const flowDiagramSrc = computed(() =>
     flowDiagramVisible.value && boundFlowGuid.value
         ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(boundFlowGuid.value)}`
@@ -544,7 +546,7 @@ const groupH = useElementHeight(groupRegionRef);
         <Drawer v-model="flowDiagramVisible" title="流程示意图" :width="860" :transfer="false"
                 :styles="{ body: { padding: '0' } }">
             <div class="flow-diagram-frame">
-                <img v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @error="onFlowDiagramError" />
+                <img ref="flowDiagramEl" v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @load="fitDiagram(flowDiagramEl)" @error="onFlowDiagramError" />
             </div>
         </Drawer>
 
@@ -659,5 +661,6 @@ const groupH = useElementHeight(groupRegionRef);
     display: block;
     margin: 0 auto;
     max-width: 100%;
+    height: auto;
 }
 </style>