feat(notice): 查看流程图改 Drawer（后端 DiagramDef 同源 PNG 竖版直嵌+纵向滚动）——替换 window.open 深链 404 坏链（生产 /flow-center/front* 无根路由）；解绑隐藏入口、未发布走错误文案

src/views/notice/NewNotice.vue

@@ -85,11 +85,20 @@ onMounted(async () => {
     }
 });
 
-/** 流程图：flow-center 示意图深链（Notice 指定到人场景用人员视图） */
+/** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token；与设置页同款，修复旧深链 404） */
+const flowDiagramVisible = ref(false);
+const flowDiagramSrc = computed(() =>
+    flowDiagramVisible.value && auditFlowGuid.value
+        ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(auditFlowGuid.value)}`
+        : "",
+);
 function openFlowDiagram() {
-    if (auditFlowGuid.value) {
+    if (!auditFlowGuid.value) return;
-        window.open(`${config.flowHost}/#/diagram?flowGuid=${auditFlowGuid.value}&mode=user`, "_blank");
+    flowDiagramVisible.value = true;
-    }
+}
+function onFlowDiagramError() {
+    flowDiagramVisible.value = false;
+    Message.error("流程图加载失败（流程可能未发布或绑定已解除）");
 }
 
 /* ============ 富文本编辑器（wangeditor v5 for vue3） ============ */
@@ -408,6 +417,14 @@ async function saveEditAndLeave(data: NoticeRequest) {
                 <Button @click="isModal.timiSend = false" style="margin-left: 8px">取消</Button>
             </template>
         </Modal>
+
+        <!-- 流程图 Drawer（后端 DiagramDef 同源 PNG；竖版长图容器内纵向滚动） -->
+        <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" />
+            </div>
+        </Drawer>
         </div>
     </div>
 </template>
@@ -439,4 +456,17 @@ async function saveEditAndLeave(data: NoticeRequest) {
 .bottom-btn {
     margin-top: 6px;
 }
+/* 流程图 Drawer：浅底色 + 纵向滚动（竖版长图），图片撑满可读宽度 */
+.flow-diagram-frame {
+    height: 100%;
+    overflow: auto;
+    background: #f5f7fa;
+    padding: 12px;
+    box-sizing: border-box;
+}
+.flow-diagram-frame img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
 </style>

src/views/notice/NoticeSetting.vue

@@ -80,9 +80,21 @@ function unbindFlow() {
     });
 }
 
-/** 流程图（flow-center 示意图深链，与发通知页同一入口） */
+/** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token 免跨域。修复旧深链 404——
-function openFlowDiagram(guid: string) {
+ *  生产前端静态挂 /flow-center/front*，Caddy 无 /flow-center/ 根路由，window.open 深链必 404） */
-    if (guid) window.open(`${config.flowHost}/#/diagram?flowGuid=${guid}`, "_blank");
+const flowDiagramVisible = ref(false);
+const flowDiagramSrc = computed(() =>
+    flowDiagramVisible.value && boundFlowGuid.value
+        ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(boundFlowGuid.value)}`
+        : "",
+);
+function openFlowDiagram() {
+    if (!boundFlowGuid.value) return;
+    flowDiagramVisible.value = true;
+}
+function onFlowDiagramError() {
+    flowDiagramVisible.value = false;
+    Message.error("流程图加载失败（流程可能未发布或绑定已解除）");
 }
 
 /** 当前绑定流程的节点摘要（下拉里回显） */
@@ -517,7 +529,7 @@ const groupH = useElementHeight(groupRegionRef);
                         已绑定
                         <Tag color="blue">{{ boundFlowName || boundFlowGuid }}</Tag>
                         <span class="node-summary">{{ boundFlowSummary }}</span>
-                        <Button type="text" size="small" @click="openFlowDiagram(boundFlowGuid)">查看流程图</Button>
+                        <Button type="text" size="small" @click="openFlowDiagram">查看流程图</Button>
                     </template>
                     <template v-else>
                         <Tag>未绑定</Tag>
@@ -528,6 +540,14 @@ const groupH = useElementHeight(groupRegionRef);
         </div>
         </div>
 
+        <!-- 流程图 Drawer（后端 DiagramDef 同源 PNG；竖版长图容器内纵向滚动） -->
+        <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" />
+            </div>
+        </Drawer>
+
         <!-- 新增发文部门 Modal（编辑走 TypeSetBox 内联编辑） -->
         <Modal v-model="deptModal" :mask-closable="false" width="450px" title="新增部门">
             <Form ref="deptFormRef" :model="deptForm" :rules="deptRule" :label-width="110">
@@ -627,4 +647,17 @@ const groupH = useElementHeight(groupRegionRef);
     margin-top: 16px;
     color: var(--text-3);
 }
+/* 流程图 Drawer：浅底色 + 纵向滚动（竖版长图），图片撑满可读宽度 */
+.flow-diagram-frame {
+    height: 100%;
+    overflow: auto;
+    background: #f5f7fa;
+    padding: 12px;
+    box-sizing: border-box;
+}
+.flow-diagram-frame img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
 </style>