From f90aefc8e3964d4deb0c1bd0abc64958947d8fae Mon Sep 17 00:00:00 2001 From: chenxing Date: Fri, 9 Oct 2026 22:10:21 +0800 Subject: [PATCH] =?UTF-8?q?fix(diagram):=20=E6=B5=81=E7=A8=8B=E7=A4=BA?= =?UTF-8?q?=E6=84=8F=E5=9B=BE=20PNG=20=E6=8C=89=E9=80=BB=E8=BE=91=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8=E6=98=BE=E7=A4=BA=EF=BC=88SCALE=3D2=20=E5=9B=BE?= =?UTF-8?q?=E6=8C=89=E8=87=AA=E7=84=B6=E5=B0=BA=E5=AF=B8=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E6=95=B4=E4=BD=93=E6=94=BE=E5=A4=A7=E4=B8=80=E5=80=8D=EF=BC=89?= =?UTF-8?q?=E2=80=94=E2=80=94=E8=AF=A6=E6=83=85=20Modal=20=E4=B8=8E?= =?UTF-8?q?=E4=B8=A4=E5=A4=84=E6=B5=81=E7=A8=8B=E5=9B=BE=20Drawer=20?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E8=B5=B0=20fitDiagram?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/diagramImg.ts | 12 ++++++++++++ src/views/notice/NewNotice.vue | 5 ++++- src/views/notice/NoticeDetails.vue | 5 ++++- src/views/notice/NoticeSetting.vue | 5 ++++- 4 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 src/utils/diagramImg.ts diff --git a/src/utils/diagramImg.ts b/src/utils/diagramImg.ts new file mode 100644 index 0000000..90c546e --- /dev/null +++ b/src/utils/diagramImg.ts @@ -0,0 +1,12 @@ +/** + * 流程示意图 PNG 显示口径（2026-10-10 用户反馈：嵌入页图过大，同 flow-center/front 同名工具）： + * 服务端按 SCALE=2 出图（视网膜清晰度），按自然尺寸渲染等于整体放大一倍。 + * 须按逻辑尺寸（自然宽一半）显示；超宽长图收缩到容器宽。 + * 用法：（图均为打开时挂载，@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"; +} diff --git a/src/views/notice/NewNotice.vue b/src/views/notice/NewNotice.vue index 80855ba..dd20f76 100644 --- a/src/views/notice/NewNotice.vue +++ b/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(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) {
- 流程示意图 + 流程示意图
@@ -468,5 +470,6 @@ async function saveEditAndLeave(data: NoticeRequest) { display: block; margin: 0 auto; max-width: 100%; + height: auto; } diff --git a/src/views/notice/NoticeDetails.vue b/src/views/notice/NoticeDetails.vue index 9311b25..911e89e 100644 --- a/src/views/notice/NoticeDetails.vue +++ b/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(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;
- 流程示意图 + 流程示意图
@@ -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 { diff --git a/src/views/notice/NoticeSetting.vue b/src/views/notice/NoticeSetting.vue index e9085b3..4c2c22d 100644 --- a/src/views/notice/NoticeSetting.vue +++ b/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(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);
- 流程示意图 + 流程示意图
@@ -659,5 +661,6 @@ const groupH = useElementHeight(groupRegionRef); display: block; margin: 0 auto; max-width: 100%; + height: auto; }