From f085d6d74d1a621384a464a802c5a4c5b1e30b89 Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Mon, 19 Oct 2026 20:10:16 +0800
Subject: [PATCH] =?UTF-8?q?[fix]=20NoticeDetails=20=E7=BB=91=E5=AE=9A=20Fl?=
 =?UTF-8?q?owTaskEmbed=20@open-biz=EF=BC=9A=E4=BB=BB=E5=8A=A1=E9=A1=B5"?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E4=B8=9A=E5=8A=A1=E8=AF=A6=E6=83=85"?=
 =?UTF-8?q?=E6=AD=A4=E5=89=8D=E6=97=A0=E5=93=8D=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- bizId=serid 时关弹窗并刷新详情/进度；跨单据才 router.push（bizUrl 是裸相对路径，不能直接 window.open）
---
 src/views/notice/NoticeDetails.vue | 1520 ++++++++++++++--------------
 1 file changed, 768 insertions(+), 752 deletions(-)

diff --git a/src/views/notice/NoticeDetails.vue b/src/views/notice/NoticeDetails.vue
index 31891b1..ffe2feb 100644
--- a/src/views/notice/NoticeDetails.vue
+++ b/src/views/notice/NoticeDetails.vue
@@ -1,752 +1,768 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { Message } from "view-ui-plus";
-import { noticeApi } from "@/api/module/notice";
-import type { NoticeDetailVo, NextPrevVo, ReadGroup, FlowTraceVo } from "@/types/notice";
-import FilePreviewModal from "@/components/FilePreviewModal.vue";
-import FlowApprovalCard from "@/components/flow-approval/FlowApprovalCard.vue";
-import FlowTaskEmbed from "@/components/flow-approval/FlowTaskEmbed.vue";
-import noticeFlowApprovalApi from "@/api/module/approvalAdapter";
-import Utils from "@/utils";
-import { fitDiagram } from "@/utils/diagramImg";
-import config from "@/assets/config/host.config";
-
-const route = useRoute();
-const router = useRouter();
-
-const serid = computed(() => Number(route.query.serid) || 0);
-/* type=0 管理视角(不标读) / type=1 查看(标读)；注意 0 是合法值不能用 || 兜底 */
-const viewType = computed(() => {
-    const t = Number(route.query.type);
-    return t === 0 ? 0 : 1;
-});
-/* 上一/下一篇的序列类型：管理视角走已发(type=0)，查看走已收(type=1) */
-const navType = computed(() => (viewType.value === 0 ? "0" : "1"));
-
-const detail = ref<NoticeDetailVo | null>(null);
-const loading = ref(false);
-
-/* ============ 先审后发：审批进度卡片 + 撤回/催办 ============ */
-const flowTrace = ref<FlowTraceVo | null>(null);
-const flowActing = ref(false);
-
-async function loadTrace() {
-    if (!detail.value?.flowGuid) return;
-    try {
-        flowTrace.value = await noticeApi.flowTrace(serid.value).send();
-    } catch {
-        flowTrace.value = null; // 进度不可用时只展示本地镜像
-    }
-}
-
-/**
- * 撤回：走本应用后端（2026-09-17 接入：后端经 SDK 托管件中转并复核创建人，
- * 不再前端直调 flow-center——跨应用 CAS 票据 + CORS 双重外溢且"谁能撤"落在前端）。
- * 催办：仍是"人"的动作，走 flow-center 用户面（同主域 CAS 免二次登录）。
- */
-async function flowAction(action: "withdraw" | "urge") {
-    const instanceId = detail.value?.flowInstanceId;
-    if (!instanceId) return;
-    flowActing.value = true;
-    try {
-        if (action === "withdraw") {
-            await noticeApi.flowWithdraw(serid.value).send();
-            Message.success("已撤回审核，可编辑后重新提交");
-            await load();
-            await loadTrace();
-        } else {
-            if (!config.flowHost) return;
-            const resp = await fetch(`${config.flowHost}/api/flow/instance/${instanceId}/urge`, {
-                method: "POST",
-                credentials: "include",
-            });
-            const res = await resp.json().catch(() => null);
-            if (resp.ok && res && res.code === 0) {
-                Message.success("已发送催办提醒");
-            } else {
-                Message.error(res?.msg || "催办失败");
-            }
-        }
-    } catch (e: any) {
-        Message.error(
-            action === "withdraw"
-                ? "撤回失败（已有人办理时不可撤回）：" + (e?.msg || e?.message || e)
-                : "流程中心不可达：" + (e?.message || e),
-        );
-    } finally {
-        flowActing.value = false;
-    }
-}
-
-/* 流程图弹窗（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;
-}
-const diagramSrc = computed(() =>
-    diagramVisible.value && detail.value?.flowInstanceId
-        ? `${config.serviceHost}/api/notice/flow/Diagram?serid=${serid.value}`
-        : "",
-);
-function onDiagramError() {
-    diagramVisible.value = false;
-    Message.error("流程图加载失败（可能已过期，请刷新页面重试）");
-}
-
-/* 办件进度嵌入页（iframe 免签嵌入 flow-center 统一进度页）：每次打开现取 pageUrl——
- * token 10 分钟短时效，不缓存、不落 localStorage 复用；嵌入页内部自己滚动 */
-const embedVisible = ref(false);
-const embedPageUrl = ref("");
-async function openFlowEmbed() {
-    if (!detail.value?.flowInstanceId) return;
-    embedVisible.value = true;
-    embedPageUrl.value = "";
-    try {
-        const res = await noticeApi.flowEmbed(serid.value).send();
-        embedPageUrl.value = res?.pageUrl || "";
-    } catch (e: any) {
-        embedVisible.value = false;
-        Message.error(e?.msg || e?.message || "嵌入页地址获取失败");
-    }
-}
-
-/* ============ v2.1 审批动作：卡片办理后刷新；完整办理走 CAS 去壳任务页 ============ */
-
-/** 卡片里通过/驳回成功：刷新进度与详情（业务状态由 flow-center 回调推进，前端不本地写） */
-async function onApprovalHandled() {
-    await Promise.all([load(), loadTrace()]);
-}
-
-const taskVisible = ref(false);
-const taskPageUrl = ref("");
-const taskCurrentId = ref<number | string>("");
-
-/** 任务页地址由后端签发（它会先确认 taskId 属于当前人待办），前端不拼 flow-center 基址 */
-async function openTaskFromCard(taskId: number) {
-    taskPageUrl.value = "";
-    try {
-        const res: any = await noticeFlowApprovalApi.taskPageUrl(String(serid.value), taskId);
-        if (!res?.pageUrl) {
-            Message.error(res?.msg || "办理页地址获取失败");
-            return;
-        }
-        taskCurrentId.value = taskId;
-        taskPageUrl.value = res.pageUrl;
-        taskVisible.value = true;
-    } catch (e: any) {
-        Message.error(e?.msg || e?.message || "办理页打开失败");
-    }
-}
-
-/** 任务页里办完：关弹窗并刷新进度/详情，不等轮询 */
-async function onTaskHandled() {
-    taskVisible.value = false;
-    await Promise.all([load(), loadTrace()]);
-}
-
-const readGroups = ref<ReadGroup[]>([]);
-const showRead = ref(false);
-const prevId = ref(0);
-const nextId = ref(0);
-
-onMounted(async () => {
-    await load();
-    loadTrace(); // 详情加载后并行取审批进度（未绑流程接口自身返回 bound=false）
-});
-
-async function load() {
-    if (!serid.value) return;
-    loading.value = true;
-    try {
-        detail.value = await noticeApi.modify(serid.value, viewType.value).send();
-        const nav: NextPrevVo = await noticeApi.getNextPrevNotice(serid.value, navType.value).send();
-        prevId.value = nav.prevId || 0;
-        nextId.value = nav.nextId || 0;
-        loadTrace();
-    } catch (e: any) {
-        Message.error(e.message || "加载通知失败");
-    } finally {
-        loading.value = false;
-    }
-}
-
-function goNav(id: number) {
-    if (!id) return;
-    router.replace({ path: route.path, query: { ...route.query, serid: id } });
-    load();
-}
-
-/* 阅读进度（同旧版：已查看百分比） */
-const readPercent = computed(() => {
-    const total = Number(detail.value?.numcount) || 0;
-    const read = Number(detail.value?.readnumcount) || 0;
-    if (!total) return 0;
-    return Math.round((read / total) * 100);
-});
-const unreadCount = computed(() => Math.max((Number(detail.value?.numcount) || 0) - (Number(detail.value?.readnumcount) || 0), 0));
-
-async function openRead() {
-    try {
-        readGroups.value = await noticeApi.orgizeModify(serid.value).send();
-        showRead.value = true;
-    } catch (e: any) {
-        Message.error(e.message || "加载阅读情况失败");
-    }
-}
-
-/* 编辑（管理视角） */
-function onEdit() {
-    router.push({ path: "/list/new", query: { serid: serid.value } });
-}
-
-/* 打印 */
-function onPrint() {
-    if (!detail.value) return;
-    const win = window.open("", "_blank");
-    if (!win) return;
-    win.document.write(`
-        <html>
-            <head><title>${detail.value.title || ""}</title></head>
-            <body style="font-family:'Microsoft YaHei',sans-serif;padding:24px;">
-                <h2>${detail.value.title || ""}</h2>
-                <p style="color:#666;font-size:13px;">
-                    来源：${detail.value.DeptName || ""}　发布人：${detail.value.TeaName || ""}　发布时间：${detail.value.EditDate || ""}
-                </p>
-                <hr/>
-                <div>${detail.value.Contents || ""}</div>
-            </body>
-        </html>
-    `);
-    win.document.close();
-    win.focus();
-    win.print();
-}
-
-/** 审核状态 Tag 颜色 */
-function auditColor(auditStatus?: number | null) {
-    if (auditStatus === 20) return "green";
-    if (auditStatus === 30) return "red";
-    if (auditStatus === 40) return "orange";
-    if (auditStatus === 0) return "default";
-    return "blue"; // 审批中
-}
-
-function downFile(id: number) {
-    if (!id) return;
-    window.location.href = noticeApi.fileDownUrl(id);
-}
-function downAll() {
-    window.location.href = noticeApi.allFileDownUrl(serid.value);
-}
-
-/** 展示名：后端 name=原始文件名，filename=存储相对路径（notice/2026xxxx/uuid.ext） */
-function displayName(item: { name?: string; filename?: string }) {
-    return item.name || item.filename || "";
-}
-/* 附件图标（按扩展名，图标名对齐旧版 matchSuffix → icon-word/excel/ppt/pdf1/txt/tupian/yasuo/weizhi） */
-function getFileIcon(name: string) {
-    const suffix = String(name || "").split(".").pop()?.toLowerCase() || "";
-    if (["doc", "docx", "wps"].includes(suffix)) return "icon-word";
-    if (["xls", "xlsx"].includes(suffix)) return "icon-excel";
-    if (["ppt", "pptx"].includes(suffix)) return "icon-ppt";
-    if (["pdf"].includes(suffix)) return "icon-pdf1";
-    if (["txt"].includes(suffix)) return "icon-txt";
-    // 平台 icons.css 的 icon-tupian 是线性「图片」图标；icon-tupian1 是旧彩色图转单色，看不出是图片
-    if (["jpg", "jpeg", "png", "gif", "bmp"].includes(suffix)) return "icon-tupian";
-    if (["zip", "rar"].includes(suffix)) return "icon-yasuo";
-    return "icon-weizhi";
-}
-/* 可在线预览（open-file-viewer 支持：图片/pdf/txt/docx/xlsx/pptx；doc/zip 等仅下载） */
-function getIsPreview(name: string) {
-    const suffix = String(name || "").split(".").pop()?.toLowerCase() || "";
-    return ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "txt", "pdf", "docx", "xlsx", "pptx"].includes(suffix);
-}
-/* 附件预览弹窗（open-file-viewer） */
-const previewState = ref<{ show: boolean; fileId: number | null; fileName: string }>({
-    show: false,
-    fileId: null,
-    fileName: "",
-});
-function openPreview(item: { name?: string; filename?: string; fileid?: number; id?: number }) {
-    previewState.value = {
-        show: true,
-        fileId: Number(item.fileid || item.id) || null,
-        fileName: displayName(item),
-    };
-}
-</script>
-
-<template>
-    <div class="page-wrapper">
-        <div class="main-container" v-if="detail">
-            <div class="ops-top">
-            <div class="nav">
-                <Button size="small" :disabled="!prevId" @click="goNav(prevId)">上一篇</Button>
-                <Button size="small" :disabled="!nextId" @click="goNav(nextId)">下一篇</Button>
-            </div>
-        </div>
-
-        <!-- 管理视角：阅读进度统计条（同旧版已发通知详情） -->
-        <template v-if="viewType === 0">
-            <h2 class="notice-title2">{{ detail.title }}</h2>
-            <div class="stat-bar">
-                <div class="progress-box">
-                    <Progress :percent="readPercent" hide-info :stroke-width="10" />
-                    <span class="percent-label">已查看 {{ readPercent }}%</span>
-                </div>
-                <div class="stat-nums" title="点击查看阅读情况" @click="openRead">
-                    <span class="item">总人数 <b class="blue">{{ detail.numcount || 0 }}</b> 人</span>
-                    <span class="item">已读 <b class="orange">{{ detail.readnumcount || 0 }}</b> 人</span>
-                    <span class="item">未读 <b class="blue">{{ unreadCount }}</b> 人</span>
-                </div>
-                <div class="stat-tags">
-                    <Tag>{{ detail.DeptName }}</Tag>
-                    <Tag>{{ detail.TeaName }}</Tag>
-                    <Tag>{{ detail.EditDate }}</Tag>
-                </div>
-            </div>
-            <div class="divider"></div>
-        </template>
-
-        <!-- 查看视角：普通标题 -->
-        <h2 v-else class="notice-title2">{{ detail.title }}</h2>
-
-        <!-- 审批进度卡片（绑流程通知；提交人/管理员/办理人可见） -->
-        <div v-if="flowTrace && flowTrace.bound" class="flow-card">
-            <div class="flow-card-head">
-                <span class="flow-title">审批进度</span>
-                <Tag :color="auditColor(flowTrace.auditStatus)">{{ flowTrace.auditStatusDesc || "—" }}</Tag>
-                <span v-if="flowTrace.nodeSummary" class="flow-nodes">流程：{{ flowTrace.nodeSummary }}</span>
-                <span v-if="flowTrace.currentNodes" class="flow-nodes">当前节点：{{ flowTrace.currentNodes }}</span>
-                <div class="flow-ops">
-                    <Button v-if="detail.flowGuid" size="small" @click="openFlowDiagram">查看流程图</Button>
-                    <Button
-                        v-if="detail.flowInstanceId"
-                        size="small"
-                        style="margin-left: 8px"
-                        @click="openFlowEmbed"
-                        >审批进度</Button
-                    >
-                    <Button
-                        v-if="detail.flowInstanceId && flowTrace.auditStatus === 10"
-                        size="small"
-                        :loading="flowActing"
-                        style="margin-left: 8px"
-                        @click="flowAction('withdraw')"
-                        >撤回审核</Button
-                    >
-                    <Button
-                        v-if="detail.flowInstanceId && flowTrace.auditStatus === 10"
-                        size="small"
-                        :loading="flowActing"
-                        style="margin-left: 8px"
-                        @click="flowAction('urge')"
-                        >催办</Button
-                    >
-                </div>
-            </div>
-            <!-- 驳回/撤回意见 -->
-            <div v-if="flowTrace.flowResult && flowTrace.flowResult.opinion" class="flow-opinion">
-                办理意见：{{ flowTrace.flowResult.opinion }}
-                <template v-if="flowTrace.flowResult.rejectNode">（{{ flowTrace.flowResult.rejectNode }}）</template>
-            </div>
-            <!-- 结构化步骤时间线（2026-09-17 接入 SDK progress；steps[0] 固定"发起申请"，同节点多任务每人一行） -->
-            <div v-if="flowTrace.steps && flowTrace.steps.length" class="flow-timeline">
-                <div
-                    v-for="(s, i) in flowTrace.steps"
-                    :key="'fs' + i"
-                    class="flow-step"
-                    :class="{ 'flow-step-active': s.active }"
-                >
-                    <span class="flow-step-node">{{ s.label || s.nodeName || `节点${i + 1}` }}</span>
-                    <template v-if="s.assignees && s.assignees.length">
-                        <span v-for="(a, j) in s.assignees" :key="j" class="flow-step-user">
-                            {{ a.userName || "" }}
-                            <em v-if="a.statusLabel" class="flow-step-status">{{ a.statusLabel }}</em>
-                            <em v-if="a.opinion" class="flow-step-op">（{{ a.opinion }}）</em>
-                        </span>
-                    </template>
-                </div>
-            </div>
-            <!-- 节点时间线（traceJson 解析，steps 不可用时的兜底） -->
-            <div v-else-if="flowTrace.trace && flowTrace.trace.length" class="flow-timeline">
-                <div v-for="(t, i) in flowTrace.trace" :key="i" class="flow-step">
-                    <span class="flow-step-node">{{ t.nodeName || t.node || t.taskName || `节点${i + 1}` }}</span>
-                    <span class="flow-step-user">{{ t.userName || t.assigneeName || t.handlerName || "" }}</span>
-                    <span class="flow-step-time">{{ t.handleTime || t.time || t.createTime || "" }}</span>
-                    <span class="flow-step-op" v-if="t.opinion">{{ t.opinion }}</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- v2.1 审批动作卡片：当前人有待办→通过/驳回/完整办理；非待办人与终态→只读 + 查看记录。
-             与上方"审批进度"合用一份 flowTrace，动作区归卡片，状态/时间线仍归原卡片（方案 §7.4） -->
-        <FlowApprovalCard v-if="flowTrace && flowTrace.bound" :api="noticeFlowApprovalApi"
-                          biz-type="notice" :biz-id="String(serid)" :title="detail.title"
-                          :trace="flowTrace"
-                          @handled="onApprovalHandled" @open-record="openFlowEmbed"
-                          @open-task="openTaskFromCard" />
-
-        <!-- 流程图弹窗（后端同源出图，免 token 免跨域） -->
-        <Modal v-model="diagramVisible" title="流程示意图" :width="740" footer-hide>
-            <div class="diagram-wrap">
-                <img v-if="diagramSrc" ref="diagramEl" :src="diagramSrc" alt="流程示意图" @load="fitDiagram(diagramEl)" @error="onDiagramError" />
-            </div>
-        </Modal>
-
-        <!-- 办件进度嵌入页（Drawer 内 iframe 撑满，嵌入页内部滚动；token 每次打开现取） -->
-        <Drawer v-model="embedVisible" title="审批进度" :width="740" :transfer="false" :styles="{ body: { padding: '0' } }">
-            <div class="embed-frame-wrap">
-                <iframe v-if="embedPageUrl" :src="embedPageUrl" title="办件进度"></iframe>
-            </div>
-        </Drawer>
-
-        <!-- 完整办理：flow-center 去壳任务页（CAS 写面；退回/移交/多出口在那一侧） -->
-        <FlowTaskEmbed v-model="taskVisible" :page-url="taskPageUrl" :task-id="taskCurrentId"
-                       @handled="onTaskHandled" />
-
-        <div v-if="viewType !== 0" class="meta">
-            <span>发文单位：{{ detail.DeptName || "—" }}</span>
-            <span>发布人：{{ detail.TeaName || "—" }}</span>
-            <span>发布时间：{{ detail.EditDate }}</span>
-            <span v-if="detail.isDsfs">定时发送：{{ detail.DsfsTime }}</span>
-        </div>
-
-        <div class="content" v-html="detail.Contents"></div>
-
-        <div v-if="detail.ChaoSend && detail.ChaoSend.length" class="files">
-            <div class="files-title">附件（{{ detail.ChaoSend.length }}）<a class="down-all" @click="downAll">全部下载</a></div>
-            <div v-for="f in detail.ChaoSend" :key="f.fileid || f.id" class="file-item">
-                <i class="iconfont file-type-icon" :class="getFileIcon(displayName(f))"></i>
-                <span class="file-name" :title="displayName(f)">{{ displayName(f) }}</span>
-                <span class="file-size">{{ Utils.getFileSize(f.size) }}</span>
-                <a class="file-op" v-if="getIsPreview(displayName(f))" @click="openPreview(f)">查看</a>
-                <a class="file-op" @click="downFile(f.fileid || f.id)">下载</a>
-            </div>
-        </div>
-
-        <!-- 管理视角底部操作（同旧版：编辑 / 打印；审批中隐藏编辑——后端 403 死按钮，BP-R5-1） -->
-        <div v-if="viewType === 0" class="bottom-btns">
-            <Button v-if="detail.auditStatus !== 10" @click="onEdit">编辑</Button>
-            <Tooltip v-else content="审批中，请先撤回再编辑" placement="top" transfer>
-                <Button disabled>编辑</Button>
-            </Tooltip>
-            <Button style="margin-left: 10px" @click="onPrint">打印</Button>
-        </div>
-
-        <!-- 查看阅读情况（同旧版：绿=已读 红=未读） -->
-        <Modal v-model="showRead" title="查看阅读情况" :width="620">
-            <div class="read-tip">提示：<span class="green">绿色</span>表示已读，<span class="red">红色</span>表示未读</div>
-            <div class="read-list">
-                <div v-for="g in readGroups" :key="g.GroupName" class="read-group">
-                    <div class="read-group-name">{{ g.GroupName }}：</div>
-                    <div class="read-users">
-                        <span
-                            v-for="t in g.teaslist"
-                            :key="t.account || t.teaname"
-                            :class="t.states === 'read' ? 'green' : 'red'"
-                            class="user-name"
-                            >{{ t.teaname }}</span
-                        >
-                    </div>
-                    <div v-if="!g.teaslist || !g.teaslist.length" class="empty">暂无人员</div>
-                </div>
-            </div>
-            <template #footer>
-                <Button type="primary" @click="showRead = false">确定</Button>
-            </template>
-        </Modal>
-        </div>
-        <div class="main-container" v-else-if="loading">加载中...</div>
-        <div class="main-container empty" v-else>通知不存在或已被删除</div>
-    </div>
-    <!-- 附件预览弹窗 -->
-    <FilePreviewModal v-model="previewState.show" :file-id="previewState.fileId" :file-name="previewState.fileName" />
-</template>
-
-<style scoped>
-/* 高度模型（2026-10-10 定稿）：卡片撑满视口（与全站其他页一致），但必须能"随长文生长"。
-   不能直接用通道 .yh-fill：其卡片是 flex:1（basis:0）+ min-height:420px，卡片被钉在容器高，
-   而 .main-container 带 overflow:hidden（base.layout.css:222）→ 长文被裁掉且滚不到（最小复现已验证）。
-   故此处 page-wrapper 转 flex 纵向（全局已给 min-height:100%），卡片 flex:1 0 auto（basis:auto）
-   → 短文撑满、长文随内容长高、滚动留在 main-wrapper 整页滚。 */
-.page-wrapper {
-    display: flex;
-    flex-direction: column;
-}
-.page-wrapper > .main-container {
-    flex: 1 0 auto;
-    min-height: 420px;
-}
-.ops-top {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 12px;
-}
-.nav {
-    display: flex;
-    gap: 8px;
-}
-.notice-title2 {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--text);
-    margin: 0 0 12px;
-}
-.flow-card {
-    border: 1px solid var(--line);
-    border-radius: var(--r-s);
-    padding: 10px 14px;
-    margin-bottom: 14px;
-    background: #f7f9fc;
-}
-.flow-card-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    font-size: 13px;
-}
-.flow-title {
-    font-weight: 600;
-    color: var(--text);
-}
-.flow-nodes {
-    color: var(--text-3);
-}
-.flow-ops {
-    margin-left: auto;
-}
-.flow-opinion {
-    margin-top: 8px;
-    padding: 6px 10px;
-    background: var(--panel);
-    border-radius: var(--r-s);
-    color: var(--red);
-    font-size: 13px;
-}
-.flow-timeline {
-    margin-top: 8px;
-    background: var(--panel);
-    border-radius: var(--r-s);
-    padding: 6px 10px;
-}
-.flow-step {
-    display: flex;
-    gap: 12px;
-    font-size: 13px;
-    color: var(--text-2);
-    padding: 3px 0;
-    border-bottom: 1px dashed var(--line);
-}
-.flow-step:last-child {
-    border-bottom: none;
-}
-.flow-step-node {
-    min-width: 120px;
-}
-.flow-step-user {
-    min-width: 90px;
-    color: var(--brand);
-}
-.flow-step-time {
-    color: var(--text-3);
-}
-.flow-step-op {
-    color: var(--red);
-}
-.flow-step-active .flow-step-node {
-    color: var(--brand);
-    font-weight: 600;
-}
-.flow-step-status {
-    font-style: normal;
-    color: var(--text-3);
-    margin-left: 4px;
-}
-.flow-step .flow-step-op {
-    font-style: normal;
-}
-.diagram-wrap {
-    text-align: center;
-    min-height: 200px;
-}
-.diagram-wrap img {
-    max-width: 100%;
-    height: auto;
-}
-/* 嵌入页 iframe 撑满 Drawer body（body padding 已由 :styles 置 0），嵌入页内部滚动 */
-.embed-frame-wrap {
-    height: 100%;
-}
-.embed-frame-wrap iframe {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 0;
-}
-.meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 18px;
-    padding: 8px 0;
-    border-bottom: 1px dashed var(--line);
-    font-size: 13px;
-    color: var(--text-3);
-}
-/* 管理视角统计条 */
-.stat-bar {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    padding: 4px 0;
-    font-size: 13px;
-    color: var(--text);
-    flex-wrap: wrap;
-}
-.progress-box {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 300px;
-}
-.percent-label {
-    color: var(--brand);
-    white-space: nowrap;
-    font-size: 13px;
-}
-.stat-nums {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    white-space: nowrap;
-    cursor: pointer;
-}
-.stat-nums .item {
-    color: var(--text-3);
-}
-.stat-nums b {
-    font-size: 20px;
-    margin: 0 2px;
-}
-.stat-nums .blue {
-    color: var(--brand);
-}
-.stat-nums .orange {
-    color: #f60;
-}
-.stat-tags {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-.divider {
-    border-bottom: 1px dashed var(--line);
-    margin: 8px 0;
-}
-.content {
-    padding: 16px 0;
-    /* 正文区最小高度：短通知别让附件/按钮紧贴一行字（旧版用 clientHeight-356 铺满视口，
-       会把附件顶出首屏；这里只留"呼吸区"，剩余空白落在按钮下方的卡片底部） */
-    min-height: 200px;
-    line-height: 1.8;
-    word-break: break-all;
-    color: var(--text);
-}
-.files {
-    border-top: 1px dashed var(--line);
-    padding-top: 12px;
-}
-.files-title {
-    font-size: 13px;
-    color: var(--text-3);
-    margin-bottom: 8px;
-}
-.down-all {
-    margin-left: 12px;
-    color: var(--brand);
-    cursor: pointer;
-}
-.file-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--text-2);
-    margin: 0 16px 8px 0;
-    font-size: 13px;
-    .file-type-icon {
-        font-size: 16px;
-        color: var(--text-2);
-    }
-    .file-name {
-        max-width: 320px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    .file-size {
-        color: var(--text-3);
-        font-size: 12px;
-    }
-    .file-op {
-        color: var(--brand);
-        cursor: pointer;
-    }
-}
-.bottom-btns {
-    border-top: 1px dashed var(--line);
-    padding-top: 14px;
-    margin-top: 8px;
-}
-/* 阅读情况弹窗 */
-.read-tip {
-    background: var(--brand-soft);
-    border: 1px solid var(--line);
-    color: var(--text-2);
-    padding: 8px 12px;
-    border-radius: var(--r-s);
-    font-size: 13px;
-    margin-bottom: 12px;
-}
-.read-list {
-    max-height: 380px;
-    overflow-y: auto;
-}
-.read-group {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 14px;
-}
-.read-group-name {
-    flex: none;
-    width: 130px;
-    text-align: right;
-    color: var(--text-2);
-    font-size: 13px;
-    line-height: 22px;
-}
-.read-users {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 14px;
-}
-.user-name {
-    font-size: 13px;
-    line-height: 22px;
-    cursor: default;
-}
-.green {
-    color: var(--green);
-}
-.red {
-    color: var(--red);
-}
-.empty {
-    color: var(--text-3);
-    font-size: 13px;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message } from "view-ui-plus";
+import { noticeApi } from "@/api/module/notice";
+import type { NoticeDetailVo, NextPrevVo, ReadGroup, FlowTraceVo } from "@/types/notice";
+import FilePreviewModal from "@/components/FilePreviewModal.vue";
+import FlowApprovalCard from "@/components/flow-approval/FlowApprovalCard.vue";
+import FlowTaskEmbed from "@/components/flow-approval/FlowTaskEmbed.vue";
+import noticeFlowApprovalApi from "@/api/module/approvalAdapter";
+import Utils from "@/utils";
+import { fitDiagram } from "@/utils/diagramImg";
+import config from "@/assets/config/host.config";
+
+const route = useRoute();
+const router = useRouter();
+
+const serid = computed(() => Number(route.query.serid) || 0);
+/* type=0 管理视角(不标读) / type=1 查看(标读)；注意 0 是合法值不能用 || 兜底 */
+const viewType = computed(() => {
+    const t = Number(route.query.type);
+    return t === 0 ? 0 : 1;
+});
+/* 上一/下一篇的序列类型：管理视角走已发(type=0)，查看走已收(type=1) */
+const navType = computed(() => (viewType.value === 0 ? "0" : "1"));
+
+const detail = ref<NoticeDetailVo | null>(null);
+const loading = ref(false);
+
+/* ============ 先审后发：审批进度卡片 + 撤回/催办 ============ */
+const flowTrace = ref<FlowTraceVo | null>(null);
+const flowActing = ref(false);
+
+async function loadTrace() {
+    if (!detail.value?.flowGuid) return;
+    try {
+        flowTrace.value = await noticeApi.flowTrace(serid.value).send();
+    } catch {
+        flowTrace.value = null; // 进度不可用时只展示本地镜像
+    }
+}
+
+/**
+ * 撤回：走本应用后端（2026-09-17 接入：后端经 SDK 托管件中转并复核创建人，
+ * 不再前端直调 flow-center——跨应用 CAS 票据 + CORS 双重外溢且"谁能撤"落在前端）。
+ * 催办：仍是"人"的动作，走 flow-center 用户面（同主域 CAS 免二次登录）。
+ */
+async function flowAction(action: "withdraw" | "urge") {
+    const instanceId = detail.value?.flowInstanceId;
+    if (!instanceId) return;
+    flowActing.value = true;
+    try {
+        if (action === "withdraw") {
+            await noticeApi.flowWithdraw(serid.value).send();
+            Message.success("已撤回审核，可编辑后重新提交");
+            await load();
+            await loadTrace();
+        } else {
+            if (!config.flowHost) return;
+            const resp = await fetch(`${config.flowHost}/api/flow/instance/${instanceId}/urge`, {
+                method: "POST",
+                credentials: "include",
+            });
+            const res = await resp.json().catch(() => null);
+            if (resp.ok && res && res.code === 0) {
+                Message.success("已发送催办提醒");
+            } else {
+                Message.error(res?.msg || "催办失败");
+            }
+        }
+    } catch (e: any) {
+        Message.error(
+            action === "withdraw"
+                ? "撤回失败（已有人办理时不可撤回）：" + (e?.msg || e?.message || e)
+                : "流程中心不可达：" + (e?.message || e),
+        );
+    } finally {
+        flowActing.value = false;
+    }
+}
+
+/* 流程图弹窗（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;
+}
+const diagramSrc = computed(() =>
+    diagramVisible.value && detail.value?.flowInstanceId
+        ? `${config.serviceHost}/api/notice/flow/Diagram?serid=${serid.value}`
+        : "",
+);
+function onDiagramError() {
+    diagramVisible.value = false;
+    Message.error("流程图加载失败（可能已过期，请刷新页面重试）");
+}
+
+/* 办件进度嵌入页（iframe 免签嵌入 flow-center 统一进度页）：每次打开现取 pageUrl——
+ * token 10 分钟短时效，不缓存、不落 localStorage 复用；嵌入页内部自己滚动 */
+const embedVisible = ref(false);
+const embedPageUrl = ref("");
+async function openFlowEmbed() {
+    if (!detail.value?.flowInstanceId) return;
+    embedVisible.value = true;
+    embedPageUrl.value = "";
+    try {
+        const res = await noticeApi.flowEmbed(serid.value).send();
+        embedPageUrl.value = res?.pageUrl || "";
+    } catch (e: any) {
+        embedVisible.value = false;
+        Message.error(e?.msg || e?.message || "嵌入页地址获取失败");
+    }
+}
+
+/* ============ v2.1 审批动作：卡片办理后刷新；完整办理走 CAS 去壳任务页 ============ */
+
+/** 卡片里通过/驳回成功：刷新进度与详情（业务状态由 flow-center 回调推进，前端不本地写） */
+async function onApprovalHandled() {
+    await Promise.all([load(), loadTrace()]);
+}
+
+const taskVisible = ref(false);
+const taskPageUrl = ref("");
+const taskCurrentId = ref<number | string>("");
+
+/** 任务页地址由后端签发（它会先确认 taskId 属于当前人待办），前端不拼 flow-center 基址 */
+async function openTaskFromCard(taskId: number) {
+    taskPageUrl.value = "";
+    try {
+        const res: any = await noticeFlowApprovalApi.taskPageUrl(String(serid.value), taskId);
+        if (!res?.pageUrl) {
+            Message.error(res?.msg || "办理页地址获取失败");
+            return;
+        }
+        taskCurrentId.value = taskId;
+        taskPageUrl.value = res.pageUrl;
+        taskVisible.value = true;
+    } catch (e: any) {
+        Message.error(e?.msg || e?.message || "办理页打开失败");
+    }
+}
+
+/** 任务页里办完：关弹窗并刷新进度/详情，不等轮询 */
+async function onTaskHandled() {
+    taskVisible.value = false;
+    await Promise.all([load(), loadTrace()]);
+}
+
+/**
+ * 任务页"查看业务详情"：bizId 就是 notice.id。本页通常就是该单据详情 → 关弹窗刷新即可；
+ * 指向别的单据才跳转。bizUrl 是裸相对路径（不含 ctx/#），由本应用路由接管，不能 window.open
+ * 原串（会白跳一个 404）。
+ */
+function onTaskOpenBiz(payload: { bizId?: string | null; bizUrl?: string }) {
+    taskVisible.value = false;
+    const target = String(payload?.bizId ?? "");
+    if (target && target !== String(serid.value)) {
+        router.push(`/list/detail?serid=${target}`);
+        return;
+    }
+    load();
+    loadTrace();
+}
+
+const readGroups = ref<ReadGroup[]>([]);
+const showRead = ref(false);
+const prevId = ref(0);
+const nextId = ref(0);
+
+onMounted(async () => {
+    await load();
+    loadTrace(); // 详情加载后并行取审批进度（未绑流程接口自身返回 bound=false）
+});
+
+async function load() {
+    if (!serid.value) return;
+    loading.value = true;
+    try {
+        detail.value = await noticeApi.modify(serid.value, viewType.value).send();
+        const nav: NextPrevVo = await noticeApi.getNextPrevNotice(serid.value, navType.value).send();
+        prevId.value = nav.prevId || 0;
+        nextId.value = nav.nextId || 0;
+        loadTrace();
+    } catch (e: any) {
+        Message.error(e.message || "加载通知失败");
+    } finally {
+        loading.value = false;
+    }
+}
+
+function goNav(id: number) {
+    if (!id) return;
+    router.replace({ path: route.path, query: { ...route.query, serid: id } });
+    load();
+}
+
+/* 阅读进度（同旧版：已查看百分比） */
+const readPercent = computed(() => {
+    const total = Number(detail.value?.numcount) || 0;
+    const read = Number(detail.value?.readnumcount) || 0;
+    if (!total) return 0;
+    return Math.round((read / total) * 100);
+});
+const unreadCount = computed(() => Math.max((Number(detail.value?.numcount) || 0) - (Number(detail.value?.readnumcount) || 0), 0));
+
+async function openRead() {
+    try {
+        readGroups.value = await noticeApi.orgizeModify(serid.value).send();
+        showRead.value = true;
+    } catch (e: any) {
+        Message.error(e.message || "加载阅读情况失败");
+    }
+}
+
+/* 编辑（管理视角） */
+function onEdit() {
+    router.push({ path: "/list/new", query: { serid: serid.value } });
+}
+
+/* 打印 */
+function onPrint() {
+    if (!detail.value) return;
+    const win = window.open("", "_blank");
+    if (!win) return;
+    win.document.write(`
+        <html>
+            <head><title>${detail.value.title || ""}</title></head>
+            <body style="font-family:'Microsoft YaHei',sans-serif;padding:24px;">
+                <h2>${detail.value.title || ""}</h2>
+                <p style="color:#666;font-size:13px;">
+                    来源：${detail.value.DeptName || ""}　发布人：${detail.value.TeaName || ""}　发布时间：${detail.value.EditDate || ""}
+                </p>
+                <hr/>
+                <div>${detail.value.Contents || ""}</div>
+            </body>
+        </html>
+    `);
+    win.document.close();
+    win.focus();
+    win.print();
+}
+
+/** 审核状态 Tag 颜色 */
+function auditColor(auditStatus?: number | null) {
+    if (auditStatus === 20) return "green";
+    if (auditStatus === 30) return "red";
+    if (auditStatus === 40) return "orange";
+    if (auditStatus === 0) return "default";
+    return "blue"; // 审批中
+}
+
+function downFile(id: number) {
+    if (!id) return;
+    window.location.href = noticeApi.fileDownUrl(id);
+}
+function downAll() {
+    window.location.href = noticeApi.allFileDownUrl(serid.value);
+}
+
+/** 展示名：后端 name=原始文件名，filename=存储相对路径（notice/2026xxxx/uuid.ext） */
+function displayName(item: { name?: string; filename?: string }) {
+    return item.name || item.filename || "";
+}
+/* 附件图标（按扩展名，图标名对齐旧版 matchSuffix → icon-word/excel/ppt/pdf1/txt/tupian/yasuo/weizhi） */
+function getFileIcon(name: string) {
+    const suffix = String(name || "").split(".").pop()?.toLowerCase() || "";
+    if (["doc", "docx", "wps"].includes(suffix)) return "icon-word";
+    if (["xls", "xlsx"].includes(suffix)) return "icon-excel";
+    if (["ppt", "pptx"].includes(suffix)) return "icon-ppt";
+    if (["pdf"].includes(suffix)) return "icon-pdf1";
+    if (["txt"].includes(suffix)) return "icon-txt";
+    // 平台 icons.css 的 icon-tupian 是线性「图片」图标；icon-tupian1 是旧彩色图转单色，看不出是图片
+    if (["jpg", "jpeg", "png", "gif", "bmp"].includes(suffix)) return "icon-tupian";
+    if (["zip", "rar"].includes(suffix)) return "icon-yasuo";
+    return "icon-weizhi";
+}
+/* 可在线预览（open-file-viewer 支持：图片/pdf/txt/docx/xlsx/pptx；doc/zip 等仅下载） */
+function getIsPreview(name: string) {
+    const suffix = String(name || "").split(".").pop()?.toLowerCase() || "";
+    return ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "txt", "pdf", "docx", "xlsx", "pptx"].includes(suffix);
+}
+/* 附件预览弹窗（open-file-viewer） */
+const previewState = ref<{ show: boolean; fileId: number | null; fileName: string }>({
+    show: false,
+    fileId: null,
+    fileName: "",
+});
+function openPreview(item: { name?: string; filename?: string; fileid?: number; id?: number }) {
+    previewState.value = {
+        show: true,
+        fileId: Number(item.fileid || item.id) || null,
+        fileName: displayName(item),
+    };
+}
+</script>
+
+<template>
+    <div class="page-wrapper">
+        <div class="main-container" v-if="detail">
+            <div class="ops-top">
+            <div class="nav">
+                <Button size="small" :disabled="!prevId" @click="goNav(prevId)">上一篇</Button>
+                <Button size="small" :disabled="!nextId" @click="goNav(nextId)">下一篇</Button>
+            </div>
+        </div>
+
+        <!-- 管理视角：阅读进度统计条（同旧版已发通知详情） -->
+        <template v-if="viewType === 0">
+            <h2 class="notice-title2">{{ detail.title }}</h2>
+            <div class="stat-bar">
+                <div class="progress-box">
+                    <Progress :percent="readPercent" hide-info :stroke-width="10" />
+                    <span class="percent-label">已查看 {{ readPercent }}%</span>
+                </div>
+                <div class="stat-nums" title="点击查看阅读情况" @click="openRead">
+                    <span class="item">总人数 <b class="blue">{{ detail.numcount || 0 }}</b> 人</span>
+                    <span class="item">已读 <b class="orange">{{ detail.readnumcount || 0 }}</b> 人</span>
+                    <span class="item">未读 <b class="blue">{{ unreadCount }}</b> 人</span>
+                </div>
+                <div class="stat-tags">
+                    <Tag>{{ detail.DeptName }}</Tag>
+                    <Tag>{{ detail.TeaName }}</Tag>
+                    <Tag>{{ detail.EditDate }}</Tag>
+                </div>
+            </div>
+            <div class="divider"></div>
+        </template>
+
+        <!-- 查看视角：普通标题 -->
+        <h2 v-else class="notice-title2">{{ detail.title }}</h2>
+
+        <!-- 审批进度卡片（绑流程通知；提交人/管理员/办理人可见） -->
+        <div v-if="flowTrace && flowTrace.bound" class="flow-card">
+            <div class="flow-card-head">
+                <span class="flow-title">审批进度</span>
+                <Tag :color="auditColor(flowTrace.auditStatus)">{{ flowTrace.auditStatusDesc || "—" }}</Tag>
+                <span v-if="flowTrace.nodeSummary" class="flow-nodes">流程：{{ flowTrace.nodeSummary }}</span>
+                <span v-if="flowTrace.currentNodes" class="flow-nodes">当前节点：{{ flowTrace.currentNodes }}</span>
+                <div class="flow-ops">
+                    <Button v-if="detail.flowGuid" size="small" @click="openFlowDiagram">查看流程图</Button>
+                    <Button
+                        v-if="detail.flowInstanceId"
+                        size="small"
+                        style="margin-left: 8px"
+                        @click="openFlowEmbed"
+                        >审批进度</Button
+                    >
+                    <Button
+                        v-if="detail.flowInstanceId && flowTrace.auditStatus === 10"
+                        size="small"
+                        :loading="flowActing"
+                        style="margin-left: 8px"
+                        @click="flowAction('withdraw')"
+                        >撤回审核</Button
+                    >
+                    <Button
+                        v-if="detail.flowInstanceId && flowTrace.auditStatus === 10"
+                        size="small"
+                        :loading="flowActing"
+                        style="margin-left: 8px"
+                        @click="flowAction('urge')"
+                        >催办</Button
+                    >
+                </div>
+            </div>
+            <!-- 驳回/撤回意见 -->
+            <div v-if="flowTrace.flowResult && flowTrace.flowResult.opinion" class="flow-opinion">
+                办理意见：{{ flowTrace.flowResult.opinion }}
+                <template v-if="flowTrace.flowResult.rejectNode">（{{ flowTrace.flowResult.rejectNode }}）</template>
+            </div>
+            <!-- 结构化步骤时间线（2026-09-17 接入 SDK progress；steps[0] 固定"发起申请"，同节点多任务每人一行） -->
+            <div v-if="flowTrace.steps && flowTrace.steps.length" class="flow-timeline">
+                <div
+                    v-for="(s, i) in flowTrace.steps"
+                    :key="'fs' + i"
+                    class="flow-step"
+                    :class="{ 'flow-step-active': s.active }"
+                >
+                    <span class="flow-step-node">{{ s.label || s.nodeName || `节点${i + 1}` }}</span>
+                    <template v-if="s.assignees && s.assignees.length">
+                        <span v-for="(a, j) in s.assignees" :key="j" class="flow-step-user">
+                            {{ a.userName || "" }}
+                            <em v-if="a.statusLabel" class="flow-step-status">{{ a.statusLabel }}</em>
+                            <em v-if="a.opinion" class="flow-step-op">（{{ a.opinion }}）</em>
+                        </span>
+                    </template>
+                </div>
+            </div>
+            <!-- 节点时间线（traceJson 解析，steps 不可用时的兜底） -->
+            <div v-else-if="flowTrace.trace && flowTrace.trace.length" class="flow-timeline">
+                <div v-for="(t, i) in flowTrace.trace" :key="i" class="flow-step">
+                    <span class="flow-step-node">{{ t.nodeName || t.node || t.taskName || `节点${i + 1}` }}</span>
+                    <span class="flow-step-user">{{ t.userName || t.assigneeName || t.handlerName || "" }}</span>
+                    <span class="flow-step-time">{{ t.handleTime || t.time || t.createTime || "" }}</span>
+                    <span class="flow-step-op" v-if="t.opinion">{{ t.opinion }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- v2.1 审批动作卡片：当前人有待办→通过/驳回/完整办理；非待办人与终态→只读 + 查看记录。
+             与上方"审批进度"合用一份 flowTrace，动作区归卡片，状态/时间线仍归原卡片（方案 §7.4） -->
+        <FlowApprovalCard v-if="flowTrace && flowTrace.bound" :api="noticeFlowApprovalApi"
+                          biz-type="notice" :biz-id="String(serid)" :title="detail.title"
+                          :trace="flowTrace"
+                          @handled="onApprovalHandled" @open-record="openFlowEmbed"
+                          @open-task="openTaskFromCard" />
+
+        <!-- 流程图弹窗（后端同源出图，免 token 免跨域） -->
+        <Modal v-model="diagramVisible" title="流程示意图" :width="740" footer-hide>
+            <div class="diagram-wrap">
+                <img v-if="diagramSrc" ref="diagramEl" :src="diagramSrc" alt="流程示意图" @load="fitDiagram(diagramEl)" @error="onDiagramError" />
+            </div>
+        </Modal>
+
+        <!-- 办件进度嵌入页（Drawer 内 iframe 撑满，嵌入页内部滚动；token 每次打开现取） -->
+        <Drawer v-model="embedVisible" title="审批进度" :width="740" :transfer="false" :styles="{ body: { padding: '0' } }">
+            <div class="embed-frame-wrap">
+                <iframe v-if="embedPageUrl" :src="embedPageUrl" title="办件进度"></iframe>
+            </div>
+        </Drawer>
+
+        <!-- 完整办理：flow-center 去壳任务页（CAS 写面；退回/移交/多出口在那一侧） -->
+        <FlowTaskEmbed v-model="taskVisible" :page-url="taskPageUrl" :task-id="taskCurrentId"
+                       @handled="onTaskHandled" @open-biz="onTaskOpenBiz" />
+
+        <div v-if="viewType !== 0" class="meta">
+            <span>发文单位：{{ detail.DeptName || "—" }}</span>
+            <span>发布人：{{ detail.TeaName || "—" }}</span>
+            <span>发布时间：{{ detail.EditDate }}</span>
+            <span v-if="detail.isDsfs">定时发送：{{ detail.DsfsTime }}</span>
+        </div>
+
+        <div class="content" v-html="detail.Contents"></div>
+
+        <div v-if="detail.ChaoSend && detail.ChaoSend.length" class="files">
+            <div class="files-title">附件（{{ detail.ChaoSend.length }}）<a class="down-all" @click="downAll">全部下载</a></div>
+            <div v-for="f in detail.ChaoSend" :key="f.fileid || f.id" class="file-item">
+                <i class="iconfont file-type-icon" :class="getFileIcon(displayName(f))"></i>
+                <span class="file-name" :title="displayName(f)">{{ displayName(f) }}</span>
+                <span class="file-size">{{ Utils.getFileSize(f.size) }}</span>
+                <a class="file-op" v-if="getIsPreview(displayName(f))" @click="openPreview(f)">查看</a>
+                <a class="file-op" @click="downFile(f.fileid || f.id)">下载</a>
+            </div>
+        </div>
+
+        <!-- 管理视角底部操作（同旧版：编辑 / 打印；审批中隐藏编辑——后端 403 死按钮，BP-R5-1） -->
+        <div v-if="viewType === 0" class="bottom-btns">
+            <Button v-if="detail.auditStatus !== 10" @click="onEdit">编辑</Button>
+            <Tooltip v-else content="审批中，请先撤回再编辑" placement="top" transfer>
+                <Button disabled>编辑</Button>
+            </Tooltip>
+            <Button style="margin-left: 10px" @click="onPrint">打印</Button>
+        </div>
+
+        <!-- 查看阅读情况（同旧版：绿=已读 红=未读） -->
+        <Modal v-model="showRead" title="查看阅读情况" :width="620">
+            <div class="read-tip">提示：<span class="green">绿色</span>表示已读，<span class="red">红色</span>表示未读</div>
+            <div class="read-list">
+                <div v-for="g in readGroups" :key="g.GroupName" class="read-group">
+                    <div class="read-group-name">{{ g.GroupName }}：</div>
+                    <div class="read-users">
+                        <span
+                            v-for="t in g.teaslist"
+                            :key="t.account || t.teaname"
+                            :class="t.states === 'read' ? 'green' : 'red'"
+                            class="user-name"
+                            >{{ t.teaname }}</span
+                        >
+                    </div>
+                    <div v-if="!g.teaslist || !g.teaslist.length" class="empty">暂无人员</div>
+                </div>
+            </div>
+            <template #footer>
+                <Button type="primary" @click="showRead = false">确定</Button>
+            </template>
+        </Modal>
+        </div>
+        <div class="main-container" v-else-if="loading">加载中...</div>
+        <div class="main-container empty" v-else>通知不存在或已被删除</div>
+    </div>
+    <!-- 附件预览弹窗 -->
+    <FilePreviewModal v-model="previewState.show" :file-id="previewState.fileId" :file-name="previewState.fileName" />
+</template>
+
+<style scoped>
+/* 高度模型（2026-10-10 定稿）：卡片撑满视口（与全站其他页一致），但必须能"随长文生长"。
+   不能直接用通道 .yh-fill：其卡片是 flex:1（basis:0）+ min-height:420px，卡片被钉在容器高，
+   而 .main-container 带 overflow:hidden（base.layout.css:222）→ 长文被裁掉且滚不到（最小复现已验证）。
+   故此处 page-wrapper 转 flex 纵向（全局已给 min-height:100%），卡片 flex:1 0 auto（basis:auto）
+   → 短文撑满、长文随内容长高、滚动留在 main-wrapper 整页滚。 */
+.page-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+.page-wrapper > .main-container {
+    flex: 1 0 auto;
+    min-height: 420px;
+}
+.ops-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+.nav {
+    display: flex;
+    gap: 8px;
+}
+.notice-title2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text);
+    margin: 0 0 12px;
+}
+.flow-card {
+    border: 1px solid var(--line);
+    border-radius: var(--r-s);
+    padding: 10px 14px;
+    margin-bottom: 14px;
+    background: #f7f9fc;
+}
+.flow-card-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    font-size: 13px;
+}
+.flow-title {
+    font-weight: 600;
+    color: var(--text);
+}
+.flow-nodes {
+    color: var(--text-3);
+}
+.flow-ops {
+    margin-left: auto;
+}
+.flow-opinion {
+    margin-top: 8px;
+    padding: 6px 10px;
+    background: var(--panel);
+    border-radius: var(--r-s);
+    color: var(--red);
+    font-size: 13px;
+}
+.flow-timeline {
+    margin-top: 8px;
+    background: var(--panel);
+    border-radius: var(--r-s);
+    padding: 6px 10px;
+}
+.flow-step {
+    display: flex;
+    gap: 12px;
+    font-size: 13px;
+    color: var(--text-2);
+    padding: 3px 0;
+    border-bottom: 1px dashed var(--line);
+}
+.flow-step:last-child {
+    border-bottom: none;
+}
+.flow-step-node {
+    min-width: 120px;
+}
+.flow-step-user {
+    min-width: 90px;
+    color: var(--brand);
+}
+.flow-step-time {
+    color: var(--text-3);
+}
+.flow-step-op {
+    color: var(--red);
+}
+.flow-step-active .flow-step-node {
+    color: var(--brand);
+    font-weight: 600;
+}
+.flow-step-status {
+    font-style: normal;
+    color: var(--text-3);
+    margin-left: 4px;
+}
+.flow-step .flow-step-op {
+    font-style: normal;
+}
+.diagram-wrap {
+    text-align: center;
+    min-height: 200px;
+}
+.diagram-wrap img {
+    max-width: 100%;
+    height: auto;
+}
+/* 嵌入页 iframe 撑满 Drawer body（body padding 已由 :styles 置 0），嵌入页内部滚动 */
+.embed-frame-wrap {
+    height: 100%;
+}
+.embed-frame-wrap iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+.meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 18px;
+    padding: 8px 0;
+    border-bottom: 1px dashed var(--line);
+    font-size: 13px;
+    color: var(--text-3);
+}
+/* 管理视角统计条 */
+.stat-bar {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    padding: 4px 0;
+    font-size: 13px;
+    color: var(--text);
+    flex-wrap: wrap;
+}
+.progress-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 300px;
+}
+.percent-label {
+    color: var(--brand);
+    white-space: nowrap;
+    font-size: 13px;
+}
+.stat-nums {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.stat-nums .item {
+    color: var(--text-3);
+}
+.stat-nums b {
+    font-size: 20px;
+    margin: 0 2px;
+}
+.stat-nums .blue {
+    color: var(--brand);
+}
+.stat-nums .orange {
+    color: #f60;
+}
+.stat-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+.divider {
+    border-bottom: 1px dashed var(--line);
+    margin: 8px 0;
+}
+.content {
+    padding: 16px 0;
+    /* 正文区最小高度：短通知别让附件/按钮紧贴一行字（旧版用 clientHeight-356 铺满视口，
+       会把附件顶出首屏；这里只留"呼吸区"，剩余空白落在按钮下方的卡片底部） */
+    min-height: 200px;
+    line-height: 1.8;
+    word-break: break-all;
+    color: var(--text);
+}
+.files {
+    border-top: 1px dashed var(--line);
+    padding-top: 12px;
+}
+.files-title {
+    font-size: 13px;
+    color: var(--text-3);
+    margin-bottom: 8px;
+}
+.down-all {
+    margin-left: 12px;
+    color: var(--brand);
+    cursor: pointer;
+}
+.file-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-2);
+    margin: 0 16px 8px 0;
+    font-size: 13px;
+    .file-type-icon {
+        font-size: 16px;
+        color: var(--text-2);
+    }
+    .file-name {
+        max-width: 320px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .file-size {
+        color: var(--text-3);
+        font-size: 12px;
+    }
+    .file-op {
+        color: var(--brand);
+        cursor: pointer;
+    }
+}
+.bottom-btns {
+    border-top: 1px dashed var(--line);
+    padding-top: 14px;
+    margin-top: 8px;
+}
+/* 阅读情况弹窗 */
+.read-tip {
+    background: var(--brand-soft);
+    border: 1px solid var(--line);
+    color: var(--text-2);
+    padding: 8px 12px;
+    border-radius: var(--r-s);
+    font-size: 13px;
+    margin-bottom: 12px;
+}
+.read-list {
+    max-height: 380px;
+    overflow-y: auto;
+}
+.read-group {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 14px;
+}
+.read-group-name {
+    flex: none;
+    width: 130px;
+    text-align: right;
+    color: var(--text-2);
+    font-size: 13px;
+    line-height: 22px;
+}
+.read-users {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 14px;
+}
+.user-name {
+    font-size: 13px;
+    line-height: 22px;
+    cursor: default;
+}
+.green {
+    color: var(--green);
+}
+.red {
+    color: var(--red);
+}
+.empty {
+    color: var(--text-3);
+    font-size: 13px;
+}
+</style>