diff --git a/src/service/api/role.ts b/src/service/api/role.ts
index 7613329..363edfa 100644
--- a/src/service/api/role.ts
+++ b/src/service/api/role.ts
@@ -1,24 +1,24 @@
-import { request } from '../request';
-
-/** 获取角色列表
- *
- */
-export function roleListApi() {
-  return request({ url: '/api/role' });
-}
-/**
- * 登录
- *
- * @param username User name
- * @param password Password
- */
-export function fetchLogin(username: string, password: string) {
-  return request({
-    url: '/api/auth/login',
-    method: 'post',
-    data: {
-      username,
-      password
-    }
-  });
-}
+import { request } from '../request';
+
+/** 获取角色列表
+ *
+ */
+export function roleListApi() {
+  return request({ url: '/api/role' });
+}
+/**
+ * 登录
+ *
+ * @param username User name
+ * @param password Password
+ */
+export function fetchLogin(username: string, password: string) {
+  return request({
+    url: '/api/auth/login',
+    method: 'post',
+    data: {
+      username,
+      password
+    }
+  });
+}
diff --git a/src/typings/model.ts b/src/typings/model.ts
index ac8f255..7d82305 100644
--- a/src/typings/model.ts
+++ b/src/typings/model.ts
@@ -1,688 +1,688 @@
-// ===================== 数据模型与 Mock 数据 =====================
-
-export type RoleId = "applicant" | "process" | "process2" | "safety" | "quality" | "dept" | "vp" | "admin" | "viewer";
-
-export interface Role {
-  id: RoleId;
-  name: string;
-  person: string;
-  org: string;
-  desc: string;
-}
-
-export const ROLES: Role[] = [
-  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
-  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
-  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
-  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
-  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
-  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
-  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
-  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
-  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
-];
-
-export type ChangeType = "工艺" | "设备" | "管理";
-export type ChangeLevel = "重要" | "一般";
-export type ChangeStatus =
-  | "审批中"
-  | "已批准"
-  | "实施中"
-  | "待PSSR"
-  | "待验收"
-  | "待关闭"
-  | "已关闭";
-
-export interface FlowNode {
-  name: string;
-  kind: "审批" | "会签" | "最终批准";
-  roles: RoleId[];
-  members?: { name: string; done: boolean }[];
-  status: "done" | "current" | "todo";
-  locked?: boolean;
-}
-
-export interface ChangeOrder {
-  id: string;
-  title: string;
-  type: ChangeType;
-  level: ChangeLevel;
-  duration: "永久" | "临时";
-  urgent: boolean;
-  status: ChangeStatus;
-  applicant: string;
-  org: string;
-  device: string;
-  date: string;
-  purpose: string;
-  effect: string;
-  before: string;
-  after: string;
-  related: string[];
-  materials: string[];
-  riskTools: string[];
-  flow: FlowNode[];
-  overdueDays?: number;
-}
-
-export const FLOW_IMPORTANT: FlowNode[] = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  {
-    name: "专业会签",
-    kind: "会签",
-    roles: ["process", "process2", "quality"],
-    status: "current",
-    members: [
-      { name: "王仪表（仪表）", done: true },
-      { name: "周设备（设备）", done: false },
-      { name: "陈质量（质量）", done: false },
-    ],
-  },
-  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
-  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-];
-
-export const FLOW_SIMPLE: FlowNode[] = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-];
-
-export const CHANGES: ChangeOrder[] = [
-  {
-    id: "MOC-2026-R01-0035",
-    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
-    type: "设备",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "R-201 反应釜 / M-201A 搅拌电机",
-    date: "2026-07-28",
-    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
-    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
-    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
-    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
-    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
-    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
-    riskTools: ["AI 分析", "JSA", "检查表法"],
-    flow: FLOW_IMPORTANT,
-  },
-  {
-    id: "MOC-2026-R01-0036",
-    title: "聚合反应温度控制上限调整（78℃→82℃）",
-    type: "工艺",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "孙丽",
-    org: "一车间 · 工艺组",
-    device: "R-101 聚合釜 / TIC-101",
-    date: "2026-07-25",
-    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
-    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
-    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
-    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
-    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
-    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-    ],
-  },
-  {
-    id: "MOC-2026-R02-0038",
-    title: "DCS 罐区液位报警值 LIA-301 调整",
-    type: "工艺",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "待PSSR",
-    applicant: "吴强",
-    org: "一车间 · 罐区",
-    device: "V-301 储罐 / LIA-301",
-    date: "2026-07-20",
-    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
-    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
-    before: "LIA-301 高报 80%（对应 7.2m）。",
-    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
-    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
-    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0039",
-    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
-    type: "设备",
-    level: "一般",
-    duration: "临时",
-    urgent: true,
-    status: "待关闭",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "V-102 缓冲罐 / PSV-102",
-    date: "2026-07-15",
-    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
-    effect: "装置维持连续运行，临时期限内风险受控。",
-    before: "PSV-102 起跳压力 0.8MPa。",
-    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
-    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
-    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-    overdueDays: 4,
-  },
-  {
-    id: "MOC-2026-R03-0040",
-    title: "原料环己烷供应商变更（新增 B 供应商）",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "实施中",
-    applicant: "刘芳",
-    org: "供应部",
-    device: "原料罐区 / TK-201",
-    date: "2026-07-18",
-    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
-    effect: "供应保障能力提升，采购成本预计下降 3%。",
-    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
-    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
-    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
-    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0029",
-    title: "操作规程修订（夏季工况）",
-    type: "管理",
-    level: "一般",
-    duration: "临时",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "全装置",
-    date: "2026-06-20",
-    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
-    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
-    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
-    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
-    related: ["操作规程升版发布", "岗位人员培训"],
-    materials: ["修订后操作规程", "参数核算表"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R02-0041",
-    title: "公用工程氮气减压阀组改造",
-    type: "设备",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "周涛",
-    org: "公用工程车间",
-    device: "氮气总管 / PV-208 减压阀组",
-    date: "2026-07-29",
-    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
-    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
-    before: "PV-208 单路减压，无备用回路。",
-    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
-    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
-    materials: ["阀门数据表", "管道单线图", "施工方案"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R03-0042",
-    title: "三车间自动化和安全隐患整改项目变更",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "刘芳",
-    org: "三车间",
-    device: "三车间装置区",
-    date: "2026-07-31",
-    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
-    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
-    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
-    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
-    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
-    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "process2", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "周设备（设备）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
-    ],
-  },
-];
-
-// ===================== PSSR / 验收 =====================
-export interface PssrItem {
-  id: number;
-  category: string;
-  content: string;
-  owner: string;
-  status: "待确认" | "已确认" | "不适用" | "整改中";
-  photo?: boolean;
-  /** 完成时点：投用前（未完成禁止投用）/ 关闭前（未完成禁止关闭） */
-  phase?: "投用前" | "关闭前";
-}
-
-export const PSSR_ITEMS: PssrItem[] = [
-  { id: 1, category: "设备完整性", content: "搅拌电机安装就位，联轴器对中合格，地脚螺栓紧固", owner: "周设备", status: "已确认", photo: true, phase: "投用前" },
-  { id: 2, category: "设备完整性", content: "电机空载/负载试车合格，轴承温度、振动值在正常范围", owner: "周设备", status: "已确认", photo: true, phase: "投用前" },
-  { id: 3, category: "仪表联锁", content: "电机过载保护定值按 75kW 重新整定并传动试验合格", owner: "王仪表", status: "待确认", phase: "投用前" },
-  { id: 4, category: "图纸规程", content: "P&ID（PID-R201-03）与电气图纸已更新发布", owner: "王仪表", status: "已确认", phase: "关闭前" },
-  { id: 5, category: "人员培训", content: "相关岗位 12 人完成新设备操作培训并考核合格", owner: "李主任", status: "待确认", phase: "投用前" },
-  { id: 6, category: "应急消防", content: "现场消防器材完好，应急通道畅通", owner: "王海燕", status: "待确认", phase: "投用前" },
-  { id: 7, category: "施工确认", content: "施工遗留物清理完毕，临时用电已拆除", owner: "周设备", status: "整改中", phase: "投用前" },
-];
-
-export const ACCEPT_ITEMS: PssrItem[] = [
-  { id: 1, category: "一致性", content: "实施结果与批准的变更内容一致（电机型号、参数符合批准方案）", owner: "李主任", status: "待确认" },
-  { id: 2, category: "连带变更", content: "5 项连带变更全部完成（图纸、台账、联锁、备件、培训）", owner: "李主任", status: "待确认" },
-  { id: 3, category: "资料更新", content: "P&ID、电气图纸、设备台账已归档最新版本", owner: "王仪表", status: "待确认" },
-  { id: 4, category: "运行验证", content: "连续运行 72 小时无异常，搅拌电流稳定在 118A±5%", owner: "张工艺", status: "待确认" },
-];
-
-// ===================== 关闭校验 =====================
-export interface ClosureCheck {
-  item: string;
-  done: boolean;
-  note?: string;
-}
-export const CLOSURE_CHECKS: ClosureCheck[] = [
-  { item: "变更验收完成（结论：基本达到 · 遗留项 2 项已登记跟踪）", done: true },
-  { item: "资料上传齐全（验收报告、运行记录、恢复确认记录）", done: false, note: "缺：更新后的安全阀台账" },
-  { item: "行动项全部关闭（4/4，含「关闭前完成」标记项）", done: true },
-  { item: "受控文件已更新至生效版（P&ID Rev.4、操作规程）", done: false, note: "安全阀台账待更新发布" },
-  { item: "培训考核完成（12/12 人），签到与成绩已归档", done: true },
-];
-
-// ===================== 风险分析 =====================
-export const HAZOP_ROWS = [
-  { node: "R-101 聚合釜", guide: "过高（温度）", dev: "反应温度超过 82℃", cause: "冷却水中断；TIC-101 故障；进料配比失调", cons: "飞温、冲料、超压破裂", l: 2, s: 5, measures: "增设独立高温联锁；冷却水低流量报警；HAZOP 建议 2 项已落实" },
-  { node: "R-101 聚合釜", guide: "过低（温度）", dev: "温度低于 65℃", cause: "引发剂不足；夹套加热故障", cons: "反应中止、物料积压，恢复时剧烈反应", l: 3, s: 3, measures: "低温度报警；恢复升温操作程序" },
-  { node: "进料系统", guide: "无（流量）", dev: "单体进料中断", cause: "进料泵故障；过滤器堵塞", cons: "釜内配比失衡，产品质量事故", l: 2, s: 3, measures: "泵一用一备；压差报警" },
-  { node: "进料系统", guide: "反向", dev: "物料反向流动", cause: "停泵时止回阀失效", cons: "串料污染、计量错误", l: 2, s: 2, measures: "止回阀定期校验（检查表项）" },
-];
-
-export const JSA_ROWS = [
-  { step: "1. 停机断电隔离", hazard: "残余电能、机械能意外释放", measure: "执行上锁挂牌（LOTO），验电确认", owner: "周设备" },
-  { step: "2. 拆卸旧电机", hazard: "吊装伤害、挤压", measure: "持证起重工指挥，吊具检查，警戒区隔离", owner: "吊装班" },
-  { step: "3. 新电机安装对中", hazard: "对中误差导致振动超标", measure: "激光对中仪，偏差 ≤0.05mm", owner: "周设备" },
-  { step: "4. 接线与送电", hazard: "触电、相序错误反转", measure: "双人复核相序，点动确认转向", owner: "电气班" },
-  { step: "5. 试车", hazard: "机械伤害、异常振动", measure: "空载→负载分级试车，振动在线监测", owner: "周设备" },
-];
-
-export const SCL_ROWS = [
-  { item: "新电机防爆等级不低于区域要求（ExdⅡCT4）", std: "GB 50058", result: "符合" },
-  { item: "电缆载流量与开关容量匹配 75kW 负荷", std: "GB 50217", result: "符合" },
-  { item: "电机接地电阻 ≤4Ω", std: "GB 50169", result: "符合" },
-  { item: "防护罩、联轴器护罩安装齐全", std: "企业设备规程", result: "整改后符合" },
-  { item: "润滑油牌号与加注量符合制造商要求", std: "制造商手册", result: "符合" },
-];
-
-// ===================== 资料库 =====================
-export const KNOWLEDGE_DOCS = [
-  { name: "PID-R201-03 反应釜工艺流程图（Rev C）", cat: "工艺技术资料", device: "一车间", ver: "Rev C", date: "2026-07-29" },
-  { name: "聚合岗位操作规程（2026 版）", cat: "工艺技术资料", device: "一车间", ver: "V2026", date: "2026-07-26" },
-  { name: "M-201A 搅拌电机设备台账", cat: "设备资料", device: "一车间", ver: "V3.2", date: "2026-07-28" },
-  { name: "环己烷 MSDS（供应商 B）", cat: "化学品资料", device: "原料罐区", ver: "V1.0", date: "2026-07-18" },
-  { name: "AQ/T 3034 化工企业工艺安全管理实施导则", cat: "法规标准库", device: "全厂", ver: "2013 版", date: "2025-12-01" },
-  { name: "PSSR 检查表模板（设备类）", cat: "检查表模板库", device: "全厂", ver: "V2.1", date: "2026-05-10" },
-  { name: "2025 年度典型变更案例汇编", cat: "历史变更案例库", device: "全厂", ver: "2025 版", date: "2026-01-15" },
-  { name: "HAZOP 分析报告（R-101 温度变更）", cat: "历史变更案例库", device: "一车间", ver: "V1.0", date: "2026-07-26" },
-];
-
-// ===================== 报表数据 =====================
-export const MONTHLY_COUNTS = [
-  { m: "2月", count: 4 }, { m: "3月", count: 6 }, { m: "4月", count: 5 },
-  { m: "5月", count: 8 }, { m: "6月", count: 7 }, { m: "7月", count: 9 },
-];
-export const TYPE_DIST = [
-  { name: "工艺", value: 16 }, { name: "设备", value: 14 }, { name: "管理", value: 9 },
-];
-export const CYCLE_TREND = [
-  { m: "2月", days: 12.5 }, { m: "3月", days: 11.2 }, { m: "4月", days: 10.8 },
-  { m: "5月", days: 9.6 }, { m: "6月", days: 8.9 }, { m: "7月", days: 8.2 },
-];
-export const OVERDUE_LIST = [
-  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
-];
-
-// 状态色阶梯：全站状态标签唯一来源（工作台 / 台账 / 我的任务 / 审批中心共用），
-// 色相全部取自品牌色板——amber=进行中提醒，品牌蓝=审批通过/执行，violet=投用前检查，emerald=验收/完成（浅→深递进），品牌红=待关闭关闸提醒
-export const STATUS_COLOR: Record<ChangeStatus, string> = {
-  审批中: "bg-amber-100 text-amber-700 border-amber-200",
-  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
-  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
-  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
-  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
-  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
-  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
-};
-
-export const LEVEL_COLOR: Record<ChangeLevel, string> = {
-  重要: "bg-red-100 text-red-700 border-red-200",
-  一般: "bg-slate-100 text-slate-600 border-slate-200",
-};
-
-// ===================== 变更台账 =====================
-export interface LedgerRow {
-  id: string;
-  changeId?: string; // 关联 CHANGES，可打开完整详情
-  title: string;
-  type: ChangeType;
-  level: ChangeLevel;
-  duration: "永久" | "临时";
-  urgent?: boolean;
-  applyTime: string;   // 申请时间
-  dept: string;        // 申请部门
-  applicant: string;   // 申请人
-  planUse: string;     // 计划投用时间
-  status: ChangeStatus;
-  statusDetail: string; // 当前环节说明
-  statusTime: string;  // 状态更新时间
-  overdueDays?: number;
-  approveTime?: string; // 审批通过时间
-  useTime?: string;     // 实际投用时间
-  handlers: { name: string; done: boolean }[]; // 接班人（当前待办/已办）
-}
-
-export const LEDGER_ROWS: LedgerRow[] = [
-  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
-  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
-  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
-  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
-  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
-  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
-];
-
-// 演示数据：执行阶段变更的培训签到表 / PSSR 签字版上传状态（上传即视为完成确认并随单归档，系统不做内容识别）
-export const PSSR_UPLOADS: Record<string, { train?: string; pssr?: string }> = {
-  "MOC-2026-R02-0038": { train: "培训签到表-照片.jpg", pssr: "PSSR 检查确认表-签字版.pdf" },
-  "MOC-2026-R02-0031": { train: "培训签到表-照片.jpg", pssr: "PSSR 检查确认表-签字版.pdf" },
-  "MOC-2026-R03-0027": { train: "培训签到表-归档.pdf", pssr: "PSSR 检查确认表-归档版.pdf" },
-  "MOC-2026-R01-0024": { train: "培训签到表-归档.pdf", pssr: "PSSR 检查确认表-归档版.pdf" },
-};
-
-// ===================== 演示用轻量全局状态（提交 / 审批真实推进，全站联动） =====================
-type DemoListener = () => void;
-const demoListeners = new Set<DemoListener>();
-export function subscribeDemo(fn: DemoListener) {
-  demoListeners.add(fn);
-  return () => { demoListeners.delete(fn); };
-}
-function emitDemo() { demoListeners.forEach((f) => f()); }
-
-// ===================== 催办记录（车间主任催办 → 申请人操作台实时提示，全站同源） =====================
-export interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
-export const URGE_RECORDS: UrgeRecord[] = [];
-let urgeSeq = 1;
-/** 车间主任催办：写入同源记录并广播，申请人操作台即时出现催办提示 */
-export function urgeChange(changeId: string, byRole: RoleId) {
-  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
-  const c = CHANGES.find((x) => x.id === changeId);
-  const by = ROLES.find((r) => r.id === byRole)?.person ?? byRole;
-  URGE_RECORDS.unshift({
-    id: `URGE-${urgeSeq++}`,
-    changeId,
-    title: row?.title ?? c?.title ?? changeId,
-    applicant: row?.applicant ?? c?.applicant ?? "",
-    by,
-    time: nowStr(),
-  });
-  emitDemo();
-}
-
-let demoSeq = 43;
-export function nextChangeId() {
-  return `MOC-2026-R01-${String(demoSeq++).padStart(4, "0")}`;
-}
-
-function nowStr() {
-  const d = new Date();
-  const p = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
-}
-
-/** 申请页提交：生成真实变更单，台账 / 审批中心 / 我的任务 / 角标联动 */
-export function submitChange(c: ChangeOrder) {
-  CHANGES.unshift(c);
-  const cur = c.flow.find((n) => n.status === "current");
-  LEDGER_ROWS.unshift({
-    id: c.id,
-    changeId: c.id,
-    title: c.title,
-    type: c.type,
-    level: c.level,
-    duration: c.duration,
-    urgent: c.urgent || undefined,
-    applyTime: nowStr(),
-    dept: c.org.split("·")[0].trim(),
-    applicant: c.applicant,
-    planUse: c.date || "待定",
-    status: c.status,
-    statusDetail: cur ? `${cur.name}（待处理）` : "审批中",
-    statusTime: nowStr(),
-    handlers: (cur?.roles ?? []).map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false })),
-  });
-  emitDemo();
-}
-
-/** 详情页同意：真实推进流程节点（会签按人标记，全签通过才流转；末节点后进入待PSSR） */
-export function advanceFlow(id: string, role: RoleId) {
-  const c = CHANGES.find((x) => x.id === id);
-  if (!c) return;
-  const idx = c.flow.findIndex((n) => n.status === "current");
-  if (idx < 0) return;
-  const node = c.flow[idx];
-  if (node.kind === "会签" && node.members) {
-    const person = ROLES.find((r) => r.id === role)?.person;
-    const m = node.members.find((x) => x.name.startsWith(person ?? ""));
-    if (m) m.done = true;
-    if (!node.members.every((x) => x.done)) { emitDemo(); return; }
-  }
-  node.status = "done";
-  const next = c.flow[idx + 1];
-  if (next) {
-    next.status = "current";
-    next.locked = false;
-  } else {
-    c.status = "待PSSR";
-  }
-  const row = LEDGER_ROWS.find((r) => r.changeId === id || r.id === id);
-  if (row) {
-    const cur = c.flow.find((n) => n.status === "current");
-    row.status = c.status;
-    row.statusTime = nowStr();
-    row.statusDetail = cur ? `${cur.name}（待处理）` : "审批完成，进入投用前确认";
-    row.handlers = cur
-      ? cur.roles.map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false }))
-      : [{ name: c.applicant, done: false }];
-  }
-  emitDemo();
-}
-
-// ===================== 延期 / 转永久子单（申请人提交 → 属地 / 安全 / 公司领导审批 → 回写原单，全站联动） =====================
-export interface SubOrder {
-  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
-  parentId: string;              // 原变更单号
-  parentTitle: string;
-  kind: "extend" | "permanent";
-  applicant: string;
-  reason: string;
-  newDeadline?: string;          // 延期子单：申请延期至
-  status: "审批中" | "已通过" | "已驳回";
-  submitTime: string;
-  steps: { role: RoleId; name: string; done: boolean }[]; // 会签：全员同意即通过
-  rejectNote?: string;
-}
-export const SUB_ORDERS: SubOrder[] = [];
-
-/** 申请人提交延期 / 转永久子单：延期走简化审批（属地负责人 + 变更主管部门）；转永久按永久变更审批链（属地 → 安全 → 公司领导） */
-export function submitSubOrder(o: { parentId: string; parentTitle: string; kind: "extend" | "permanent"; applicant: string; reason: string; newDeadline?: string }) {
-  const steps: SubOrder["steps"] = o.kind === "extend"
-    ? [{ role: "dept", name: "李主任", done: false }, { role: "safety", name: "王海燕", done: false }]
-    : [{ role: "dept", name: "李主任", done: false }, { role: "safety", name: "王海燕", done: false }, { role: "vp", name: "刘副总", done: false }];
-  SUB_ORDERS.unshift({
-    id: `${o.parentId}-${o.kind === "extend" ? "Y1" : "Z1"}`,
-    ...o,
-    status: "审批中",
-    submitTime: nowStr(),
-    steps,
-  });
-  emitDemo();
-  return SUB_ORDERS[0];
-}
-
-/** 子单审批（同意 / 驳回）：全员同意 → 已通过并回写原单；任一驳回 → 已驳回，申请人可修改后重新提交 */
-export function decideSubOrder(id: string, role: RoleId, approve: boolean, note?: string) {
-  const s = SUB_ORDERS.find((x) => x.id === id);
-  if (!s || s.status !== "审批中") return;
-  const st = s.steps.find((x) => x.role === role);
-  if (!st || st.done) return;
-  st.done = true;
-  if (!approve) {
-    s.status = "已驳回";
-    s.rejectNote = note || "";
-  } else if (s.steps.every((x) => x.done)) {
-    s.status = "已通过";
-  }
-  emitDemo();
-}
-
-// ===================== 工作台 / 个人统计共享数据源（唯一口径，避免双写漂移） =====================
-/** 临时变更到期监视（申请人工作台「临时变更到期提醒情况」与个人统计报表共用同一来源） */
-export const TEMP_WATCH = [
-  { label: "正常（到期 > 7 天）", n: 1, c: "#7CC242", note: "循环水加药泵冲程临时调整 · 剩 17 天" },
-  { label: "临期（到期 ≤ 7 天）", n: 1, c: "#F5A623", note: "循环水旁滤器临时绕流运行 · 剩 6 天，已触发提醒" },
-  { label: "已超期", n: 1, c: "#E15555", note: "V-102 安全阀起跳压力临时调整 · 超期 4 天（已延期 1 次）" },
-];
-
-/** 培训确认待办（工作台「待确认培训」卡片与「我的任务 · 培训确认」同源） */
-export const TRAIN_TODO = [
-  { id: "MOC-2026-R01-0035", title: "搅拌电机更换操作培训", target: "R-201 岗位操作人员（4 人）、维修班（2 人）" },
-];
-
-/** 资料归档待办（工作台「待上传资料」卡片与「待我处理 · 资料关闭」同源：验收 / 归档材料补交） */
-export const DOC_TODO = [
-  { id: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", missing: "验收报告与运行数据" },
-  { id: "MOC-2026-R01-0039", title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）", missing: "更新后的 P&ID / 操作规程（受控最新版）、设备 / 联锁台账更新记录" },
-];
-
-/** 尚未关闭变更状态分布：四段口径固定，数量从 CHANGES 实时推导（0 项也保留展示，保证口径稳定）
- *  对应三大流转阶段：① 申请提交后 / 会签中 / 审批中；② 审批通过后 → 变更关闭前（含投用、验收）；③ 变更关闭 */
-export const OPEN_STAGES: { name: string; match: ChangeStatus[]; c: string }[] = [
-  { name: "审批中（含会签）", match: ["审批中"], c: "#F5A623" },
-  { name: "已批准待投用", match: ["已批准", "待PSSR", "实施中"], c: "#1D4E9C" },
-  { name: "待验收", match: ["待验收"], c: "#7CC242" },
-  { name: "待关闭", match: ["待关闭"], c: "#E15555" },
-];
-export function countOpenStatus(list: { status: ChangeStatus }[]) {
-  return OPEN_STAGES.map((s) => ({ name: s.name, c: s.c, n: list.filter((x) => s.match.includes(x.status)).length }));
-}
-
-// ===================== 统一待办推导（全站同源：工作台卡片 / 侧边栏角标 / 我的任务 / 审批中心） =====================
-/** 判断变更是否停在当前角色的待办节点。
- *  会签节点按成员粒度判定：已签署的成员（按角色对应人员姓名匹配）不再计入其待办。 */
-export function isPendingFor(c: ChangeOrder, role: RoleId): boolean {
-  if (c.status !== "审批中") return false;
-  const node = c.flow.find((n) => n.status === "current");
-  if (!node) return false;
-  if (node.kind === "会签" && node.members && node.members.length > 0) {
-    const person = ROLES.find((r) => r.id === role)?.person;
-    const me = person ? node.members.find((m) => m.name.startsWith(person)) : undefined;
-    if (me) return !me.done;
-  }
-  return node.roles.includes(role);
-}
-
-/** 当前角色的实时待审批变更列表（唯一数据源） */
-export function pendingApprovals(role: RoleId): ChangeOrder[] {
-  return CHANGES.filter((c) => isPendingFor(c, role));
-}
-
-/** 执行阶段（审批通过后 → 关闭前）的变更：投用准备与验收跟踪 */
-export function executionStage(list: ChangeOrder[] = CHANGES): ChangeOrder[] {
-  return list.filter((c) => c.status === "待PSSR" || c.status === "待验收");
-}
-
-/** 超期未关闭变更（待关闭且已超期） */
-export function overdueClosing(list: ChangeOrder[] = CHANGES): ChangeOrder[] {
-  return list.filter((c) => c.status === "待关闭" && (c.overdueDays ?? 0) > 0);
-}
-
-
-/** 专业人员「技术把关工作记录」：从 CHANGES 实时推导（与台账 / 待办同源，演示数据范围内统计）
- *  - signed：已完成的会签 / 审批签署次数（会签按成员粒度、审批节点按角色判定）
- *  - involved：涉及本专业的在办变更数（未关闭且流程中含本角色节点）
- *  - 驳回次数暂无结构化记录字段，演示版不展示；参与风险分析次数来自分析组成员（选择式）记录 */
-export function profWorkStats(role: RoleId) {
-  const person = ROLES.find((r) => r.id === role)?.person ?? "";
-  let signed = 0;
-  for (const c of CHANGES) {
-    for (const n of c.flow) {
-      if (n.kind === "会签" && n.members?.length) {
-        const me = n.members.find((m) => m.name.startsWith(person));
-        if (me?.done) signed += 1;
-      } else if (n.status === "done" && n.roles.includes(role)) {
-        signed += 1;
-      }
-    }
-  }
-  const involved = CHANGES.filter(
-    (c) => c.status !== "已关闭" && c.flow.some((n) => n.roles.includes(role))
-  ).length;
-  return { signed, involved };
-}
+// ===================== 数据模型与 Mock 数据 =====================
+
+export type RoleId = "applicant" | "process" | "process2" | "safety" | "quality" | "dept" | "vp" | "admin" | "viewer";
+
+export interface Role {
+  id: RoleId;
+  name: string;
+  person: string;
+  org: string;
+  desc: string;
+}
+
+export const ROLES: Role[] = [
+  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
+  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
+  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
+  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
+  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
+  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
+  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
+  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
+  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
+];
+
+export type ChangeType = "工艺" | "设备" | "管理";
+export type ChangeLevel = "重要" | "一般";
+export type ChangeStatus =
+  | "审批中"
+  | "已批准"
+  | "实施中"
+  | "待PSSR"
+  | "待验收"
+  | "待关闭"
+  | "已关闭";
+
+export interface FlowNode {
+  name: string;
+  kind: "审批" | "会签" | "最终批准";
+  roles: RoleId[];
+  members?: { name: string; done: boolean }[];
+  status: "done" | "current" | "todo";
+  locked?: boolean;
+}
+
+export interface ChangeOrder {
+  id: string;
+  title: string;
+  type: ChangeType;
+  level: ChangeLevel;
+  duration: "永久" | "临时";
+  urgent: boolean;
+  status: ChangeStatus;
+  applicant: string;
+  org: string;
+  device: string;
+  date: string;
+  purpose: string;
+  effect: string;
+  before: string;
+  after: string;
+  related: string[];
+  materials: string[];
+  riskTools: string[];
+  flow: FlowNode[];
+  overdueDays?: number;
+}
+
+export const FLOW_IMPORTANT: FlowNode[] = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  {
+    name: "专业会签",
+    kind: "会签",
+    roles: ["process", "process2", "quality"],
+    status: "current",
+    members: [
+      { name: "王仪表（仪表）", done: true },
+      { name: "周设备（设备）", done: false },
+      { name: "陈质量（质量）", done: false },
+    ],
+  },
+  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
+  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+];
+
+export const FLOW_SIMPLE: FlowNode[] = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+];
+
+export const CHANGES: ChangeOrder[] = [
+  {
+    id: "MOC-2026-R01-0035",
+    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
+    type: "设备",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "R-201 反应釜 / M-201A 搅拌电机",
+    date: "2026-07-28",
+    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
+    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
+    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
+    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
+    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
+    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
+    riskTools: ["AI 分析", "JSA", "检查表法"],
+    flow: FLOW_IMPORTANT,
+  },
+  {
+    id: "MOC-2026-R01-0036",
+    title: "聚合反应温度控制上限调整（78℃→82℃）",
+    type: "工艺",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "孙丽",
+    org: "一车间 · 工艺组",
+    device: "R-101 聚合釜 / TIC-101",
+    date: "2026-07-25",
+    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
+    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
+    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
+    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
+    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
+    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+    ],
+  },
+  {
+    id: "MOC-2026-R02-0038",
+    title: "DCS 罐区液位报警值 LIA-301 调整",
+    type: "工艺",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "待PSSR",
+    applicant: "吴强",
+    org: "一车间 · 罐区",
+    device: "V-301 储罐 / LIA-301",
+    date: "2026-07-20",
+    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
+    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
+    before: "LIA-301 高报 80%（对应 7.2m）。",
+    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
+    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
+    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0039",
+    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
+    type: "设备",
+    level: "一般",
+    duration: "临时",
+    urgent: true,
+    status: "待关闭",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "V-102 缓冲罐 / PSV-102",
+    date: "2026-07-15",
+    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
+    effect: "装置维持连续运行，临时期限内风险受控。",
+    before: "PSV-102 起跳压力 0.8MPa。",
+    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
+    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
+    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+    overdueDays: 4,
+  },
+  {
+    id: "MOC-2026-R03-0040",
+    title: "原料环己烷供应商变更（新增 B 供应商）",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "实施中",
+    applicant: "刘芳",
+    org: "供应部",
+    device: "原料罐区 / TK-201",
+    date: "2026-07-18",
+    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
+    effect: "供应保障能力提升，采购成本预计下降 3%。",
+    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
+    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
+    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
+    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0029",
+    title: "操作规程修订（夏季工况）",
+    type: "管理",
+    level: "一般",
+    duration: "临时",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "全装置",
+    date: "2026-06-20",
+    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
+    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
+    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
+    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
+    related: ["操作规程升版发布", "岗位人员培训"],
+    materials: ["修订后操作规程", "参数核算表"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R02-0041",
+    title: "公用工程氮气减压阀组改造",
+    type: "设备",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "周涛",
+    org: "公用工程车间",
+    device: "氮气总管 / PV-208 减压阀组",
+    date: "2026-07-29",
+    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
+    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
+    before: "PV-208 单路减压，无备用回路。",
+    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
+    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
+    materials: ["阀门数据表", "管道单线图", "施工方案"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R03-0042",
+    title: "三车间自动化和安全隐患整改项目变更",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "刘芳",
+    org: "三车间",
+    device: "三车间装置区",
+    date: "2026-07-31",
+    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
+    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
+    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
+    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
+    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
+    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "process2", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "周设备（设备）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
+    ],
+  },
+];
+
+// ===================== PSSR / 验收 =====================
+export interface PssrItem {
+  id: number;
+  category: string;
+  content: string;
+  owner: string;
+  status: "待确认" | "已确认" | "不适用" | "整改中";
+  photo?: boolean;
+  /** 完成时点：投用前（未完成禁止投用）/ 关闭前（未完成禁止关闭） */
+  phase?: "投用前" | "关闭前";
+}
+
+export const PSSR_ITEMS: PssrItem[] = [
+  { id: 1, category: "设备完整性", content: "搅拌电机安装就位，联轴器对中合格，地脚螺栓紧固", owner: "周设备", status: "已确认", photo: true, phase: "投用前" },
+  { id: 2, category: "设备完整性", content: "电机空载/负载试车合格，轴承温度、振动值在正常范围", owner: "周设备", status: "已确认", photo: true, phase: "投用前" },
+  { id: 3, category: "仪表联锁", content: "电机过载保护定值按 75kW 重新整定并传动试验合格", owner: "王仪表", status: "待确认", phase: "投用前" },
+  { id: 4, category: "图纸规程", content: "P&ID（PID-R201-03）与电气图纸已更新发布", owner: "王仪表", status: "已确认", phase: "关闭前" },
+  { id: 5, category: "人员培训", content: "相关岗位 12 人完成新设备操作培训并考核合格", owner: "李主任", status: "待确认", phase: "投用前" },
+  { id: 6, category: "应急消防", content: "现场消防器材完好，应急通道畅通", owner: "王海燕", status: "待确认", phase: "投用前" },
+  { id: 7, category: "施工确认", content: "施工遗留物清理完毕，临时用电已拆除", owner: "周设备", status: "整改中", phase: "投用前" },
+];
+
+export const ACCEPT_ITEMS: PssrItem[] = [
+  { id: 1, category: "一致性", content: "实施结果与批准的变更内容一致（电机型号、参数符合批准方案）", owner: "李主任", status: "待确认" },
+  { id: 2, category: "连带变更", content: "5 项连带变更全部完成（图纸、台账、联锁、备件、培训）", owner: "李主任", status: "待确认" },
+  { id: 3, category: "资料更新", content: "P&ID、电气图纸、设备台账已归档最新版本", owner: "王仪表", status: "待确认" },
+  { id: 4, category: "运行验证", content: "连续运行 72 小时无异常，搅拌电流稳定在 118A±5%", owner: "张工艺", status: "待确认" },
+];
+
+// ===================== 关闭校验 =====================
+export interface ClosureCheck {
+  item: string;
+  done: boolean;
+  note?: string;
+}
+export const CLOSURE_CHECKS: ClosureCheck[] = [
+  { item: "变更验收完成（结论：基本达到 · 遗留项 2 项已登记跟踪）", done: true },
+  { item: "资料上传齐全（验收报告、运行记录、恢复确认记录）", done: false, note: "缺：更新后的安全阀台账" },
+  { item: "行动项全部关闭（4/4，含「关闭前完成」标记项）", done: true },
+  { item: "受控文件已更新至生效版（P&ID Rev.4、操作规程）", done: false, note: "安全阀台账待更新发布" },
+  { item: "培训考核完成（12/12 人），签到与成绩已归档", done: true },
+];
+
+// ===================== 风险分析 =====================
+export const HAZOP_ROWS = [
+  { node: "R-101 聚合釜", guide: "过高（温度）", dev: "反应温度超过 82℃", cause: "冷却水中断；TIC-101 故障；进料配比失调", cons: "飞温、冲料、超压破裂", l: 2, s: 5, measures: "增设独立高温联锁；冷却水低流量报警；HAZOP 建议 2 项已落实" },
+  { node: "R-101 聚合釜", guide: "过低（温度）", dev: "温度低于 65℃", cause: "引发剂不足；夹套加热故障", cons: "反应中止、物料积压，恢复时剧烈反应", l: 3, s: 3, measures: "低温度报警；恢复升温操作程序" },
+  { node: "进料系统", guide: "无（流量）", dev: "单体进料中断", cause: "进料泵故障；过滤器堵塞", cons: "釜内配比失衡，产品质量事故", l: 2, s: 3, measures: "泵一用一备；压差报警" },
+  { node: "进料系统", guide: "反向", dev: "物料反向流动", cause: "停泵时止回阀失效", cons: "串料污染、计量错误", l: 2, s: 2, measures: "止回阀定期校验（检查表项）" },
+];
+
+export const JSA_ROWS = [
+  { step: "1. 停机断电隔离", hazard: "残余电能、机械能意外释放", measure: "执行上锁挂牌（LOTO），验电确认", owner: "周设备" },
+  { step: "2. 拆卸旧电机", hazard: "吊装伤害、挤压", measure: "持证起重工指挥，吊具检查，警戒区隔离", owner: "吊装班" },
+  { step: "3. 新电机安装对中", hazard: "对中误差导致振动超标", measure: "激光对中仪，偏差 ≤0.05mm", owner: "周设备" },
+  { step: "4. 接线与送电", hazard: "触电、相序错误反转", measure: "双人复核相序，点动确认转向", owner: "电气班" },
+  { step: "5. 试车", hazard: "机械伤害、异常振动", measure: "空载→负载分级试车，振动在线监测", owner: "周设备" },
+];
+
+export const SCL_ROWS = [
+  { item: "新电机防爆等级不低于区域要求（ExdⅡCT4）", std: "GB 50058", result: "符合" },
+  { item: "电缆载流量与开关容量匹配 75kW 负荷", std: "GB 50217", result: "符合" },
+  { item: "电机接地电阻 ≤4Ω", std: "GB 50169", result: "符合" },
+  { item: "防护罩、联轴器护罩安装齐全", std: "企业设备规程", result: "整改后符合" },
+  { item: "润滑油牌号与加注量符合制造商要求", std: "制造商手册", result: "符合" },
+];
+
+// ===================== 资料库 =====================
+export const KNOWLEDGE_DOCS = [
+  { name: "PID-R201-03 反应釜工艺流程图（Rev C）", cat: "工艺技术资料", device: "一车间", ver: "Rev C", date: "2026-07-29" },
+  { name: "聚合岗位操作规程（2026 版）", cat: "工艺技术资料", device: "一车间", ver: "V2026", date: "2026-07-26" },
+  { name: "M-201A 搅拌电机设备台账", cat: "设备资料", device: "一车间", ver: "V3.2", date: "2026-07-28" },
+  { name: "环己烷 MSDS（供应商 B）", cat: "化学品资料", device: "原料罐区", ver: "V1.0", date: "2026-07-18" },
+  { name: "AQ/T 3034 化工企业工艺安全管理实施导则", cat: "法规标准库", device: "全厂", ver: "2013 版", date: "2025-12-01" },
+  { name: "PSSR 检查表模板（设备类）", cat: "检查表模板库", device: "全厂", ver: "V2.1", date: "2026-05-10" },
+  { name: "2025 年度典型变更案例汇编", cat: "历史变更案例库", device: "全厂", ver: "2025 版", date: "2026-01-15" },
+  { name: "HAZOP 分析报告（R-101 温度变更）", cat: "历史变更案例库", device: "一车间", ver: "V1.0", date: "2026-07-26" },
+];
+
+// ===================== 报表数据 =====================
+export const MONTHLY_COUNTS = [
+  { m: "2月", count: 4 }, { m: "3月", count: 6 }, { m: "4月", count: 5 },
+  { m: "5月", count: 8 }, { m: "6月", count: 7 }, { m: "7月", count: 9 },
+];
+export const TYPE_DIST = [
+  { name: "工艺", value: 16 }, { name: "设备", value: 14 }, { name: "管理", value: 9 },
+];
+export const CYCLE_TREND = [
+  { m: "2月", days: 12.5 }, { m: "3月", days: 11.2 }, { m: "4月", days: 10.8 },
+  { m: "5月", days: 9.6 }, { m: "6月", days: 8.9 }, { m: "7月", days: 8.2 },
+];
+export const OVERDUE_LIST = [
+  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
+];
+
+// 状态色阶梯：全站状态标签唯一来源（工作台 / 台账 / 我的任务 / 审批中心共用），
+// 色相全部取自品牌色板——amber=进行中提醒，品牌蓝=审批通过/执行，violet=投用前检查，emerald=验收/完成（浅→深递进），品牌红=待关闭关闸提醒
+export const STATUS_COLOR: Record<ChangeStatus, string> = {
+  审批中: "bg-amber-100 text-amber-700 border-amber-200",
+  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
+  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
+  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
+  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
+  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
+  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
+};
+
+export const LEVEL_COLOR: Record<ChangeLevel, string> = {
+  重要: "bg-red-100 text-red-700 border-red-200",
+  一般: "bg-slate-100 text-slate-600 border-slate-200",
+};
+
+// ===================== 变更台账 =====================
+export interface LedgerRow {
+  id: string;
+  changeId?: string; // 关联 CHANGES，可打开完整详情
+  title: string;
+  type: ChangeType;
+  level: ChangeLevel;
+  duration: "永久" | "临时";
+  urgent?: boolean;
+  applyTime: string;   // 申请时间
+  dept: string;        // 申请部门
+  applicant: string;   // 申请人
+  planUse: string;     // 计划投用时间
+  status: ChangeStatus;
+  statusDetail: string; // 当前环节说明
+  statusTime: string;  // 状态更新时间
+  overdueDays?: number;
+  approveTime?: string; // 审批通过时间
+  useTime?: string;     // 实际投用时间
+  handlers: { name: string; done: boolean }[]; // 接班人（当前待办/已办）
+}
+
+export const LEDGER_ROWS: LedgerRow[] = [
+  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
+  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
+  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
+  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
+  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
+  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
+];
+
+// 演示数据：执行阶段变更的培训签到表 / PSSR 签字版上传状态（上传即视为完成确认并随单归档，系统不做内容识别）
+export const PSSR_UPLOADS: Record<string, { train?: string; pssr?: string }> = {
+  "MOC-2026-R02-0038": { train: "培训签到表-照片.jpg", pssr: "PSSR 检查确认表-签字版.pdf" },
+  "MOC-2026-R02-0031": { train: "培训签到表-照片.jpg", pssr: "PSSR 检查确认表-签字版.pdf" },
+  "MOC-2026-R03-0027": { train: "培训签到表-归档.pdf", pssr: "PSSR 检查确认表-归档版.pdf" },
+  "MOC-2026-R01-0024": { train: "培训签到表-归档.pdf", pssr: "PSSR 检查确认表-归档版.pdf" },
+};
+
+// ===================== 演示用轻量全局状态（提交 / 审批真实推进，全站联动） =====================
+type DemoListener = () => void;
+const demoListeners = new Set<DemoListener>();
+export function subscribeDemo(fn: DemoListener) {
+  demoListeners.add(fn);
+  return () => { demoListeners.delete(fn); };
+}
+function emitDemo() { demoListeners.forEach((f) => f()); }
+
+// ===================== 催办记录（车间主任催办 → 申请人操作台实时提示，全站同源） =====================
+export interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
+export const URGE_RECORDS: UrgeRecord[] = [];
+let urgeSeq = 1;
+/** 车间主任催办：写入同源记录并广播，申请人操作台即时出现催办提示 */
+export function urgeChange(changeId: string, byRole: RoleId) {
+  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
+  const c = CHANGES.find((x) => x.id === changeId);
+  const by = ROLES.find((r) => r.id === byRole)?.person ?? byRole;
+  URGE_RECORDS.unshift({
+    id: `URGE-${urgeSeq++}`,
+    changeId,
+    title: row?.title ?? c?.title ?? changeId,
+    applicant: row?.applicant ?? c?.applicant ?? "",
+    by,
+    time: nowStr(),
+  });
+  emitDemo();
+}
+
+let demoSeq = 43;
+export function nextChangeId() {
+  return `MOC-2026-R01-${String(demoSeq++).padStart(4, "0")}`;
+}
+
+function nowStr() {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** 申请页提交：生成真实变更单，台账 / 审批中心 / 我的任务 / 角标联动 */
+export function submitChange(c: ChangeOrder) {
+  CHANGES.unshift(c);
+  const cur = c.flow.find((n) => n.status === "current");
+  LEDGER_ROWS.unshift({
+    id: c.id,
+    changeId: c.id,
+    title: c.title,
+    type: c.type,
+    level: c.level,
+    duration: c.duration,
+    urgent: c.urgent || undefined,
+    applyTime: nowStr(),
+    dept: c.org.split("·")[0].trim(),
+    applicant: c.applicant,
+    planUse: c.date || "待定",
+    status: c.status,
+    statusDetail: cur ? `${cur.name}（待处理）` : "审批中",
+    statusTime: nowStr(),
+    handlers: (cur?.roles ?? []).map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false })),
+  });
+  emitDemo();
+}
+
+/** 详情页同意：真实推进流程节点（会签按人标记，全签通过才流转；末节点后进入待PSSR） */
+export function advanceFlow(id: string, role: RoleId) {
+  const c = CHANGES.find((x) => x.id === id);
+  if (!c) return;
+  const idx = c.flow.findIndex((n) => n.status === "current");
+  if (idx < 0) return;
+  const node = c.flow[idx];
+  if (node.kind === "会签" && node.members) {
+    const person = ROLES.find((r) => r.id === role)?.person;
+    const m = node.members.find((x) => x.name.startsWith(person ?? ""));
+    if (m) m.done = true;
+    if (!node.members.every((x) => x.done)) { emitDemo(); return; }
+  }
+  node.status = "done";
+  const next = c.flow[idx + 1];
+  if (next) {
+    next.status = "current";
+    next.locked = false;
+  } else {
+    c.status = "待PSSR";
+  }
+  const row = LEDGER_ROWS.find((r) => r.changeId === id || r.id === id);
+  if (row) {
+    const cur = c.flow.find((n) => n.status === "current");
+    row.status = c.status;
+    row.statusTime = nowStr();
+    row.statusDetail = cur ? `${cur.name}（待处理）` : "审批完成，进入投用前确认";
+    row.handlers = cur
+      ? cur.roles.map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false }))
+      : [{ name: c.applicant, done: false }];
+  }
+  emitDemo();
+}
+
+// ===================== 延期 / 转永久子单（申请人提交 → 属地 / 安全 / 公司领导审批 → 回写原单，全站联动） =====================
+export interface SubOrder {
+  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
+  parentId: string;              // 原变更单号
+  parentTitle: string;
+  kind: "extend" | "permanent";
+  applicant: string;
+  reason: string;
+  newDeadline?: string;          // 延期子单：申请延期至
+  status: "审批中" | "已通过" | "已驳回";
+  submitTime: string;
+  steps: { role: RoleId; name: string; done: boolean }[]; // 会签：全员同意即通过
+  rejectNote?: string;
+}
+export const SUB_ORDERS: SubOrder[] = [];
+
+/** 申请人提交延期 / 转永久子单：延期走简化审批（属地负责人 + 变更主管部门）；转永久按永久变更审批链（属地 → 安全 → 公司领导） */
+export function submitSubOrder(o: { parentId: string; parentTitle: string; kind: "extend" | "permanent"; applicant: string; reason: string; newDeadline?: string }) {
+  const steps: SubOrder["steps"] = o.kind === "extend"
+    ? [{ role: "dept", name: "李主任", done: false }, { role: "safety", name: "王海燕", done: false }]
+    : [{ role: "dept", name: "李主任", done: false }, { role: "safety", name: "王海燕", done: false }, { role: "vp", name: "刘副总", done: false }];
+  SUB_ORDERS.unshift({
+    id: `${o.parentId}-${o.kind === "extend" ? "Y1" : "Z1"}`,
+    ...o,
+    status: "审批中",
+    submitTime: nowStr(),
+    steps,
+  });
+  emitDemo();
+  return SUB_ORDERS[0];
+}
+
+/** 子单审批（同意 / 驳回）：全员同意 → 已通过并回写原单；任一驳回 → 已驳回，申请人可修改后重新提交 */
+export function decideSubOrder(id: string, role: RoleId, approve: boolean, note?: string) {
+  const s = SUB_ORDERS.find((x) => x.id === id);
+  if (!s || s.status !== "审批中") return;
+  const st = s.steps.find((x) => x.role === role);
+  if (!st || st.done) return;
+  st.done = true;
+  if (!approve) {
+    s.status = "已驳回";
+    s.rejectNote = note || "";
+  } else if (s.steps.every((x) => x.done)) {
+    s.status = "已通过";
+  }
+  emitDemo();
+}
+
+// ===================== 工作台 / 个人统计共享数据源（唯一口径，避免双写漂移） =====================
+/** 临时变更到期监视（申请人工作台「临时变更到期提醒情况」与个人统计报表共用同一来源） */
+export const TEMP_WATCH = [
+  { label: "正常（到期 > 7 天）", n: 1, c: "#7CC242", note: "循环水加药泵冲程临时调整 · 剩 17 天" },
+  { label: "临期（到期 ≤ 7 天）", n: 1, c: "#F5A623", note: "循环水旁滤器临时绕流运行 · 剩 6 天，已触发提醒" },
+  { label: "已超期", n: 1, c: "#E15555", note: "V-102 安全阀起跳压力临时调整 · 超期 4 天（已延期 1 次）" },
+];
+
+/** 培训确认待办（工作台「待确认培训」卡片与「我的任务 · 培训确认」同源） */
+export const TRAIN_TODO = [
+  { id: "MOC-2026-R01-0035", title: "搅拌电机更换操作培训", target: "R-201 岗位操作人员（4 人）、维修班（2 人）" },
+];
+
+/** 资料归档待办（工作台「待上传资料」卡片与「待我处理 · 资料关闭」同源：验收 / 归档材料补交） */
+export const DOC_TODO = [
+  { id: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", missing: "验收报告与运行数据" },
+  { id: "MOC-2026-R01-0039", title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）", missing: "更新后的 P&ID / 操作规程（受控最新版）、设备 / 联锁台账更新记录" },
+];
+
+/** 尚未关闭变更状态分布：四段口径固定，数量从 CHANGES 实时推导（0 项也保留展示，保证口径稳定）
+ *  对应三大流转阶段：① 申请提交后 / 会签中 / 审批中；② 审批通过后 → 变更关闭前（含投用、验收）；③ 变更关闭 */
+export const OPEN_STAGES: { name: string; match: ChangeStatus[]; c: string }[] = [
+  { name: "审批中（含会签）", match: ["审批中"], c: "#F5A623" },
+  { name: "已批准待投用", match: ["已批准", "待PSSR", "实施中"], c: "#1D4E9C" },
+  { name: "待验收", match: ["待验收"], c: "#7CC242" },
+  { name: "待关闭", match: ["待关闭"], c: "#E15555" },
+];
+export function countOpenStatus(list: { status: ChangeStatus }[]) {
+  return OPEN_STAGES.map((s) => ({ name: s.name, c: s.c, n: list.filter((x) => s.match.includes(x.status)).length }));
+}
+
+// ===================== 统一待办推导（全站同源：工作台卡片 / 侧边栏角标 / 我的任务 / 审批中心） =====================
+/** 判断变更是否停在当前角色的待办节点。
+ *  会签节点按成员粒度判定：已签署的成员（按角色对应人员姓名匹配）不再计入其待办。 */
+export function isPendingFor(c: ChangeOrder, role: RoleId): boolean {
+  if (c.status !== "审批中") return false;
+  const node = c.flow.find((n) => n.status === "current");
+  if (!node) return false;
+  if (node.kind === "会签" && node.members && node.members.length > 0) {
+    const person = ROLES.find((r) => r.id === role)?.person;
+    const me = person ? node.members.find((m) => m.name.startsWith(person)) : undefined;
+    if (me) return !me.done;
+  }
+  return node.roles.includes(role);
+}
+
+/** 当前角色的实时待审批变更列表（唯一数据源） */
+export function pendingApprovals(role: RoleId): ChangeOrder[] {
+  return CHANGES.filter((c) => isPendingFor(c, role));
+}
+
+/** 执行阶段（审批通过后 → 关闭前）的变更：投用准备与验收跟踪 */
+export function executionStage(list: ChangeOrder[] = CHANGES): ChangeOrder[] {
+  return list.filter((c) => c.status === "待PSSR" || c.status === "待验收");
+}
+
+/** 超期未关闭变更（待关闭且已超期） */
+export function overdueClosing(list: ChangeOrder[] = CHANGES): ChangeOrder[] {
+  return list.filter((c) => c.status === "待关闭" && (c.overdueDays ?? 0) > 0);
+}
+
+
+/** 专业人员「技术把关工作记录」：从 CHANGES 实时推导（与台账 / 待办同源，演示数据范围内统计）
+ *  - signed：已完成的会签 / 审批签署次数（会签按成员粒度、审批节点按角色判定）
+ *  - involved：涉及本专业的在办变更数（未关闭且流程中含本角色节点）
+ *  - 驳回次数暂无结构化记录字段，演示版不展示；参与风险分析次数来自分析组成员（选择式）记录 */
+export function profWorkStats(role: RoleId) {
+  const person = ROLES.find((r) => r.id === role)?.person ?? "";
+  let signed = 0;
+  for (const c of CHANGES) {
+    for (const n of c.flow) {
+      if (n.kind === "会签" && n.members?.length) {
+        const me = n.members.find((m) => m.name.startsWith(person));
+        if (me?.done) signed += 1;
+      } else if (n.status === "done" && n.roles.includes(role)) {
+        signed += 1;
+      }
+    }
+  }
+  const involved = CHANGES.filter(
+    (c) => c.status !== "已关闭" && c.flow.some((n) => n.roles.includes(role))
+  ).length;
+  return { signed, involved };
+}
diff --git a/src/views/changeLedger/myChanges/index.vue b/src/views/changeLedger/myChanges/index.vue
index c7736ce..325a754 100644
--- a/src/views/changeLedger/myChanges/index.vue
+++ b/src/views/changeLedger/myChanges/index.vue
@@ -1,688 +1,688 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-const revokeModal = ref(false);
-const revokeSaving = ref<boolean>(false);
-const progressDrawer = ref<boolean>(false);
-const dept = ref("全部组织");
-const openOnly = ref(false);
-const kw = ref("");
-const typeFilter = ref("全部");
-const statusFilter = ref("全部");
-const durFilter = ref("全部");
-const period = ref<string>("近一年");
-const customFrom = ref<any>(null);
-const customTo = ref<any>(null);
-const sort = ref<{ k: string; dir: "asc" | "desc" }>({ k: "applyTime", dir: "desc" });
-const me = "张工艺";
-const DEPTS = ["全部组织", "一车间", "二车间", "供应部", "质量部"];
-const deptOpts = DEPTS.map((d) => ({ label: d, value: d }));
-const LEDGER_ROWS = [
-  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
-  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
-  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
-  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
-  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
-  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
-];
-const REF_NOW = new Date("2026-08-03T12:00:00");
-const PERIOD_DAYS: Record<string, number> = { 近一年: 365, 近半年: 183, 近三个月: 92, 近一个月: 31 };
-const rows = computed(() => {
-  let list = LEDGER_ROWS.slice();
-  if (dept.value !== "全部组织") list = list.filter((r) => r.dept === dept.value);
-  if (openOnly.value) list = list.filter((r) => r.status !== "已关闭");
-  if (typeFilter.value !== "全部") list = list.filter((r) => r.type === typeFilter.value);
-  if (statusFilter.value !== "全部") list = list.filter((r) => r.status === statusFilter.value);
-  if (durFilter.value !== "全部") list = list.filter((r) => r.duration === durFilter.value);
-  if (period.value !== "自定义") {
-    const from = new Date(REF_NOW.getTime() - PERIOD_DAYS[period.value] * 86400000);
-    list = list.filter((r) => new Date(r.applyTime.replace(" ", "T")) >= from);
-  } else {
-    if (customFrom.value) list = list.filter((r) => r.applyTime.slice(0, 10) >= customFrom.value);
-    if (customTo.value) list = list.filter((r) => r.applyTime.slice(0, 10) <= customTo.value);
-  }
-  if (kw.value.trim()) list = list.filter((r) => r.title.includes(kw.value.trim()) || r.id.includes(kw.value.trim()));
-  list.sort((a:any, b:any) => {
-    const va = a[sort.value.k], vb = b[sort.value.k];
-    return sort.value.dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-  });
-  return list;
-});
-const navPreset = ref<string>("mine");
-const finalRows = computed(() => {
-  switch (navPreset.value) {
-    case "mine": return rows.value.filter((r:any) => r.applicant === me);
-    case "important": return rows.value.filter((r:any) => r.level === "重要");
-    case "temp": return rows.value.filter((r:any) => r.duration === "临时");
-    case "overdue": return rows.value.filter((r:any) => r.overdueDays);
-    case "highrisk": return rows.value.filter((r:any) => r.level === "重要" && r.status !== "已关闭");
-    default: return rows.value;
-  }
-});
-const TYPE_FILTERS = ["全部", "工艺", "设备", "管理"];
-const DUR_FILTERS = ["全部", "永久", "临时"];
-const PERIOD_FILTERS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"];
-const STATUS_FILTERS = ["全部", "审批中", "已批准", "实施中", "待PSSR", "待验收", "待关闭", "已关闭"];
-const sortVal = computed({
-  get: () => `${sort.value.k}-${sort.value.dir}`,
-  set: (v: string) => { const [k, dir] = v.split("-") as [string, "asc" | "desc"]; sort.value = { k, dir }; },
-});
-const SORT_OPTS = [
-  { label: "申请时间 · 最新", value: "applyTime-desc" },
-  { label: "申请时间 · 最早", value: "applyTime-asc" },
-  { label: "计划投用 · 最近", value: "planUse-asc" },
-  { label: "计划投用 · 最晚", value: "planUse-desc" },
-  { label: "状态更新 · 最新", value: "statusTime-desc" },
-  { label: "状态更新 · 最早", value: "statusTime-asc" },
-];
-interface LedgerExtra {
-  special?: ("延期" | "临时转永久" | "未实施" | "未投用")[];
-  actualUse?: string; planRestore?: string; extRestore?: string; closeTime?: string;
-}
-const LEDGER_EXTRA: Record<string, LedgerExtra> = {
-  "MOC-2026-R01-0039": { special: ["延期"], actualUse: "2026-07-16 08:30", planRestore: "2026-07-27", extRestore: "2026-08-03" },
-  "MOC-2026-R01-0029": { special: ["临时转永久"], planRestore: "2026-08-01" },
-  "MOC-2026-R02-0033": { special: ["未实施"] },
-  "MOC-2026-R03-0040": { special: ["未投用"] },
-  "MOC-2026-R02-0031": { actualUse: "2026-07-15 09:20" },
-  "MOC-2026-R03-0027": { actualUse: "2026-06-25 10:00", closeTime: "2026-07-02 10:18" },
-  "MOC-2026-R01-0024": { actualUse: "2026-06-20 08:10", closeTime: "2026-06-28 16:30" },
-};
-const SPECIAL_COLOR: Record<string, string> = {
-  延期: "bg-amber-50 text-amber-700 border-amber-300",
-  临时转永久: "bg-[#DFE9F6] text-[#17407F] border-[#6E93C6]/50",
-  未实施: "bg-red-50 text-red-600 border-red-200",
-  未投用: "bg-red-50 text-red-600 border-red-200",
-};
-const STATUS_COLOR: Record<string, string> = {
-  审批中: "bg-amber-100 text-amber-700 border-amber-200",
-  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
-  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
-  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
-  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
-  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
-  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
-};
-function opsOf(r: any, me: string, role?: string): { label: string; act: string; danger?: boolean }[] {
-  const ops: { label: string; act: string; danger?: boolean }[] = [];
-  if (r.status === "审批中" && r.applicant === me) ops.push({ label: "撤回", act: "withdraw", danger: true });
-  if (r.status === "已批准" || r.status === "待PSSR") ops.push({ label: "未实施情况说明", act: "unimpl" });
-  if (r.status === "实施中") ops.push({ label: "未投用情况说明", act: "unuse" });
-  if (role === "dept" && (r.overdueDays ?? 0) > 0) ops.push({ label: "催办", act: "urge" });
-  ops.push({ label: "详情", act: "detail" }, { label: "进度", act: "progress" });
-  if (r.status === "已批准") ops.push({ label: "下载申请表", act: "download" });
-  if (r.status === "待关闭") ops.push({ label: "下载", act: "download" });
-  if (r.status === "已关闭") ops.push({ label: "下载归档包", act: "download" });
-  return ops;
-}
-const FLOW_IMPORTANT = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  {
-    name: "专业会签",
-    kind: "会签",
-    roles: ["process", "process2", "quality"],
-    status: "current",
-    members: [
-      { name: "王仪表（仪表）", done: true },
-      { name: "周设备（设备）", done: false },
-      { name: "陈质量（质量）", done: false },
-    ],
-  },
-  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
-  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-];
-const FLOW_SIMPLE = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-];
-const CHANGES = [
-  {
-    id: "MOC-2026-R01-0035",
-    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
-    type: "设备",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "R-201 反应釜 / M-201A 搅拌电机",
-    date: "2026-07-28",
-    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
-    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
-    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
-    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
-    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
-    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
-    riskTools: ["AI 分析", "JSA", "检查表法"],
-    flow: FLOW_IMPORTANT,
-  },
-  {
-    id: "MOC-2026-R01-0036",
-    title: "聚合反应温度控制上限调整（78℃→82℃）",
-    type: "工艺",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "孙丽",
-    org: "一车间 · 工艺组",
-    device: "R-101 聚合釜 / TIC-101",
-    date: "2026-07-25",
-    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
-    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
-    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
-    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
-    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
-    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-    ],
-  },
-  {
-    id: "MOC-2026-R02-0038",
-    title: "DCS 罐区液位报警值 LIA-301 调整",
-    type: "工艺",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "待PSSR",
-    applicant: "吴强",
-    org: "一车间 · 罐区",
-    device: "V-301 储罐 / LIA-301",
-    date: "2026-07-20",
-    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
-    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
-    before: "LIA-301 高报 80%（对应 7.2m）。",
-    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
-    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
-    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0039",
-    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
-    type: "设备",
-    level: "一般",
-    duration: "临时",
-    urgent: true,
-    status: "待关闭",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "V-102 缓冲罐 / PSV-102",
-    date: "2026-07-15",
-    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
-    effect: "装置维持连续运行，临时期限内风险受控。",
-    before: "PSV-102 起跳压力 0.8MPa。",
-    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
-    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
-    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-    overdueDays: 4,
-  },
-  {
-    id: "MOC-2026-R03-0040",
-    title: "原料环己烷供应商变更（新增 B 供应商）",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "实施中",
-    applicant: "刘芳",
-    org: "供应部",
-    device: "原料罐区 / TK-201",
-    date: "2026-07-18",
-    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
-    effect: "供应保障能力提升，采购成本预计下降 3%。",
-    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
-    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
-    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
-    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0029",
-    title: "操作规程修订（夏季工况）",
-    type: "管理",
-    level: "一般",
-    duration: "临时",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "全装置",
-    date: "2026-06-20",
-    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
-    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
-    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
-    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
-    related: ["操作规程升版发布", "岗位人员培训"],
-    materials: ["修订后操作规程", "参数核算表"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R02-0041",
-    title: "公用工程氮气减压阀组改造",
-    type: "设备",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "周涛",
-    org: "公用工程车间",
-    device: "氮气总管 / PV-208 减压阀组",
-    date: "2026-07-29",
-    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
-    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
-    before: "PV-208 单路减压，无备用回路。",
-    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
-    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
-    materials: ["阀门数据表", "管道单线图", "施工方案"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R03-0042",
-    title: "三车间自动化和安全隐患整改项目变更",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "刘芳",
-    org: "三车间",
-    device: "三车间装置区",
-    date: "2026-07-31",
-    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
-    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
-    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
-    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
-    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
-    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "process2", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "周设备（设备）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
-    ],
-  },
-];
-const progressRow = ref<any>(null);
-const ledgerAct = ref<{ id: string; act: "withdraw" | "unimpl" | "unuse" } | null>(null);
-const ledgerReason = ref("");
-function nowStr() {
-  const d = new Date();
-  const p = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
-}
-type DemoListener = () => void;
-const demoListeners = new Set<DemoListener>();
-function emitDemo() { demoListeners.forEach((f) => f()); }
-interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
-let urgeSeq = 1;
-const URGE_RECORDS: UrgeRecord[] = [];
-const ROLES = [
-  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
-  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
-  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
-  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
-  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
-  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
-  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
-  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
-  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
-];
-function urgeChange(changeId: string, byRole: string) {
-  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
-  const c = CHANGES.find((x) => x.id === changeId);
-  const by = ROLES.find((r:any) => r.id === byRole)?.person ?? byRole;
-  URGE_RECORDS.unshift({
-    id: `URGE-${urgeSeq++}`,
-    changeId,
-    title: row?.title ?? c?.title ?? changeId,
-    applicant: row?.applicant ?? c?.applicant ?? "",
-    by,
-    time: nowStr(),
-  });
-  emitDemo();
-}
-
-const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
-const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[progressRow.value?.status ?? ""] ?? 1);
-const closed = computed(() => progressRow.value?.status === "已关闭");
-const timeOf = (i: number) => (i === 0 ? progressRow.value?.applyTime : i === 3 ? progressRow.value?.actualUse : i === 5 ? progressRow.value?.closeTime : undefined);
-
-const role = ref<string>("applicant");
-const doOp = (r: any, act: string) => {
-  if (act === "detail") {
-    const c = CHANGES.find((x) => x.id === r.changeId);
-    if (c) {
-      // 跳转详情页面
-      // emit("openChange", c);
-    }else {
-      window.$message?.info(`演示：打开变更详情页 ${r.id}`);
-    }
-    return;
-  }
-  if (act === "progress") { 
-    progressRow.value = r;
-    progressDrawer.value = true;
-    return; 
-  }
-  if (act === "withdraw" || act === "unimpl" || act === "unuse") { 
-    ledgerAct.value = { id: r.id, act }; 
-    ledgerReason.value = ""; 
-    revokeModal.value = true;
-    return; 
-  }
-  if (act === "urge") { 
-    urgeChange(r.id, role.value ?? "dept"); 
-    window.$message?.success(`已催办 ${r.id} 申请人 ${r.applicant}（系统消息 + 企业微信），催办记录已留痕并抄送变更主管部门，申请人操作台将出现催办提示`); 
-    return; 
-  }
-  window.$message?.info(`演示：下载 ${r.id} 变更申请表 / 归档包（PDF）`);
-};
-
-// 重置
-const reset = () => {
-  dept.value = "全部组织"; openOnly.value = false; kw.value = ""; typeFilter.value = "全部"; statusFilter.value = "全部";
-  durFilter.value = "全部"; period.value = "近一年"; customFrom.value = null; customTo.value = null;
-  sort.value = { k: "applyTime", dir: "desc" };
-  window.$message?.success("筛选条件已重置");
-};
-// 导出台账
-const exportChanges = () => {
-  window.$message?.success(`演示：导出台账 Excel（当前筛选 ${finalRows.value.length} 条）`);
-}
-// 撤回弹框取消
-const revokeCancel = () => {
-  ledgerAct.value = null;
-  ledgerReason.value = "";
-  revokeModal.value = false;
-}
-// 撤回弹框提交
-const revokeSave = () => {
-  if (!ledgerReason.value) {
-    window.$message?.warning("请输入撤回理由");
-    return;
-  }
-  window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
-  revokeCancel();
-}
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 我发起的变更 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <!-- 工具条 -->
-      <div 
-        class="flex flex-wrap items-center gap-2 border px-3 py-2"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
-          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ finalRows.length }}</span>
-        </span>
-        <NSelect size="small" class="!w-32" :value="dept" :options="deptOpts" @update:value="(v: string) => dept = v" />
-        <NRadio
-          size="small"
-          :checked="!openOnly"
-          :value="false"
-          name="显示全部"
-          @change="openOnly = false"
-        >
-          显示全部
-        </NRadio>
-        <NRadio
-          size="small"
-          :checked="openOnly"
-          :value="true"
-          name="显示未关闭"
-          @change="openOnly = true"
-        >
-          显示未关闭
-        </NRadio>
-        <div class="relative ml-auto">
-          <NInput v-model:value="kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号">
-            <template #suffix>
-              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-            </template>
-          </NInput>
-        </div>
-        <NButton size="small" class="text-sm" @click="reset">
-          <Icon icon="system-uicons:reset" class="size-12px" />重置
-        </NButton>
-        <NButton size="small" class="text-sm" @click="exportChanges">
-          <Icon icon="material-symbols:download" class="size-14px" />导出台账
-        </NButton>
-      </div>
-      <!-- 筛选与排序行 -->
-      <div 
-        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <div class="flex items-center gap-x-4">
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">类型</span>
-            <NButton size="tiny" round v-for="t in TYPE_FILTERS" :key="t" :ghost="typeFilter === t ? false : true" :type="typeFilter === t ? 'primary' : 'default'" @click="typeFilter = t">{{ t }}</NButton>
-          </p>
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时限</span>
-            <NButton size="tiny" round v-for="d in DUR_FILTERS" :key="d" :ghost="durFilter === d ? false : true" :type="durFilter === d ? 'primary' : 'default'" @click="durFilter = d">{{ d }}</NButton>
-          </p>
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时间</span>
-            <NButton size="tiny" round v-for="p in PERIOD_FILTERS" :key="p" :ghost="period === p ? false : true" :type="period === p ? 'primary' : 'default'" @click="period = p">{{ p }}</NButton>
-            <span v-if="period === '自定义'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="customFrom" type="date" size="small" class="w-130px" />
-              <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="customTo" type="date" size="small" class="w-130px" />
-            </span>
-          </p>
-        </div>
-        <div class="flex items-center gap-x-4">
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">状态</span>
-            <NButton size="tiny" round v-for="s in STATUS_FILTERS" :key="s" :ghost="statusFilter === s ? false : true" :type="statusFilter === s ? 'primary' : 'default'" @click="statusFilter = s">{{ s }}</NButton>
-          </p>
-          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">排序</span>
-            <NSelect size="small" class="!w-36" v-model:value="sortVal" :options="SORT_OPTS" />
-          </p>
-        </div>
-      </div>
-      <div class="space-y-3 scroll">
-        <!-- 列表 -->
-        <div v-for="(r, i) in finalRows" :key="r.id" class="rounded-lg border bg-white px-4 py-3">
-          <div class="flex flex-wrap items-start gap-3">
-            <div class="min-w-0 flex-1">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-xs text-slate-300">{{ String(i + 1).padStart(2, '0') }}</span>
-                <NButton text class="text-left text-sm font-semibold text-slate-800 hover:text-[#1D4E9C] hover:underline" @click="doOp(r, 'detail')">{{ r.title }}</NButton>
-                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
-                <span class="font-mono text-[11px] text-slate-400">{{ r.id }}</span>
-              </div>
-              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
-                <NTag size="small" class="border-slate-200 bg-white text-slate-600">{{ r.type }}</NTag>
-                <NTag size="small" :class="r.level === '重要' ? 'border-red-200 bg-red-100 text-red-700' : 'border-slate-200 bg-slate-100 text-slate-600'">{{ r.level }}</NTag>
-                <NTag size="small" :class="r.duration === '临时' ? 'border-[#FAAD14] bg-[#FAAD14] text-white' : 'border-[#1D4E9C] bg-[#1D4E9C] text-white'">{{ r.duration }}</NTag>
-                <NTag size="small" v-for="s in LEDGER_EXTRA[r.id]?.special ?? []" :key="s" :class="SPECIAL_COLOR[s]">{{ s }}</NTag>
-              </div>
-              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
-                <span>申请 {{ r.applyTime }}</span>
-                <span>{{ r.dept }} · {{ r.applicant }}</span>
-                <span>计划投用 {{ r.planUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.actualUse">实际投用 {{ LEDGER_EXTRA[r.id].actualUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.planRestore">计划恢复 {{ LEDGER_EXTRA[r.id].planRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.extRestore" class="text-amber-600">延期后恢复 {{ LEDGER_EXTRA[r.id].extRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.closeTime">关闭 {{ LEDGER_EXTRA[r.id].closeTime }}</span>
-                <span>状态更新 {{ r.statusTime }}</span>
-              </div>
-            </div>
-            <div class="flex shrink-0 flex-col items-end gap-1.5">
-              <div class="flex flex-wrap items-center justify-end gap-2">
-                <span class="text-[11px] text-slate-400">{{ r.statusDetail }}</span>
-                <NTag size="small" :class="STATUS_COLOR[r.status]">{{ r.status }}</NTag>
-                <span v-if="r.overdueDays" class="text-[11px] font-medium text-red-500">超期 {{ r.overdueDays }} 天</span>
-              </div>
-              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
-                <NButton size="small" v-for="op in opsOf(r, me, role)" :key="op.label"
-                  class="text-xs"
-                  :ghost="op.act === 'detail' ? false : true"
-                  :type="op.act === 'detail' ? 'primary' : op.danger ? 'error' : 'default'"
-                  @click="doOp(r, op.act)">
-                  {{ op.label }}
-                </NButton>
-              </div>
-              <div v-if="r.duration === '临时'" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
-            </div>
-          </div>
-        </div>
-        <div v-if="finalRows.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
-      </div>
-      <div class="text-xs text-slate-400 mt-3">
-        共 {{ finalRows.length }} 条 · 台账以查看、下载为主（申请表 / 归档包）；与"我"相关的待办流转请前往「我的任务」处理。点击变更名称可打开详情。
-      </div>
-      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
-      <NModal
-          v-model:show="revokeModal"
-          preset="card"
-          :auto-focus="false"
-          :style="{ width: '450px', height: 'auto' }"
-          :segmented="{ content: true, footer: true }"
-      >
-          <template #header>
-              <h3 class="text-sm font-bold text-slate-800">
-                <span v-if="ledgerAct?.act === 'withdraw'">撤回变更申请</span>
-                <span v-else-if="ledgerAct?.act === 'unuse'">未投用情况说明</span>
-                <span v-else>未实施情况说明</span>
-                {{ledgerAct?.id}}
-              </h3>
-          </template>
-          <template #default>
-              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                {{ ledgerAct?.act === 'withdraw'
-              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
-              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
-              </div>
-              <NInput
-                  class="mt-3"
-                  v-model:value="ledgerReason"
-                  type="textarea"
-                  :rows="3"
-                  :placeholder="ledgerAct?.act === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
-              />
-          </template>
-          <template #footer>
-              <div class="flex justify-end gap-[10px]">
-                  <NButton size="small" @click="revokeCancel">取消</NButton>
-                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
-              </div>
-          </template>
-      </NModal>
-      <!-- 进度抽屉 -->
-      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-        <NDrawerContent title="变更进度">
-            <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-                <div class="text-sm font-semibold text-slate-800">{{ progressRow?.title }}</div>
-                <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                    <span class="font-mono">{{ progressRow?.id }}</span>
-                    <NTag v-if="progressRow?.status==='审批中'" size="small" type="warning">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='已批准'" size="small" type="primary">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待验收'" size="small" type="success">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待关闭'" size="small" type="error">{{progressRow.status}}</NTag>
-                    <span v-if="progressRow?.overdue" class="font-medium text-red-500">超期 {{ progressRow?.day }} 天</span>
-                </div>
-                <div v-if="progressRow?.dept || progressRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [progressRow?.dept, progressRow?.applicant].filter(Boolean).join(' · ') }}</div>
-                <div v-if="progressRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ progressRow?.meta }}</div>
-            </div>
-            <div class="mt-4">
-                <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
-                    <div class="flex flex-col items-center">
-                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
-                            :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
-                            <Icon v-if="i < curIdx || closed" icon="ix:success" />
-                            <Icon v-else-if="i === curIdx" icon="tabler:clock" />
-                            <span v-else class="text-[10px]">{{ i + 1 }}</span>
-                        </span>
-                        <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
-                    </div>
-                    <div class="pb-5">
-                        <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
-                            {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
-                        </div>
-                        <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
-                        <div v-if="i === curIdx && !closed && (progressRow?.detail || progressRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
-                            {{ [progressRow?.detail, progressRow?.updateTime ? `更新 ${progressRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-if="progressRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-                临时变更：计划恢复 {{ progressRow?.deadline ?? '—' }}{{ progressRow?.extended ? ` · 延期后恢复 ${progressRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
-            </div>
-        </NDrawerContent>
-      </NDrawer>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 326px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const { routerPushByKey } = useRouterPush();
+const themeStore = useThemeStore();
+
+const revokeModal = ref(false);
+const revokeSaving = ref<boolean>(false);
+const progressDrawer = ref<boolean>(false);
+const dept = ref("全部组织");
+const openOnly = ref(false);
+const kw = ref("");
+const typeFilter = ref("全部");
+const statusFilter = ref("全部");
+const durFilter = ref("全部");
+const period = ref<string>("近一年");
+const customFrom = ref<any>(null);
+const customTo = ref<any>(null);
+const sort = ref<{ k: string; dir: "asc" | "desc" }>({ k: "applyTime", dir: "desc" });
+const me = "张工艺";
+const DEPTS = ["全部组织", "一车间", "二车间", "供应部", "质量部"];
+const deptOpts = DEPTS.map((d) => ({ label: d, value: d }));
+const LEDGER_ROWS = [
+  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
+  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
+  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
+  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
+  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
+  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
+];
+const REF_NOW = new Date("2026-08-03T12:00:00");
+const PERIOD_DAYS: Record<string, number> = { 近一年: 365, 近半年: 183, 近三个月: 92, 近一个月: 31 };
+const rows = computed(() => {
+  let list = LEDGER_ROWS.slice();
+  if (dept.value !== "全部组织") list = list.filter((r) => r.dept === dept.value);
+  if (openOnly.value) list = list.filter((r) => r.status !== "已关闭");
+  if (typeFilter.value !== "全部") list = list.filter((r) => r.type === typeFilter.value);
+  if (statusFilter.value !== "全部") list = list.filter((r) => r.status === statusFilter.value);
+  if (durFilter.value !== "全部") list = list.filter((r) => r.duration === durFilter.value);
+  if (period.value !== "自定义") {
+    const from = new Date(REF_NOW.getTime() - PERIOD_DAYS[period.value] * 86400000);
+    list = list.filter((r) => new Date(r.applyTime.replace(" ", "T")) >= from);
+  } else {
+    if (customFrom.value) list = list.filter((r) => r.applyTime.slice(0, 10) >= customFrom.value);
+    if (customTo.value) list = list.filter((r) => r.applyTime.slice(0, 10) <= customTo.value);
+  }
+  if (kw.value.trim()) list = list.filter((r) => r.title.includes(kw.value.trim()) || r.id.includes(kw.value.trim()));
+  list.sort((a:any, b:any) => {
+    const va = a[sort.value.k], vb = b[sort.value.k];
+    return sort.value.dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+  });
+  return list;
+});
+const navPreset = ref<string>("mine");
+const finalRows = computed(() => {
+  switch (navPreset.value) {
+    case "mine": return rows.value.filter((r:any) => r.applicant === me);
+    case "important": return rows.value.filter((r:any) => r.level === "重要");
+    case "temp": return rows.value.filter((r:any) => r.duration === "临时");
+    case "overdue": return rows.value.filter((r:any) => r.overdueDays);
+    case "highrisk": return rows.value.filter((r:any) => r.level === "重要" && r.status !== "已关闭");
+    default: return rows.value;
+  }
+});
+const TYPE_FILTERS = ["全部", "工艺", "设备", "管理"];
+const DUR_FILTERS = ["全部", "永久", "临时"];
+const PERIOD_FILTERS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"];
+const STATUS_FILTERS = ["全部", "审批中", "已批准", "实施中", "待PSSR", "待验收", "待关闭", "已关闭"];
+const sortVal = computed({
+  get: () => `${sort.value.k}-${sort.value.dir}`,
+  set: (v: string) => { const [k, dir] = v.split("-") as [string, "asc" | "desc"]; sort.value = { k, dir }; },
+});
+const SORT_OPTS = [
+  { label: "申请时间 · 最新", value: "applyTime-desc" },
+  { label: "申请时间 · 最早", value: "applyTime-asc" },
+  { label: "计划投用 · 最近", value: "planUse-asc" },
+  { label: "计划投用 · 最晚", value: "planUse-desc" },
+  { label: "状态更新 · 最新", value: "statusTime-desc" },
+  { label: "状态更新 · 最早", value: "statusTime-asc" },
+];
+interface LedgerExtra {
+  special?: ("延期" | "临时转永久" | "未实施" | "未投用")[];
+  actualUse?: string; planRestore?: string; extRestore?: string; closeTime?: string;
+}
+const LEDGER_EXTRA: Record<string, LedgerExtra> = {
+  "MOC-2026-R01-0039": { special: ["延期"], actualUse: "2026-07-16 08:30", planRestore: "2026-07-27", extRestore: "2026-08-03" },
+  "MOC-2026-R01-0029": { special: ["临时转永久"], planRestore: "2026-08-01" },
+  "MOC-2026-R02-0033": { special: ["未实施"] },
+  "MOC-2026-R03-0040": { special: ["未投用"] },
+  "MOC-2026-R02-0031": { actualUse: "2026-07-15 09:20" },
+  "MOC-2026-R03-0027": { actualUse: "2026-06-25 10:00", closeTime: "2026-07-02 10:18" },
+  "MOC-2026-R01-0024": { actualUse: "2026-06-20 08:10", closeTime: "2026-06-28 16:30" },
+};
+const SPECIAL_COLOR: Record<string, string> = {
+  延期: "bg-amber-50 text-amber-700 border-amber-300",
+  临时转永久: "bg-[#DFE9F6] text-[#17407F] border-[#6E93C6]/50",
+  未实施: "bg-red-50 text-red-600 border-red-200",
+  未投用: "bg-red-50 text-red-600 border-red-200",
+};
+const STATUS_COLOR: Record<string, string> = {
+  审批中: "bg-amber-100 text-amber-700 border-amber-200",
+  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
+  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
+  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
+  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
+  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
+  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
+};
+function opsOf(r: any, me: string, role?: string): { label: string; act: string; danger?: boolean }[] {
+  const ops: { label: string; act: string; danger?: boolean }[] = [];
+  if (r.status === "审批中" && r.applicant === me) ops.push({ label: "撤回", act: "withdraw", danger: true });
+  if (r.status === "已批准" || r.status === "待PSSR") ops.push({ label: "未实施情况说明", act: "unimpl" });
+  if (r.status === "实施中") ops.push({ label: "未投用情况说明", act: "unuse" });
+  if (role === "dept" && (r.overdueDays ?? 0) > 0) ops.push({ label: "催办", act: "urge" });
+  ops.push({ label: "详情", act: "detail" }, { label: "进度", act: "progress" });
+  if (r.status === "已批准") ops.push({ label: "下载申请表", act: "download" });
+  if (r.status === "待关闭") ops.push({ label: "下载", act: "download" });
+  if (r.status === "已关闭") ops.push({ label: "下载归档包", act: "download" });
+  return ops;
+}
+const FLOW_IMPORTANT = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  {
+    name: "专业会签",
+    kind: "会签",
+    roles: ["process", "process2", "quality"],
+    status: "current",
+    members: [
+      { name: "王仪表（仪表）", done: true },
+      { name: "周设备（设备）", done: false },
+      { name: "陈质量（质量）", done: false },
+    ],
+  },
+  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
+  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+];
+const FLOW_SIMPLE = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+];
+const CHANGES = [
+  {
+    id: "MOC-2026-R01-0035",
+    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
+    type: "设备",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "R-201 反应釜 / M-201A 搅拌电机",
+    date: "2026-07-28",
+    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
+    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
+    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
+    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
+    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
+    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
+    riskTools: ["AI 分析", "JSA", "检查表法"],
+    flow: FLOW_IMPORTANT,
+  },
+  {
+    id: "MOC-2026-R01-0036",
+    title: "聚合反应温度控制上限调整（78℃→82℃）",
+    type: "工艺",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "孙丽",
+    org: "一车间 · 工艺组",
+    device: "R-101 聚合釜 / TIC-101",
+    date: "2026-07-25",
+    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
+    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
+    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
+    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
+    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
+    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+    ],
+  },
+  {
+    id: "MOC-2026-R02-0038",
+    title: "DCS 罐区液位报警值 LIA-301 调整",
+    type: "工艺",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "待PSSR",
+    applicant: "吴强",
+    org: "一车间 · 罐区",
+    device: "V-301 储罐 / LIA-301",
+    date: "2026-07-20",
+    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
+    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
+    before: "LIA-301 高报 80%（对应 7.2m）。",
+    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
+    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
+    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0039",
+    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
+    type: "设备",
+    level: "一般",
+    duration: "临时",
+    urgent: true,
+    status: "待关闭",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "V-102 缓冲罐 / PSV-102",
+    date: "2026-07-15",
+    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
+    effect: "装置维持连续运行，临时期限内风险受控。",
+    before: "PSV-102 起跳压力 0.8MPa。",
+    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
+    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
+    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+    overdueDays: 4,
+  },
+  {
+    id: "MOC-2026-R03-0040",
+    title: "原料环己烷供应商变更（新增 B 供应商）",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "实施中",
+    applicant: "刘芳",
+    org: "供应部",
+    device: "原料罐区 / TK-201",
+    date: "2026-07-18",
+    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
+    effect: "供应保障能力提升，采购成本预计下降 3%。",
+    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
+    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
+    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
+    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0029",
+    title: "操作规程修订（夏季工况）",
+    type: "管理",
+    level: "一般",
+    duration: "临时",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "全装置",
+    date: "2026-06-20",
+    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
+    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
+    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
+    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
+    related: ["操作规程升版发布", "岗位人员培训"],
+    materials: ["修订后操作规程", "参数核算表"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R02-0041",
+    title: "公用工程氮气减压阀组改造",
+    type: "设备",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "周涛",
+    org: "公用工程车间",
+    device: "氮气总管 / PV-208 减压阀组",
+    date: "2026-07-29",
+    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
+    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
+    before: "PV-208 单路减压，无备用回路。",
+    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
+    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
+    materials: ["阀门数据表", "管道单线图", "施工方案"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R03-0042",
+    title: "三车间自动化和安全隐患整改项目变更",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "刘芳",
+    org: "三车间",
+    device: "三车间装置区",
+    date: "2026-07-31",
+    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
+    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
+    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
+    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
+    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
+    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "process2", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "周设备（设备）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
+    ],
+  },
+];
+const progressRow = ref<any>(null);
+const ledgerAct = ref<{ id: string; act: "withdraw" | "unimpl" | "unuse" } | null>(null);
+const ledgerReason = ref("");
+function nowStr() {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+type DemoListener = () => void;
+const demoListeners = new Set<DemoListener>();
+function emitDemo() { demoListeners.forEach((f) => f()); }
+interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
+let urgeSeq = 1;
+const URGE_RECORDS: UrgeRecord[] = [];
+const ROLES = [
+  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
+  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
+  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
+  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
+  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
+  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
+  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
+  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
+  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
+];
+function urgeChange(changeId: string, byRole: string) {
+  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
+  const c = CHANGES.find((x) => x.id === changeId);
+  const by = ROLES.find((r:any) => r.id === byRole)?.person ?? byRole;
+  URGE_RECORDS.unshift({
+    id: `URGE-${urgeSeq++}`,
+    changeId,
+    title: row?.title ?? c?.title ?? changeId,
+    applicant: row?.applicant ?? c?.applicant ?? "",
+    by,
+    time: nowStr(),
+  });
+  emitDemo();
+}
+
+const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
+const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[progressRow.value?.status ?? ""] ?? 1);
+const closed = computed(() => progressRow.value?.status === "已关闭");
+const timeOf = (i: number) => (i === 0 ? progressRow.value?.applyTime : i === 3 ? progressRow.value?.actualUse : i === 5 ? progressRow.value?.closeTime : undefined);
+
+const role = ref<string>("applicant");
+const doOp = (r: any, act: string) => {
+  if (act === "detail") {
+    const c = CHANGES.find((x) => x.id === r.changeId);
+    if (c) {
+      // 跳转详情页面
+      // emit("openChange", c);
+    }else {
+      window.$message?.info(`演示：打开变更详情页 ${r.id}`);
+    }
+    return;
+  }
+  if (act === "progress") { 
+    progressRow.value = r;
+    progressDrawer.value = true;
+    return; 
+  }
+  if (act === "withdraw" || act === "unimpl" || act === "unuse") { 
+    ledgerAct.value = { id: r.id, act }; 
+    ledgerReason.value = ""; 
+    revokeModal.value = true;
+    return; 
+  }
+  if (act === "urge") { 
+    urgeChange(r.id, role.value ?? "dept"); 
+    window.$message?.success(`已催办 ${r.id} 申请人 ${r.applicant}（系统消息 + 企业微信），催办记录已留痕并抄送变更主管部门，申请人操作台将出现催办提示`); 
+    return; 
+  }
+  window.$message?.info(`演示：下载 ${r.id} 变更申请表 / 归档包（PDF）`);
+};
+
+// 重置
+const reset = () => {
+  dept.value = "全部组织"; openOnly.value = false; kw.value = ""; typeFilter.value = "全部"; statusFilter.value = "全部";
+  durFilter.value = "全部"; period.value = "近一年"; customFrom.value = null; customTo.value = null;
+  sort.value = { k: "applyTime", dir: "desc" };
+  window.$message?.success("筛选条件已重置");
+};
+// 导出台账
+const exportChanges = () => {
+  window.$message?.success(`演示：导出台账 Excel（当前筛选 ${finalRows.value.length} 条）`);
+}
+// 撤回弹框取消
+const revokeCancel = () => {
+  ledgerAct.value = null;
+  ledgerReason.value = "";
+  revokeModal.value = false;
+}
+// 撤回弹框提交
+const revokeSave = () => {
+  if (!ledgerReason.value) {
+    window.$message?.warning("请输入撤回理由");
+    return;
+  }
+  window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
+  revokeCancel();
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 我发起的变更 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <!-- 工具条 -->
+      <div 
+        class="flex flex-wrap items-center gap-2 border px-3 py-2"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
+          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ finalRows.length }}</span>
+        </span>
+        <NSelect size="small" class="!w-32" :value="dept" :options="deptOpts" @update:value="(v: string) => dept = v" />
+        <NRadio
+          size="small"
+          :checked="!openOnly"
+          :value="false"
+          name="显示全部"
+          @change="openOnly = false"
+        >
+          显示全部
+        </NRadio>
+        <NRadio
+          size="small"
+          :checked="openOnly"
+          :value="true"
+          name="显示未关闭"
+          @change="openOnly = true"
+        >
+          显示未关闭
+        </NRadio>
+        <div class="relative ml-auto">
+          <NInput v-model:value="kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号">
+            <template #suffix>
+              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+            </template>
+          </NInput>
+        </div>
+        <NButton size="small" class="text-sm" @click="reset">
+          <Icon icon="system-uicons:reset" class="size-12px" />重置
+        </NButton>
+        <NButton size="small" class="text-sm" @click="exportChanges">
+          <Icon icon="material-symbols:download" class="size-14px" />导出台账
+        </NButton>
+      </div>
+      <!-- 筛选与排序行 -->
+      <div 
+        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <div class="flex items-center gap-x-4">
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">类型</span>
+            <NButton size="tiny" round v-for="t in TYPE_FILTERS" :key="t" :ghost="typeFilter === t ? false : true" :type="typeFilter === t ? 'primary' : 'default'" @click="typeFilter = t">{{ t }}</NButton>
+          </p>
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时限</span>
+            <NButton size="tiny" round v-for="d in DUR_FILTERS" :key="d" :ghost="durFilter === d ? false : true" :type="durFilter === d ? 'primary' : 'default'" @click="durFilter = d">{{ d }}</NButton>
+          </p>
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时间</span>
+            <NButton size="tiny" round v-for="p in PERIOD_FILTERS" :key="p" :ghost="period === p ? false : true" :type="period === p ? 'primary' : 'default'" @click="period = p">{{ p }}</NButton>
+            <span v-if="period === '自定义'" class="flex items-center gap-1">
+              <NDatePicker v-model:value="customFrom" type="date" size="small" class="w-130px" />
+              <span class="text-xs text-slate-400">至</span>
+              <NDatePicker v-model:value="customTo" type="date" size="small" class="w-130px" />
+            </span>
+          </p>
+        </div>
+        <div class="flex items-center gap-x-4">
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">状态</span>
+            <NButton size="tiny" round v-for="s in STATUS_FILTERS" :key="s" :ghost="statusFilter === s ? false : true" :type="statusFilter === s ? 'primary' : 'default'" @click="statusFilter = s">{{ s }}</NButton>
+          </p>
+          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">排序</span>
+            <NSelect size="small" class="!w-36" v-model:value="sortVal" :options="SORT_OPTS" />
+          </p>
+        </div>
+      </div>
+      <div class="space-y-3 scroll">
+        <!-- 列表 -->
+        <div v-for="(r, i) in finalRows" :key="r.id" class="rounded-lg border bg-white px-4 py-3">
+          <div class="flex flex-wrap items-start gap-3">
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-xs text-slate-300">{{ String(i + 1).padStart(2, '0') }}</span>
+                <NButton text class="text-left text-sm font-semibold text-slate-800 hover:text-[#1D4E9C] hover:underline" @click="doOp(r, 'detail')">{{ r.title }}</NButton>
+                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
+                <span class="font-mono text-[11px] text-slate-400">{{ r.id }}</span>
+              </div>
+              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
+                <NTag size="small" class="border-slate-200 bg-white text-slate-600">{{ r.type }}</NTag>
+                <NTag size="small" :class="r.level === '重要' ? 'border-red-200 bg-red-100 text-red-700' : 'border-slate-200 bg-slate-100 text-slate-600'">{{ r.level }}</NTag>
+                <NTag size="small" :class="r.duration === '临时' ? 'border-[#FAAD14] bg-[#FAAD14] text-white' : 'border-[#1D4E9C] bg-[#1D4E9C] text-white'">{{ r.duration }}</NTag>
+                <NTag size="small" v-for="s in LEDGER_EXTRA[r.id]?.special ?? []" :key="s" :class="SPECIAL_COLOR[s]">{{ s }}</NTag>
+              </div>
+              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
+                <span>申请 {{ r.applyTime }}</span>
+                <span>{{ r.dept }} · {{ r.applicant }}</span>
+                <span>计划投用 {{ r.planUse }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.actualUse">实际投用 {{ LEDGER_EXTRA[r.id].actualUse }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.planRestore">计划恢复 {{ LEDGER_EXTRA[r.id].planRestore }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.extRestore" class="text-amber-600">延期后恢复 {{ LEDGER_EXTRA[r.id].extRestore }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.closeTime">关闭 {{ LEDGER_EXTRA[r.id].closeTime }}</span>
+                <span>状态更新 {{ r.statusTime }}</span>
+              </div>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1.5">
+              <div class="flex flex-wrap items-center justify-end gap-2">
+                <span class="text-[11px] text-slate-400">{{ r.statusDetail }}</span>
+                <NTag size="small" :class="STATUS_COLOR[r.status]">{{ r.status }}</NTag>
+                <span v-if="r.overdueDays" class="text-[11px] font-medium text-red-500">超期 {{ r.overdueDays }} 天</span>
+              </div>
+              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
+                <NButton size="small" v-for="op in opsOf(r, me, role)" :key="op.label"
+                  class="text-xs"
+                  :ghost="op.act === 'detail' ? false : true"
+                  :type="op.act === 'detail' ? 'primary' : op.danger ? 'error' : 'default'"
+                  @click="doOp(r, op.act)">
+                  {{ op.label }}
+                </NButton>
+              </div>
+              <div v-if="r.duration === '临时'" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
+            </div>
+          </div>
+        </div>
+        <div v-if="finalRows.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
+      </div>
+      <div class="text-xs text-slate-400 mt-3">
+        共 {{ finalRows.length }} 条 · 台账以查看、下载为主（申请表 / 归档包）；与"我"相关的待办流转请前往「我的任务」处理。点击变更名称可打开详情。
+      </div>
+      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
+      <NModal
+          v-model:show="revokeModal"
+          preset="card"
+          :auto-focus="false"
+          :style="{ width: '450px', height: 'auto' }"
+          :segmented="{ content: true, footer: true }"
+      >
+          <template #header>
+              <h3 class="text-sm font-bold text-slate-800">
+                <span v-if="ledgerAct?.act === 'withdraw'">撤回变更申请</span>
+                <span v-else-if="ledgerAct?.act === 'unuse'">未投用情况说明</span>
+                <span v-else>未实施情况说明</span>
+                {{ledgerAct?.id}}
+              </h3>
+          </template>
+          <template #default>
+              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
+                {{ ledgerAct?.act === 'withdraw'
+              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
+              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
+              </div>
+              <NInput
+                  class="mt-3"
+                  v-model:value="ledgerReason"
+                  type="textarea"
+                  :rows="3"
+                  :placeholder="ledgerAct?.act === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
+              />
+          </template>
+          <template #footer>
+              <div class="flex justify-end gap-[10px]">
+                  <NButton size="small" @click="revokeCancel">取消</NButton>
+                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
+              </div>
+          </template>
+      </NModal>
+      <!-- 进度抽屉 -->
+      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
+        <NDrawerContent title="变更进度">
+            <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
+                <div class="text-sm font-semibold text-slate-800">{{ progressRow?.title }}</div>
+                <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
+                    <span class="font-mono">{{ progressRow?.id }}</span>
+                    <NTag v-if="progressRow?.status==='审批中'" size="small" type="warning">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='已批准'" size="small" type="primary">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='待验收'" size="small" type="success">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='待关闭'" size="small" type="error">{{progressRow.status}}</NTag>
+                    <span v-if="progressRow?.overdue" class="font-medium text-red-500">超期 {{ progressRow?.day }} 天</span>
+                </div>
+                <div v-if="progressRow?.dept || progressRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [progressRow?.dept, progressRow?.applicant].filter(Boolean).join(' · ') }}</div>
+                <div v-if="progressRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ progressRow?.meta }}</div>
+            </div>
+            <div class="mt-4">
+                <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
+                    <div class="flex flex-col items-center">
+                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
+                            :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
+                            <Icon v-if="i < curIdx || closed" icon="ix:success" />
+                            <Icon v-else-if="i === curIdx" icon="tabler:clock" />
+                            <span v-else class="text-[10px]">{{ i + 1 }}</span>
+                        </span>
+                        <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
+                    </div>
+                    <div class="pb-5">
+                        <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
+                            {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
+                        </div>
+                        <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
+                        <div v-if="i === curIdx && !closed && (progressRow?.detail || progressRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
+                            {{ [progressRow?.detail, progressRow?.updateTime ? `更新 ${progressRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="progressRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
+                临时变更：计划恢复 {{ progressRow?.deadline ?? '—' }}{{ progressRow?.extended ? ` · 延期后恢复 ${progressRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
+            </div>
+        </NDrawerContent>
+      </NDrawer>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 326px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/changeLedger/workshopChanges/index.vue b/src/views/changeLedger/workshopChanges/index.vue
index c002bfe..44c512d 100644
--- a/src/views/changeLedger/workshopChanges/index.vue
+++ b/src/views/changeLedger/workshopChanges/index.vue
@@ -1,688 +1,688 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-const revokeModal = ref(false);
-const revokeSaving = ref<boolean>(false);
-const progressDrawer = ref<boolean>(false);
-const dept = ref("全部组织");
-const openOnly = ref(false);
-const kw = ref("");
-const typeFilter = ref("全部");
-const statusFilter = ref("全部");
-const durFilter = ref("全部");
-const period = ref<string>("近一年");
-const customFrom = ref<any>(null);
-const customTo = ref<any>(null);
-const sort = ref<{ k: string; dir: "asc" | "desc" }>({ k: "applyTime", dir: "desc" });
-const me = "张工艺";
-const DEPTS = ["全部组织", "一车间", "二车间", "供应部", "质量部"];
-const deptOpts = DEPTS.map((d) => ({ label: d, value: d }));
-const LEDGER_ROWS = [
-  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
-  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
-  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
-  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
-  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
-  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
-];
-const REF_NOW = new Date("2026-08-03T12:00:00");
-const PERIOD_DAYS: Record<string, number> = { 近一年: 365, 近半年: 183, 近三个月: 92, 近一个月: 31 };
-const rows = computed(() => {
-  let list = LEDGER_ROWS.slice();
-  if (dept.value !== "全部组织") list = list.filter((r) => r.dept === dept.value);
-  if (openOnly.value) list = list.filter((r) => r.status !== "已关闭");
-  if (typeFilter.value !== "全部") list = list.filter((r) => r.type === typeFilter.value);
-  if (statusFilter.value !== "全部") list = list.filter((r) => r.status === statusFilter.value);
-  if (durFilter.value !== "全部") list = list.filter((r) => r.duration === durFilter.value);
-  if (period.value !== "自定义") {
-    const from = new Date(REF_NOW.getTime() - PERIOD_DAYS[period.value] * 86400000);
-    list = list.filter((r) => new Date(r.applyTime.replace(" ", "T")) >= from);
-  } else {
-    if (customFrom.value) list = list.filter((r) => r.applyTime.slice(0, 10) >= customFrom.value);
-    if (customTo.value) list = list.filter((r) => r.applyTime.slice(0, 10) <= customTo.value);
-  }
-  if (kw.value.trim()) list = list.filter((r) => r.title.includes(kw.value.trim()) || r.id.includes(kw.value.trim()));
-  list.sort((a:any, b:any) => {
-    const va = a[sort.value.k], vb = b[sort.value.k];
-    return sort.value.dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-  });
-  return list;
-});
-const navPreset = ref<string>("");
-const finalRows = computed(() => {
-  switch (navPreset.value) {
-    case "mine": return rows.value.filter((r:any) => r.applicant === me);
-    case "important": return rows.value.filter((r:any) => r.level === "重要");
-    case "temp": return rows.value.filter((r:any) => r.duration === "临时");
-    case "overdue": return rows.value.filter((r:any) => r.overdueDays);
-    case "highrisk": return rows.value.filter((r:any) => r.level === "重要" && r.status !== "已关闭");
-    default: return rows.value;
-  }
-});
-const TYPE_FILTERS = ["全部", "工艺", "设备", "管理"];
-const DUR_FILTERS = ["全部", "永久", "临时"];
-const PERIOD_FILTERS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"];
-const STATUS_FILTERS = ["全部", "审批中", "已批准", "实施中", "待PSSR", "待验收", "待关闭", "已关闭"];
-const sortVal = computed({
-  get: () => `${sort.value.k}-${sort.value.dir}`,
-  set: (v: string) => { const [k, dir] = v.split("-") as [string, "asc" | "desc"]; sort.value = { k, dir }; },
-});
-const SORT_OPTS = [
-  { label: "申请时间 · 最新", value: "applyTime-desc" },
-  { label: "申请时间 · 最早", value: "applyTime-asc" },
-  { label: "计划投用 · 最近", value: "planUse-asc" },
-  { label: "计划投用 · 最晚", value: "planUse-desc" },
-  { label: "状态更新 · 最新", value: "statusTime-desc" },
-  { label: "状态更新 · 最早", value: "statusTime-asc" },
-];
-interface LedgerExtra {
-  special?: ("延期" | "临时转永久" | "未实施" | "未投用")[];
-  actualUse?: string; planRestore?: string; extRestore?: string; closeTime?: string;
-}
-const LEDGER_EXTRA: Record<string, LedgerExtra> = {
-  "MOC-2026-R01-0039": { special: ["延期"], actualUse: "2026-07-16 08:30", planRestore: "2026-07-27", extRestore: "2026-08-03" },
-  "MOC-2026-R01-0029": { special: ["临时转永久"], planRestore: "2026-08-01" },
-  "MOC-2026-R02-0033": { special: ["未实施"] },
-  "MOC-2026-R03-0040": { special: ["未投用"] },
-  "MOC-2026-R02-0031": { actualUse: "2026-07-15 09:20" },
-  "MOC-2026-R03-0027": { actualUse: "2026-06-25 10:00", closeTime: "2026-07-02 10:18" },
-  "MOC-2026-R01-0024": { actualUse: "2026-06-20 08:10", closeTime: "2026-06-28 16:30" },
-};
-const SPECIAL_COLOR: Record<string, string> = {
-  延期: "bg-amber-50 text-amber-700 border-amber-300",
-  临时转永久: "bg-[#DFE9F6] text-[#17407F] border-[#6E93C6]/50",
-  未实施: "bg-red-50 text-red-600 border-red-200",
-  未投用: "bg-red-50 text-red-600 border-red-200",
-};
-const STATUS_COLOR: Record<string, string> = {
-  审批中: "bg-amber-100 text-amber-700 border-amber-200",
-  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
-  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
-  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
-  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
-  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
-  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
-};
-function opsOf(r: any, me: string, role?: string): { label: string; act: string; danger?: boolean }[] {
-  const ops: { label: string; act: string; danger?: boolean }[] = [];
-  if (r.status === "审批中" && r.applicant === me) ops.push({ label: "撤回", act: "withdraw", danger: true });
-  if (r.status === "已批准" || r.status === "待PSSR") ops.push({ label: "未实施情况说明", act: "unimpl" });
-  if (r.status === "实施中") ops.push({ label: "未投用情况说明", act: "unuse" });
-  if (role === "dept" && (r.overdueDays ?? 0) > 0) ops.push({ label: "催办", act: "urge" });
-  ops.push({ label: "详情", act: "detail" }, { label: "进度", act: "progress" });
-  if (r.status === "已批准") ops.push({ label: "下载申请表", act: "download" });
-  if (r.status === "待关闭") ops.push({ label: "下载", act: "download" });
-  if (r.status === "已关闭") ops.push({ label: "下载归档包", act: "download" });
-  return ops;
-}
-const FLOW_IMPORTANT = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  {
-    name: "专业会签",
-    kind: "会签",
-    roles: ["process", "process2", "quality"],
-    status: "current",
-    members: [
-      { name: "王仪表（仪表）", done: true },
-      { name: "周设备（设备）", done: false },
-      { name: "陈质量（质量）", done: false },
-    ],
-  },
-  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
-  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-];
-const FLOW_SIMPLE = [
-  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-];
-const CHANGES = [
-  {
-    id: "MOC-2026-R01-0035",
-    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
-    type: "设备",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "R-201 反应釜 / M-201A 搅拌电机",
-    date: "2026-07-28",
-    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
-    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
-    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
-    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
-    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
-    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
-    riskTools: ["AI 分析", "JSA", "检查表法"],
-    flow: FLOW_IMPORTANT,
-  },
-  {
-    id: "MOC-2026-R01-0036",
-    title: "聚合反应温度控制上限调整（78℃→82℃）",
-    type: "工艺",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "孙丽",
-    org: "一车间 · 工艺组",
-    device: "R-101 聚合釜 / TIC-101",
-    date: "2026-07-25",
-    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
-    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
-    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
-    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
-    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
-    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-    ],
-  },
-  {
-    id: "MOC-2026-R02-0038",
-    title: "DCS 罐区液位报警值 LIA-301 调整",
-    type: "工艺",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "待PSSR",
-    applicant: "吴强",
-    org: "一车间 · 罐区",
-    device: "V-301 储罐 / LIA-301",
-    date: "2026-07-20",
-    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
-    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
-    before: "LIA-301 高报 80%（对应 7.2m）。",
-    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
-    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
-    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0039",
-    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
-    type: "设备",
-    level: "一般",
-    duration: "临时",
-    urgent: true,
-    status: "待关闭",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "V-102 缓冲罐 / PSV-102",
-    date: "2026-07-15",
-    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
-    effect: "装置维持连续运行，临时期限内风险受控。",
-    before: "PSV-102 起跳压力 0.8MPa。",
-    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
-    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
-    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
-    overdueDays: 4,
-  },
-  {
-    id: "MOC-2026-R03-0040",
-    title: "原料环己烷供应商变更（新增 B 供应商）",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "实施中",
-    applicant: "刘芳",
-    org: "供应部",
-    device: "原料罐区 / TK-201",
-    date: "2026-07-18",
-    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
-    effect: "供应保障能力提升，采购成本预计下降 3%。",
-    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
-    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
-    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
-    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
-  },
-  {
-    id: "MOC-2026-R01-0029",
-    title: "操作规程修订（夏季工况）",
-    type: "管理",
-    level: "一般",
-    duration: "临时",
-    urgent: false,
-    status: "审批中",
-    applicant: "张工艺",
-    org: "一车间 · 工艺组",
-    device: "全装置",
-    date: "2026-06-20",
-    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
-    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
-    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
-    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
-    related: ["操作规程升版发布", "岗位人员培训"],
-    materials: ["修订后操作规程", "参数核算表"],
-    riskTools: ["AI 分析", "检查表法"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R02-0041",
-    title: "公用工程氮气减压阀组改造",
-    type: "设备",
-    level: "一般",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "周涛",
-    org: "公用工程车间",
-    device: "氮气总管 / PV-208 减压阀组",
-    date: "2026-07-29",
-    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
-    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
-    before: "PV-208 单路减压，无备用回路。",
-    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
-    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
-    materials: ["阀门数据表", "管道单线图", "施工方案"],
-    riskTools: ["AI 分析", "JSA"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
-      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-    ],
-    overdueDays: 3,
-  },
-  {
-    id: "MOC-2026-R03-0042",
-    title: "三车间自动化和安全隐患整改项目变更",
-    type: "管理",
-    level: "重要",
-    duration: "永久",
-    urgent: false,
-    status: "审批中",
-    applicant: "刘芳",
-    org: "三车间",
-    device: "三车间装置区",
-    date: "2026-07-31",
-    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
-    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
-    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
-    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
-    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
-    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
-    riskTools: ["AI 分析", "HAZOP"],
-    flow: [
-      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
-      {
-        name: "专业会签",
-        kind: "会签",
-        roles: ["process", "process2", "quality"],
-        status: "done",
-        members: [
-          { name: "王仪表（仪表）", done: true },
-          { name: "周设备（设备）", done: true },
-          { name: "陈质量（质量）", done: true },
-        ],
-      },
-      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
-      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
-    ],
-  },
-];
-const progressRow = ref<any>(null);
-const ledgerAct = ref<{ id: string; act: "withdraw" | "unimpl" | "unuse" } | null>(null);
-const ledgerReason = ref("");
-function nowStr() {
-  const d = new Date();
-  const p = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
-}
-type DemoListener = () => void;
-const demoListeners = new Set<DemoListener>();
-function emitDemo() { demoListeners.forEach((f) => f()); }
-interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
-let urgeSeq = 1;
-const URGE_RECORDS: UrgeRecord[] = [];
-const ROLES = [
-  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
-  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
-  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
-  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
-  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
-  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
-  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
-  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
-  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
-];
-function urgeChange(changeId: string, byRole: string) {
-  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
-  const c = CHANGES.find((x) => x.id === changeId);
-  const by = ROLES.find((r:any) => r.id === byRole)?.person ?? byRole;
-  URGE_RECORDS.unshift({
-    id: `URGE-${urgeSeq++}`,
-    changeId,
-    title: row?.title ?? c?.title ?? changeId,
-    applicant: row?.applicant ?? c?.applicant ?? "",
-    by,
-    time: nowStr(),
-  });
-  emitDemo();
-}
-
-const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
-const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[progressRow.value?.status ?? ""] ?? 1);
-const closed = computed(() => progressRow.value?.status === "已关闭");
-const timeOf = (i: number) => (i === 0 ? progressRow.value?.applyTime : i === 3 ? progressRow.value?.actualUse : i === 5 ? progressRow.value?.closeTime : undefined);
-
-const role = ref<string>("applicant");
-const doOp = (r: any, act: string) => {
-  if (act === "detail") {
-    const c = CHANGES.find((x) => x.id === r.changeId);
-    if (c) {
-      // 跳转详情页面
-      // emit("openChange", c);
-    }else {
-      window.$message?.info(`演示：打开变更详情页 ${r.id}`);
-    }
-    return;
-  }
-  if (act === "progress") { 
-    progressRow.value = r;
-    progressDrawer.value = true;
-    return; 
-  }
-  if (act === "withdraw" || act === "unimpl" || act === "unuse") { 
-    ledgerAct.value = { id: r.id, act }; 
-    ledgerReason.value = ""; 
-    revokeModal.value = true;
-    return; 
-  }
-  if (act === "urge") { 
-    urgeChange(r.id, role.value ?? "dept"); 
-    window.$message?.success(`已催办 ${r.id} 申请人 ${r.applicant}（系统消息 + 企业微信），催办记录已留痕并抄送变更主管部门，申请人操作台将出现催办提示`); 
-    return; 
-  }
-  window.$message?.info(`演示：下载 ${r.id} 变更申请表 / 归档包（PDF）`);
-};
-
-// 重置
-const reset = () => {
-  dept.value = "全部组织"; openOnly.value = false; kw.value = ""; typeFilter.value = "全部"; statusFilter.value = "全部";
-  durFilter.value = "全部"; period.value = "近一年"; customFrom.value = null; customTo.value = null;
-  sort.value = { k: "applyTime", dir: "desc" };
-  window.$message?.success("筛选条件已重置");
-};
-// 导出台账
-const exportChanges = () => {
-  window.$message?.success(`演示：导出台账 Excel（当前筛选 ${finalRows.value.length} 条）`);
-}
-// 撤回弹框取消
-const revokeCancel = () => {
-  ledgerAct.value = null;
-  ledgerReason.value = "";
-  revokeModal.value = false;
-}
-// 撤回弹框提交
-const revokeSave = () => {
-  if (!ledgerReason.value) {
-    window.$message?.warning("请输入撤回理由");
-    return;
-  }
-  window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
-  revokeCancel();
-}
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 我发起的变更 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <!-- 工具条 -->
-      <div 
-        class="flex flex-wrap items-center gap-2 border px-3 py-2"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
-          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ finalRows.length }}</span>
-        </span>
-        <NSelect size="small" class="!w-32" :value="dept" :options="deptOpts" @update:value="(v: string) => dept = v" />
-        <NRadio
-          size="small"
-          :checked="!openOnly"
-          :value="false"
-          name="显示全部"
-          @change="openOnly = false"
-        >
-          显示全部
-        </NRadio>
-        <NRadio
-          size="small"
-          :checked="openOnly"
-          :value="true"
-          name="显示未关闭"
-          @change="openOnly = true"
-        >
-          显示未关闭
-        </NRadio>
-        <div class="relative ml-auto">
-          <NInput v-model:value="kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号">
-            <template #suffix>
-              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-            </template>
-          </NInput>
-        </div>
-        <NButton size="small" class="text-sm" @click="reset">
-          <Icon icon="system-uicons:reset" class="size-12px" />重置
-        </NButton>
-        <NButton size="small" class="text-sm" @click="exportChanges">
-          <Icon icon="material-symbols:download" class="size-14px" />导出台账
-        </NButton>
-      </div>
-      <!-- 筛选与排序行 -->
-      <div 
-        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
-        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
-      >
-        <div class="flex items-center gap-x-4">
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">类型</span>
-            <NButton size="tiny" round v-for="t in TYPE_FILTERS" :key="t" :ghost="typeFilter === t ? false : true" :type="typeFilter === t ? 'primary' : 'default'" @click="typeFilter = t">{{ t }}</NButton>
-          </p>
-          <p class="flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时限</span>
-            <NButton size="tiny" round v-for="d in DUR_FILTERS" :key="d" :ghost="durFilter === d ? false : true" :type="durFilter === d ? 'primary' : 'default'" @click="durFilter = d">{{ d }}</NButton>
-          </p>
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时间</span>
-            <NButton size="tiny" round v-for="p in PERIOD_FILTERS" :key="p" :ghost="period === p ? false : true" :type="period === p ? 'primary' : 'default'" @click="period = p">{{ p }}</NButton>
-            <span v-if="period === '自定义'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="customFrom" type="date" size="small" class="w-130px" />
-              <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="customTo" type="date" size="small" class="w-130px" />
-            </span>
-          </p>
-        </div>
-        <div class="flex items-center gap-x-4">
-          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">状态</span>
-            <NButton size="tiny" round v-for="s in STATUS_FILTERS" :key="s" :ghost="statusFilter === s ? false : true" :type="statusFilter === s ? 'primary' : 'default'" @click="statusFilter = s">{{ s }}</NButton>
-          </p>
-          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">排序</span>
-            <NSelect size="small" class="!w-36" v-model:value="sortVal" :options="SORT_OPTS" />
-          </p>
-        </div>
-      </div>
-      <div class="space-y-3 scroll">
-        <!-- 列表 -->
-        <div v-for="(r, i) in finalRows" :key="r.id" class="rounded-lg border bg-white px-4 py-3">
-          <div class="flex flex-wrap items-start gap-3">
-            <div class="min-w-0 flex-1">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-xs text-slate-300">{{ String(i + 1).padStart(2, '0') }}</span>
-                <NButton text class="text-left text-sm font-semibold text-slate-800 hover:text-[#1D4E9C] hover:underline" @click="doOp(r, 'detail')">{{ r.title }}</NButton>
-                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
-                <span class="font-mono text-[11px] text-slate-400">{{ r.id }}</span>
-              </div>
-              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
-                <NTag size="small" class="border-slate-200 bg-white text-slate-600">{{ r.type }}</NTag>
-                <NTag size="small" :class="r.level === '重要' ? 'border-red-200 bg-red-100 text-red-700' : 'border-slate-200 bg-slate-100 text-slate-600'">{{ r.level }}</NTag>
-                <NTag size="small" :class="r.duration === '临时' ? 'border-[#FAAD14] bg-[#FAAD14] text-white' : 'border-[#1D4E9C] bg-[#1D4E9C] text-white'">{{ r.duration }}</NTag>
-                <NTag size="small" v-for="s in LEDGER_EXTRA[r.id]?.special ?? []" :key="s" :class="SPECIAL_COLOR[s]">{{ s }}</NTag>
-              </div>
-              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
-                <span>申请 {{ r.applyTime }}</span>
-                <span>{{ r.dept }} · {{ r.applicant }}</span>
-                <span>计划投用 {{ r.planUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.actualUse">实际投用 {{ LEDGER_EXTRA[r.id].actualUse }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.planRestore">计划恢复 {{ LEDGER_EXTRA[r.id].planRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.extRestore" class="text-amber-600">延期后恢复 {{ LEDGER_EXTRA[r.id].extRestore }}</span>
-                <span v-if="LEDGER_EXTRA[r.id]?.closeTime">关闭 {{ LEDGER_EXTRA[r.id].closeTime }}</span>
-                <span>状态更新 {{ r.statusTime }}</span>
-              </div>
-            </div>
-            <div class="flex shrink-0 flex-col items-end gap-1.5">
-              <div class="flex flex-wrap items-center justify-end gap-2">
-                <span class="text-[11px] text-slate-400">{{ r.statusDetail }}</span>
-                <NTag size="small" :class="STATUS_COLOR[r.status]">{{ r.status }}</NTag>
-                <span v-if="r.overdueDays" class="text-[11px] font-medium text-red-500">超期 {{ r.overdueDays }} 天</span>
-              </div>
-              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
-                <NButton size="small" v-for="op in opsOf(r, me, role)" :key="op.label"
-                  class="text-xs"
-                  :ghost="op.act === 'detail' ? false : true"
-                  :type="op.act === 'detail' ? 'primary' : op.danger ? 'error' : 'default'"
-                  @click="doOp(r, op.act)">
-                  {{ op.label }}
-                </NButton>
-              </div>
-              <div v-if="r.duration === '临时'" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
-            </div>
-          </div>
-        </div>
-        <div v-if="finalRows.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
-      </div>
-      <div class="text-xs text-slate-400 mt-3">
-        共 {{ finalRows.length }} 条 · 台账以查看、下载为主（申请表 / 归档包）；与"我"相关的待办流转请前往「我的任务」处理。点击变更名称可打开详情。
-      </div>
-      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
-      <NModal
-          v-model:show="revokeModal"
-          preset="card"
-          :auto-focus="false"
-          :style="{ width: '450px', height: 'auto' }"
-          :segmented="{ content: true, footer: true }"
-      >
-          <template #header>
-              <h3 class="text-sm font-bold text-slate-800">
-                <span v-if="ledgerAct?.act === 'withdraw'">撤回变更申请</span>
-                <span v-else-if="ledgerAct?.act === 'unuse'">未投用情况说明</span>
-                <span v-else>未实施情况说明</span>
-                {{ledgerAct?.id}}
-              </h3>
-          </template>
-          <template #default>
-              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                {{ ledgerAct?.act === 'withdraw'
-              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
-              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
-              </div>
-              <NInput
-                  class="mt-3"
-                  v-model:value="ledgerReason"
-                  type="textarea"
-                  :rows="3"
-                  :placeholder="ledgerAct?.act === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
-              />
-          </template>
-          <template #footer>
-              <div class="flex justify-end gap-[10px]">
-                  <NButton size="small" @click="revokeCancel">取消</NButton>
-                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
-              </div>
-          </template>
-      </NModal>
-      <!-- 进度抽屉 -->
-      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-        <NDrawerContent title="变更进度">
-            <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-                <div class="text-sm font-semibold text-slate-800">{{ progressRow?.title }}</div>
-                <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                    <span class="font-mono">{{ progressRow?.id }}</span>
-                    <NTag v-if="progressRow?.status==='审批中'" size="small" type="warning">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='已批准'" size="small" type="primary">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待验收'" size="small" type="success">{{progressRow.status}}</NTag>
-                    <NTag v-if="progressRow?.status==='待关闭'" size="small" type="error">{{progressRow.status}}</NTag>
-                    <span v-if="progressRow?.overdue" class="font-medium text-red-500">超期 {{ progressRow?.day }} 天</span>
-                </div>
-                <div v-if="progressRow?.dept || progressRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [progressRow?.dept, progressRow?.applicant].filter(Boolean).join(' · ') }}</div>
-                <div v-if="progressRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ progressRow?.meta }}</div>
-            </div>
-            <div class="mt-4">
-                <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
-                    <div class="flex flex-col items-center">
-                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
-                            :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
-                            <Icon v-if="i < curIdx || closed" icon="ix:success" />
-                            <Icon v-else-if="i === curIdx" icon="tabler:clock" />
-                            <span v-else class="text-[10px]">{{ i + 1 }}</span>
-                        </span>
-                        <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
-                    </div>
-                    <div class="pb-5">
-                        <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
-                            {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
-                        </div>
-                        <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
-                        <div v-if="i === curIdx && !closed && (progressRow?.detail || progressRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
-                            {{ [progressRow?.detail, progressRow?.updateTime ? `更新 ${progressRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-if="progressRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-                临时变更：计划恢复 {{ progressRow?.deadline ?? '—' }}{{ progressRow?.extended ? ` · 延期后恢复 ${progressRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
-            </div>
-        </NDrawerContent>
-      </NDrawer>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 326px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const { routerPushByKey } = useRouterPush();
+const themeStore = useThemeStore();
+
+const revokeModal = ref(false);
+const revokeSaving = ref<boolean>(false);
+const progressDrawer = ref<boolean>(false);
+const dept = ref("全部组织");
+const openOnly = ref(false);
+const kw = ref("");
+const typeFilter = ref("全部");
+const statusFilter = ref("全部");
+const durFilter = ref("全部");
+const period = ref<string>("近一年");
+const customFrom = ref<any>(null);
+const customTo = ref<any>(null);
+const sort = ref<{ k: string; dir: "asc" | "desc" }>({ k: "applyTime", dir: "desc" });
+const me = "张工艺";
+const DEPTS = ["全部组织", "一车间", "二车间", "供应部", "质量部"];
+const deptOpts = DEPTS.map((d) => ({ label: d, value: d }));
+const LEDGER_ROWS = [
+  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
+  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
+  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
+  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
+  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
+  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
+];
+const REF_NOW = new Date("2026-08-03T12:00:00");
+const PERIOD_DAYS: Record<string, number> = { 近一年: 365, 近半年: 183, 近三个月: 92, 近一个月: 31 };
+const rows = computed(() => {
+  let list = LEDGER_ROWS.slice();
+  if (dept.value !== "全部组织") list = list.filter((r) => r.dept === dept.value);
+  if (openOnly.value) list = list.filter((r) => r.status !== "已关闭");
+  if (typeFilter.value !== "全部") list = list.filter((r) => r.type === typeFilter.value);
+  if (statusFilter.value !== "全部") list = list.filter((r) => r.status === statusFilter.value);
+  if (durFilter.value !== "全部") list = list.filter((r) => r.duration === durFilter.value);
+  if (period.value !== "自定义") {
+    const from = new Date(REF_NOW.getTime() - PERIOD_DAYS[period.value] * 86400000);
+    list = list.filter((r) => new Date(r.applyTime.replace(" ", "T")) >= from);
+  } else {
+    if (customFrom.value) list = list.filter((r) => r.applyTime.slice(0, 10) >= customFrom.value);
+    if (customTo.value) list = list.filter((r) => r.applyTime.slice(0, 10) <= customTo.value);
+  }
+  if (kw.value.trim()) list = list.filter((r) => r.title.includes(kw.value.trim()) || r.id.includes(kw.value.trim()));
+  list.sort((a:any, b:any) => {
+    const va = a[sort.value.k], vb = b[sort.value.k];
+    return sort.value.dir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+  });
+  return list;
+});
+const navPreset = ref<string>("");
+const finalRows = computed(() => {
+  switch (navPreset.value) {
+    case "mine": return rows.value.filter((r:any) => r.applicant === me);
+    case "important": return rows.value.filter((r:any) => r.level === "重要");
+    case "temp": return rows.value.filter((r:any) => r.duration === "临时");
+    case "overdue": return rows.value.filter((r:any) => r.overdueDays);
+    case "highrisk": return rows.value.filter((r:any) => r.level === "重要" && r.status !== "已关闭");
+    default: return rows.value;
+  }
+});
+const TYPE_FILTERS = ["全部", "工艺", "设备", "管理"];
+const DUR_FILTERS = ["全部", "永久", "临时"];
+const PERIOD_FILTERS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"];
+const STATUS_FILTERS = ["全部", "审批中", "已批准", "实施中", "待PSSR", "待验收", "待关闭", "已关闭"];
+const sortVal = computed({
+  get: () => `${sort.value.k}-${sort.value.dir}`,
+  set: (v: string) => { const [k, dir] = v.split("-") as [string, "asc" | "desc"]; sort.value = { k, dir }; },
+});
+const SORT_OPTS = [
+  { label: "申请时间 · 最新", value: "applyTime-desc" },
+  { label: "申请时间 · 最早", value: "applyTime-asc" },
+  { label: "计划投用 · 最近", value: "planUse-asc" },
+  { label: "计划投用 · 最晚", value: "planUse-desc" },
+  { label: "状态更新 · 最新", value: "statusTime-desc" },
+  { label: "状态更新 · 最早", value: "statusTime-asc" },
+];
+interface LedgerExtra {
+  special?: ("延期" | "临时转永久" | "未实施" | "未投用")[];
+  actualUse?: string; planRestore?: string; extRestore?: string; closeTime?: string;
+}
+const LEDGER_EXTRA: Record<string, LedgerExtra> = {
+  "MOC-2026-R01-0039": { special: ["延期"], actualUse: "2026-07-16 08:30", planRestore: "2026-07-27", extRestore: "2026-08-03" },
+  "MOC-2026-R01-0029": { special: ["临时转永久"], planRestore: "2026-08-01" },
+  "MOC-2026-R02-0033": { special: ["未实施"] },
+  "MOC-2026-R03-0040": { special: ["未投用"] },
+  "MOC-2026-R02-0031": { actualUse: "2026-07-15 09:20" },
+  "MOC-2026-R03-0027": { actualUse: "2026-06-25 10:00", closeTime: "2026-07-02 10:18" },
+  "MOC-2026-R01-0024": { actualUse: "2026-06-20 08:10", closeTime: "2026-06-28 16:30" },
+};
+const SPECIAL_COLOR: Record<string, string> = {
+  延期: "bg-amber-50 text-amber-700 border-amber-300",
+  临时转永久: "bg-[#DFE9F6] text-[#17407F] border-[#6E93C6]/50",
+  未实施: "bg-red-50 text-red-600 border-red-200",
+  未投用: "bg-red-50 text-red-600 border-red-200",
+};
+const STATUS_COLOR: Record<string, string> = {
+  审批中: "bg-amber-100 text-amber-700 border-amber-200",
+  已批准: "bg-[#DFE9F6] text-[#17407F] border-[#ACC6E5]",
+  实施中: "bg-[#1D4E9C]/10 text-[#1D4E9C] border-[#1D4E9C]/30",
+  待PSSR: "bg-violet-100 text-violet-700 border-violet-200",
+  待验收: "bg-emerald-50 text-emerald-600 border-emerald-200",
+  待关闭: "bg-[#E15555]/10 text-[#E15555] border-[#E15555]/30",
+  已关闭: "bg-emerald-100 text-emerald-700 border-emerald-200",
+};
+function opsOf(r: any, me: string, role?: string): { label: string; act: string; danger?: boolean }[] {
+  const ops: { label: string; act: string; danger?: boolean }[] = [];
+  if (r.status === "审批中" && r.applicant === me) ops.push({ label: "撤回", act: "withdraw", danger: true });
+  if (r.status === "已批准" || r.status === "待PSSR") ops.push({ label: "未实施情况说明", act: "unimpl" });
+  if (r.status === "实施中") ops.push({ label: "未投用情况说明", act: "unuse" });
+  if (role === "dept" && (r.overdueDays ?? 0) > 0) ops.push({ label: "催办", act: "urge" });
+  ops.push({ label: "详情", act: "detail" }, { label: "进度", act: "progress" });
+  if (r.status === "已批准") ops.push({ label: "下载申请表", act: "download" });
+  if (r.status === "待关闭") ops.push({ label: "下载", act: "download" });
+  if (r.status === "已关闭") ops.push({ label: "下载归档包", act: "download" });
+  return ops;
+}
+const FLOW_IMPORTANT = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  {
+    name: "专业会签",
+    kind: "会签",
+    roles: ["process", "process2", "quality"],
+    status: "current",
+    members: [
+      { name: "王仪表（仪表）", done: true },
+      { name: "周设备（设备）", done: false },
+      { name: "陈质量（质量）", done: false },
+    ],
+  },
+  { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
+  { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+];
+const FLOW_SIMPLE = [
+  { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+  { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+  { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+];
+const CHANGES = [
+  {
+    id: "MOC-2026-R01-0035",
+    title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）",
+    type: "设备",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "R-201 反应釜 / M-201A 搅拌电机",
+    date: "2026-07-28",
+    purpose: "原 55kW 电机在高粘度工况下频繁过载跳闸，影响反应均匀性与产品质量，需更换为 75kW 防爆电机。",
+    effect: "消除过载跳闸（月均 3 次降至 0），搅拌电流裕量提升至 25%，产品批次合格率预计提升 1.5%。",
+    before: "M-201A 搅拌电机：55kW，ExdⅡBT4，额定电流 102A，原设计工况粘度 ≤3000cP。",
+    after: "更换为 75kW 防爆电机：ExdⅡCT4，额定电流 138A，适配粘度 ≤6000cP；电缆与开关容量同步校核升级。",
+    related: ["更新 P&ID（图号 PID-R201-03）", "修订电气图纸与电缆清册", "校核联锁跳车电流设定", "更新设备台账与备件清单", "操作人员培训"],
+    materials: ["设备数据表", "防爆合格证与材质证明", "电气负荷校核计算书", "更新后的 P&ID", "制造商安装维护手册"],
+    riskTools: ["AI 分析", "JSA", "检查表法"],
+    flow: FLOW_IMPORTANT,
+  },
+  {
+    id: "MOC-2026-R01-0036",
+    title: "聚合反应温度控制上限调整（78℃→82℃）",
+    type: "工艺",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "孙丽",
+    org: "一车间 · 工艺组",
+    device: "R-101 聚合釜 / TIC-101",
+    date: "2026-07-25",
+    purpose: "提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。",
+    effect: "单釜反应周期缩短约 40 分钟，年产能预计提升 8%。",
+    before: "聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。",
+    after: "控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。",
+    related: ["修订工艺卡片与操作规程", "DCS 参数与报警值修改", "更新 HAZOP 分析报告", "岗位人员再培训"],
+    materials: ["工艺计算书", "热平衡与飞温风险分析", "HAZOP 分析报告", "更新后的工艺卡片"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "current", locked: true },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+    ],
+  },
+  {
+    id: "MOC-2026-R02-0038",
+    title: "DCS 罐区液位报警值 LIA-301 调整",
+    type: "工艺",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "待PSSR",
+    applicant: "吴强",
+    org: "一车间 · 罐区",
+    device: "V-301 储罐 / LIA-301",
+    date: "2026-07-20",
+    purpose: "原高报值偏保守，频繁误报导致操作疲劳，按最新容积表校准报警值。",
+    effect: "误报次数由每周 5 次降至 0，报警响应有效性提升。",
+    before: "LIA-301 高报 80%（对应 7.2m）。",
+    after: "高报调整为 85%（对应 7.65m），联锁值 90% 不变。",
+    related: ["DCS 组态修改", "更新报警台账", "岗位告知培训"],
+    materials: ["储罐容积表", "DCS 组态修改记录", "报警台账"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0039",
+    title: "紧急变更：V-102 安全阀起跳压力临时调整（补办手续）",
+    type: "设备",
+    level: "一般",
+    duration: "临时",
+    urgent: true,
+    status: "待关闭",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "V-102 缓冲罐 / PSV-102",
+    date: "2026-07-15",
+    purpose: "上游工况波动导致安全阀频繁起跳，经紧急批准临时调整起跳压力并限期恢复原设定。",
+    effect: "装置维持连续运行，临时期限内风险受控。",
+    before: "PSV-102 起跳压力 0.8MPa。",
+    after: "临时调整为 0.88MPa（不超过设计压力 1.0MPa 的 90%），期限 30 天，到期恢复 0.8MPa。",
+    related: ["恢复性检查", "更新安全阀台账", "事后风险分析补办"],
+    materials: ["安全阀校验报告", "紧急变更审批单", "事后 JSA 分析"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: FLOW_SIMPLE.map((n) => ({ ...n, status: "done" as const })),
+    overdueDays: 4,
+  },
+  {
+    id: "MOC-2026-R03-0040",
+    title: "原料环己烷供应商变更（新增 B 供应商）",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "实施中",
+    applicant: "刘芳",
+    org: "供应部",
+    device: "原料罐区 / TK-201",
+    date: "2026-07-18",
+    purpose: "引入第二供应商保障原料供应安全，降低单一来源断供风险。",
+    effect: "供应保障能力提升，采购成本预计下降 3%。",
+    before: "环己烷单一供应商 A，纯度 ≥99.5%。",
+    after: "新增供应商 B（纯度 ≥99.8%，已提供 MSDS 与质检报告），双源供应。",
+    related: ["更新合格供应商名录", "修订进厂检验规程", "更新 MSDS 档案", "卸料操作培训"],
+    materials: ["新供应商资质文件", "产品质检报告与 MSDS", "进厂检验规程"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: FLOW_IMPORTANT.map((n) => ({ ...n, status: "done" as const })),
+  },
+  {
+    id: "MOC-2026-R01-0029",
+    title: "操作规程修订（夏季工况）",
+    type: "管理",
+    level: "一般",
+    duration: "临时",
+    urgent: false,
+    status: "审批中",
+    applicant: "张工艺",
+    org: "一车间 · 工艺组",
+    device: "全装置",
+    date: "2026-06-20",
+    purpose: "夏季高温工况下循环水温度升高，原操作规程冷却参数不适用，需修订夏季操作参数与巡检频次。",
+    effect: "夏季工况下装置运行参数受控，避免超温降负荷，预计减少非计划降量 2 次/年。",
+    before: "操作规程（2025 版）未区分冬夏季工况，冷却参数单一。",
+    after: "增加夏季工况章节：循环水温度 >28℃ 时启用备用冷却塔，巡检频次由 4h 调整为 2h。",
+    related: ["操作规程升版发布", "岗位人员培训"],
+    materials: ["修订后操作规程", "参数核算表"],
+    riskTools: ["AI 分析", "检查表法"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R02-0041",
+    title: "公用工程氮气减压阀组改造",
+    type: "设备",
+    level: "一般",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "周涛",
+    org: "公用工程车间",
+    device: "氮气总管 / PV-208 减压阀组",
+    date: "2026-07-29",
+    purpose: "氮气减压阀组单路运行，检修时需停氮气，影响装置密封气供应，需改造为双路并联。",
+    effect: "减压阀组可在线切换检修，氮气供应连续性提升至 100%。",
+    before: "PV-208 单路减压，无备用回路。",
+    after: "新增并联减压回路 PV-208B，双路一用一备，可在线切换。",
+    related: ["更新 P&ID", "修订氮气系统操作规程", "更新设备台账"],
+    materials: ["阀门数据表", "管道单线图", "施工方案"],
+    riskTools: ["AI 分析", "JSA"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      { name: "专业审批", kind: "审批", roles: ["process"], status: "current" },
+      { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+    ],
+    overdueDays: 3,
+  },
+  {
+    id: "MOC-2026-R03-0042",
+    title: "三车间自动化和安全隐患整改项目变更",
+    type: "管理",
+    level: "重要",
+    duration: "永久",
+    urgent: false,
+    status: "审批中",
+    applicant: "刘芳",
+    org: "三车间",
+    device: "三车间装置区",
+    date: "2026-07-31",
+    purpose: "落实安全隐患整改要求，对三车间自动化控制系统升级改造，消除加料互串与超温隐患。",
+    effect: "隐患整改闭环率 100%，自动化水平提升，误操作风险显著降低。",
+    before: "加料系统手动控制，存在互串与超温隐患（隐患编号 YH-2026-017）。",
+    after: "改为 DCS 自动控制 + 加料顺序联锁，增设独立超温切断。",
+    related: ["修订操作规程", "DCS 组态修改", "更新 HAZOP 分析", "岗位再培训"],
+    materials: ["隐患整改方案", "HAZOP 分析报告", "联锁因果表"],
+    riskTools: ["AI 分析", "HAZOP"],
+    flow: [
+      { name: "部门审核", kind: "审批", roles: ["dept"], status: "done" },
+      {
+        name: "专业会签",
+        kind: "会签",
+        roles: ["process", "process2", "quality"],
+        status: "done",
+        members: [
+          { name: "王仪表（仪表）", done: true },
+          { name: "周设备（设备）", done: true },
+          { name: "陈质量（质量）", done: true },
+        ],
+      },
+      { name: "安全审查", kind: "审批", roles: ["safety"], status: "done" },
+      { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "current" },
+    ],
+  },
+];
+const progressRow = ref<any>(null);
+const ledgerAct = ref<{ id: string; act: "withdraw" | "unimpl" | "unuse" } | null>(null);
+const ledgerReason = ref("");
+function nowStr() {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+type DemoListener = () => void;
+const demoListeners = new Set<DemoListener>();
+function emitDemo() { demoListeners.forEach((f) => f()); }
+interface UrgeRecord { id: string; changeId: string; title: string; applicant: string; by: string; time: string; }
+let urgeSeq = 1;
+const URGE_RECORDS: UrgeRecord[] = [];
+const ROLES = [
+  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
+  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
+  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
+  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
+  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
+  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
+  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
+  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
+  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
+];
+function urgeChange(changeId: string, byRole: string) {
+  const row = LEDGER_ROWS.find((r) => r.id === changeId || r.changeId === changeId);
+  const c = CHANGES.find((x) => x.id === changeId);
+  const by = ROLES.find((r:any) => r.id === byRole)?.person ?? byRole;
+  URGE_RECORDS.unshift({
+    id: `URGE-${urgeSeq++}`,
+    changeId,
+    title: row?.title ?? c?.title ?? changeId,
+    applicant: row?.applicant ?? c?.applicant ?? "",
+    by,
+    time: nowStr(),
+  });
+  emitDemo();
+}
+
+const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
+const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[progressRow.value?.status ?? ""] ?? 1);
+const closed = computed(() => progressRow.value?.status === "已关闭");
+const timeOf = (i: number) => (i === 0 ? progressRow.value?.applyTime : i === 3 ? progressRow.value?.actualUse : i === 5 ? progressRow.value?.closeTime : undefined);
+
+const role = ref<string>("applicant");
+const doOp = (r: any, act: string) => {
+  if (act === "detail") {
+    const c = CHANGES.find((x) => x.id === r.changeId);
+    if (c) {
+      // 跳转详情页面
+      // emit("openChange", c);
+    }else {
+      window.$message?.info(`演示：打开变更详情页 ${r.id}`);
+    }
+    return;
+  }
+  if (act === "progress") { 
+    progressRow.value = r;
+    progressDrawer.value = true;
+    return; 
+  }
+  if (act === "withdraw" || act === "unimpl" || act === "unuse") { 
+    ledgerAct.value = { id: r.id, act }; 
+    ledgerReason.value = ""; 
+    revokeModal.value = true;
+    return; 
+  }
+  if (act === "urge") { 
+    urgeChange(r.id, role.value ?? "dept"); 
+    window.$message?.success(`已催办 ${r.id} 申请人 ${r.applicant}（系统消息 + 企业微信），催办记录已留痕并抄送变更主管部门，申请人操作台将出现催办提示`); 
+    return; 
+  }
+  window.$message?.info(`演示：下载 ${r.id} 变更申请表 / 归档包（PDF）`);
+};
+
+// 重置
+const reset = () => {
+  dept.value = "全部组织"; openOnly.value = false; kw.value = ""; typeFilter.value = "全部"; statusFilter.value = "全部";
+  durFilter.value = "全部"; period.value = "近一年"; customFrom.value = null; customTo.value = null;
+  sort.value = { k: "applyTime", dir: "desc" };
+  window.$message?.success("筛选条件已重置");
+};
+// 导出台账
+const exportChanges = () => {
+  window.$message?.success(`演示：导出台账 Excel（当前筛选 ${finalRows.value.length} 条）`);
+}
+// 撤回弹框取消
+const revokeCancel = () => {
+  ledgerAct.value = null;
+  ledgerReason.value = "";
+  revokeModal.value = false;
+}
+// 撤回弹框提交
+const revokeSave = () => {
+  if (!ledgerReason.value) {
+    window.$message?.warning("请输入撤回理由");
+    return;
+  }
+  window.$message?.success(ledgerAct.value?.act === 'withdraw' ? `已撤回 ${ledgerAct.value?.id}，申请退回草稿箱，审批记录保留可查` : `${ledgerAct.value?.id} 情况说明已提交，变更转入关闭流程（主管部门确认后记录关闭时间）`);
+  revokeCancel();
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 我发起的变更 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <!-- 工具条 -->
+      <div 
+        class="flex flex-wrap items-center gap-2 border px-3 py-2"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+          <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> 全部变更
+          <span class="rounded bg-slate-100 px-1.5 text-xs text-slate-500">{{ finalRows.length }}</span>
+        </span>
+        <NSelect size="small" class="!w-32" :value="dept" :options="deptOpts" @update:value="(v: string) => dept = v" />
+        <NRadio
+          size="small"
+          :checked="!openOnly"
+          :value="false"
+          name="显示全部"
+          @change="openOnly = false"
+        >
+          显示全部
+        </NRadio>
+        <NRadio
+          size="small"
+          :checked="openOnly"
+          :value="true"
+          name="显示未关闭"
+          @change="openOnly = true"
+        >
+          显示未关闭
+        </NRadio>
+        <div class="relative ml-auto">
+          <NInput v-model:value="kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号">
+            <template #suffix>
+              <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+            </template>
+          </NInput>
+        </div>
+        <NButton size="small" class="text-sm" @click="reset">
+          <Icon icon="system-uicons:reset" class="size-12px" />重置
+        </NButton>
+        <NButton size="small" class="text-sm" @click="exportChanges">
+          <Icon icon="material-symbols:download" class="size-14px" />导出台账
+        </NButton>
+      </div>
+      <!-- 筛选与排序行 -->
+      <div 
+        class="flex flex-col gap-y-2 border px-3 py-2 my-3"
+        :style="{ borderRadius: `${themeStore.themeRadius}px` }"
+      >
+        <div class="flex items-center gap-x-4">
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">类型</span>
+            <NButton size="tiny" round v-for="t in TYPE_FILTERS" :key="t" :ghost="typeFilter === t ? false : true" :type="typeFilter === t ? 'primary' : 'default'" @click="typeFilter = t">{{ t }}</NButton>
+          </p>
+          <p class="flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时限</span>
+            <NButton size="tiny" round v-for="d in DUR_FILTERS" :key="d" :ghost="durFilter === d ? false : true" :type="durFilter === d ? 'primary' : 'default'" @click="durFilter = d">{{ d }}</NButton>
+          </p>
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时间</span>
+            <NButton size="tiny" round v-for="p in PERIOD_FILTERS" :key="p" :ghost="period === p ? false : true" :type="period === p ? 'primary' : 'default'" @click="period = p">{{ p }}</NButton>
+            <span v-if="period === '自定义'" class="flex items-center gap-1">
+              <NDatePicker v-model:value="customFrom" type="date" size="small" class="w-130px" />
+              <span class="text-xs text-slate-400">至</span>
+              <NDatePicker v-model:value="customTo" type="date" size="small" class="w-130px" />
+            </span>
+          </p>
+        </div>
+        <div class="flex items-center gap-x-4">
+          <p class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">状态</span>
+            <NButton size="tiny" round v-for="s in STATUS_FILTERS" :key="s" :ghost="statusFilter === s ? false : true" :type="statusFilter === s ? 'primary' : 'default'" @click="statusFilter = s">{{ s }}</NButton>
+          </p>
+          <p class="ml-auto flex items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">排序</span>
+            <NSelect size="small" class="!w-36" v-model:value="sortVal" :options="SORT_OPTS" />
+          </p>
+        </div>
+      </div>
+      <div class="space-y-3 scroll">
+        <!-- 列表 -->
+        <div v-for="(r, i) in finalRows" :key="r.id" class="rounded-lg border bg-white px-4 py-3">
+          <div class="flex flex-wrap items-start gap-3">
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-xs text-slate-300">{{ String(i + 1).padStart(2, '0') }}</span>
+                <NButton text class="text-left text-sm font-semibold text-slate-800 hover:text-[#1D4E9C] hover:underline" @click="doOp(r, 'detail')">{{ r.title }}</NButton>
+                <NTag size="small" v-if="r.urgent" class="animate-breathe border-[#E15555] bg-[#E15555] text-white">紧急</NTag>
+                <span class="font-mono text-[11px] text-slate-400">{{ r.id }}</span>
+              </div>
+              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
+                <NTag size="small" class="border-slate-200 bg-white text-slate-600">{{ r.type }}</NTag>
+                <NTag size="small" :class="r.level === '重要' ? 'border-red-200 bg-red-100 text-red-700' : 'border-slate-200 bg-slate-100 text-slate-600'">{{ r.level }}</NTag>
+                <NTag size="small" :class="r.duration === '临时' ? 'border-[#FAAD14] bg-[#FAAD14] text-white' : 'border-[#1D4E9C] bg-[#1D4E9C] text-white'">{{ r.duration }}</NTag>
+                <NTag size="small" v-for="s in LEDGER_EXTRA[r.id]?.special ?? []" :key="s" :class="SPECIAL_COLOR[s]">{{ s }}</NTag>
+              </div>
+              <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-slate-500">
+                <span>申请 {{ r.applyTime }}</span>
+                <span>{{ r.dept }} · {{ r.applicant }}</span>
+                <span>计划投用 {{ r.planUse }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.actualUse">实际投用 {{ LEDGER_EXTRA[r.id].actualUse }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.planRestore">计划恢复 {{ LEDGER_EXTRA[r.id].planRestore }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.extRestore" class="text-amber-600">延期后恢复 {{ LEDGER_EXTRA[r.id].extRestore }}</span>
+                <span v-if="LEDGER_EXTRA[r.id]?.closeTime">关闭 {{ LEDGER_EXTRA[r.id].closeTime }}</span>
+                <span>状态更新 {{ r.statusTime }}</span>
+              </div>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1.5">
+              <div class="flex flex-wrap items-center justify-end gap-2">
+                <span class="text-[11px] text-slate-400">{{ r.statusDetail }}</span>
+                <NTag size="small" :class="STATUS_COLOR[r.status]">{{ r.status }}</NTag>
+                <span v-if="r.overdueDays" class="text-[11px] font-medium text-red-500">超期 {{ r.overdueDays }} 天</span>
+              </div>
+              <div class="flex flex-wrap items-center justify-end gap-1 pt-0.5">
+                <NButton size="small" v-for="op in opsOf(r, me, role)" :key="op.label"
+                  class="text-xs"
+                  :ghost="op.act === 'detail' ? false : true"
+                  :type="op.act === 'detail' ? 'primary' : op.danger ? 'error' : 'default'"
+                  @click="doOp(r, op.act)">
+                  {{ op.label }}
+                </NButton>
+              </div>
+              <div v-if="r.duration === '临时'" class="text-right text-[10px] leading-4 text-slate-400">临时变更恢复 / 延期 / 转永久请在详情页中操作</div>
+            </div>
+          </div>
+        </div>
+        <div v-if="finalRows.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center text-sm text-slate-400">当前筛选条件下暂无变更记录</div>
+      </div>
+      <div class="text-xs text-slate-400 mt-3">
+        共 {{ finalRows.length }} 条 · 台账以查看、下载为主（申请表 / 归档包）；与"我"相关的待办流转请前往「我的任务」处理。点击变更名称可打开详情。
+      </div>
+      <!-- 撤回/未实施情况说明/未投用情况说明弹框 -->
+      <NModal
+          v-model:show="revokeModal"
+          preset="card"
+          :auto-focus="false"
+          :style="{ width: '450px', height: 'auto' }"
+          :segmented="{ content: true, footer: true }"
+      >
+          <template #header>
+              <h3 class="text-sm font-bold text-slate-800">
+                <span v-if="ledgerAct?.act === 'withdraw'">撤回变更申请</span>
+                <span v-else-if="ledgerAct?.act === 'unuse'">未投用情况说明</span>
+                <span v-else>未实施情况说明</span>
+                {{ledgerAct?.id}}
+              </h3>
+          </template>
+          <template #default>
+              <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
+                {{ ledgerAct?.act === 'withdraw'
+              ? '撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交。仅本人发起的审批中变更可撤回。'
+              : '变更审批通过 / 投用后未实施或未投用的，由申请人填写情况说明，提交后变更转入关闭流程，由变更主管部门专责确认关闭并记录关闭时间。' }}
+              </div>
+              <NInput
+                  class="mt-3"
+                  v-model:value="ledgerReason"
+                  type="textarea"
+                  :rows="3"
+                  :placeholder="ledgerAct?.act === 'withdraw' ? '撤回理由（必填）…' : '情况说明（必填）：原因、现场当前状态、后续处置安排…'"
+              />
+          </template>
+          <template #footer>
+              <div class="flex justify-end gap-[10px]">
+                  <NButton size="small" @click="revokeCancel">取消</NButton>
+                  <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">提交</NButton>
+              </div>
+          </template>
+      </NModal>
+      <!-- 进度抽屉 -->
+      <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
+        <NDrawerContent title="变更进度">
+            <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
+                <div class="text-sm font-semibold text-slate-800">{{ progressRow?.title }}</div>
+                <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
+                    <span class="font-mono">{{ progressRow?.id }}</span>
+                    <NTag v-if="progressRow?.status==='审批中'" size="small" type="warning">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='已批准'" size="small" type="primary">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='待验收'" size="small" type="success">{{progressRow.status}}</NTag>
+                    <NTag v-if="progressRow?.status==='待关闭'" size="small" type="error">{{progressRow.status}}</NTag>
+                    <span v-if="progressRow?.overdue" class="font-medium text-red-500">超期 {{ progressRow?.day }} 天</span>
+                </div>
+                <div v-if="progressRow?.dept || progressRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [progressRow?.dept, progressRow?.applicant].filter(Boolean).join(' · ') }}</div>
+                <div v-if="progressRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ progressRow?.meta }}</div>
+            </div>
+            <div class="mt-4">
+                <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
+                    <div class="flex flex-col items-center">
+                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
+                            :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
+                            <Icon v-if="i < curIdx || closed" icon="ix:success" />
+                            <Icon v-else-if="i === curIdx" icon="tabler:clock" />
+                            <span v-else class="text-[10px]">{{ i + 1 }}</span>
+                        </span>
+                        <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
+                    </div>
+                    <div class="pb-5">
+                        <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
+                            {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
+                        </div>
+                        <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
+                        <div v-if="i === curIdx && !closed && (progressRow?.detail || progressRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
+                            {{ [progressRow?.detail, progressRow?.updateTime ? `更新 ${progressRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="progressRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
+                临时变更：计划恢复 {{ progressRow?.deadline ?? '—' }}{{ progressRow?.extended ? ` · 延期后恢复 ${progressRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
+            </div>
+        </NDrawerContent>
+      </NDrawer>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 326px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/changeStatistics/index.vue b/src/views/changeStatistics/index.vue
index 4f6bd64..fee9e2a 100644
--- a/src/views/changeStatistics/index.vue
+++ b/src/views/changeStatistics/index.vue
@@ -1,246 +1,246 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { CHANGES, TEMP_WATCH, countOpenStatus } from "@/typings/model";
-import { formatTimestamp } from "@/utils/common";
-import RingChart from './modules/ringChart.vue';
-import PieChart from './modules/pieChart.vue';
-import PieChart2 from './modules/pieChart2.vue';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const P_PERIODS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"] as const;
-const period = ref<(typeof P_PERIODS)[number]>("近一年");
-const from = ref<any>(null);
-const to = ref<any>(null);
-  const rangeText = computed(() => period.value === "自定义"
-  ? (from.value || to.value ? `${formatTimestamp(from.value,'yyyy-MM-dd') || "开始"} ~ ${formatTimestamp(to.value,'yyyy-MM-dd') || "至今"}` : "自定义（未选日期）")
-  : period.value);
-
-const deptOpenStatus = countOpenStatus(CHANGES);
-const DEPT_ACCEPT = [
-  { name: "完全达到", value: 13 },
-  { name: "基本达到", value: 4 },
-  { name: "未达到", value: 2 },
-  { name: "处置关闭（未实施 / 未投用）", value: 3 },
-];
-const acceptTotal = DEPT_ACCEPT.reduce((a, b) => a + b.value, 0);
-const ACCEPT_COLORS = ["#7CC242", "#F5A623", "#E15555", "#94A3B8", "#64748B"];
-const DEPT_TYPE = [
-  { name: "工艺", value: 11 }, { name: "设备", value: 12 }, { name: "管理", value: 5 },
-];
-const DEPT_DUR = [
-  { name: "永久", value: 21 }, { name: "临时", value: 7 },
-];
-const DUR_COLORS = ["#1D4E9C", "#FAAD14"];
-const PIE_COLORS = ["#1D4E9C", "#7CC242", "#F5A623"];
-const APPROVER_TIME = [
-  { name: "李主任（部门审核）", days: 1.2 },
-  { name: "王仪表（仪表会签）", days: 0.8 },
-  { name: "周设备（设备会签）", days: 1.5 },
-  { name: "王海燕（安全审查）", days: 2.1 },
-  { name: "刘副总（公司终批）", days: 1.9 },
-];
-const openTotal = deptOpenStatus.reduce((a, b) => a + b.n, 0);
-const tempTotal = TEMP_WATCH.reduce((a, b) => a + b.n, 0);
-
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 本部门变更统计 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <div class="flex flex-wrap items-center justify-between">
-        <div class="flex-y-center">
-          <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-            <Icon icon="akar-icons:calendar" class="size-14px" :style="{color: themeStore.themeColor}" />  
-            <span>本部门变更统计</span>   
-            <span class="text-xs font-normal text-slate-400">一车间 · 本部门口径</span>
-          </span>
-          <div class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <span class="text-xs text-slate-400">时间段</span>
-            <NButton size="tiny" round v-for="p in P_PERIODS" :key="p" @click="period = p"
-              :ghost="period === p ? false : true"
-              :type="period === p ? 'primary' : 'default'"
-            >{{ p }}</NButton>
-            <span v-if="period === '自定义'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="from" type="date" size="small" class="w-32" />
-              <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="to" type="date" size="small" class="w-32" />
-            </span>
-          </div>
-        </div>
-        <span class="text-[11px] text-slate-400">统计口径：{{ rangeText }}</span>
-      </div>
-    </NCard>
-    <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16">
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">申请变更数量</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="28"
-              class="text-26px font-600 text-[#333]"
-            /><p class="mt-10px ml-5px">项</p>
-          </div>
-          <p class="text-12px">永久 21 · 临时 7</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">重要变更数量</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="7"
-              class="text-26px font-600 text-[#333]"
-            /><p class="mt-10px ml-5px">项</p>
-          </div>
-          <p class="text-12px">占比 25% · 均含公司终批</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">未关闭变更数量</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="6"
-              class="text-26px font-600 text-[#E15555]"
-            /><p class="mt-10px ml-5px">项</p>
-          </div>
-          <p class="text-12px">其中超期 1 项 · 临期 1 项</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">平均审批通过时长</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="7.4"
-              :decimals="1"
-              class="text-26px font-600 text-[#333]"
-            />
-            <p class="mt-10px ml-5px">天</p>
-          </div>
-          <p class="text-12px">优于全厂均值 8.2 天</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">申请驳回率</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="6.1"
-              :decimals="1"
-              class="text-26px font-600 text-[#333]"
-            /><p class="mt-10px ml-5px">%</p>
-          </div>
-          <p class="text-12px">2 项被驳回 · 均已重新提交</p>
-        </div>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:6">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">尚未关闭的变更所处的状态数量（共 {{openTotal}} 项）</p>
-          <div class="space-y-3">
-            <div v-for="s in deptOpenStatus" :key="s.name">
-              <div class="flex items-center gap-2 text-xs">
-                <span class="min-w-0 flex-1 text-slate-700">{{ s.name }}</span>
-                <span class="shrink-0 font-semibold text-slate-600">{{ s.n }} 项</span>
-              </div>
-              <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-                <div class="h-full rounded-full" :style="{ width: `${openTotal ? (s.n / openTotal) * 100 : 0}%`, background: s.c }" />
-              </div>
-            </div>
-            <div class="text-[11px] text-slate-400">阶段口径：审批中（含会签）→ 已批准待投用 → 待验收 → 待关闭 · 培训 / PSSR 线下签字后拍照上传，并入资料归档 · 明细见变更台账</div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:18">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">验收达标 · 变更类型 · 变更时限分布</p>
-          <div class="grid gap-4 grid-cols-3">
-            <div>
-              <div class="mb-1 text-center text-xs font-semibold text-slate-600">验收达标分布（共 {{ acceptTotal }} 项 · 处置关闭单列）</div>
-              <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
-            </div>
-            <div>
-              <div class="mb-1 text-center text-xs font-semibold text-slate-600">变更类型分布</div>
-              <PieChart :data="DEPT_TYPE" :colors="PIE_COLORS" />
-            </div>
-            <div>
-              <div class="mb-1 text-center text-xs font-semibold text-slate-600">变更时限分布</div>
-              <PieChart2 :data="DEPT_DUR" :colors="DUR_COLORS" />
-            </div>
-          </div>
-          <div class="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-500">
-            未达到 2 项：P-204 伴热改造温控未达预期（已退回整改）、加药泵冲程调整流量偏差（重新约定 30 天验证期）；处置关闭 3 项：未实施 2 项（检修窗口调整、方案合并实施）、未投用 1 项（投用条件不具备），均经情况说明后关闭，验收结论不再含未实施 / 未投用。
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:12">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">各人员审批时间对比（平均处理时长）</p>
-          <div class="space-y-3">
-            <div v-for="a in APPROVER_TIME" :key="a.name">
-              <div class="flex items-center gap-2 text-xs">
-                <span class="min-w-0 flex-1 text-slate-700">{{ a.name }}</span>
-                <span class="shrink-0 font-semibold text-slate-600">{{ a.days }} 天</span>
-              </div>
-              <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-                <div class="h-full rounded-full" :style="{ width: `${(a.days / 2.5) * 100}%`, background: a.days > 2 ? '#E15555' : '#1D4E9C' }" />
-              </div>
-            </div>
-            <div class="text-[11px] text-slate-400">超过 2 天红色标识 · 用于会签催办与流程优化参考</div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:12">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">临时变更到期提醒情况（共 {{tempTotal}} 项）</p>
-          <div class="space-y-3">
-            <div v-for="t in TEMP_WATCH" :key="t.label" class="rounded-lg border px-3 py-2">
-              <div class="flex items-center gap-2 text-xs">
-                <span class="h-2 w-2 rounded-full" :style="{ background: t.c }" />
-                <span class="font-medium text-slate-700">{{ t.label }}</span>
-                <span class="ml-auto font-semibold text-slate-600">{{ t.n }} 项</span>
-              </div>
-              <div class="mt-1 pl-4 text-[11px] text-slate-400">{{ t.note }}</div>
-            </div>
-            <div class="text-[11px] text-slate-400">提醒规则：到期前 7 天触发（可在「待我处理 · 我的申请」中调整）· 临期 / 超期项请按期办理延期、恢复或转永久</div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-  </NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { CHANGES, TEMP_WATCH, countOpenStatus } from "@/typings/model";
+import { formatTimestamp } from "@/utils/common";
+import RingChart from './modules/ringChart.vue';
+import PieChart from './modules/pieChart.vue';
+import PieChart2 from './modules/pieChart2.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const P_PERIODS = ["近一年", "近半年", "近三个月", "近一个月", "自定义"] as const;
+const period = ref<(typeof P_PERIODS)[number]>("近一年");
+const from = ref<any>(null);
+const to = ref<any>(null);
+  const rangeText = computed(() => period.value === "自定义"
+  ? (from.value || to.value ? `${formatTimestamp(from.value,'yyyy-MM-dd') || "开始"} ~ ${formatTimestamp(to.value,'yyyy-MM-dd') || "至今"}` : "自定义（未选日期）")
+  : period.value);
+
+const deptOpenStatus = countOpenStatus(CHANGES);
+const DEPT_ACCEPT = [
+  { name: "完全达到", value: 13 },
+  { name: "基本达到", value: 4 },
+  { name: "未达到", value: 2 },
+  { name: "处置关闭（未实施 / 未投用）", value: 3 },
+];
+const acceptTotal = DEPT_ACCEPT.reduce((a, b) => a + b.value, 0);
+const ACCEPT_COLORS = ["#7CC242", "#F5A623", "#E15555", "#94A3B8", "#64748B"];
+const DEPT_TYPE = [
+  { name: "工艺", value: 11 }, { name: "设备", value: 12 }, { name: "管理", value: 5 },
+];
+const DEPT_DUR = [
+  { name: "永久", value: 21 }, { name: "临时", value: 7 },
+];
+const DUR_COLORS = ["#1D4E9C", "#FAAD14"];
+const PIE_COLORS = ["#1D4E9C", "#7CC242", "#F5A623"];
+const APPROVER_TIME = [
+  { name: "李主任（部门审核）", days: 1.2 },
+  { name: "王仪表（仪表会签）", days: 0.8 },
+  { name: "周设备（设备会签）", days: 1.5 },
+  { name: "王海燕（安全审查）", days: 2.1 },
+  { name: "刘副总（公司终批）", days: 1.9 },
+];
+const openTotal = deptOpenStatus.reduce((a, b) => a + b.n, 0);
+const tempTotal = TEMP_WATCH.reduce((a, b) => a + b.n, 0);
+
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 本部门变更统计 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <div class="flex flex-wrap items-center justify-between">
+        <div class="flex-y-center">
+          <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+            <Icon icon="akar-icons:calendar" class="size-14px" :style="{color: themeStore.themeColor}" />  
+            <span>本部门变更统计</span>   
+            <span class="text-xs font-normal text-slate-400">一车间 · 本部门口径</span>
+          </span>
+          <div class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <span class="text-xs text-slate-400">时间段</span>
+            <NButton size="tiny" round v-for="p in P_PERIODS" :key="p" @click="period = p"
+              :ghost="period === p ? false : true"
+              :type="period === p ? 'primary' : 'default'"
+            >{{ p }}</NButton>
+            <span v-if="period === '自定义'" class="flex items-center gap-1">
+              <NDatePicker v-model:value="from" type="date" size="small" class="w-32" />
+              <span class="text-xs text-slate-400">至</span>
+              <NDatePicker v-model:value="to" type="date" size="small" class="w-32" />
+            </span>
+          </div>
+        </div>
+        <span class="text-[11px] text-slate-400">统计口径：{{ rangeText }}</span>
+      </div>
+    </NCard>
+    <!-- 卡片数据 -->
+    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16">
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">申请变更数量</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="28"
+              class="text-26px font-600 text-[#333]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <p class="text-12px">永久 21 · 临时 7</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">重要变更数量</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="7"
+              class="text-26px font-600 text-[#333]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <p class="text-12px">占比 25% · 均含公司终批</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">未关闭变更数量</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="6"
+              class="text-26px font-600 text-[#E15555]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <p class="text-12px">其中超期 1 项 · 临期 1 项</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">平均审批通过时长</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="7.4"
+              :decimals="1"
+              class="text-26px font-600 text-[#333]"
+            />
+            <p class="mt-10px ml-5px">天</p>
+          </div>
+          <p class="text-12px">优于全厂均值 8.2 天</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">申请驳回率</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="6.1"
+              :decimals="1"
+              class="text-26px font-600 text-[#333]"
+            /><p class="mt-10px ml-5px">%</p>
+          </div>
+          <p class="text-12px">2 项被驳回 · 均已重新提交</p>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:6">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">尚未关闭的变更所处的状态数量（共 {{openTotal}} 项）</p>
+          <div class="space-y-3">
+            <div v-for="s in deptOpenStatus" :key="s.name">
+              <div class="flex items-center gap-2 text-xs">
+                <span class="min-w-0 flex-1 text-slate-700">{{ s.name }}</span>
+                <span class="shrink-0 font-semibold text-slate-600">{{ s.n }} 项</span>
+              </div>
+              <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                <div class="h-full rounded-full" :style="{ width: `${openTotal ? (s.n / openTotal) * 100 : 0}%`, background: s.c }" />
+              </div>
+            </div>
+            <div class="text-[11px] text-slate-400">阶段口径：审批中（含会签）→ 已批准待投用 → 待验收 → 待关闭 · 培训 / PSSR 线下签字后拍照上传，并入资料归档 · 明细见变更台账</div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:18">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">验收达标 · 变更类型 · 变更时限分布</p>
+          <div class="grid gap-4 grid-cols-3">
+            <div>
+              <div class="mb-1 text-center text-xs font-semibold text-slate-600">验收达标分布（共 {{ acceptTotal }} 项 · 处置关闭单列）</div>
+              <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+            </div>
+            <div>
+              <div class="mb-1 text-center text-xs font-semibold text-slate-600">变更类型分布</div>
+              <PieChart :data="DEPT_TYPE" :colors="PIE_COLORS" />
+            </div>
+            <div>
+              <div class="mb-1 text-center text-xs font-semibold text-slate-600">变更时限分布</div>
+              <PieChart2 :data="DEPT_DUR" :colors="DUR_COLORS" />
+            </div>
+          </div>
+          <div class="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-500">
+            未达到 2 项：P-204 伴热改造温控未达预期（已退回整改）、加药泵冲程调整流量偏差（重新约定 30 天验证期）；处置关闭 3 项：未实施 2 项（检修窗口调整、方案合并实施）、未投用 1 项（投用条件不具备），均经情况说明后关闭，验收结论不再含未实施 / 未投用。
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:12">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">各人员审批时间对比（平均处理时长）</p>
+          <div class="space-y-3">
+            <div v-for="a in APPROVER_TIME" :key="a.name">
+              <div class="flex items-center gap-2 text-xs">
+                <span class="min-w-0 flex-1 text-slate-700">{{ a.name }}</span>
+                <span class="shrink-0 font-semibold text-slate-600">{{ a.days }} 天</span>
+              </div>
+              <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                <div class="h-full rounded-full" :style="{ width: `${(a.days / 2.5) * 100}%`, background: a.days > 2 ? '#E15555' : '#1D4E9C' }" />
+              </div>
+            </div>
+            <div class="text-[11px] text-slate-400">超过 2 天红色标识 · 用于会签催办与流程优化参考</div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:12">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 pb-3 mb-4">临时变更到期提醒情况（共 {{tempTotal}} 项）</p>
+          <div class="space-y-3">
+            <div v-for="t in TEMP_WATCH" :key="t.label" class="rounded-lg border px-3 py-2">
+              <div class="flex items-center gap-2 text-xs">
+                <span class="h-2 w-2 rounded-full" :style="{ background: t.c }" />
+                <span class="font-medium text-slate-700">{{ t.label }}</span>
+                <span class="ml-auto font-semibold text-slate-600">{{ t.n }} 项</span>
+              </div>
+              <div class="mt-1 pl-4 text-[11px] text-slate-400">{{ t.note }}</div>
+            </div>
+            <div class="text-[11px] text-slate-400">提醒规则：到期前 7 天触发（可在「待我处理 · 我的申请」中调整）· 临期 / 超期项请按期办理延期、恢复或转永久</div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+  </NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/changeStatistics/modules/pieChart.vue b/src/views/changeStatistics/modules/pieChart.vue
index 376a702..2078588 100644
--- a/src/views/changeStatistics/modules/pieChart.vue
+++ b/src/views/changeStatistics/modules/pieChart.vue
@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'PieChart'
-});
-
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-  tooltip: {
-    trigger: 'item',
-    formatter: '{b}: {c} ({d}%)'
-  },
-  legend: {
-    bottom: 3,
-    left: 'center',
-    icon: 'circle',
-    itemWidth: 10,
-    itemHeight: 10,
-    itemStyle: {
-      borderWidth: 0
-    },
-  },
-  series: [
-    {
-      type: 'pie',
-      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
-      radius: '65%',
-      center: ['50%', '43%'],
-      label: {
-        show: false,
-        position: 'outside',
-        formatter: '{b}\n{c} ({d}%)',
-        fontSize: 12,
-      },
-      labelLine: {
-        show: true,
-        length: 10,
-        length2: 10
-      },
-      data: [] as { name: string; value: number }[]
-    }
-  ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'PieChart'
+});
+
+const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+  legend: {
+    bottom: 3,
+    left: 'center',
+    icon: 'circle',
+    itemWidth: 10,
+    itemHeight: 10,
+    itemStyle: {
+      borderWidth: 0
+    },
+  },
+  series: [
+    {
+      type: 'pie',
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      radius: '65%',
+      center: ['50%', '43%'],
+      label: {
+        show: false,
+        position: 'outside',
+        formatter: '{b}\n{c} ({d}%)',
+        fontSize: 12,
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 10
+      },
+      data: [] as { name: string; value: number }[]
+    }
+  ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    opts.series[0].data = props.data || [];
+    opts.series[0].color = props.colors || [];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/changeStatistics/modules/pieChart2.vue b/src/views/changeStatistics/modules/pieChart2.vue
index 376a702..2078588 100644
--- a/src/views/changeStatistics/modules/pieChart2.vue
+++ b/src/views/changeStatistics/modules/pieChart2.vue
@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'PieChart'
-});
-
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-  tooltip: {
-    trigger: 'item',
-    formatter: '{b}: {c} ({d}%)'
-  },
-  legend: {
-    bottom: 3,
-    left: 'center',
-    icon: 'circle',
-    itemWidth: 10,
-    itemHeight: 10,
-    itemStyle: {
-      borderWidth: 0
-    },
-  },
-  series: [
-    {
-      type: 'pie',
-      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
-      radius: '65%',
-      center: ['50%', '43%'],
-      label: {
-        show: false,
-        position: 'outside',
-        formatter: '{b}\n{c} ({d}%)',
-        fontSize: 12,
-      },
-      labelLine: {
-        show: true,
-        length: 10,
-        length2: 10
-      },
-      data: [] as { name: string; value: number }[]
-    }
-  ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'PieChart'
+});
+
+const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+  legend: {
+    bottom: 3,
+    left: 'center',
+    icon: 'circle',
+    itemWidth: 10,
+    itemHeight: 10,
+    itemStyle: {
+      borderWidth: 0
+    },
+  },
+  series: [
+    {
+      type: 'pie',
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      radius: '65%',
+      center: ['50%', '43%'],
+      label: {
+        show: false,
+        position: 'outside',
+        formatter: '{b}\n{c} ({d}%)',
+        fontSize: 12,
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 10
+      },
+      data: [] as { name: string; value: number }[]
+    }
+  ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    opts.series[0].data = props.data || [];
+    opts.series[0].color = props.colors || [];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/docs/archives/index.vue b/src/views/docs/archives/index.vue
index 459b9a0..20b2cc0 100644
--- a/src/views/docs/archives/index.vue
+++ b/src/views/docs/archives/index.vue
@@ -1,236 +1,236 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const keyword = ref<string>('');
-const uploadFiles = () => {
-    window.$message?.success('演示：上传资料（限资料管理员 / 各专业专责维护；上传后进入受控评审，发布生效并生成新版本号，全程留痕）')
-}
-const KNOWLEDGE_DOCS = [
-  { name: "PID-R201-03 反应釜工艺流程图（Rev C）", cat: "工艺技术资料", device: "一车间", ver: "Rev C", date: "2026-07-29" },
-  { name: "聚合岗位操作规程（2026 版）", cat: "工艺技术资料", device: "一车间", ver: "V2026", date: "2026-07-26" },
-  { name: "M-201A 搅拌电机设备台账", cat: "设备资料", device: "一车间", ver: "V3.2", date: "2026-07-28" },
-  { name: "环己烷 MSDS（供应商 B）", cat: "化学品资料", device: "原料罐区", ver: "V1.0", date: "2026-07-18" },
-  { name: "AQ/T 3034 化工企业工艺安全管理实施导则", cat: "法规标准库", device: "全厂", ver: "2013 版", date: "2025-12-01" },
-  { name: "PSSR 检查表模板（设备类）", cat: "检查表模板库", device: "全厂", ver: "V2.1", date: "2026-05-10" },
-  { name: "2025 年度典型变更案例汇编", cat: "历史变更案例库", device: "全厂", ver: "2025 版", date: "2026-01-15" },
-  { name: "HAZOP 分析报告（R-101 温度变更）", cat: "历史变更案例库", device: "一车间", ver: "V1.0", date: "2026-07-26" },
-];
-const libHits = computed(() => (keyword.value ? KNOWLEDGE_DOCS.filter((d:any) => d.name.includes(keyword.value) || d.cat.includes(keyword.value)) : []));
-const preview = (d:any) => {
-    window.$message?.info(`演示：在线预览 ${d.name}`)
-}
-const download = (d:any) => {
-    window.$message?.success(`演示：下载 ${d.name}`)
-}
-const call = (d:any) => {
-    window.$message?.success(`演示：已将「${d.name}」调用为当前变更的 AI 知识来源（调用记录留痕）`)
-}
-interface LibDoc { name: string; ver: string; date: string }
-interface LibFolder { label: string; docs: LibDoc[] }
-interface LibGroup { cat: string; folders: LibFolder[] }
-const LIB_ORGS: { org: string; groups: LibGroup[] }[] = [
-  { org: "一车间", groups: [
-    { cat: "工艺", folders: [
-      { label: "操作规程", docs: [
-        { name: "聚合岗位操作规程（2026 版）", ver: "V2026", date: "2026-07-26" },
-        { name: "干燥岗位操作规程（2026 版）", ver: "V2026", date: "2026-06-30" } ]},
-      { label: "PID 图纸", docs: [
-        { name: "PID-R201-03 反应釜工艺流程图（Rev C）", ver: "Rev C", date: "2026-07-29" },
-        { name: "PID-V102-01 罐区工艺流程图（Rev B）", ver: "Rev B", date: "2026-05-12" } ]},
-      { label: "工艺卡片", docs: [
-        { name: "R-201 反应釜工艺卡片（夏季工况）", ver: "V2.0", date: "2026-07-01" } ]},
-    ]},
-    { cat: "设备", folders: [
-      { label: "设备台账", docs: [
-        { name: "M-201A 搅拌电机设备台账", ver: "V3.2", date: "2026-07-28" },
-        { name: "P-204 输送泵设备台账", ver: "V2.8", date: "2026-06-15" } ]},
-      { label: "安全阀台账", docs: [
-        { name: "一车间安全阀台账（PSV-101 ~ PSV-118）", ver: "V5.1", date: "2026-07-10" } ]},
-    ]},
-    { cat: "仪表", folders: [
-      { label: "报警台账", docs: [
-        { name: "一车间 DCS 报警台账（2026H1）", ver: "V4.0", date: "2026-07-20" } ]},
-      { label: "联锁台账", docs: [
-        { name: "一车间联锁逻辑台账（SIS-01 ~ SIS-09）", ver: "V3.6", date: "2026-07-22" } ]},
-    ]},
-    { cat: "安全", folders: [
-      { label: "总图", docs: [{ name: "一车间装置总平面布置图", ver: "Rev D", date: "2026-04-18" } ]},
-      { label: "现场气体报警仪布置图", docs: [{ name: "一车间可燃 / 有毒气体报警仪布置图", ver: "Rev B", date: "2026-05-28" } ]},
-      { label: "防爆分区图", docs: [{ name: "一车间爆炸危险区域划分图", ver: "Rev C", date: "2026-03-15" } ]},
-    ]},
-  ]},
-  { org: "二车间", groups: [
-    { cat: "工艺", folders: [
-      { label: "操作规程", docs: [{ name: "二车间精馏岗位操作规程（2026 版）", ver: "V2026", date: "2026-06-20" } ]},
-      { label: "PID 图纸", docs: [{ name: "PID-T301-02 精馏塔工艺流程图（Rev A）", ver: "Rev A", date: "2026-03-08" } ]},
-    ]},
-    { cat: "设备", folders: [
-      { label: "设备台账", docs: [{ name: "P-103 冷冻盐水泵设备台账", ver: "V2.2", date: "2026-05-30" } ]},
-      { label: "安全阀台账", docs: [{ name: "二车间安全阀台账（PSV-201 ~ PSV-212）", ver: "V4.3", date: "2026-06-11" } ]},
-    ]},
-    { cat: "仪表", folders: [
-      { label: "报警台账", docs: [{ name: "二车间 DCS 报警台账（2026H1）", ver: "V3.5", date: "2026-07-02" } ]},
-      { label: "联锁台账", docs: [{ name: "二车间联锁逻辑台账（SIS-11 ~ SIS-16）", ver: "V2.9", date: "2026-06-25" } ]},
-    ]},
-    { cat: "安全", folders: [
-      { label: "总图", docs: [{ name: "二车间装置总平面布置图", ver: "Rev B", date: "2026-02-14" } ]},
-      { label: "现场气体报警仪布置图", docs: [{ name: "二车间可燃 / 有毒气体报警仪布置图", ver: "Rev A", date: "2026-04-02" } ]},
-      { label: "防爆分区图", docs: [{ name: "二车间爆炸危险区域划分图", ver: "Rev B", date: "2026-01-20" } ]},
-    ]},
-  ]},
-  { org: "全厂共用", groups: [
-    { cat: "法规", folders: [
-      { label: "法规标准库", docs: [{ name: "AQ/T 3034 化工企业工艺安全管理实施导则", ver: "2013 版", date: "2025-12-01" } ]},
-    ]},
-    { cat: "化学品", folders: [
-      { label: "MSDS", docs: [{ name: "环己烷 MSDS（供应商 B）", ver: "V1.0", date: "2026-07-18" } ]},
-    ]},
-    { cat: "模板", folders: [
-      { label: "检查表模板", docs: [{ name: "PSSR 检查表模板（设备类）", ver: "V2.1", date: "2026-05-10" } ]},
-    ]},
-    { cat: "案例", folders: [
-      { label: "历史变更案例", docs: [
-        { name: "2025 年度典型变更案例汇编", ver: "2025 版", date: "2026-01-15" },
-        { name: "HAZOP 分析报告（R-101 温度变更）", ver: "V1.0", date: "2026-07-26" } ]},
-    ]},
-  ]},
-];
-const openOrgs = ref<Record<string, boolean>>({ 一车间: true });
-const libSel = ref({ org: "一车间", cat: "工艺", label: "操作规程" });
-const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.groups.find((g) => g.cat === libSel.value.cat)?.folders.find((f) => f.label === libSel.value.label));
-
-
-
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 我的草稿箱 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
-            <NGi span="24 s:24 m:16">
-                <div class="h-100% flex items-center gap-2">
-                    <Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
-                    <p class="text-base font-semibold">资料档案库（按组织 / 专业类别建立文件夹 · AI 判定的知识来源）</p>
-                </div>
-            </NGi>
-            <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
-            <div class="flex items-center gap-2">
-                <NInput v-model:value="keyword" size="small" type="text" class="w-40 text-xs" placeholder="全文检索…">
-                    <template #suffix>
-                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-                    </template>
-                </NInput>
-                <NButton size="small" type="primary" class="text-xs" @click="uploadFiles">
-                    <Icon icon="material-symbols:upload" class="size-16px" /> 上传资料
-                </NButton>
-                </div>
-            </NGi>
-        </NGrid>
-        <div class="mt-4 mb-2 rounded-lg bg-slate-50 px-3 py-1.5 text-[11px] text-slate-400">
-            按「组织 → 专业类别 → 资料文件夹」归档具体资料（操作规程 / PID 图纸 / 工艺卡片 / 设备台账 / 安全阀台账 / 报警台账 / 联锁台账 / 总图 / 现场气体报警仪布置图 / 防爆分区图等）；资料由指定维护人（资料管理员 / 各专业专责）上传维护，版本受控；「调用」可将资料引用为当前变更的 AI 知识来源，调用记录留痕。
-        </div>
-        <!-- 全文检索：跨文件夹平铺结果 -->
-        <div v-if="keyword">
-            <div class="mb-1.5 text-xs text-slate-400">全文检索「{{ keyword }}」：跨全部文件夹命中 {{ libHits.length }} 份</div>
-            <div class="divide-y rounded-lg border bg-white">
-            <div v-for="d in libHits" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
-                <FileText class="h-4 w-4 shrink-0 text-slate-400" />
-                <div class="min-w-0 flex-1">
-                <div class="truncate text-sm">{{ d.name }}</div>
-                <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
-                    <span>{{ d.cat }} · {{ d.device }}</span>
-                    <span>更新 {{ d.date }}</span>
-                </div>
-                </div>
-                <div class="flex shrink-0 gap-3 text-xs">
-                <button class="text-[#1D4E9C] hover:underline" @click="preview(d)">查看</button>
-                <button class="text-[#1D4E9C] hover:underline" @click="download(d)">下载</button>
-                </div>
-            </div>
-            <div v-if="libHits.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配「{{ keyword }}」的资料</div>
-            </div>
-        </div>
-        <!-- 文件夹树 + 当前文件夹资料 -->
-        <div v-else class="flex gap-3">
-            <div class="shrink-0 space-y-2 w-56 scroll-left">
-                <div v-for="o in LIB_ORGS" :key="o.org" class="overflow-hidden rounded-lg border bg-white">
-                    <button class="flex w-full items-center gap-1.5 px-2.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 bg-transparent"
-                    @click="openOrgs[o.org] = !openOrgs[o.org]">
-                    <Icon icon="formkit:right" class="size-14px transition-transform" :class="openOrgs[o.org] ? 'rotate-90' : ''" />
-                    <Icon v-if="openOrgs[o.org]" icon="quill:folder-open" class="size-14px" :style="{ color: themeStore.themeColor }" />
-                    <Icon v-else icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
-                    {{ o.org }}
-                    </button>
-                    <template v-if="openOrgs[o.org]">
-                        <div v-for="g in o.groups" :key="g.cat" class="border-t px-2 py-1.5">
-                            <div class="px-1 pb-0.5 text-[10px] font-medium tracking-wide text-slate-400">{{ g.cat }}专业</div>
-                            <button v-for="f in g.folders" :key="f.label"
-                                @click="libSel = { org: o.org, cat: g.cat, label: f.label }"
-                                class="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs transition"
-                                :class="libSel.org === o.org && libSel.cat === g.cat && libSel.label === f.label ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100  bg-transparent'"
-                                :style="{ '--theme-color': themeStore.themeColor }"
-                            >
-                                <Icon icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
-                                <span class="min-w-0 flex-1 truncate">{{ f.label }}</span>
-                                <span class="text-[10px]" :class="libSel.label === f.label && libSel.cat === g.cat && libSel.org === o.org ? 'text-white/70' : 'text-slate-300'">{{ f.docs.length }}</span>
-                            </button>
-                        </div>
-                    </template>
-                </div>
-            </div>
-            <div class="min-w-0 flex-1">
-                <div class="mb-1.5 flex flex-wrap items-center gap-1 text-xs text-slate-400">
-                    当前位置：{{ libSel.org }} 
-                    <Icon icon="formkit:right" class="size-12px" /> 
-                    {{ libSel.cat }}专业 
-                    <Icon icon="formkit:right" class="size-12px" /> 
-                    <span class="font-medium text-slate-600">{{ libSel.label }}</span>
-                    <span class="ml-auto">共 {{ libCur?.docs.length ?? 0 }} 份 · 版本受控</span>
-                </div>
-                <div class="scroll-right">
-                    <div class="divide-y rounded-lg border bg-white">
-                        <div v-for="d in libCur?.docs ?? []" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
-                        <Icon icon="akar-icons:file" class="size-16px" />
-                        <div class="min-w-0 flex-1">
-                            <div class="truncate text-sm">{{ d.name }}</div>
-                            <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
-                                <NTag size="small" type="info" class="text-[10px]">版本 {{ d.ver }}</NTag>
-                                <span>更新 {{ d.date }}</span>
-                            </div>
-                        </div>
-                        <div class="flex shrink-0 gap-3 text-xs">
-                            <NButton type="primary" text class="hover:underline text-xs" @click="preview(d)">查看</NButton>
-                            <NButton type="primary" text class="hover:underline text-xs" @click="download(d)">下载</NButton>
-                            <NButton type="primary" text class="hover:underline text-xs" @click="call(d)">调用</NButton>
-                        </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll-left {
-  height: calc(100vh - 260px);
-  overflow-y: auto;
-}
-.scroll-right {
-    height: calc(100vh - 280px);
-    overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const keyword = ref<string>('');
+const uploadFiles = () => {
+    window.$message?.success('演示：上传资料（限资料管理员 / 各专业专责维护；上传后进入受控评审，发布生效并生成新版本号，全程留痕）')
+}
+const KNOWLEDGE_DOCS = [
+  { name: "PID-R201-03 反应釜工艺流程图（Rev C）", cat: "工艺技术资料", device: "一车间", ver: "Rev C", date: "2026-07-29" },
+  { name: "聚合岗位操作规程（2026 版）", cat: "工艺技术资料", device: "一车间", ver: "V2026", date: "2026-07-26" },
+  { name: "M-201A 搅拌电机设备台账", cat: "设备资料", device: "一车间", ver: "V3.2", date: "2026-07-28" },
+  { name: "环己烷 MSDS（供应商 B）", cat: "化学品资料", device: "原料罐区", ver: "V1.0", date: "2026-07-18" },
+  { name: "AQ/T 3034 化工企业工艺安全管理实施导则", cat: "法规标准库", device: "全厂", ver: "2013 版", date: "2025-12-01" },
+  { name: "PSSR 检查表模板（设备类）", cat: "检查表模板库", device: "全厂", ver: "V2.1", date: "2026-05-10" },
+  { name: "2025 年度典型变更案例汇编", cat: "历史变更案例库", device: "全厂", ver: "2025 版", date: "2026-01-15" },
+  { name: "HAZOP 分析报告（R-101 温度变更）", cat: "历史变更案例库", device: "一车间", ver: "V1.0", date: "2026-07-26" },
+];
+const libHits = computed(() => (keyword.value ? KNOWLEDGE_DOCS.filter((d:any) => d.name.includes(keyword.value) || d.cat.includes(keyword.value)) : []));
+const preview = (d:any) => {
+    window.$message?.info(`演示：在线预览 ${d.name}`)
+}
+const download = (d:any) => {
+    window.$message?.success(`演示：下载 ${d.name}`)
+}
+const call = (d:any) => {
+    window.$message?.success(`演示：已将「${d.name}」调用为当前变更的 AI 知识来源（调用记录留痕）`)
+}
+interface LibDoc { name: string; ver: string; date: string }
+interface LibFolder { label: string; docs: LibDoc[] }
+interface LibGroup { cat: string; folders: LibFolder[] }
+const LIB_ORGS: { org: string; groups: LibGroup[] }[] = [
+  { org: "一车间", groups: [
+    { cat: "工艺", folders: [
+      { label: "操作规程", docs: [
+        { name: "聚合岗位操作规程（2026 版）", ver: "V2026", date: "2026-07-26" },
+        { name: "干燥岗位操作规程（2026 版）", ver: "V2026", date: "2026-06-30" } ]},
+      { label: "PID 图纸", docs: [
+        { name: "PID-R201-03 反应釜工艺流程图（Rev C）", ver: "Rev C", date: "2026-07-29" },
+        { name: "PID-V102-01 罐区工艺流程图（Rev B）", ver: "Rev B", date: "2026-05-12" } ]},
+      { label: "工艺卡片", docs: [
+        { name: "R-201 反应釜工艺卡片（夏季工况）", ver: "V2.0", date: "2026-07-01" } ]},
+    ]},
+    { cat: "设备", folders: [
+      { label: "设备台账", docs: [
+        { name: "M-201A 搅拌电机设备台账", ver: "V3.2", date: "2026-07-28" },
+        { name: "P-204 输送泵设备台账", ver: "V2.8", date: "2026-06-15" } ]},
+      { label: "安全阀台账", docs: [
+        { name: "一车间安全阀台账（PSV-101 ~ PSV-118）", ver: "V5.1", date: "2026-07-10" } ]},
+    ]},
+    { cat: "仪表", folders: [
+      { label: "报警台账", docs: [
+        { name: "一车间 DCS 报警台账（2026H1）", ver: "V4.0", date: "2026-07-20" } ]},
+      { label: "联锁台账", docs: [
+        { name: "一车间联锁逻辑台账（SIS-01 ~ SIS-09）", ver: "V3.6", date: "2026-07-22" } ]},
+    ]},
+    { cat: "安全", folders: [
+      { label: "总图", docs: [{ name: "一车间装置总平面布置图", ver: "Rev D", date: "2026-04-18" } ]},
+      { label: "现场气体报警仪布置图", docs: [{ name: "一车间可燃 / 有毒气体报警仪布置图", ver: "Rev B", date: "2026-05-28" } ]},
+      { label: "防爆分区图", docs: [{ name: "一车间爆炸危险区域划分图", ver: "Rev C", date: "2026-03-15" } ]},
+    ]},
+  ]},
+  { org: "二车间", groups: [
+    { cat: "工艺", folders: [
+      { label: "操作规程", docs: [{ name: "二车间精馏岗位操作规程（2026 版）", ver: "V2026", date: "2026-06-20" } ]},
+      { label: "PID 图纸", docs: [{ name: "PID-T301-02 精馏塔工艺流程图（Rev A）", ver: "Rev A", date: "2026-03-08" } ]},
+    ]},
+    { cat: "设备", folders: [
+      { label: "设备台账", docs: [{ name: "P-103 冷冻盐水泵设备台账", ver: "V2.2", date: "2026-05-30" } ]},
+      { label: "安全阀台账", docs: [{ name: "二车间安全阀台账（PSV-201 ~ PSV-212）", ver: "V4.3", date: "2026-06-11" } ]},
+    ]},
+    { cat: "仪表", folders: [
+      { label: "报警台账", docs: [{ name: "二车间 DCS 报警台账（2026H1）", ver: "V3.5", date: "2026-07-02" } ]},
+      { label: "联锁台账", docs: [{ name: "二车间联锁逻辑台账（SIS-11 ~ SIS-16）", ver: "V2.9", date: "2026-06-25" } ]},
+    ]},
+    { cat: "安全", folders: [
+      { label: "总图", docs: [{ name: "二车间装置总平面布置图", ver: "Rev B", date: "2026-02-14" } ]},
+      { label: "现场气体报警仪布置图", docs: [{ name: "二车间可燃 / 有毒气体报警仪布置图", ver: "Rev A", date: "2026-04-02" } ]},
+      { label: "防爆分区图", docs: [{ name: "二车间爆炸危险区域划分图", ver: "Rev B", date: "2026-01-20" } ]},
+    ]},
+  ]},
+  { org: "全厂共用", groups: [
+    { cat: "法规", folders: [
+      { label: "法规标准库", docs: [{ name: "AQ/T 3034 化工企业工艺安全管理实施导则", ver: "2013 版", date: "2025-12-01" } ]},
+    ]},
+    { cat: "化学品", folders: [
+      { label: "MSDS", docs: [{ name: "环己烷 MSDS（供应商 B）", ver: "V1.0", date: "2026-07-18" } ]},
+    ]},
+    { cat: "模板", folders: [
+      { label: "检查表模板", docs: [{ name: "PSSR 检查表模板（设备类）", ver: "V2.1", date: "2026-05-10" } ]},
+    ]},
+    { cat: "案例", folders: [
+      { label: "历史变更案例", docs: [
+        { name: "2025 年度典型变更案例汇编", ver: "2025 版", date: "2026-01-15" },
+        { name: "HAZOP 分析报告（R-101 温度变更）", ver: "V1.0", date: "2026-07-26" } ]},
+    ]},
+  ]},
+];
+const openOrgs = ref<Record<string, boolean>>({ 一车间: true });
+const libSel = ref({ org: "一车间", cat: "工艺", label: "操作规程" });
+const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.groups.find((g) => g.cat === libSel.value.cat)?.folders.find((f) => f.label === libSel.value.label));
+
+
+
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 我的草稿箱 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
+            <NGi span="24 s:24 m:16">
+                <div class="h-100% flex items-center gap-2">
+                    <Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
+                    <p class="text-base font-semibold">资料档案库（按组织 / 专业类别建立文件夹 · AI 判定的知识来源）</p>
+                </div>
+            </NGi>
+            <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
+            <div class="flex items-center gap-2">
+                <NInput v-model:value="keyword" size="small" type="text" class="w-40 text-xs" placeholder="全文检索…">
+                    <template #suffix>
+                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+                    </template>
+                </NInput>
+                <NButton size="small" type="primary" class="text-xs" @click="uploadFiles">
+                    <Icon icon="material-symbols:upload" class="size-16px" /> 上传资料
+                </NButton>
+                </div>
+            </NGi>
+        </NGrid>
+        <div class="mt-4 mb-2 rounded-lg bg-slate-50 px-3 py-1.5 text-[11px] text-slate-400">
+            按「组织 → 专业类别 → 资料文件夹」归档具体资料（操作规程 / PID 图纸 / 工艺卡片 / 设备台账 / 安全阀台账 / 报警台账 / 联锁台账 / 总图 / 现场气体报警仪布置图 / 防爆分区图等）；资料由指定维护人（资料管理员 / 各专业专责）上传维护，版本受控；「调用」可将资料引用为当前变更的 AI 知识来源，调用记录留痕。
+        </div>
+        <!-- 全文检索：跨文件夹平铺结果 -->
+        <div v-if="keyword">
+            <div class="mb-1.5 text-xs text-slate-400">全文检索「{{ keyword }}」：跨全部文件夹命中 {{ libHits.length }} 份</div>
+            <div class="divide-y rounded-lg border bg-white">
+            <div v-for="d in libHits" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
+                <FileText class="h-4 w-4 shrink-0 text-slate-400" />
+                <div class="min-w-0 flex-1">
+                <div class="truncate text-sm">{{ d.name }}</div>
+                <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
+                    <span>{{ d.cat }} · {{ d.device }}</span>
+                    <span>更新 {{ d.date }}</span>
+                </div>
+                </div>
+                <div class="flex shrink-0 gap-3 text-xs">
+                <button class="text-[#1D4E9C] hover:underline" @click="preview(d)">查看</button>
+                <button class="text-[#1D4E9C] hover:underline" @click="download(d)">下载</button>
+                </div>
+            </div>
+            <div v-if="libHits.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配「{{ keyword }}」的资料</div>
+            </div>
+        </div>
+        <!-- 文件夹树 + 当前文件夹资料 -->
+        <div v-else class="flex gap-3">
+            <div class="shrink-0 space-y-2 w-56 scroll-left">
+                <div v-for="o in LIB_ORGS" :key="o.org" class="overflow-hidden rounded-lg border bg-white">
+                    <button class="flex w-full items-center gap-1.5 px-2.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 bg-transparent"
+                    @click="openOrgs[o.org] = !openOrgs[o.org]">
+                    <Icon icon="formkit:right" class="size-14px transition-transform" :class="openOrgs[o.org] ? 'rotate-90' : ''" />
+                    <Icon v-if="openOrgs[o.org]" icon="quill:folder-open" class="size-14px" :style="{ color: themeStore.themeColor }" />
+                    <Icon v-else icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
+                    {{ o.org }}
+                    </button>
+                    <template v-if="openOrgs[o.org]">
+                        <div v-for="g in o.groups" :key="g.cat" class="border-t px-2 py-1.5">
+                            <div class="px-1 pb-0.5 text-[10px] font-medium tracking-wide text-slate-400">{{ g.cat }}专业</div>
+                            <button v-for="f in g.folders" :key="f.label"
+                                @click="libSel = { org: o.org, cat: g.cat, label: f.label }"
+                                class="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs transition"
+                                :class="libSel.org === o.org && libSel.cat === g.cat && libSel.label === f.label ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100  bg-transparent'"
+                                :style="{ '--theme-color': themeStore.themeColor }"
+                            >
+                                <Icon icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
+                                <span class="min-w-0 flex-1 truncate">{{ f.label }}</span>
+                                <span class="text-[10px]" :class="libSel.label === f.label && libSel.cat === g.cat && libSel.org === o.org ? 'text-white/70' : 'text-slate-300'">{{ f.docs.length }}</span>
+                            </button>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="min-w-0 flex-1">
+                <div class="mb-1.5 flex flex-wrap items-center gap-1 text-xs text-slate-400">
+                    当前位置：{{ libSel.org }} 
+                    <Icon icon="formkit:right" class="size-12px" /> 
+                    {{ libSel.cat }}专业 
+                    <Icon icon="formkit:right" class="size-12px" /> 
+                    <span class="font-medium text-slate-600">{{ libSel.label }}</span>
+                    <span class="ml-auto">共 {{ libCur?.docs.length ?? 0 }} 份 · 版本受控</span>
+                </div>
+                <div class="scroll-right">
+                    <div class="divide-y rounded-lg border bg-white">
+                        <div v-for="d in libCur?.docs ?? []" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
+                        <Icon icon="akar-icons:file" class="size-16px" />
+                        <div class="min-w-0 flex-1">
+                            <div class="truncate text-sm">{{ d.name }}</div>
+                            <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
+                                <NTag size="small" type="info" class="text-[10px]">版本 {{ d.ver }}</NTag>
+                                <span>更新 {{ d.date }}</span>
+                            </div>
+                        </div>
+                        <div class="flex shrink-0 gap-3 text-xs">
+                            <NButton type="primary" text class="hover:underline text-xs" @click="preview(d)">查看</NButton>
+                            <NButton type="primary" text class="hover:underline text-xs" @click="download(d)">下载</NButton>
+                            <NButton type="primary" text class="hover:underline text-xs" @click="call(d)">调用</NButton>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll-left {
+  height: calc(100vh - 260px);
+  overflow-y: auto;
+}
+.scroll-right {
+    height: calc(100vh - 280px);
+    overflow-y: auto;
+}
+</style>
diff --git a/src/views/docs/query/index.vue b/src/views/docs/query/index.vue
index ba22a37..6219c38 100644
--- a/src/views/docs/query/index.vue
+++ b/src/views/docs/query/index.vue
@@ -1,332 +1,332 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from "@/utils/common";
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const aq = ref<string>('');
-const uploadFiles = () => {
-    window.$message?.success('演示：上传归档补充材料（限变更主管部门专责；材料单独存入「7-补充材料」，不改动原归档包，哈希留痕）')
-}
-interface ArchivePkg {
-  id: string; name: string; closedAt: string; size: string; files: number;
-  hash: string; revoked?: boolean; supplement?: boolean;
-}
-interface ArchiveUnit { unit: string; years: { year: string; pkgs: ArchivePkg[] }[] }
-
-const ARCHIVE_TREE: ArchiveUnit[] = [
-  {
-    unit: "01-常减压装置",
-    years: [
-      { year: "2024", pkgs: [
-        { id: "MOC-2024-R01-0003", name: "减一线换热器 E-108 芯子更换", closedAt: "2024-04-18", size: "12.6MB", files: 19, hash: "3a91d7c4f0e2…5b17" },
-        { id: "MOC-2024-R01-0007", name: "常压塔顶回流泵 P-105B 叶轮更换", closedAt: "2024-09-02", size: "9.8MB", files: 16, hash: "8e02b1a6d3c9…42fa" },
-      ] },
-      { year: "2025", pkgs: [
-        { id: "MOC-2025-R01-0011", name: "初馏塔进料温度联锁值调整（已撤销）", closedAt: "2025-03-11", size: "7.4MB", files: 14, hash: "c5d8f2a1b7e4…9c03", revoked: true },
-        { id: "MOC-2025-R01-0019", name: "电脱盐系统注水泵型号替换", closedAt: "2025-07-25", size: "15.2MB", files: 22, hash: "1f4a9c7e2b6d…d831", supplement: true },
-        { id: "MOC-2025-R01-0023", name: "常压炉燃料气切断阀改造", closedAt: "2025-11-14", size: "21.0MB", files: 27, hash: "6b3e0d8a5f1c…77e2" },
-      ] },
-      { year: "2026", pkgs: [
-        { id: "MOC-2026-R01-0028", name: "减顶真空泵 P-107A 电机更换", closedAt: "2026-06-30", size: "18.4MB", files: 24, hash: "b8e3a1c5d2f7…4c60" },
-        { id: "MOC-2026-R01-0031", name: "常顶油气冷却器管束更新", closedAt: "2026-07-12", size: "16.9MB", files: 21, hash: "d2a7c4f88b1e…5a96" },
-        { id: "MOC-2026-R01-0039", name: "进料泵 P-101A 更换为高效节能泵", closedAt: "2026-08-01", size: "18.4MB", files: 24, hash: "7c4f9be2a1d3…e804" },
-      ] },
-    ],
-  },
-  {
-    unit: "02-催化裂化装置",
-    years: [
-      { year: "2025", pkgs: [
-        { id: "MOC-2025-R02-0014", name: "再生器旋风分离器更换", closedAt: "2025-05-20", size: "26.3MB", files: 31, hash: "9c1e5b3d7a2f…b450" },
-        { id: "MOC-2025-R02-0021", name: "气压机出口压力联锁逻辑修改", closedAt: "2025-10-08", size: "11.7MB", files: 18, hash: "4d8f0a2c6e9b…31cd" },
-      ] },
-      { year: "2026", pkgs: [
-        { id: "MOC-2026-R02-0025", name: "分馏塔顶循回流管线扩径", closedAt: "2026-06-30", size: "14.5MB", files: 20, hash: "a7b2d9e4c1f8…6e05" },
-      ] },
-    ],
-  },
-  {
-    unit: "03-聚合装置",
-    years: [
-      { year: "2026", pkgs: [
-        { id: "MOC-2026-R03-0008", name: "聚合釜搅拌器密封形式变更", closedAt: "2026-05-19", size: "13.2MB", files: 17, hash: "e6f1a8c3b5d0…92d7" },
-      ] },
-    ],
-  },
-];
-const ARCHIVE_FOLDERS: { dir: string; files: { name: string; size: string }[] }[] = [
-  { dir: "1-申请与审批", files: [
-    { name: "变更申请表（终版）.pdf", size: "486KB" },
-    { name: "审批记录（含会签意见与留痕）.pdf", size: "312KB" },
-    { name: "等级判定表.pdf", size: "154KB" },
-    { name: "原始附件（方案/会议纪要/数据表）.zip", size: "2.8MB" },
-  ] },
-  { dir: "2-风险分析", files: [
-    { name: "AI 风险预分析报告.pdf", size: "268KB" },
-    { name: "JSA 作业安全分析表.pdf", size: "196KB" },
-    { name: "HAZOP 分析记录.pdf", size: "742KB" },
-    { name: "安全检查表（SCL）.pdf", size: "188KB" },
-  ] },
-  { dir: "3-培训与考核", files: [
-    { name: "变更培训材料（终版）.pdf", size: "1.1MB" },
-    { name: "培训签到表（照片）.jpg", size: "2.4MB" },
-    { name: "考核成绩单.xlsx", size: "32KB" },
-  ] },
-  { dir: "4-PSSR检查", files: [
-    { name: "PSSR 检查清单（终版）.pdf", size: "356KB" },
-    { name: "现场确认照片.zip", size: "6.7MB" },
-    { name: "电子签名确认记录.pdf", size: "142KB" },
-  ] },
-  { dir: "5-验收记录", files: [
-    { name: "变更验收单.pdf", size: "204KB" },
-    { name: "整改记录与复验结论.pdf", size: "168KB" },
-  ] },
-  { dir: "6-受控文件副本", files: [
-    { name: "受控文件更新清单（新旧对照）.pdf", size: "96KB" },
-    { name: "PID-101_Rev.4_20260805.pdf", size: "3.2MB" },
-    { name: "PID-101_Rev.3_20250101.pdf", size: "3.1MB" },
-  ] },
-];
-const SUPPLEMENT_FOLDER = { dir: "7-补充材料（归档后补充）", files: [
-  { name: "补充说明（泵轴振动复测数据）.pdf", size: "214KB" },
-  { name: "补充审批记录.pdf", size: "88KB" },
-] };
-const ROLE_SCOPE: Record<any, { text: string; filter: (u: any, p: any) => boolean }> = {
-  applicant: { text: "本人发起或参与的变更", filter: (u, p) => u.unit.startsWith("01") && ["MOC-2026-R01-0039", "MOC-2026-R01-0028", "MOC-2025-R01-0019"].includes(p.id) },
-  dept: { text: "本车间（装置）的全部变更", filter: (u) => u.unit.startsWith("01") },
-  process: { text: "本人参与审批或检查的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
-  process2: { text: "本人参与审批或检查的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
-  safety: { text: "全厂变更（安全监管需要）", filter: () => true },
-  vp: { text: "全厂变更", filter: () => true },
-  admin: { text: "全厂变更（系统管理：归档内容只读锁定，不可修改删除）", filter: () => true },
-  quality: { text: "本人参与会签或检验确认的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
-  viewer: { text: "全厂变更（信息查看角色：只读查阅）", filter: () => true },
-};
-const tF = ref("全部时间");
-const oF = ref("全部组织");
-const pF = ref("全部专业");
-const FILTER_GROUPS = computed(() => [
-  { label: "时间", opts: ["全部时间", "近一年", "近半年", "近三个月"], val: tF.value, set: (v: string) => { tF.value = v; } },
-  { label: "组织", opts: ["全部组织", "一车间", "二车间", "三车间"], val: oF.value, set: (v: string) => { oF.value = v; } },
-  { label: "专业", opts: ["全部专业", "工艺", "设备", "仪表", "管理"], val: pF.value, set: (v: string) => { pF.value = v; } },
-]);
-const scope = computed(() => ROLE_SCOPE['applicant'] ?? ROLE_SCOPE.vp);
-const searching = computed(() => aq.value.trim().length > 0);
-const filtering = computed(() => tF.value !== "全部时间" || oF.value !== "全部组织" || pF.value !== "全部专业");
-const UNIT_ORG: Record<string, string> = { "01-常减压装置": "一车间", "02-催化裂化装置": "二车间", "03-聚合装置": "三车间" };
-const profOf = (name: string) => /联锁|报警/.test(name) ? "仪表" : /规程|制度|管理/.test(name) ? "管理" : /泵|阀|电机|换热器|搅拌|密封|分离器|管束|冷却器|气压机|叶轮|芯子/.test(name) ? "设备" : "工艺";
-const REF = new Date("2026-08-03");
-const selId = ref("MOC-2026-R01-0039");
-const passF = (p: (typeof allPkgs.value)[number]) => {
-  const daysOf = tF.value === "近一年" ? 365 : tF.value === "近半年" ? 183 : tF.value === "近三个月" ? 92 : 0;
-  return (daysOf === 0 || (REF.getTime() - new Date(p.closedAt).getTime()) / 86400000 <= daysOf) &&
-    (oF.value === "全部组织" || UNIT_ORG[p.unit] === oF.value) &&
-    (pF.value === "全部专业" || profOf(p.name) === pF.value);
-};
-const tree = computed(() => ARCHIVE_TREE
-  .map((u:any) => ({ unit: u.unit, years: u.years.map((y) => ({ year: y.year, pkgs: y.pkgs.filter((p:any) => scope.value.filter(u, p)) })).filter((y:any) => y.pkgs.length > 0) }))
-  .filter((u:any) => u.years.length > 0));
-const allPkgs = computed(() => tree.value.flatMap((u:any) => u.years.flatMap((y:any) => y.pkgs.map((p:any) => ({ ...p, unit: u.unit, year: y.year })))));
-const results = computed(() => (searching.value || filtering.value)
-  ? allPkgs.value.filter((p:any) => passF(p) && (!searching.value || p.id.toLowerCase().includes(aq.value.trim().toLowerCase()) || p.name.includes(aq.value.trim())))
-  : []);
-const sel = computed(() => allPkgs.value.find((p:any) => p.id === selId.value) ?? allPkgs.value[0]);
-const selFolders = computed(() => (sel.value?.supplement ? [...ARCHIVE_FOLDERS, SUPPLEMENT_FOLDER] : ARCHIVE_FOLDERS));
-const openUnits = ref<Record<string, boolean>>({ "01-常减压装置": true });
-const openFolders = ref<Record<string, boolean>>({ "1-申请与审批": true });
-const downloadZip = (sel:any) => {
-  window.$message?.success(`演示：下载 ${sel.id} 归档包 ZIP（含归档索引.txt）`)
-}
-const exportEvidenceChain = () => {
-  window.$message?.success('演示：导出证据链（哈希清单 + 操作日志）')
-}
-const applySupplement = () => {
-  window.$message?.info('演示：发起归档补充申请（补充材料单独存入 7-补充材料，不改动原归档）')
-}
-const viewIndex = () => {
-  window.$message?.info('演示：查看归档索引（文件清单 + 逐项 SHA-256）')
-}
-const previewFile = (file:any) => {
-  window.$message?.info(`演示：在线预览 ${file.name}`)
-}
-const downloadFile = (file:any) => {
-  window.$message?.success(`演示：下载 ${file.name}`)
-}
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 我的草稿箱 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
-            <NGi span="24 s:24 m:16">
-                <div class="h-100% flex items-center gap-2">
-                    <Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
-                    <p class="text-base font-semibold">变更归档（一次变更一个归档包 · 关闭即自动归档 · 只读锁定）</p>
-                </div>
-            </NGi>
-            <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
-            <div class="flex items-center gap-2">
-                <NButton size="small" type="primary" class="text-xs" @click="uploadFiles">
-                    <Icon icon="material-symbols:upload" class="size-16px" /> 上传归档补充
-                </NButton>
-                </div>
-            </NGi>
-        </NGrid>
-        <div 
-            class="mt-4 flex items-center gap-2 rounded-lg bg-[var(--bg-color)] px-3 py-2 text-xs text-[var(--theme-color)]"
-            :style="{
-                '--theme-color': themeStore.themeColor,
-                '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
-            }"
-        >
-          <Icon icon="uil:lock" class="size-16px" />
-          当前角色调阅范围：{{ scope.text }} · 归档包关闭时自动生成，内容只读锁定并记录 SHA-256 哈希，任何修改留痕可追责
-        </div>
-        <NInput v-model:value="aq" type="text" class="w-40 text-xs mt-3" placeholder="按变更单号精确查找，或按名称关键词检索（如 MOC-2026-R01-0039）">
-            <template #suffix>
-                <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-            </template>
-        </NInput>
-        <!-- 筛选：时间 / 组织 / 专业 -->
-        <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 mt-3">
-          <div v-for="g in FILTER_GROUPS" :key="g.label" class="flex flex-wrap items-center gap-1">
-            <span class="text-[11px] text-slate-400">{{ g.label }}</span>
-            <NButton size="tiny" round v-for="o in g.opts" :key="o" @click="g.set(o)" class="text-[11px]" :type="g.val === o ? 'primary' : 'default'">{{ o }}</NButton>
-          </div>
-        </div>
-        <div class="grid gap-3 grid-cols-3 mt-3">
-          <!-- 左：三层目录树 / 筛选检索结果 -->
-          <div class="rounded-lg border p-2">
-            <div class="px-2 pb-1 text-xs font-medium text-slate-500">{{ (searching || filtering) ? `筛选 / 检索结果（${results.length}）` : '归档区目录（装置 / 年份 / 变更单号）' }}</div>
-            <template v-if="searching || filtering">
-              <div v-if="results.length === 0" class="px-2 py-4 text-center text-xs text-slate-400">未找到匹配的归档包</div>
-              <button v-for="p in results" :key="p.id" @click="selId = p.id"
-                class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs hover:bg-[#DFE9F6]/60"
-                :class="sel?.id === p.id ? 'bg-[#DFE9F6] font-medium text-[#1D4E9C]' : ''">
-                <FolderArchive class="h-3.5 w-3.5 shrink-0 text-[#6E93C6]" />
-                <span class="truncate">{{ p.id }}</span>
-                <Tag v-if="p.revoked" class="border-red-200 bg-red-100 px-1 py-0 text-[10px] text-red-600">已撤销</Tag>
-                <Tag v-if="p.supplement" class="border-amber-200 bg-amber-100 px-1 py-0 text-[10px] text-amber-700">补充</Tag>
-              </button>
-            </template>
-            <template v-else>
-              <div v-for="u in tree" :key="u.unit">
-                <button @click="openUnits[u.unit] = !openUnits[u.unit]"
-                  class="flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
-                  <Icon icon="formkit:right" class="size-14px transition-transform" :class="openUnits[u.unit] ? 'rotate-90' : ''" />
-                  <Icon v-if="openUnits[u.unit]" icon="quill:folder-open" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                  <Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
-                  {{ u.unit }}
-                </button>
-                <template v-if="openUnits[u.unit]">
-                  <div v-for="y in u.years" :key="y.year">
-                    <div class="pl-7 pt-1 text-[11px] font-medium text-slate-400">{{ y.year }} 年（{{ y.pkgs.length }}）</div>
-                    <button v-for="p in y.pkgs" :key="p.id" @click="selId = p.id"
-                        class="flex w-full items-center gap-2 rounded-lg py-1.5 pl-8 pr-2 text-left text-xs hover:bg-[#DFE9F6]/60"
-                        :class="sel?.id === p.id ? 'bg-[var(--bg-color)] font-medium text-[var(--theme-color)]' : 'bg-transparent'"
-                        :style="{
-                            '--theme-color': themeStore.themeColor,
-                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
-                        }"
-                    >
-                      <Icon icon="lucide:folder-archive" class="size-14px" :style="{ color: themeStore.themeColor }" />
-                      
-                      <span class="truncate">{{ p.id }}</span>
-                      <NTag v-if="p.revoked" size="small" type="error" class="text-[10px]">已撤销</NTag>
-                      <NTag v-if="p.supplement" size="small" type="warning" class="text-[10px]">补充</NTag>
-                    </button>
-                  </div>
-                </template>
-              </div>
-              
-            </template>
-          </div>
-          <!-- 右：归档包详情 -->
-          <div v-if="sel" class="rounded-lg border col-span-2">
-            <div class="border-b p-3">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-sm font-semibold">{{ sel.id }}</span>
-                <NTag v-if="sel.revoked" size="small" type="error">已撤销（保留归档备查）</NTag>
-                <NTag v-else size="small" type="info">
-                    <template #icon>
-                        <Icon icon="uil:lock" class="size-14px" />
-                    </template>
-                    只读锁定
-                </NTag>
-                <NTag v-if="sel.supplement" size="small" type="warning">含归档补充</NTag>
-              </div>
-              <div class="mt-1 text-xs text-slate-600">{{ sel.name }}</div>
-              <div class="mt-2 flex flex-wrap justify-between gap-x-4 gap-y-1 text-[11px] text-slate-500">
-                <span>归档路径：归档区/{{ sel.unit }}/{{ sel.year }}/{{ sel.id }}/</span>
-                <span>关闭时间:{{ sel.closedAt }}</span>
-                <span>共 {{ sel.files }} 个文件 · {{ sel.size }}</span>
-                <span class="flex items-center gap-1 font-mono">
-                  <Icon icon="lucide:hash" class="size-12px" />
-                  {{ sel.hash }}
-                </span>
-              </div>
-              <div class="mt-2 flex flex-wrap gap-2">
-                <NButton size="small" class="text-xs" @click="downloadZip(sel)">
-                    <Icon icon="material-symbols:download" class="size-14px" />
-                    下载归档包 ZIP
-                </NButton>
-                <NButton size="small" class="text-xs" @click="exportEvidenceChain">导出证据链</NButton>
-                <NButton v-if="!sel.revoked" size="small" class="text-xs" @click="applySupplement">发起归档补充申请</NButton>
-              </div>
-            </div>
-            <div class="divide-y scroll-right">
-              <div v-for="f in selFolders" :key="f.dir">
-                <button @click="openFolders[f.dir] = !openFolders[f.dir]"
-                  class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
-                  <Icon  icon="formkit:right" class="size-14px text-slate-400 transition-transform" :class="openFolders[f.dir] ? 'rotate-90' : ''" />
-                  <Icon icon="quill:folder-open" v-if="openFolders[f.dir]" class="size-16px text-[#6E93C6]" />
-                  <Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
-                  {{ f.dir }}
-                  <span class="ml-auto text-[11px] font-normal text-slate-400">{{ f.files.length }} 个文件</span>
-                </button>
-                <template v-if="openFolders[f.dir]">
-                  <div v-for="file in f.files" :key="file.name" class="flex items-center gap-2 py-1.5 pl-10 pr-3 text-xs hover:bg-slate-50">
-                    <Icon icon="akar-icons:file" class="size-14px text-slate-400" />
-                    <span class="min-w-0 flex-1 truncate">{{ file.name }}</span>
-                    <span class="text-[11px] text-slate-400">{{ file.size }}</span>
-                    <NButton text type="primary" @click="previewFile(file)">
-                      <Icon icon="lucide:eye" class="size-14px" />
-                    </NButton>
-                    <NButton text type="primary" @click="downloadFile(file)">
-                      <Icon icon="material-symbols:download" class="size-16px" />
-                    </NButton>
-                  </div>
-                </template>
-              </div>
-              <div class="flex items-center gap-2 px-3 py-2 text-xs hover:bg-slate-50">
-                <Icon icon="akar-icons:file" class="size-14px text-slate-400" />
-                <span class="flex-1 font-mono">归档索引.txt</span>
-                <span class="text-[11px] text-slate-400">清单与哈希</span>
-                <NButton text type="primary" @click="viewIndex">
-                  <Icon icon="lucide:eye" class="size-14px" />
-                </NButton>
-              </div>
-            </div>
-          </div>
-        </div>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll-right {
-    height: calc(100vh - 460px);
-    overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from "@/utils/common";
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const aq = ref<string>('');
+const uploadFiles = () => {
+    window.$message?.success('演示：上传归档补充材料（限变更主管部门专责；材料单独存入「7-补充材料」，不改动原归档包，哈希留痕）')
+}
+interface ArchivePkg {
+  id: string; name: string; closedAt: string; size: string; files: number;
+  hash: string; revoked?: boolean; supplement?: boolean;
+}
+interface ArchiveUnit { unit: string; years: { year: string; pkgs: ArchivePkg[] }[] }
+
+const ARCHIVE_TREE: ArchiveUnit[] = [
+  {
+    unit: "01-常减压装置",
+    years: [
+      { year: "2024", pkgs: [
+        { id: "MOC-2024-R01-0003", name: "减一线换热器 E-108 芯子更换", closedAt: "2024-04-18", size: "12.6MB", files: 19, hash: "3a91d7c4f0e2…5b17" },
+        { id: "MOC-2024-R01-0007", name: "常压塔顶回流泵 P-105B 叶轮更换", closedAt: "2024-09-02", size: "9.8MB", files: 16, hash: "8e02b1a6d3c9…42fa" },
+      ] },
+      { year: "2025", pkgs: [
+        { id: "MOC-2025-R01-0011", name: "初馏塔进料温度联锁值调整（已撤销）", closedAt: "2025-03-11", size: "7.4MB", files: 14, hash: "c5d8f2a1b7e4…9c03", revoked: true },
+        { id: "MOC-2025-R01-0019", name: "电脱盐系统注水泵型号替换", closedAt: "2025-07-25", size: "15.2MB", files: 22, hash: "1f4a9c7e2b6d…d831", supplement: true },
+        { id: "MOC-2025-R01-0023", name: "常压炉燃料气切断阀改造", closedAt: "2025-11-14", size: "21.0MB", files: 27, hash: "6b3e0d8a5f1c…77e2" },
+      ] },
+      { year: "2026", pkgs: [
+        { id: "MOC-2026-R01-0028", name: "减顶真空泵 P-107A 电机更换", closedAt: "2026-06-30", size: "18.4MB", files: 24, hash: "b8e3a1c5d2f7…4c60" },
+        { id: "MOC-2026-R01-0031", name: "常顶油气冷却器管束更新", closedAt: "2026-07-12", size: "16.9MB", files: 21, hash: "d2a7c4f88b1e…5a96" },
+        { id: "MOC-2026-R01-0039", name: "进料泵 P-101A 更换为高效节能泵", closedAt: "2026-08-01", size: "18.4MB", files: 24, hash: "7c4f9be2a1d3…e804" },
+      ] },
+    ],
+  },
+  {
+    unit: "02-催化裂化装置",
+    years: [
+      { year: "2025", pkgs: [
+        { id: "MOC-2025-R02-0014", name: "再生器旋风分离器更换", closedAt: "2025-05-20", size: "26.3MB", files: 31, hash: "9c1e5b3d7a2f…b450" },
+        { id: "MOC-2025-R02-0021", name: "气压机出口压力联锁逻辑修改", closedAt: "2025-10-08", size: "11.7MB", files: 18, hash: "4d8f0a2c6e9b…31cd" },
+      ] },
+      { year: "2026", pkgs: [
+        { id: "MOC-2026-R02-0025", name: "分馏塔顶循回流管线扩径", closedAt: "2026-06-30", size: "14.5MB", files: 20, hash: "a7b2d9e4c1f8…6e05" },
+      ] },
+    ],
+  },
+  {
+    unit: "03-聚合装置",
+    years: [
+      { year: "2026", pkgs: [
+        { id: "MOC-2026-R03-0008", name: "聚合釜搅拌器密封形式变更", closedAt: "2026-05-19", size: "13.2MB", files: 17, hash: "e6f1a8c3b5d0…92d7" },
+      ] },
+    ],
+  },
+];
+const ARCHIVE_FOLDERS: { dir: string; files: { name: string; size: string }[] }[] = [
+  { dir: "1-申请与审批", files: [
+    { name: "变更申请表（终版）.pdf", size: "486KB" },
+    { name: "审批记录（含会签意见与留痕）.pdf", size: "312KB" },
+    { name: "等级判定表.pdf", size: "154KB" },
+    { name: "原始附件（方案/会议纪要/数据表）.zip", size: "2.8MB" },
+  ] },
+  { dir: "2-风险分析", files: [
+    { name: "AI 风险预分析报告.pdf", size: "268KB" },
+    { name: "JSA 作业安全分析表.pdf", size: "196KB" },
+    { name: "HAZOP 分析记录.pdf", size: "742KB" },
+    { name: "安全检查表（SCL）.pdf", size: "188KB" },
+  ] },
+  { dir: "3-培训与考核", files: [
+    { name: "变更培训材料（终版）.pdf", size: "1.1MB" },
+    { name: "培训签到表（照片）.jpg", size: "2.4MB" },
+    { name: "考核成绩单.xlsx", size: "32KB" },
+  ] },
+  { dir: "4-PSSR检查", files: [
+    { name: "PSSR 检查清单（终版）.pdf", size: "356KB" },
+    { name: "现场确认照片.zip", size: "6.7MB" },
+    { name: "电子签名确认记录.pdf", size: "142KB" },
+  ] },
+  { dir: "5-验收记录", files: [
+    { name: "变更验收单.pdf", size: "204KB" },
+    { name: "整改记录与复验结论.pdf", size: "168KB" },
+  ] },
+  { dir: "6-受控文件副本", files: [
+    { name: "受控文件更新清单（新旧对照）.pdf", size: "96KB" },
+    { name: "PID-101_Rev.4_20260805.pdf", size: "3.2MB" },
+    { name: "PID-101_Rev.3_20250101.pdf", size: "3.1MB" },
+  ] },
+];
+const SUPPLEMENT_FOLDER = { dir: "7-补充材料（归档后补充）", files: [
+  { name: "补充说明（泵轴振动复测数据）.pdf", size: "214KB" },
+  { name: "补充审批记录.pdf", size: "88KB" },
+] };
+const ROLE_SCOPE: Record<any, { text: string; filter: (u: any, p: any) => boolean }> = {
+  applicant: { text: "本人发起或参与的变更", filter: (u, p) => u.unit.startsWith("01") && ["MOC-2026-R01-0039", "MOC-2026-R01-0028", "MOC-2025-R01-0019"].includes(p.id) },
+  dept: { text: "本车间（装置）的全部变更", filter: (u) => u.unit.startsWith("01") },
+  process: { text: "本人参与审批或检查的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
+  process2: { text: "本人参与审批或检查的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
+  safety: { text: "全厂变更（安全监管需要）", filter: () => true },
+  vp: { text: "全厂变更", filter: () => true },
+  admin: { text: "全厂变更（系统管理：归档内容只读锁定，不可修改删除）", filter: () => true },
+  quality: { text: "本人参与会签或检验确认的变更", filter: (u, p) => u.unit.startsWith("01") && p.id >= "MOC-2025" },
+  viewer: { text: "全厂变更（信息查看角色：只读查阅）", filter: () => true },
+};
+const tF = ref("全部时间");
+const oF = ref("全部组织");
+const pF = ref("全部专业");
+const FILTER_GROUPS = computed(() => [
+  { label: "时间", opts: ["全部时间", "近一年", "近半年", "近三个月"], val: tF.value, set: (v: string) => { tF.value = v; } },
+  { label: "组织", opts: ["全部组织", "一车间", "二车间", "三车间"], val: oF.value, set: (v: string) => { oF.value = v; } },
+  { label: "专业", opts: ["全部专业", "工艺", "设备", "仪表", "管理"], val: pF.value, set: (v: string) => { pF.value = v; } },
+]);
+const scope = computed(() => ROLE_SCOPE['applicant'] ?? ROLE_SCOPE.vp);
+const searching = computed(() => aq.value.trim().length > 0);
+const filtering = computed(() => tF.value !== "全部时间" || oF.value !== "全部组织" || pF.value !== "全部专业");
+const UNIT_ORG: Record<string, string> = { "01-常减压装置": "一车间", "02-催化裂化装置": "二车间", "03-聚合装置": "三车间" };
+const profOf = (name: string) => /联锁|报警/.test(name) ? "仪表" : /规程|制度|管理/.test(name) ? "管理" : /泵|阀|电机|换热器|搅拌|密封|分离器|管束|冷却器|气压机|叶轮|芯子/.test(name) ? "设备" : "工艺";
+const REF = new Date("2026-08-03");
+const selId = ref("MOC-2026-R01-0039");
+const passF = (p: (typeof allPkgs.value)[number]) => {
+  const daysOf = tF.value === "近一年" ? 365 : tF.value === "近半年" ? 183 : tF.value === "近三个月" ? 92 : 0;
+  return (daysOf === 0 || (REF.getTime() - new Date(p.closedAt).getTime()) / 86400000 <= daysOf) &&
+    (oF.value === "全部组织" || UNIT_ORG[p.unit] === oF.value) &&
+    (pF.value === "全部专业" || profOf(p.name) === pF.value);
+};
+const tree = computed(() => ARCHIVE_TREE
+  .map((u:any) => ({ unit: u.unit, years: u.years.map((y) => ({ year: y.year, pkgs: y.pkgs.filter((p:any) => scope.value.filter(u, p)) })).filter((y:any) => y.pkgs.length > 0) }))
+  .filter((u:any) => u.years.length > 0));
+const allPkgs = computed(() => tree.value.flatMap((u:any) => u.years.flatMap((y:any) => y.pkgs.map((p:any) => ({ ...p, unit: u.unit, year: y.year })))));
+const results = computed(() => (searching.value || filtering.value)
+  ? allPkgs.value.filter((p:any) => passF(p) && (!searching.value || p.id.toLowerCase().includes(aq.value.trim().toLowerCase()) || p.name.includes(aq.value.trim())))
+  : []);
+const sel = computed(() => allPkgs.value.find((p:any) => p.id === selId.value) ?? allPkgs.value[0]);
+const selFolders = computed(() => (sel.value?.supplement ? [...ARCHIVE_FOLDERS, SUPPLEMENT_FOLDER] : ARCHIVE_FOLDERS));
+const openUnits = ref<Record<string, boolean>>({ "01-常减压装置": true });
+const openFolders = ref<Record<string, boolean>>({ "1-申请与审批": true });
+const downloadZip = (sel:any) => {
+  window.$message?.success(`演示：下载 ${sel.id} 归档包 ZIP（含归档索引.txt）`)
+}
+const exportEvidenceChain = () => {
+  window.$message?.success('演示：导出证据链（哈希清单 + 操作日志）')
+}
+const applySupplement = () => {
+  window.$message?.info('演示：发起归档补充申请（补充材料单独存入 7-补充材料，不改动原归档）')
+}
+const viewIndex = () => {
+  window.$message?.info('演示：查看归档索引（文件清单 + 逐项 SHA-256）')
+}
+const previewFile = (file:any) => {
+  window.$message?.info(`演示：在线预览 ${file.name}`)
+}
+const downloadFile = (file:any) => {
+  window.$message?.success(`演示：下载 ${file.name}`)
+}
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 我的草稿箱 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
+            <NGi span="24 s:24 m:16">
+                <div class="h-100% flex items-center gap-2">
+                    <Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
+                    <p class="text-base font-semibold">变更归档（一次变更一个归档包 · 关闭即自动归档 · 只读锁定）</p>
+                </div>
+            </NGi>
+            <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
+            <div class="flex items-center gap-2">
+                <NButton size="small" type="primary" class="text-xs" @click="uploadFiles">
+                    <Icon icon="material-symbols:upload" class="size-16px" /> 上传归档补充
+                </NButton>
+                </div>
+            </NGi>
+        </NGrid>
+        <div 
+            class="mt-4 flex items-center gap-2 rounded-lg bg-[var(--bg-color)] px-3 py-2 text-xs text-[var(--theme-color)]"
+            :style="{
+                '--theme-color': themeStore.themeColor,
+                '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
+            }"
+        >
+          <Icon icon="uil:lock" class="size-16px" />
+          当前角色调阅范围：{{ scope.text }} · 归档包关闭时自动生成，内容只读锁定并记录 SHA-256 哈希，任何修改留痕可追责
+        </div>
+        <NInput v-model:value="aq" type="text" class="w-40 text-xs mt-3" placeholder="按变更单号精确查找，或按名称关键词检索（如 MOC-2026-R01-0039）">
+            <template #suffix>
+                <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+            </template>
+        </NInput>
+        <!-- 筛选：时间 / 组织 / 专业 -->
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 mt-3">
+          <div v-for="g in FILTER_GROUPS" :key="g.label" class="flex flex-wrap items-center gap-1">
+            <span class="text-[11px] text-slate-400">{{ g.label }}</span>
+            <NButton size="tiny" round v-for="o in g.opts" :key="o" @click="g.set(o)" class="text-[11px]" :type="g.val === o ? 'primary' : 'default'">{{ o }}</NButton>
+          </div>
+        </div>
+        <div class="grid gap-3 grid-cols-3 mt-3">
+          <!-- 左：三层目录树 / 筛选检索结果 -->
+          <div class="rounded-lg border p-2">
+            <div class="px-2 pb-1 text-xs font-medium text-slate-500">{{ (searching || filtering) ? `筛选 / 检索结果（${results.length}）` : '归档区目录（装置 / 年份 / 变更单号）' }}</div>
+            <template v-if="searching || filtering">
+              <div v-if="results.length === 0" class="px-2 py-4 text-center text-xs text-slate-400">未找到匹配的归档包</div>
+              <button v-for="p in results" :key="p.id" @click="selId = p.id"
+                class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs hover:bg-[#DFE9F6]/60"
+                :class="sel?.id === p.id ? 'bg-[#DFE9F6] font-medium text-[#1D4E9C]' : ''">
+                <FolderArchive class="h-3.5 w-3.5 shrink-0 text-[#6E93C6]" />
+                <span class="truncate">{{ p.id }}</span>
+                <Tag v-if="p.revoked" class="border-red-200 bg-red-100 px-1 py-0 text-[10px] text-red-600">已撤销</Tag>
+                <Tag v-if="p.supplement" class="border-amber-200 bg-amber-100 px-1 py-0 text-[10px] text-amber-700">补充</Tag>
+              </button>
+            </template>
+            <template v-else>
+              <div v-for="u in tree" :key="u.unit">
+                <button @click="openUnits[u.unit] = !openUnits[u.unit]"
+                  class="flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
+                  <Icon icon="formkit:right" class="size-14px transition-transform" :class="openUnits[u.unit] ? 'rotate-90' : ''" />
+                  <Icon v-if="openUnits[u.unit]" icon="quill:folder-open" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                  <Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
+                  {{ u.unit }}
+                </button>
+                <template v-if="openUnits[u.unit]">
+                  <div v-for="y in u.years" :key="y.year">
+                    <div class="pl-7 pt-1 text-[11px] font-medium text-slate-400">{{ y.year }} 年（{{ y.pkgs.length }}）</div>
+                    <button v-for="p in y.pkgs" :key="p.id" @click="selId = p.id"
+                        class="flex w-full items-center gap-2 rounded-lg py-1.5 pl-8 pr-2 text-left text-xs hover:bg-[#DFE9F6]/60"
+                        :class="sel?.id === p.id ? 'bg-[var(--bg-color)] font-medium text-[var(--theme-color)]' : 'bg-transparent'"
+                        :style="{
+                            '--theme-color': themeStore.themeColor,
+                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
+                        }"
+                    >
+                      <Icon icon="lucide:folder-archive" class="size-14px" :style="{ color: themeStore.themeColor }" />
+                      
+                      <span class="truncate">{{ p.id }}</span>
+                      <NTag v-if="p.revoked" size="small" type="error" class="text-[10px]">已撤销</NTag>
+                      <NTag v-if="p.supplement" size="small" type="warning" class="text-[10px]">补充</NTag>
+                    </button>
+                  </div>
+                </template>
+              </div>
+              
+            </template>
+          </div>
+          <!-- 右：归档包详情 -->
+          <div v-if="sel" class="rounded-lg border col-span-2">
+            <div class="border-b p-3">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-sm font-semibold">{{ sel.id }}</span>
+                <NTag v-if="sel.revoked" size="small" type="error">已撤销（保留归档备查）</NTag>
+                <NTag v-else size="small" type="info">
+                    <template #icon>
+                        <Icon icon="uil:lock" class="size-14px" />
+                    </template>
+                    只读锁定
+                </NTag>
+                <NTag v-if="sel.supplement" size="small" type="warning">含归档补充</NTag>
+              </div>
+              <div class="mt-1 text-xs text-slate-600">{{ sel.name }}</div>
+              <div class="mt-2 flex flex-wrap justify-between gap-x-4 gap-y-1 text-[11px] text-slate-500">
+                <span>归档路径：归档区/{{ sel.unit }}/{{ sel.year }}/{{ sel.id }}/</span>
+                <span>关闭时间:{{ sel.closedAt }}</span>
+                <span>共 {{ sel.files }} 个文件 · {{ sel.size }}</span>
+                <span class="flex items-center gap-1 font-mono">
+                  <Icon icon="lucide:hash" class="size-12px" />
+                  {{ sel.hash }}
+                </span>
+              </div>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <NButton size="small" class="text-xs" @click="downloadZip(sel)">
+                    <Icon icon="material-symbols:download" class="size-14px" />
+                    下载归档包 ZIP
+                </NButton>
+                <NButton size="small" class="text-xs" @click="exportEvidenceChain">导出证据链</NButton>
+                <NButton v-if="!sel.revoked" size="small" class="text-xs" @click="applySupplement">发起归档补充申请</NButton>
+              </div>
+            </div>
+            <div class="divide-y scroll-right">
+              <div v-for="f in selFolders" :key="f.dir">
+                <button @click="openFolders[f.dir] = !openFolders[f.dir]"
+                  class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
+                  <Icon  icon="formkit:right" class="size-14px text-slate-400 transition-transform" :class="openFolders[f.dir] ? 'rotate-90' : ''" />
+                  <Icon icon="quill:folder-open" v-if="openFolders[f.dir]" class="size-16px text-[#6E93C6]" />
+                  <Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
+                  {{ f.dir }}
+                  <span class="ml-auto text-[11px] font-normal text-slate-400">{{ f.files.length }} 个文件</span>
+                </button>
+                <template v-if="openFolders[f.dir]">
+                  <div v-for="file in f.files" :key="file.name" class="flex items-center gap-2 py-1.5 pl-10 pr-3 text-xs hover:bg-slate-50">
+                    <Icon icon="akar-icons:file" class="size-14px text-slate-400" />
+                    <span class="min-w-0 flex-1 truncate">{{ file.name }}</span>
+                    <span class="text-[11px] text-slate-400">{{ file.size }}</span>
+                    <NButton text type="primary" @click="previewFile(file)">
+                      <Icon icon="lucide:eye" class="size-14px" />
+                    </NButton>
+                    <NButton text type="primary" @click="downloadFile(file)">
+                      <Icon icon="material-symbols:download" class="size-16px" />
+                    </NButton>
+                  </div>
+                </template>
+              </div>
+              <div class="flex items-center gap-2 px-3 py-2 text-xs hover:bg-slate-50">
+                <Icon icon="akar-icons:file" class="size-14px text-slate-400" />
+                <span class="flex-1 font-mono">归档索引.txt</span>
+                <span class="text-[11px] text-slate-400">清单与哈希</span>
+                <NButton text type="primary" @click="viewIndex">
+                  <Icon icon="lucide:eye" class="size-14px" />
+                </NButton>
+              </div>
+            </div>
+          </div>
+        </div>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll-right {
+    height: calc(100vh - 460px);
+    overflow-y: auto;
+}
+</style>
diff --git a/src/views/factoryOverview/index.vue b/src/views/factoryOverview/index.vue
index 691dc44..7d116cf 100644
--- a/src/views/factoryOverview/index.vue
+++ b/src/views/factoryOverview/index.vue
@@ -1,213 +1,213 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from '@/utils/common';
-import RingChart from './modules/ringChart.vue';
-import ColumnChart from './modules/columnChart.vue';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 52 },
-  { name: "设备", value: 49 },
-  { name: "管理", value: 25 },
-];
-const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
-
-const changeData = ref([
-  {
-    name: '2月',
-    value: 42,
-  },
-  {
-    name: '3月',
-    value: 35,
-  },
-  {
-    name: '4月',
-    value: 28,
-  },
-  {
-    name: '5月',
-    value: 12,
-  },
-  {
-    name: '6月',
-    value: 9,
-  },
-  {
-    name: '7月',
-    value: 33,
-  },
-]);
-
-const DEFAULT_EFF = [
-  { pct: 85, label: "按期投用率", c: "#1D4E9C" },
-  { pct: 64, label: "培训按期完成率", c: "#F5A623" },
-  { pct: 25, label: "超期变更占比", c: "#E15555" },
-];
-const DEFAULT_EXPORTS = ["变更数量统计", "变更周期分析", "超期预警报表", "风险分析执行", "PSSR 与验收", "关闭及时率"];
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-  <!-- 卡片数据 -->
-  <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor,'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1)}">
-    <NGi>
-      <div 
-        class="bg-white px-16px py-12px text-[#94a3b8]"
-        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-      >
-        <p class="text-12px font-600 text-center">按期关闭率</p>
-        <div class="flex justify-center py-2.5">
-          <NProgress type="circle" :percentage="93.8" :offset-degree="180">
-            <div class="flex flex-col items-center mt-2">
-              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
-                93.8<span class="text-sm font-semibold">%</span>
-              </p>
-              <p class="mt-1 text-[11px] text-slate-400">Good</p>
-            </div>
-          </NProgress>
-        </div>
-        <p class="text-12px text-center">近一年 · 全厂</p>
-      </div>
-    </NGi>
-    <NGi>
-      <div 
-        class="bg-white px-16px py-12px text-[#94a3b8]"
-        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-      >
-        <p class="text-12px font-600 text-center">PSSR 完成率</p>
-        <div class="flex justify-center py-2.5">
-          <NProgress type="circle" :percentage="96" :offset-degree="180" status="success">
-            <div class="flex flex-col items-center mt-2">
-              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
-                96<span class="text-sm font-semibold">%</span>
-              </p>
-              <p class="mt-1 text-[11px] text-slate-400">Excellent</p>
-            </div>
-          </NProgress>
-        </div>
-        <p class="text-12px text-center">近一年 · 全厂</p>
-      </div>
-    </NGi>
-    <NGi>
-      <div 
-        class="bg-white px-16px py-12px text-[#94a3b8]"
-        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-      >
-        <p class="text-12px font-600 text-center">验收一次通过率</p>
-        <div class="flex justify-center py-2.5">
-          <NProgress type="circle" :percentage="88" :offset-degree="180" status="warning">
-            <div class="flex flex-col items-center mt-2">
-              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
-                88<span class="text-sm font-semibold">%</span>
-              </p>
-              <p class="mt-1 text-[11px] text-slate-400">Fair</p>
-            </div>
-          </NProgress>
-        </div>
-        <p class="text-12px text-center">近一年 · 全厂</p>
-      </div>
-    </NGi>
-    <NGi>
-      <div 
-        class="bg-white px-16px py-12px text-[#94a3b8] flex flex-col justify-center items-center"
-        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-      >
-        <p class="text-12px font-600 text-center">平均关闭时长</p>
-        <p class="mt-2 text-[40px] font-bold leading-none text-[#1D2129] text-center">8.2</p>
-        <p class="text-12px text-center mt-1">天 · 优于行业均值</p>
-        <span class="mt-2 rounded-full bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--theme-color)]">环比 ↓ 0.6 天</span>
-      </div>
-    </NGi>
-  </NGrid>
-
-  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-    <NGi span="24 s:24 m:24 l:8">
-      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">月度变更数量</p>
-          <div class="py-3 px-4">
-              <ColumnChart :data="changeData" style="height: 220px" />
-          </div>
-      </NCard>
-    </NGi>
-    <NGi span="24 s:24 m:24 l:8">
-      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布</p>
-          <div class="py-3 px-4">
-              <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
-          </div>
-      </NCard>
-    </NGi>
-    <NGi span="24 s:24 m:24 l:8">
-      <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-        :style="{ 
-          borderRadius: themeStore.themeRadius + 'px', 
-          height: '100%',
-          '--theme-color': themeStore.themeColor,
-          '--warning-color': themeStore.otherColor.warning,
-          '--error-color': themeStore.otherColor.error,
-        }"
-      >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更效率指标</p>
-          <div class="py-3 px-4">
-            <div class="space-y-5">
-              <div v-for="r in DEFAULT_EFF" :key="r.label">
-                <div class="flex items-baseline gap-2">
-                  <span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
-                  <span class="text-xs text-slate-400">{{ r.label }}</span>
-                </div>
-                <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
-                  <div v-if="r.label==='按期投用率'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%` }"></div>
-                  <div v-if="r.label==='培训按期完成率'" class="h-full rounded-full bg-[var(--warning-color)]" :style="{ width: `${r.pct}%` }"></div>
-                  <div v-if="r.label==='超期变更占比'" class="h-full rounded-full bg-[var(--error-color)]" :style="{ width: `${r.pct}%` }"></div>
-                </div>
-              </div>
-              <div class="text-[11px] text-slate-400">近一年 · 全厂口径 · 超期占比越低越好</div>
-            </div>
-          </div>
-      </NCard>
-    </NGi>
-  </NGrid>
-
-  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-    <NGi span="24 s:24 m:24 l:16">
-      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">平均审批周期趋势（天）</p>
-          <div class="py-3 px-4">
-              <ColumnChart :data="changeData" style="height: 220px" />
-          </div>
-      </NCard>
-    </NGi>
-    <NGi span="24 s:24 m:24 l:8">
-      <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-        :style="{ 
-          borderRadius: themeStore.themeRadius + 'px', 
-          height: '100%',
-          '--theme-color': themeStore.themeColor,
-          '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
-        }"
-      >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
-          <div class="py-3 px-4">
-            <div class="grid grid-cols-2 gap-2">
-              <div v-for="r in DEFAULT_EXPORTS" :key="r" @click="message.success(`演示：${r}已导出 Excel`)"
-                class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm hover:border-[var(--theme-color)] hover:bg-[var(--theme-bg)]">
-                <Icon icon="akar-icons:file" class="size-16px text-slate-400" />
-                {{ r }}
-              </div>
-            </div>
-          </div>
-      </NCard>
-    </NGi>
-  </NGrid>
-</NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+import RingChart from './modules/ringChart.vue';
+import ColumnChart from './modules/columnChart.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const DEPT_ACCEPT = [
+  { name: "工艺", value: 52 },
+  { name: "设备", value: 49 },
+  { name: "管理", value: 25 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+
+const changeData = ref([
+  {
+    name: '2月',
+    value: 42,
+  },
+  {
+    name: '3月',
+    value: 35,
+  },
+  {
+    name: '4月',
+    value: 28,
+  },
+  {
+    name: '5月',
+    value: 12,
+  },
+  {
+    name: '6月',
+    value: 9,
+  },
+  {
+    name: '7月',
+    value: 33,
+  },
+]);
+
+const DEFAULT_EFF = [
+  { pct: 85, label: "按期投用率", c: "#1D4E9C" },
+  { pct: 64, label: "培训按期完成率", c: "#F5A623" },
+  { pct: 25, label: "超期变更占比", c: "#E15555" },
+];
+const DEFAULT_EXPORTS = ["变更数量统计", "变更周期分析", "超期预警报表", "风险分析执行", "PSSR 与验收", "关闭及时率"];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 卡片数据 -->
+  <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor,'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1)}">
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">按期关闭率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="93.8" :offset-degree="180">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
+                93.8<span class="text-sm font-semibold">%</span>
+              </p>
+              <p class="mt-1 text-[11px] text-slate-400">Good</p>
+            </div>
+          </NProgress>
+        </div>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">PSSR 完成率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="96" :offset-degree="180" status="success">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
+                96<span class="text-sm font-semibold">%</span>
+              </p>
+              <p class="mt-1 text-[11px] text-slate-400">Excellent</p>
+            </div>
+          </NProgress>
+        </div>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">验收一次通过率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="88" :offset-degree="180" status="warning">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
+                88<span class="text-sm font-semibold">%</span>
+              </p>
+              <p class="mt-1 text-[11px] text-slate-400">Fair</p>
+            </div>
+          </NProgress>
+        </div>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8] flex flex-col justify-center items-center"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">平均关闭时长</p>
+        <p class="mt-2 text-[40px] font-bold leading-none text-[#1D2129] text-center">8.2</p>
+        <p class="text-12px text-center mt-1">天 · 优于行业均值</p>
+        <span class="mt-2 rounded-full bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--theme-color)]">环比 ↓ 0.6 天</span>
+      </div>
+    </NGi>
+  </NGrid>
+
+  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+    <NGi span="24 s:24 m:24 l:8">
+      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">月度变更数量</p>
+          <div class="py-3 px-4">
+              <ColumnChart :data="changeData" style="height: 220px" />
+          </div>
+      </NCard>
+    </NGi>
+    <NGi span="24 s:24 m:24 l:8">
+      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布</p>
+          <div class="py-3 px-4">
+              <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+          </div>
+      </NCard>
+    </NGi>
+    <NGi span="24 s:24 m:24 l:8">
+      <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+        :style="{ 
+          borderRadius: themeStore.themeRadius + 'px', 
+          height: '100%',
+          '--theme-color': themeStore.themeColor,
+          '--warning-color': themeStore.otherColor.warning,
+          '--error-color': themeStore.otherColor.error,
+        }"
+      >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更效率指标</p>
+          <div class="py-3 px-4">
+            <div class="space-y-5">
+              <div v-for="r in DEFAULT_EFF" :key="r.label">
+                <div class="flex items-baseline gap-2">
+                  <span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
+                  <span class="text-xs text-slate-400">{{ r.label }}</span>
+                </div>
+                <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
+                  <div v-if="r.label==='按期投用率'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%` }"></div>
+                  <div v-if="r.label==='培训按期完成率'" class="h-full rounded-full bg-[var(--warning-color)]" :style="{ width: `${r.pct}%` }"></div>
+                  <div v-if="r.label==='超期变更占比'" class="h-full rounded-full bg-[var(--error-color)]" :style="{ width: `${r.pct}%` }"></div>
+                </div>
+              </div>
+              <div class="text-[11px] text-slate-400">近一年 · 全厂口径 · 超期占比越低越好</div>
+            </div>
+          </div>
+      </NCard>
+    </NGi>
+  </NGrid>
+
+  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+    <NGi span="24 s:24 m:24 l:16">
+      <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">平均审批周期趋势（天）</p>
+          <div class="py-3 px-4">
+              <ColumnChart :data="changeData" style="height: 220px" />
+          </div>
+      </NCard>
+    </NGi>
+    <NGi span="24 s:24 m:24 l:8">
+      <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+        :style="{ 
+          borderRadius: themeStore.themeRadius + 'px', 
+          height: '100%',
+          '--theme-color': themeStore.themeColor,
+          '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
+        }"
+      >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
+          <div class="py-3 px-4">
+            <div class="grid grid-cols-2 gap-2">
+              <div v-for="r in DEFAULT_EXPORTS" :key="r" @click="message.success(`演示：${r}已导出 Excel`)"
+                class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm hover:border-[var(--theme-color)] hover:bg-[var(--theme-bg)]">
+                <Icon icon="akar-icons:file" class="size-16px text-slate-400" />
+                {{ r }}
+              </div>
+            </div>
+          </div>
+      </NCard>
+    </NGi>
+  </NGrid>
+</NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/factoryOverview/modules/columnChart.vue b/src/views/factoryOverview/modules/columnChart.vue
index b112e22..0e5f285 100644
--- a/src/views/factoryOverview/modules/columnChart.vue
+++ b/src/views/factoryOverview/modules/columnChart.vue
@@ -1,90 +1,90 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'RingChart'
-});
-
-const props = defineProps<{ data: { name: string; value: number; }[]; }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            textStyle: {
-                color: "#fff",
-            },
-        },
-   },
-    legend: {
-        show:false,
-        bottom: '20%',
-        left: 'center',
-        icon: 'circle',
-        itemWidth: 10,
-        itemHeight: 10,
-        itemStyle: {
-            borderWidth: 0
-        },
-    },
-    grid: {
-        top: "5%",
-        left: "5%",
-        right: "5%",
-        bottom: "11%",
-    },
-    calculable: true,
-    xAxis: [
-        {
-            type: "category",
-            boundaryGap: true, // 新增，固定柱子位置
-            axisLine: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            splitArea: { show: false },
-            data: [] as string[],
-        },
-    ],
-    yAxis: [
-        {
-            type: "value",
-            show: false,
-        },
-    ],
-    series: [
-        {
-            type: "bar",
-            barWidth: 45,
-            barGap: "10%",
-            color: "#2080f0",
-            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
-            data: [] as number[],
-        },
-    ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    let allMonth = props.data.map((item:any) => item.name);
-    let values = props.data.map((item:any) => item.value);
-    opts.xAxis[0].data = allMonth;
-    opts.series[0].data = values;
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; value: number; }[]; }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        show:false,
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "5%",
+        left: "5%",
+        right: "5%",
+        bottom: "11%",
+    },
+    calculable: true,
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: true, // 新增，固定柱子位置
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+            },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            splitArea: { show: false },
+            data: [] as string[],
+        },
+    ],
+    yAxis: [
+        {
+            type: "value",
+            show: false,
+        },
+    ],
+    series: [
+        {
+            type: "bar",
+            barWidth: 45,
+            barGap: "10%",
+            color: "#2080f0",
+            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let values = props.data.map((item:any) => item.value);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = values;
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/my/closeConfirm/index.vue b/src/views/my/closeConfirm/index.vue
index 0e24336..c16fc46 100644
--- a/src/views/my/closeConfirm/index.vue
+++ b/src/views/my/closeConfirm/index.vue
@@ -1,213 +1,213 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from '@/utils/common';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string];}>();
-
-const restoresDone = ref<boolean>(false);
-const restores = ref<{ item: string, done: boolean }[]>([
-    { item: "安全阀起跳压力已恢复至原设定 0.8MPa（恢复操作票 CAO-2026-0812）", done: true },
-    { item: "恢复后运行参数核对：连续 24h 无起跳、阀体无泄漏", done: false },
-    { item: "恢复性检查记录与现场照片已上传", done: false },
-]);
-const canRestore = ref<boolean>(false);
-const readyToClose = ref<boolean>(false);
-
-const checks = ref<{ item: string, done: boolean, note?: string }[]>([
-    { item: "变更验收完成（结论：基本达到 · 遗留项 2 项已登记跟踪）", done: true },
-    { item: "资料上传齐全（验收报告、运行记录、恢复确认记录）", done: false, note: "缺：更新后的安全阀台账" },
-    { item: "行动项全部关闭（4/4，含「关闭前完成」标记项）", done: true },
-    { item: "受控文件已更新至生效版（P&ID Rev.4、操作规程）", done: false, note: "安全阀台账待更新发布" },
-    { item: "培训考核完成（12/12 人），签到与成绩已归档", done: true },
-]);
-
-const archiving = ref<boolean>(false);
-const step = ref<number>(0);
-const archivedHash = ref<string | null>(null);
-const allDone = computed(() => checks.value.every((c: { done: boolean }) => c.done));
-const isCloser = ref<boolean>(true);
-const startArchive = () => { step.value = 0; archiving.value = true; };
-
-// 关闭即归档：自动归档八步流程
-const ARCHIVE_STEPS = [
-    "关闭触发：接收「同意关闭」归档指令（不可逆）",
-    "文件收集：申请表 / 审批记录 / 风险分析 / 培训 / PSSR / 验收单生成 PDF",
-    "附件归集：原始附件、培训签到照片、PSSR 现场照片、验收签字文件",
-    "受控文件复制：生效版与被替代旧版物理复制，与工作区脱离",
-    "清单生成：自动生成归档索引与文件更新清单（新旧版本对照）",
-    "打包锁定：写入归档区（装置 / 年份 / 变更单号），设为只读",
-    "哈希存证：计算归档包 SHA-256 哈希值入库，防篡改校验",
-    "状态更新：变更为「已关闭-已归档」，首页数据同步",
-];
-const closedAt = ref<string | null>(null);
-
-const OVERDUE_LIST = [
-    { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
-    { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
-    { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
-];
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 关闭确认 -->
-    <NCard 
-        :bordered="false" 
-        size="small" 
-        :style="{ 
-            borderRadius: themeStore.themeRadius + 'px',
-            '--error-color': themeStore.otherColor.error,
-            '--success-color': themeStore.otherColor.success,
-            '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
-            '--warning-color': themeStore.otherColor.warning,
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-            '--theme-color': themeStore.themeColor,
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
-        }"
-    >
-        <div class="space-y-4">
-            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="py-3 px-4 border-b flex items-center justify-between">
-                    <div class="flex items-center gap-2 text-base font-semibold">
-                        <Icon icon="system-uicons:reset" class="size-16px text-[var(--error-color)]" />临时变更恢复确认 · 期限 30 天
-                    </div>
-                    <NTag v-if="restoresDone" size="small" type="success">恢复确认完成</NTag>
-                    <NTag v-else size="small" type="error">已超期 4 天 · 已升级上报刘副总</NTag>
-                </div>
-                <div class="p-4">
-                    <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-slate-500">
-                        <span>计划恢复时间：2026-08-14（临时调整起跳压力 0.88MPa → 恢复原设定 0.8MPa）</span>
-                        <span class="text-[var(--error-color)]">超期未恢复：每日 08:00 提醒申请人与属地负责人，已自动升级上报分管领导</span>
-                    </div>
-                    <div class="space-y-2 pt-3">
-                        <div v-for="(r, i) in restores" :key="r.item" class="flex items-center gap-3 rounded-lg border p-3"
-                        :class="r.done ? 'border-emerald-200 bg-emerald-50/40' : 'border-amber-200 bg-amber-50/40'">
-                            <Icon v-if="r.done" icon="material-symbols:check-circle-outline" class="size-20px text-[var(--success-color)]" />
-                            <Icon v-else icon="system-uicons:reset" class="size-18px text-[var(--warning-color)]" />
-                            <div class="flex-1 text-sm">{{ r.item }}</div>
-                            <NButton v-if="!r.done && canRestore" size="small" ghost class="text-xs"
-                                @click="restores = restores.map((x, xi) => (xi === i ? { ...x, done: true } : x)); toast.success('演示：恢复确认完成（移动端可拍照上传凭证）');">
-                                <Icon icon="ant-design:camera-outlined" class="size-16px mr-1" />
-                                确认恢复
-                            </NButton>
-                            <span v-if="!r.done && !canRestore" class="text-xs text-slate-400">待申请人 / 属地负责人确认</span>
-                        </div>
-                    </div>
-                    <div v-if="restoresDone" class="mt-3 rounded-lg bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
-                        临时变更恢复确认完成，恢复操作票、参数核对记录与照片将自动纳入归档包「5-验收记录」
-                    </div>
-                </div>
-            </NCard>
-            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="py-3 px-4 border-b flex items-center justify-between">
-                    <div class="flex items-center gap-2 text-base font-semibold">
-                        <Icon icon="material-symbols:check-circle-outline" class="size-18px text-slate-500" />关闭校验 · MOC-2026-R01-0039（紧急变更补办）
-                    </div>
-                    <NTag v-if="readyToClose" size="small" type="success">校验全绿 · 已推送专责</NTag>
-                    <NTag v-else size="small" type="warning">超期 4 天</NTag>
-                </div>
-                <div class="p-4">
-                    <div class="flex items-center gap-2 rounded-lg bg-[var(--theme-bg)] px-3 py-2 text-xs text-[var(--theme-color)]">
-                        <Icon icon="lucide:bell" class="size-14px" />
-                        前置条件（验收完成 / 资料齐全 / 行动项关闭 / 恢复确认 / 受控文件更新）全部满足后，系统自动推送变更主管部门专责（王海燕 · 安全环保部），并抄送申请人与属地负责人
-                    </div>
-                    <div class="space-y-2 pt-3">
-                        <div v-for="(c, i) in checks" :key="c.item" class="flex items-center gap-3 rounded-lg border p-3"
-                            :class="c.done ? 'border-emerald-200 bg-emerald-50/40' : 'border-red-200 bg-[#FFF2F0]'">
-                            <Icon v-if="c.done" icon="material-symbols:check-circle-outline" class="size-20px text-[var(--success-color)]" />
-                            <Icon v-else icon="ant-design:close-circle-outlined" class="size-18px text-[var(--error-color)]" />
-                            <div class="flex-1 text-sm">{{ c.item }}<span v-if="c.note" class="ml-2 text-xs text-[var(--error-color)]">{{ c.note }}</span></div>
-                            <NButton v-if="!c.done" text type="primary"
-                                @click="checks = checks.map((x, xi) => (xi === i ? { ...x, done: true } : x)); toast.success('演示：资料已补充上传，关闭校验清单已同步更新并重新推送专责');">去补充</NButton>
-                        </div>
-                    </div>
-                    <!-- 关闭按钮区 -->
-                    <div v-if="!archivedHash && !archiving" class="mt-4 space-y-2">
-                        <div v-if="readyToClose" class="flex items-center gap-2 rounded-lg bg-[var(--theme-bg)] px-3 py-2 text-xs text-[var(--theme-color)]">
-                            <Icon icon="lucide:bell" class="size-14px" />
-                            系统已于今日 09:12 自动推送关闭待办至变更主管部门专责（王海燕）· 系统消息 + 企业微信
-                        </div>
-                        <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-slate-50 p-3">
-                            <span class="text-sm text-slate-500">
-                                {{ !restoresDone
-                                ? '临时变更尚未完成恢复确认，禁止关闭（恢复确认是临时变更关闭的前置条件）'
-                                : allDone
-                                    ? isCloser
-                                    ? '全部条件满足。确认关闭后系统记录关闭时间与关闭人，并自动生成归档包（副本归档 · 只读锁定 · 哈希存证）'
-                                    : '全部条件满足，待变更主管部门专责（王海燕 · 安全环保部）确认关闭'
-                                    : '存在未满足条件，禁止关闭；确需例外须填写说明并经分管领导确认' }}
-                            </span>
-                            <NButton v-if="isCloser" size="small" type="primary" :disabled="!readyToClose" class="text-xs" @click="startArchive">
-                                <Icon icon="uil:lock" class="size-14px mr-1" /> 确认关闭并归档
-                            </NButton>
-                            <span v-else class="text-xs text-[var(--warning-color)]">仅变更主管部门专责可确认关闭 · 切换至「王海燕 · 安全工程师」体验</span>
-                        </div>
-                    </div>
-                    <!-- 自动归档流程 -->
-                    <div v-if="archiving" class="mt-4 space-y-1.5 rounded-lg border border-[var(--theme-color)] bg-[var(--theme-bg)] p-4">
-                        <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-[var(--theme-color)]">
-                            <Icon icon="ri:loader-4-fill" class="size-18px animate-spin" />
-                            系统自动归档中，无需人工整理…
-                        </div>
-                        <div v-for="(s, i) in ARCHIVE_STEPS" :key="s" class="flex items-center gap-2 text-xs"
-                            :class="i < step ? 'text-[var(--success-color)]' : i === step ? 'font-medium text-[var(--theme-color)]' : 'text-slate-400'">
-                            <Icon v-if="i < step" icon="material-symbols:check-circle-outline" class="size-16px" />
-                            <Icon v-else-if="i === step" icon="ri:loader-4-fill" class="size-16px animate-spin" />
-                            <span v-else class="h-3.5 w-3.5 shrink-0 rounded-full border border-slate-300"></span>
-                            {{ i + 1 }}. {{ s }}
-                        </div>
-                    </div>
-                    <!-- 归档完成 -->
-                    <div v-if="archivedHash" class="mt-4 space-y-3 rounded-lg border border-emerald-300 bg-emerald-50/60 p-4">
-                        <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-emerald-800">
-                            <Icon icon="uil:lock" class="size-18px" /> 已关闭-已归档 · 归档包只读锁定，任何角色不可修改或删除
-                        </div>
-                        <div class="grid gap-1.5 text-xs text-emerald-800/90 sm:grid-cols-2">
-                        <span>关闭时间：{{ closedAt }} · 关闭人：王海燕（变更管理专责 · 安全环保部）</span>
-                        <span>归档路径：归档区 / 01-常减压装置 / 2026 / MOC-2026-R01-0039/</span>
-                        <span class="flex items-center gap-1"><Hash class="h-3 w-3" /> SHA-256：{{ archivedHash }}</span>
-                        <span>归档内容：6 类文件夹 + 归档索引.txt（共 24 个文件，18.4MB）</span>
-                        <span>防篡改：系统定期校验哈希值，异常自动告警并从备份恢复</span>
-                        </div>
-                        <div class="flex gap-2">
-                        <NButton size="small" type="success" class="text-xs" @click="emit('go', 'knowledge')">
-                            <Icon icon="lucide:folder-archive" class="size-14px mr-1" /> 查看归档包
-                        </NButton>
-                        <NButton size="small" type="primary" class="text-xs" @click="toast.success('演示：下载完整归档包（ZIP，用于外部审计）')">
-                            <Icon icon="material-symbols:download" class="size-18px" /> 下载 ZIP
-                        </NButton>
-                        </div>
-                    </div>
-                </div>
-            </NCard>
-            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="py-3 px-4 border-b flex items-center justify-between">
-                    <div class="flex items-center gap-2 text-base font-semibold">
-                        <Icon icon="proicons:alert-triangle" class="size-18px text-slate-500" />关闭提醒
-                    </div>
-                </div>
-                <div class="space-y-2 p-4">
-                    <div v-for="o in OVERDUE_LIST" :key="o.id" class="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-3 py-2">
-                        <div class="min-w-0">
-                            <div class="truncate text-sm">{{ o.title }}</div>
-                            <div class="text-xs text-slate-500">{{ o.id }} · {{ o.stage }}</div>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <NTag size="small" type="error">超期 {{ o.days }} 天</NTag>
-                            <NButton size="small" class="text-xs" @click="toast.info('演示：已催办（系统消息 + 企业微信）')">催办</NButton>
-                        </div>
-                    </div>
-                </div>
-            </NCard>
-        </div>
-    </NCard>
-</NSpace>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const emit = defineEmits<{ go: [v: string, preset?: string];}>();
+
+const restoresDone = ref<boolean>(false);
+const restores = ref<{ item: string, done: boolean }[]>([
+    { item: "安全阀起跳压力已恢复至原设定 0.8MPa（恢复操作票 CAO-2026-0812）", done: true },
+    { item: "恢复后运行参数核对：连续 24h 无起跳、阀体无泄漏", done: false },
+    { item: "恢复性检查记录与现场照片已上传", done: false },
+]);
+const canRestore = ref<boolean>(false);
+const readyToClose = ref<boolean>(false);
+
+const checks = ref<{ item: string, done: boolean, note?: string }[]>([
+    { item: "变更验收完成（结论：基本达到 · 遗留项 2 项已登记跟踪）", done: true },
+    { item: "资料上传齐全（验收报告、运行记录、恢复确认记录）", done: false, note: "缺：更新后的安全阀台账" },
+    { item: "行动项全部关闭（4/4，含「关闭前完成」标记项）", done: true },
+    { item: "受控文件已更新至生效版（P&ID Rev.4、操作规程）", done: false, note: "安全阀台账待更新发布" },
+    { item: "培训考核完成（12/12 人），签到与成绩已归档", done: true },
+]);
+
+const archiving = ref<boolean>(false);
+const step = ref<number>(0);
+const archivedHash = ref<string | null>(null);
+const allDone = computed(() => checks.value.every((c: { done: boolean }) => c.done));
+const isCloser = ref<boolean>(true);
+const startArchive = () => { step.value = 0; archiving.value = true; };
+
+// 关闭即归档：自动归档八步流程
+const ARCHIVE_STEPS = [
+    "关闭触发：接收「同意关闭」归档指令（不可逆）",
+    "文件收集：申请表 / 审批记录 / 风险分析 / 培训 / PSSR / 验收单生成 PDF",
+    "附件归集：原始附件、培训签到照片、PSSR 现场照片、验收签字文件",
+    "受控文件复制：生效版与被替代旧版物理复制，与工作区脱离",
+    "清单生成：自动生成归档索引与文件更新清单（新旧版本对照）",
+    "打包锁定：写入归档区（装置 / 年份 / 变更单号），设为只读",
+    "哈希存证：计算归档包 SHA-256 哈希值入库，防篡改校验",
+    "状态更新：变更为「已关闭-已归档」，首页数据同步",
+];
+const closedAt = ref<string | null>(null);
+
+const OVERDUE_LIST = [
+    { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
+    { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
+    { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
+];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 关闭确认 -->
+    <NCard 
+        :bordered="false" 
+        size="small" 
+        :style="{ 
+            borderRadius: themeStore.themeRadius + 'px',
+            '--error-color': themeStore.otherColor.error,
+            '--success-color': themeStore.otherColor.success,
+            '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
+            '--warning-color': themeStore.otherColor.warning,
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+            '--theme-color': themeStore.themeColor,
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
+        }"
+    >
+        <div class="space-y-4">
+            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="py-3 px-4 border-b flex items-center justify-between">
+                    <div class="flex items-center gap-2 text-base font-semibold">
+                        <Icon icon="system-uicons:reset" class="size-16px text-[var(--error-color)]" />临时变更恢复确认 · 期限 30 天
+                    </div>
+                    <NTag v-if="restoresDone" size="small" type="success">恢复确认完成</NTag>
+                    <NTag v-else size="small" type="error">已超期 4 天 · 已升级上报刘副总</NTag>
+                </div>
+                <div class="p-4">
+                    <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-slate-500">
+                        <span>计划恢复时间：2026-08-14（临时调整起跳压力 0.88MPa → 恢复原设定 0.8MPa）</span>
+                        <span class="text-[var(--error-color)]">超期未恢复：每日 08:00 提醒申请人与属地负责人，已自动升级上报分管领导</span>
+                    </div>
+                    <div class="space-y-2 pt-3">
+                        <div v-for="(r, i) in restores" :key="r.item" class="flex items-center gap-3 rounded-lg border p-3"
+                        :class="r.done ? 'border-emerald-200 bg-emerald-50/40' : 'border-amber-200 bg-amber-50/40'">
+                            <Icon v-if="r.done" icon="material-symbols:check-circle-outline" class="size-20px text-[var(--success-color)]" />
+                            <Icon v-else icon="system-uicons:reset" class="size-18px text-[var(--warning-color)]" />
+                            <div class="flex-1 text-sm">{{ r.item }}</div>
+                            <NButton v-if="!r.done && canRestore" size="small" ghost class="text-xs"
+                                @click="restores = restores.map((x, xi) => (xi === i ? { ...x, done: true } : x)); toast.success('演示：恢复确认完成（移动端可拍照上传凭证）');">
+                                <Icon icon="ant-design:camera-outlined" class="size-16px mr-1" />
+                                确认恢复
+                            </NButton>
+                            <span v-if="!r.done && !canRestore" class="text-xs text-slate-400">待申请人 / 属地负责人确认</span>
+                        </div>
+                    </div>
+                    <div v-if="restoresDone" class="mt-3 rounded-lg bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
+                        临时变更恢复确认完成，恢复操作票、参数核对记录与照片将自动纳入归档包「5-验收记录」
+                    </div>
+                </div>
+            </NCard>
+            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="py-3 px-4 border-b flex items-center justify-between">
+                    <div class="flex items-center gap-2 text-base font-semibold">
+                        <Icon icon="material-symbols:check-circle-outline" class="size-18px text-slate-500" />关闭校验 · MOC-2026-R01-0039（紧急变更补办）
+                    </div>
+                    <NTag v-if="readyToClose" size="small" type="success">校验全绿 · 已推送专责</NTag>
+                    <NTag v-else size="small" type="warning">超期 4 天</NTag>
+                </div>
+                <div class="p-4">
+                    <div class="flex items-center gap-2 rounded-lg bg-[var(--theme-bg)] px-3 py-2 text-xs text-[var(--theme-color)]">
+                        <Icon icon="lucide:bell" class="size-14px" />
+                        前置条件（验收完成 / 资料齐全 / 行动项关闭 / 恢复确认 / 受控文件更新）全部满足后，系统自动推送变更主管部门专责（王海燕 · 安全环保部），并抄送申请人与属地负责人
+                    </div>
+                    <div class="space-y-2 pt-3">
+                        <div v-for="(c, i) in checks" :key="c.item" class="flex items-center gap-3 rounded-lg border p-3"
+                            :class="c.done ? 'border-emerald-200 bg-emerald-50/40' : 'border-red-200 bg-[#FFF2F0]'">
+                            <Icon v-if="c.done" icon="material-symbols:check-circle-outline" class="size-20px text-[var(--success-color)]" />
+                            <Icon v-else icon="ant-design:close-circle-outlined" class="size-18px text-[var(--error-color)]" />
+                            <div class="flex-1 text-sm">{{ c.item }}<span v-if="c.note" class="ml-2 text-xs text-[var(--error-color)]">{{ c.note }}</span></div>
+                            <NButton v-if="!c.done" text type="primary"
+                                @click="checks = checks.map((x, xi) => (xi === i ? { ...x, done: true } : x)); toast.success('演示：资料已补充上传，关闭校验清单已同步更新并重新推送专责');">去补充</NButton>
+                        </div>
+                    </div>
+                    <!-- 关闭按钮区 -->
+                    <div v-if="!archivedHash && !archiving" class="mt-4 space-y-2">
+                        <div v-if="readyToClose" class="flex items-center gap-2 rounded-lg bg-[var(--theme-bg)] px-3 py-2 text-xs text-[var(--theme-color)]">
+                            <Icon icon="lucide:bell" class="size-14px" />
+                            系统已于今日 09:12 自动推送关闭待办至变更主管部门专责（王海燕）· 系统消息 + 企业微信
+                        </div>
+                        <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-slate-50 p-3">
+                            <span class="text-sm text-slate-500">
+                                {{ !restoresDone
+                                ? '临时变更尚未完成恢复确认，禁止关闭（恢复确认是临时变更关闭的前置条件）'
+                                : allDone
+                                    ? isCloser
+                                    ? '全部条件满足。确认关闭后系统记录关闭时间与关闭人，并自动生成归档包（副本归档 · 只读锁定 · 哈希存证）'
+                                    : '全部条件满足，待变更主管部门专责（王海燕 · 安全环保部）确认关闭'
+                                    : '存在未满足条件，禁止关闭；确需例外须填写说明并经分管领导确认' }}
+                            </span>
+                            <NButton v-if="isCloser" size="small" type="primary" :disabled="!readyToClose" class="text-xs" @click="startArchive">
+                                <Icon icon="uil:lock" class="size-14px mr-1" /> 确认关闭并归档
+                            </NButton>
+                            <span v-else class="text-xs text-[var(--warning-color)]">仅变更主管部门专责可确认关闭 · 切换至「王海燕 · 安全工程师」体验</span>
+                        </div>
+                    </div>
+                    <!-- 自动归档流程 -->
+                    <div v-if="archiving" class="mt-4 space-y-1.5 rounded-lg border border-[var(--theme-color)] bg-[var(--theme-bg)] p-4">
+                        <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-[var(--theme-color)]">
+                            <Icon icon="ri:loader-4-fill" class="size-18px animate-spin" />
+                            系统自动归档中，无需人工整理…
+                        </div>
+                        <div v-for="(s, i) in ARCHIVE_STEPS" :key="s" class="flex items-center gap-2 text-xs"
+                            :class="i < step ? 'text-[var(--success-color)]' : i === step ? 'font-medium text-[var(--theme-color)]' : 'text-slate-400'">
+                            <Icon v-if="i < step" icon="material-symbols:check-circle-outline" class="size-16px" />
+                            <Icon v-else-if="i === step" icon="ri:loader-4-fill" class="size-16px animate-spin" />
+                            <span v-else class="h-3.5 w-3.5 shrink-0 rounded-full border border-slate-300"></span>
+                            {{ i + 1 }}. {{ s }}
+                        </div>
+                    </div>
+                    <!-- 归档完成 -->
+                    <div v-if="archivedHash" class="mt-4 space-y-3 rounded-lg border border-emerald-300 bg-emerald-50/60 p-4">
+                        <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-emerald-800">
+                            <Icon icon="uil:lock" class="size-18px" /> 已关闭-已归档 · 归档包只读锁定，任何角色不可修改或删除
+                        </div>
+                        <div class="grid gap-1.5 text-xs text-emerald-800/90 sm:grid-cols-2">
+                        <span>关闭时间：{{ closedAt }} · 关闭人：王海燕（变更管理专责 · 安全环保部）</span>
+                        <span>归档路径：归档区 / 01-常减压装置 / 2026 / MOC-2026-R01-0039/</span>
+                        <span class="flex items-center gap-1"><Hash class="h-3 w-3" /> SHA-256：{{ archivedHash }}</span>
+                        <span>归档内容：6 类文件夹 + 归档索引.txt（共 24 个文件，18.4MB）</span>
+                        <span>防篡改：系统定期校验哈希值，异常自动告警并从备份恢复</span>
+                        </div>
+                        <div class="flex gap-2">
+                        <NButton size="small" type="success" class="text-xs" @click="emit('go', 'knowledge')">
+                            <Icon icon="lucide:folder-archive" class="size-14px mr-1" /> 查看归档包
+                        </NButton>
+                        <NButton size="small" type="primary" class="text-xs" @click="toast.success('演示：下载完整归档包（ZIP，用于外部审计）')">
+                            <Icon icon="material-symbols:download" class="size-18px" /> 下载 ZIP
+                        </NButton>
+                        </div>
+                    </div>
+                </div>
+            </NCard>
+            <NCard :bordered="true" :content-style="{ padding: '0' }" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="py-3 px-4 border-b flex items-center justify-between">
+                    <div class="flex items-center gap-2 text-base font-semibold">
+                        <Icon icon="proicons:alert-triangle" class="size-18px text-slate-500" />关闭提醒
+                    </div>
+                </div>
+                <div class="space-y-2 p-4">
+                    <div v-for="o in OVERDUE_LIST" :key="o.id" class="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-3 py-2">
+                        <div class="min-w-0">
+                            <div class="truncate text-sm">{{ o.title }}</div>
+                            <div class="text-xs text-slate-500">{{ o.id }} · {{ o.stage }}</div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <NTag size="small" type="error">超期 {{ o.days }} 天</NTag>
+                            <NButton size="small" class="text-xs" @click="toast.info('演示：已催办（系统消息 + 企业微信）')">催办</NButton>
+                        </div>
+                    </div>
+                </div>
+            </NCard>
+        </div>
+    </NCard>
+</NSpace>
 </template>
\ No newline at end of file
diff --git a/src/views/my/dataChangeCenter/index.vue b/src/views/my/dataChangeCenter/index.vue
index 9e4e4ff..9bc9f72 100644
--- a/src/views/my/dataChangeCenter/index.vue
+++ b/src/views/my/dataChangeCenter/index.vue
@@ -1,280 +1,280 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from "@/utils/common";
-import ColumnChart from './modules/columnChart.vue';
-import RingChart from "./modules/ringChart.vue";
-import RingChart2 from "./modules/ringChart2.vue";
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string]; openChange: [c: any] }>();
-
-const range = ref("近一年");
-const rangeOptions = [
-    {label: "近一年", value: "近一年"},
-    {label: "近半年", value: "近半年"},
-    {label: "近三个月", value: "近三个月"},
-    {label: "近一个月", value: "近一个月"},
-];
-
-const changeData = ref([
-  {
-    name: '一车间',
-    value: 42,
-  },
-  {
-    name: '二车间',
-    value: 35,
-  },
-  {
-    name: '三车间',
-    value: 28,
-  },
-  {
-    name: '供应部',
-    value: 12,
-  },
-  {
-    name: '质量部',
-    value: 9,
-  },
-]);
-
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 58 },
-  { name: "设备", value: 41 },
-  { name: "管理", value: 27 },
-];
-const ACCEPT_COLORS = ["#2080f0", "#faad14", "#52c41a"];
-
-const DEPT_ACCEPT2 = [
-  { name: "完全达到", value: 13, money:  61.2, rate: 68 },
-  { name: "基本达到", value: 4, money: 19.8, rate: 21 },
-  { name: "未达到", value: 2, money: 5.4, rate: 11 },
-];
-const ACCEPT_COLORS2 = ["#52c41a", "#faad14", "#ff4d4f"];
-
-const residualHigh = ref<{id: string, title: string}>({id:'MOC-2026-R01-0035',title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）'});
-
-
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 我的工作台 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div class="flex flex-wrap items-center gap-2">
-            <p class="text-sm font-bold text-slate-800">全厂变更数据中心</p>
-            <p class="text-[11px] text-slate-400 mt-[1px]">时间相关数据统一在此查询 · 统计时段</p>
-            <NSelect v-model:value="range" :options="rangeOptions" size="tiny" class="w-28" />
-            <NButton ghost size="small" class="ml-auto text-xs">导出</NButton>
-        </div>
-    </NCard>
-    <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="gap" :y-gap="16" 
-        :style="{ 
-            '--theme-color': themeStore.themeColor,
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.2),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.2),
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.2),
-            '--error-color': themeStore.otherColor.error,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error, 0.2),
-        }"
-    >
-        <NGi>
-            <div 
-                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                @click="emit('go', 'tasks')"
-            >
-                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--theme-bg)]">
-                    <Icon icon="akar-icons:file" class="size-24px text-[--theme-color]" />
-                </span>
-                <div class="flex flex-col">
-                    <CountTo
-                    :start-value="0"
-                    :end-value="126"
-                    class="text-26px font-600"
-                    />
-                    <p class="text-[11px] font-semibold text-slate-400">变更总数 · {{ range }}</p>
-                </div>
-            </div>
-        </NGi>
-        <NGi>
-            <div 
-                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                @click="emit('go', 'tasks')"
-            >
-                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
-                    <Icon icon="lucide:shield-check" class="size-24px text-[--warning-color]" />
-                </span>
-                <div class="flex flex-col">
-                    <CountTo
-                    :start-value="0"
-                    :end-value="18"
-                    class="text-26px font-600"
-                    />
-                    <p class="text-[11px] font-semibold text-slate-400">重要变更数量 · {{ range }} · 占比 14%</p>
-                </div>
-            </div>
-        </NGi>
-        <NGi>
-            <div 
-                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                @click="emit('go', 'tasks')"
-            >
-                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
-                    <Icon icon="lucide:shield-check" class="size-24px text-[--warning-color]" />
-                </span>
-                <div class="flex flex-col">
-                    <div class="flex items-center">
-                        <CountTo
-                            :start-value="0"
-                            :end-value="4"
-                            class="text-26px font-600 text-[var(--error-color)]"
-                        />
-                        <p class="text-26px font-600 text-[var(--error-color)]"> 高 /</p>
-                        <CountTo
-                            :start-value="0"
-                            :end-value="11"
-                            class="text-26px font-600 text-[var(--error-color)]"
-                        /><p class="text-26px font-600 text-[var(--error-color)]"> 中</p>
-                    </div>
-                    <p class="text-[11px] font-semibold text-slate-400">变更新增风险 · 剩余高风险 1 · 剩余中风险 6</p>
-                </div>
-            </div>
-        </NGi>
-        <NGi>
-            <div 
-                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                @click="emit('go', 'tasks')"
-            >
-                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--success-bg)]">
-                    <Icon icon="material-symbols:check-circle-outline" class="size-24px text-[--success-color]" />
-                </span>
-                <div class="flex flex-col">
-                    <CountTo
-                    :start-value="0"
-                    :end-value="86.4"
-                    class="text-26px font-600"
-                    />
-                    <p class="text-[11px] font-semibold text-slate-400">验收投入合计 · 已验收 19 起 · 完全达标率 68%</p>
-                </div>
-            </div>
-        </NGi>
-    </NGrid>
-    
-    <NGrid 
-      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
-      :style="{
-        '--theme-color':themeStore.themeColor
-      }"
-    >
-      <NGi span="24 s:24 m:24 l:14">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <div class="flex items-center mb-3 gap-2">
-                <Icon icon="akar-icons:file" class="size-16px text-[--theme-color]" />
-                <p class="text-13px font-700 text-#64749a">各车间变更数量</p>
-                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 按申请部门</p>
-            </div>
-            <ColumnChart :data="changeData" style="height: 100%;" />
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:10">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <div class="flex items-center mb-3 gap-2">
-                <Icon icon="akar-icons:file" class="size-16px text-[--theme-color]" />
-                <p class="text-13px font-700 text-#64749a">变更类型分布</p>
-                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 工艺 / 设备 / 管理</p>
-            </div>
-            <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" :range="range" />
-        </NCard>
-      </NGi>
-    </NGrid>
-
-    <NGrid 
-      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
-      :style="{
-        '--error-color':themeStore.otherColor.error,
-        '--warning-color':themeStore.otherColor.warning,
-        '--success-color':themeStore.otherColor.success,
-        '--theme-color':themeStore.themeColor
-      }"
-    >
-      <NGi span="24 s:24 m:24 l:10">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <div class="flex items-center mb-3 gap-2">
-                <Icon icon="lucide:shield-alert" class="size-16px text-[--theme-color]" />
-                <p class="text-13px font-700 text-#64749a">风险增量与管控</p>
-                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 变更新增风险与管控落实</p>
-            </div>
-            <div class="space-y-2.5">
-                <div class="grid grid-cols-2 gap-2">
-                    <div class="rounded-lg bg-red-50 px-3 py-2">
-                    <div class="text-[11px] text-[var(--error-color)]">新增固有高风险项</div>
-                    <div class="text-xl font-bold text-[var(--error-color)]">4</div>
-                    </div>
-                    <div class="rounded-lg bg-amber-50 px-3 py-2">
-                    <div class="text-[11px] text-[var(--warning-color)]">新增中风险项</div>
-                    <div class="text-xl font-bold text-[var(--warning-color)]">11</div>
-                    </div>
-                    <div class="rounded-lg bg-slate-50 px-3 py-2">
-                    <div class="text-[11px] text-slate-500">剩余高风险项</div>
-                    <div class="text-xl font-bold text-slate-800">1</div>
-                    </div>
-                    <div class="rounded-lg bg-slate-50 px-3 py-2">
-                    <div class="text-[11px] text-slate-500">剩余中风险项</div>
-                    <div class="text-xl font-bold text-slate-800">6</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="flex justify-between text-[11px] text-slate-500">
-                    <span>管控措施落实率</span>
-                    <span class="font-semibold text-[var(--success-color)]">96%</span>
-                    </div>
-                    <div class="mt-1 h-2 w-full rounded-full bg-slate-100">
-                    <div class="h-2 rounded-full bg-[var(--success-color)]" style="width: 96%" />
-                    </div>
-                </div>
-                <div v-if="residualHigh.id" @click="emit('openChange', residualHigh)"
-                    class="cursor-pointer w-full rounded-lg border border-red-100 bg-[#FFF2F0] px-3 py-2 text-left transition hover:border-red-300">
-                    <span class="block text-[11px] font-medium text-[var(--error-color)]">剩余高风险 · 措施落实中</span>
-                    <span class="mt-0.5 block truncate text-xs font-medium text-slate-800">{{ residualHigh.title }}</span>
-                    <span class="mt-0.5 block text-[11px] text-slate-400">{{ residualHigh.id }} · 电机吊装作业管控措施执行跟踪</span>
-                </div>
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:14">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <div class="flex items-center mb-3 gap-2">
-                <Icon icon="material-symbols:check-circle-outline" class="size-16px text-[--theme-color]" />
-                <p class="text-13px font-700 text-#64749a">变更投入和效果</p>
-                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 支持查询验收明细</p>
-            </div>
-            <RingChart2 :data="DEPT_ACCEPT2" :colors="ACCEPT_COLORS2" style="height: 210px;" />
-            <div class="flex items-center justify-between border-slate-200 pt-1.5">
-                <span class="text-[11px] text-slate-400">投入合计（变更材料和实施费） · 完全达到率 68%</span>
-                <span class="text-xs font-bold text-[var(--theme-color)]">86.4 万元</span>
-            </div>
-            <div @click="emit('go', 'invest')"
-            class="cursor-pointer mt-3 flex w-full items-center justify-center gap-1 rounded-lg border border-dashed py-2 text-[11px] text-slate-400 transition hover:border-[#6E93C6] hover:text-[#1D4E9C]">
-            验收明细（名称 / 日期链 / 费用 / 结论）见左边栏「变更效果跟踪」<ChevronRight class="h-3 w-3" />
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-  </NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from "@/utils/common";
+import ColumnChart from './modules/columnChart.vue';
+import RingChart from "./modules/ringChart.vue";
+import RingChart2 from "./modules/ringChart2.vue";
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const emit = defineEmits<{ go: [v: string, preset?: string]; openChange: [c: any] }>();
+
+const range = ref("近一年");
+const rangeOptions = [
+    {label: "近一年", value: "近一年"},
+    {label: "近半年", value: "近半年"},
+    {label: "近三个月", value: "近三个月"},
+    {label: "近一个月", value: "近一个月"},
+];
+
+const changeData = ref([
+  {
+    name: '一车间',
+    value: 42,
+  },
+  {
+    name: '二车间',
+    value: 35,
+  },
+  {
+    name: '三车间',
+    value: 28,
+  },
+  {
+    name: '供应部',
+    value: 12,
+  },
+  {
+    name: '质量部',
+    value: 9,
+  },
+]);
+
+const DEPT_ACCEPT = [
+  { name: "工艺", value: 58 },
+  { name: "设备", value: 41 },
+  { name: "管理", value: 27 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#faad14", "#52c41a"];
+
+const DEPT_ACCEPT2 = [
+  { name: "完全达到", value: 13, money:  61.2, rate: 68 },
+  { name: "基本达到", value: 4, money: 19.8, rate: 21 },
+  { name: "未达到", value: 2, money: 5.4, rate: 11 },
+];
+const ACCEPT_COLORS2 = ["#52c41a", "#faad14", "#ff4d4f"];
+
+const residualHigh = ref<{id: string, title: string}>({id:'MOC-2026-R01-0035',title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）'});
+
+
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 我的工作台 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div class="flex flex-wrap items-center gap-2">
+            <p class="text-sm font-bold text-slate-800">全厂变更数据中心</p>
+            <p class="text-[11px] text-slate-400 mt-[1px]">时间相关数据统一在此查询 · 统计时段</p>
+            <NSelect v-model:value="range" :options="rangeOptions" size="tiny" class="w-28" />
+            <NButton ghost size="small" class="ml-auto text-xs">导出</NButton>
+        </div>
+    </NCard>
+    <!-- 卡片数据 -->
+    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="gap" :y-gap="16" 
+        :style="{ 
+            '--theme-color': themeStore.themeColor,
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.2),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.2),
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.2),
+            '--error-color': themeStore.otherColor.error,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error, 0.2),
+        }"
+    >
+        <NGi>
+            <div 
+                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                @click="emit('go', 'tasks')"
+            >
+                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--theme-bg)]">
+                    <Icon icon="akar-icons:file" class="size-24px text-[--theme-color]" />
+                </span>
+                <div class="flex flex-col">
+                    <CountTo
+                    :start-value="0"
+                    :end-value="126"
+                    class="text-26px font-600"
+                    />
+                    <p class="text-[11px] font-semibold text-slate-400">变更总数 · {{ range }}</p>
+                </div>
+            </div>
+        </NGi>
+        <NGi>
+            <div 
+                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                @click="emit('go', 'tasks')"
+            >
+                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
+                    <Icon icon="lucide:shield-check" class="size-24px text-[--warning-color]" />
+                </span>
+                <div class="flex flex-col">
+                    <CountTo
+                    :start-value="0"
+                    :end-value="18"
+                    class="text-26px font-600"
+                    />
+                    <p class="text-[11px] font-semibold text-slate-400">重要变更数量 · {{ range }} · 占比 14%</p>
+                </div>
+            </div>
+        </NGi>
+        <NGi>
+            <div 
+                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                @click="emit('go', 'tasks')"
+            >
+                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
+                    <Icon icon="lucide:shield-check" class="size-24px text-[--warning-color]" />
+                </span>
+                <div class="flex flex-col">
+                    <div class="flex items-center">
+                        <CountTo
+                            :start-value="0"
+                            :end-value="4"
+                            class="text-26px font-600 text-[var(--error-color)]"
+                        />
+                        <p class="text-26px font-600 text-[var(--error-color)]"> 高 /</p>
+                        <CountTo
+                            :start-value="0"
+                            :end-value="11"
+                            class="text-26px font-600 text-[var(--error-color)]"
+                        /><p class="text-26px font-600 text-[var(--error-color)]"> 中</p>
+                    </div>
+                    <p class="text-[11px] font-semibold text-slate-400">变更新增风险 · 剩余高风险 1 · 剩余中风险 6</p>
+                </div>
+            </div>
+        </NGi>
+        <NGi>
+            <div 
+                class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                @click="emit('go', 'tasks')"
+            >
+                <span class="shrink-0 rounded-lg p-2.5 bg-[var(--success-bg)]">
+                    <Icon icon="material-symbols:check-circle-outline" class="size-24px text-[--success-color]" />
+                </span>
+                <div class="flex flex-col">
+                    <CountTo
+                    :start-value="0"
+                    :end-value="86.4"
+                    class="text-26px font-600"
+                    />
+                    <p class="text-[11px] font-semibold text-slate-400">验收投入合计 · 已验收 19 起 · 完全达标率 68%</p>
+                </div>
+            </div>
+        </NGi>
+    </NGrid>
+    
+    <NGrid 
+      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+      :style="{
+        '--theme-color':themeStore.themeColor
+      }"
+    >
+      <NGi span="24 s:24 m:24 l:14">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <div class="flex items-center mb-3 gap-2">
+                <Icon icon="akar-icons:file" class="size-16px text-[--theme-color]" />
+                <p class="text-13px font-700 text-#64749a">各车间变更数量</p>
+                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 按申请部门</p>
+            </div>
+            <ColumnChart :data="changeData" style="height: 100%;" />
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:10">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <div class="flex items-center mb-3 gap-2">
+                <Icon icon="akar-icons:file" class="size-16px text-[--theme-color]" />
+                <p class="text-13px font-700 text-#64749a">变更类型分布</p>
+                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 工艺 / 设备 / 管理</p>
+            </div>
+            <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" :range="range" />
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid 
+      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+      :style="{
+        '--error-color':themeStore.otherColor.error,
+        '--warning-color':themeStore.otherColor.warning,
+        '--success-color':themeStore.otherColor.success,
+        '--theme-color':themeStore.themeColor
+      }"
+    >
+      <NGi span="24 s:24 m:24 l:10">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <div class="flex items-center mb-3 gap-2">
+                <Icon icon="lucide:shield-alert" class="size-16px text-[--theme-color]" />
+                <p class="text-13px font-700 text-#64749a">风险增量与管控</p>
+                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 变更新增风险与管控落实</p>
+            </div>
+            <div class="space-y-2.5">
+                <div class="grid grid-cols-2 gap-2">
+                    <div class="rounded-lg bg-red-50 px-3 py-2">
+                    <div class="text-[11px] text-[var(--error-color)]">新增固有高风险项</div>
+                    <div class="text-xl font-bold text-[var(--error-color)]">4</div>
+                    </div>
+                    <div class="rounded-lg bg-amber-50 px-3 py-2">
+                    <div class="text-[11px] text-[var(--warning-color)]">新增中风险项</div>
+                    <div class="text-xl font-bold text-[var(--warning-color)]">11</div>
+                    </div>
+                    <div class="rounded-lg bg-slate-50 px-3 py-2">
+                    <div class="text-[11px] text-slate-500">剩余高风险项</div>
+                    <div class="text-xl font-bold text-slate-800">1</div>
+                    </div>
+                    <div class="rounded-lg bg-slate-50 px-3 py-2">
+                    <div class="text-[11px] text-slate-500">剩余中风险项</div>
+                    <div class="text-xl font-bold text-slate-800">6</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between text-[11px] text-slate-500">
+                    <span>管控措施落实率</span>
+                    <span class="font-semibold text-[var(--success-color)]">96%</span>
+                    </div>
+                    <div class="mt-1 h-2 w-full rounded-full bg-slate-100">
+                    <div class="h-2 rounded-full bg-[var(--success-color)]" style="width: 96%" />
+                    </div>
+                </div>
+                <div v-if="residualHigh.id" @click="emit('openChange', residualHigh)"
+                    class="cursor-pointer w-full rounded-lg border border-red-100 bg-[#FFF2F0] px-3 py-2 text-left transition hover:border-red-300">
+                    <span class="block text-[11px] font-medium text-[var(--error-color)]">剩余高风险 · 措施落实中</span>
+                    <span class="mt-0.5 block truncate text-xs font-medium text-slate-800">{{ residualHigh.title }}</span>
+                    <span class="mt-0.5 block text-[11px] text-slate-400">{{ residualHigh.id }} · 电机吊装作业管控措施执行跟踪</span>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:14">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <div class="flex items-center mb-3 gap-2">
+                <Icon icon="material-symbols:check-circle-outline" class="size-16px text-[--theme-color]" />
+                <p class="text-13px font-700 text-#64749a">变更投入和效果</p>
+                <p class="text-11px text-#94a3b8 mt-2px">{{range}} · 支持查询验收明细</p>
+            </div>
+            <RingChart2 :data="DEPT_ACCEPT2" :colors="ACCEPT_COLORS2" style="height: 210px;" />
+            <div class="flex items-center justify-between border-slate-200 pt-1.5">
+                <span class="text-[11px] text-slate-400">投入合计（变更材料和实施费） · 完全达到率 68%</span>
+                <span class="text-xs font-bold text-[var(--theme-color)]">86.4 万元</span>
+            </div>
+            <div @click="emit('go', 'invest')"
+            class="cursor-pointer mt-3 flex w-full items-center justify-center gap-1 rounded-lg border border-dashed py-2 text-[11px] text-slate-400 transition hover:border-[#6E93C6] hover:text-[#1D4E9C]">
+            验收明细（名称 / 日期链 / 费用 / 结论）见左边栏「变更效果跟踪」<ChevronRight class="h-3 w-3" />
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+  </NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/my/dataChangeCenter/modules/columnChart.vue b/src/views/my/dataChangeCenter/modules/columnChart.vue
index 069dc7a..fd7e233 100644
--- a/src/views/my/dataChangeCenter/modules/columnChart.vue
+++ b/src/views/my/dataChangeCenter/modules/columnChart.vue
@@ -1,90 +1,90 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'RingChart'
-});
-
-const props = defineProps<{ data: { name: string; value: number; }[]; }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            textStyle: {
-                color: "#fff",
-            },
-        },
-   },
-    legend: {
-        show:false,
-        bottom: '20%',
-        left: 'center',
-        icon: 'circle',
-        itemWidth: 10,
-        itemHeight: 10,
-        itemStyle: {
-            borderWidth: 0
-        },
-    },
-    grid: {
-        top: "5%",
-        left: "5%",
-        right: "5%",
-        bottom: "5%",
-    },
-    calculable: true,
-    xAxis: [
-        {
-            type: "category",
-            boundaryGap: true, // 新增，固定柱子位置
-            axisLine: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            splitArea: { show: false },
-            data: [] as string[],
-        },
-    ],
-    yAxis: [
-        {
-            type: "value",
-            show: false,
-        },
-    ],
-    series: [
-        {
-            type: "bar",
-            barWidth: 45,
-            barGap: "10%",
-            color: "#2080f0",
-            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
-            data: [] as number[],
-        },
-    ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    let allMonth = props.data.map((item:any) => item.name);
-    let values = props.data.map((item:any) => item.value);
-    opts.xAxis[0].data = allMonth;
-    opts.series[0].data = values;
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; value: number; }[]; }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        show:false,
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "5%",
+        left: "5%",
+        right: "5%",
+        bottom: "5%",
+    },
+    calculable: true,
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: true, // 新增，固定柱子位置
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+            },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            splitArea: { show: false },
+            data: [] as string[],
+        },
+    ],
+    yAxis: [
+        {
+            type: "value",
+            show: false,
+        },
+    ],
+    series: [
+        {
+            type: "bar",
+            barWidth: 45,
+            barGap: "10%",
+            color: "#2080f0",
+            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let values = props.data.map((item:any) => item.value);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = values;
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/my/effect/index.vue b/src/views/my/effect/index.vue
index 76fb991..80b1651 100644
--- a/src/views/my/effect/index.vue
+++ b/src/views/my/effect/index.vue
@@ -1,126 +1,126 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-
-const loading = ref<boolean>(false);
-const list = ref<any[]>([]);
-const lists = [
-  { title: "氮气管网压力分级调整", id: "MOC-2026-R01-0024", applicant: "张工艺", type: "工艺", level: "重要", duration: "永久", applyDate: "2026-05-28", useTime: "2026-06-20", acceptDate: "2026-07-08", cost: 3.2, result: "完全达到" },
-  { title: "R-201 搅拌密封改造", id: "MOC-2026-R01-0019", applicant: "张工艺", type: "设备", level: "一般", duration: "永久", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
-  { title: "循环水加药泵冲程临时调整", id: "MOC-2026-R01-0022", applicant: "张工艺", type: "设备", level: "一般", duration: "临时", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
-];
-// 获取列表数据
-const getList = () => {
-    loading.value = true;
-    setTimeout(() => {
-        list.value = lists;
-        loading.value = false;
-    }, 1000);
-}
-
-// 导出文件
-const exportFile = () => {
-    window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`)
-}
-// 查看
-const openRow = (r: any) => {
-    window.$message?.info(`打开变更详情页 ${r.id}（含验收报告与费用明细）`);
-};
-
-
-onMounted(() => {
-    getList();
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- PSSR监督 -->
-    <NSpin :show="loading" size="small">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <div
-                class="h-100% flex flex-wrap items-center gap-x-5 gap-y-2 border border-slate-200 px-3 py-2 mb-3"
-                :style="{ 
-                    borderRadius: themeStore.themeRadius + 'px',
-                    '--success-bg': themeStore.otherColor.success,
-                    '--warning-bg': themeStore.otherColor.warning,
-                    '--error-bg': themeStore.otherColor.error,
-                }"
-            >
-                <span class="text-sm font-bold text-slate-800">本车间已验收变更</span>
-                <span class="text-xs text-slate-500">共 <b class="text-[#1D4E9C]">{{ list.length }}</b> 起</span>
-                <span class="text-xs text-slate-500">投入合计 <b class="text-[#1D4E9C]">11.5</b> 万元</span>
-                <span class="text-xs text-slate-500">完全达到率 <b class="text-[var(--success-bg)]">67%</b></span>
-                <span class="hidden h-4 w-px bg-slate-200 sm:block"></span>
-                <span class="text-xs text-slate-500">
-                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--success-bg)]"></span>
-                    完全达到<b class="text-slate-800">2</b> 起 · <b class="text-slate-800">10.0</b> 万元
-                </span>
-                <span class="text-xs text-slate-500">
-                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--warning-bg)]"></span>
-                    基本达到<b class="text-slate-800">1</b> 起 · <b class="text-slate-800">1.5</b> 万元
-                </span>
-                <span class="text-xs text-slate-500">
-                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--error-bg)]"></span>
-                    未达到<b class="text-slate-800">0</b> 起 · <b class="text-slate-800">0.0</b> 万元
-                </span>
-                <NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
-                    <Icon icon="material-symbols:download" class="size-16px" />导出
-                </NButton>
-            </div>
-            <div class="rounded-lg bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
-                <div class="flex items-center gap-3 border-b bg-slate-50 px-4 py-2 text-[11px] font-semibold text-slate-500">
-                    <span class="min-w-0 flex-1">变更名称 / 编号</span>
-                    <span class="w-[92px] shrink-0">申请日期</span>
-                    <span class="w-[92px] shrink-0">投用日期</span>
-                    <span class="w-[92px] shrink-0">验收日期</span>
-                    <span class="w-[80px] shrink-0 text-right">费用（万元）</span>
-                    <span class="w-[100px] shrink-0 text-center">是否达到预期效果</span>
-                    <span class="w-[64px] shrink-0 text-right">操作</span>
-                </div>
-                <div class="scroll">
-                    <div class="divide-y">
-                        <div v-for="r in list" :key="r.id" class="flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-3 transition hover:bg-[#EAF0F9]/40">
-                        <span class="min-w-0 flex-1">
-                            <span class="flex flex-wrap items-center gap-1.5">
-                                <span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span>
-                                <NTag v-if="r.level==='一般'" size="small">{{ r.level }}</NTag>
-                                <NTag v-if="r.level==='重要'" size="small" type="error">{{ r.level }}</NTag>
-                                <NTag size="small" type="info">{{ r.type }}</NTag>
-                                <NTag v-if="r.duration==='永久'" size="small">{{ r.duration }}</NTag>
-                                <NTag v-if="r.duration==='临时'" size="small" type="warning">{{ r.duration }}</NTag>
-                            </span>
-                            <span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.applicant }} · 费用取验收时填报的「变更材料和实施费」</span>
-                        </span>
-                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
-                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
-                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
-                        <span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
-                        <span class="w-[100px] shrink-0 text-center">
-                            <NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
-                            <NTag v-if="r.result==='基本达到'" size="small" type="warning">{{ r.result }}</NTag>
-                            <NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
-                        </span>
-                        <span class="w-[64px] shrink-0 text-right">
-                            <NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton>
-                        </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </NCard>
-    </NSpin>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 240px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const themeStore = useThemeStore();
+const { routerPushByKey } = useRouterPush();
+
+const loading = ref<boolean>(false);
+const list = ref<any[]>([]);
+const lists = [
+  { title: "氮气管网压力分级调整", id: "MOC-2026-R01-0024", applicant: "张工艺", type: "工艺", level: "重要", duration: "永久", applyDate: "2026-05-28", useTime: "2026-06-20", acceptDate: "2026-07-08", cost: 3.2, result: "完全达到" },
+  { title: "R-201 搅拌密封改造", id: "MOC-2026-R01-0019", applicant: "张工艺", type: "设备", level: "一般", duration: "永久", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
+  { title: "循环水加药泵冲程临时调整", id: "MOC-2026-R01-0022", applicant: "张工艺", type: "设备", level: "一般", duration: "临时", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
+];
+// 获取列表数据
+const getList = () => {
+    loading.value = true;
+    setTimeout(() => {
+        list.value = lists;
+        loading.value = false;
+    }, 1000);
+}
+
+// 导出文件
+const exportFile = () => {
+    window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`)
+}
+// 查看
+const openRow = (r: any) => {
+    window.$message?.info(`打开变更详情页 ${r.id}（含验收报告与费用明细）`);
+};
+
+
+onMounted(() => {
+    getList();
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- PSSR监督 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div
+                class="h-100% flex flex-wrap items-center gap-x-5 gap-y-2 border border-slate-200 px-3 py-2 mb-3"
+                :style="{ 
+                    borderRadius: themeStore.themeRadius + 'px',
+                    '--success-bg': themeStore.otherColor.success,
+                    '--warning-bg': themeStore.otherColor.warning,
+                    '--error-bg': themeStore.otherColor.error,
+                }"
+            >
+                <span class="text-sm font-bold text-slate-800">本车间已验收变更</span>
+                <span class="text-xs text-slate-500">共 <b class="text-[#1D4E9C]">{{ list.length }}</b> 起</span>
+                <span class="text-xs text-slate-500">投入合计 <b class="text-[#1D4E9C]">11.5</b> 万元</span>
+                <span class="text-xs text-slate-500">完全达到率 <b class="text-[var(--success-bg)]">67%</b></span>
+                <span class="hidden h-4 w-px bg-slate-200 sm:block"></span>
+                <span class="text-xs text-slate-500">
+                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--success-bg)]"></span>
+                    完全达到<b class="text-slate-800">2</b> 起 · <b class="text-slate-800">10.0</b> 万元
+                </span>
+                <span class="text-xs text-slate-500">
+                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--warning-bg)]"></span>
+                    基本达到<b class="text-slate-800">1</b> 起 · <b class="text-slate-800">1.5</b> 万元
+                </span>
+                <span class="text-xs text-slate-500">
+                    <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--error-bg)]"></span>
+                    未达到<b class="text-slate-800">0</b> 起 · <b class="text-slate-800">0.0</b> 万元
+                </span>
+                <NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
+                    <Icon icon="material-symbols:download" class="size-16px" />导出
+                </NButton>
+            </div>
+            <div class="rounded-lg bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
+                <div class="flex items-center gap-3 border-b bg-slate-50 px-4 py-2 text-[11px] font-semibold text-slate-500">
+                    <span class="min-w-0 flex-1">变更名称 / 编号</span>
+                    <span class="w-[92px] shrink-0">申请日期</span>
+                    <span class="w-[92px] shrink-0">投用日期</span>
+                    <span class="w-[92px] shrink-0">验收日期</span>
+                    <span class="w-[80px] shrink-0 text-right">费用（万元）</span>
+                    <span class="w-[100px] shrink-0 text-center">是否达到预期效果</span>
+                    <span class="w-[64px] shrink-0 text-right">操作</span>
+                </div>
+                <div class="scroll">
+                    <div class="divide-y">
+                        <div v-for="r in list" :key="r.id" class="flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-3 transition hover:bg-[#EAF0F9]/40">
+                        <span class="min-w-0 flex-1">
+                            <span class="flex flex-wrap items-center gap-1.5">
+                                <span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span>
+                                <NTag v-if="r.level==='一般'" size="small">{{ r.level }}</NTag>
+                                <NTag v-if="r.level==='重要'" size="small" type="error">{{ r.level }}</NTag>
+                                <NTag size="small" type="info">{{ r.type }}</NTag>
+                                <NTag v-if="r.duration==='永久'" size="small">{{ r.duration }}</NTag>
+                                <NTag v-if="r.duration==='临时'" size="small" type="warning">{{ r.duration }}</NTag>
+                            </span>
+                            <span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.applicant }} · 费用取验收时填报的「变更材料和实施费」</span>
+                        </span>
+                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
+                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
+                        <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
+                        <span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
+                        <span class="w-[100px] shrink-0 text-center">
+                            <NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
+                            <NTag v-if="r.result==='基本达到'" size="small" type="warning">{{ r.result }}</NTag>
+                            <NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
+                        </span>
+                        <span class="w-[64px] shrink-0 text-right">
+                            <NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton>
+                        </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </NCard>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 240px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/highRisk/index.vue b/src/views/my/highRisk/index.vue
index 2ff8335..4a4d8e7 100644
--- a/src/views/my/highRisk/index.vue
+++ b/src/views/my/highRisk/index.vue
@@ -1,476 +1,476 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-
-const loading = ref<boolean>(false);
-const keyword = ref<string>("");
-const progressDrawer = ref<boolean>(false);
-const currentTab = ref<string>("highRisk");
-const range = ref<string>("近一个月");
-const dept = ref<string>("全部部门");
-const method = ref<string>("全部");
-// 当前记录
-const currentRecord = ref<any>(null);
-const TABS = [
-  { k: "highRisk", name: "高风险场景" },
-  { k: "history", name: "历史分析检索" },
-  { k: "tpl", name: "方法模板库" },
-];
-const RISK_RANGES = ["近一个月", "近三个月", "近半年", "全部"];
-const departments = ref<any[]>([
-    { id: 1, name: "全部部门" },
-    { id: 2, name: "一车间" },
-    { id: 3, name: "公用工程车间" },
-    { id: 4, name: "供应部" },
-    { id: 5, name: "三车间" },
-]);
-const list = ref<any[]>([]);
-const highRiskList = [
-    {
-        cid: "MOC-2026-R01-0036", item: "反应飞温", scene: "温度上限提高至 82℃ 后飞温反应加速，联锁动作前安全裕量收窄",
-        method: "HAZOP", residual: "中", dept: "一车间", adate: "2026-08-02", owner: "王海燕",
-        title: '聚合反应温度控制上限调整（78℃→82℃）', status: '审批中',
-        info: 'MOC-2026-R01-0036 聚合反应温度控制上限调整（78℃→82℃）', count: 3,
-        hazopRows: [
-        { node: "节点1 · 聚合釜 R-101", dev: "温度过高", cause: "温控回路失效或冷却水中断；82℃ 新上限更接近溶剂回流温度，超温溜温概率上升", cons: "反应溜温冲料，釜压骤升，物料喷溅造成灼烫与环境污染", L: 3, S: 4, safety: "DCS 温度高报 82℃、高高报及联锁 85℃（维持安全边界不变）；紧急冷却有效", suggest: "投用前完成联锁测试并留存记录；投用首周每班复核温度趋势" },
-        { node: "节点1 · 聚合釜 R-101", dev: "温度过高", cause: "未知杂质含量升高（0.05%→0.12%），热稳定性尚未定性，长期累积加速釜壁结垢", cons: "副反应加剧，可能引发二次分解放热，搅拌负荷异常", L: 2, S: 4, safety: "小试热稳定性筛查；安全阀泄放能力不受本次调整影响，仍然有效", suggest: "将杂质含量纳入日常分析计划（每周 1 次，连续 8 周）" },
-        { node: "节点2 · DCS 温控与联锁", dev: "报警/联锁值设置不当", cause: "上限调整后报警值与联锁值未同步复核整定", cons: "报警提前量不足，操作响应时间被压缩", L: 2, S: 4, safety: "修改执行申请-复核双人确认；修改清单与变更单逐项核对", suggest: "联锁测试全覆盖并留存记录；修改期间工艺加强监控" },
-        ],
-    },
-    {
-        cid: "MOC-2026-R01-0035", item: "动火与临时用电燃爆", scene: "电机更换动火与临时用电作业引发可燃气体燃爆",
-        method: "JSA", residual: "中", dept: "一车间", adate: "2026-07-30", owner: "王仪表",
-        title: '反应釜搅拌器电机更换（55kW→75kW 防爆电机）', status: '审批中',
-        info: 'MOC-2026-R01-0035 R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）', count: 3,
-        jsaRows: [
-        { item: "动火作业燃爆", scene: "步骤2：旧电机拆除与新电机安装动火，可燃蒸气聚集遇火源燃爆", inherent: "高", existing: "作业票证办理；动火点可燃气体检测合格；消防器材到位", suggest: "动火点下方设接火盘与防火毯，专人监护并每 30 分钟复测", residual: "中" },
-        { item: "临时用电触电", scene: "步骤1：临时电缆敷设与配电箱接线，绝缘破损导致触电", inherent: "中", existing: "临时用电票证；漏保校验合格", suggest: "电缆架空敷设并挂牌，每日开工前绝缘检查", residual: "低" },
-        { item: "起重吊装伤害", scene: "步骤3：75kW 电机吊装就位，吊具失效或指挥失误导致起重伤害", inherent: "中", existing: "吊具检验合格；起重指挥持证", suggest: "吊装区设警戒线，禁止交叉作业", residual: "低" },
-        ],
-    },
-    {
-        cid: null, changeTitle: "MOC-2026-R01-0048 R-101 温度联锁修改", item: "VOCs 直排超标", scene: "活性炭吸附饱和穿透，VOCs 直排大气超标",
-        method: "JSA", residual: "高", dept: "一车间", adate: "2026-07-31", owner: "王仪表",
-        title: '温度联锁修改', status: '审批中',
-        info: 'MOC-2026-R01-0048 R-101 温度联锁修改', count: 2,
-        jsaRows: [
-        { item: "吸附饱和穿透", scene: "步骤3：活性炭吸附床运行后期，吸附饱和穿透导致 VOCs 直排大气", inherent: "高", existing: "出口 VOCs 在线监测报警；按周期更换活性炭", suggest: "增设穿透点压差监测与双床切换程序；更换周期由 6 个月缩短至 4 个月", residual: "中" },
-        { item: "联锁参数误改", scene: "步骤3：DCS 参数修改与联锁测试，参数误改导致报警/联锁失效", inherent: "高", existing: "参数修改执行申请-复核双人确认；修改清单与变更单逐项核对", suggest: "联锁测试全覆盖并留存记录；修改期间工艺加强监控", residual: "中" },
-        ],
-    },
-    {
-        cid: "MOC-2026-R02-0041", item: "超压与窒息", scene: "氮气减压阀组失效导致下游设备超压、作业人员窒息",
-        method: "检查表", residual: "低", dept: "公用工程车间", adate: "2026-07-29", owner: "周设备",
-        title: '公用工程氮气减压阀组改造', status: '审批中',
-        info: 'MOC-2026-R02-0041 公用工程氮气减压阀组改造', count: 2,
-        jsaRows: [
-        { item: "下游设备超压", scene: "减压阀失效全开，高压氮气直入低压管网导致下游设备超压", inherent: "高", existing: "下游设安全阀；管网压力高报", suggest: "减压阀双阀串联并定期校验；安全阀起跳压力复核", residual: "低" },
-        { item: "人员窒息", scene: "阀组间通风不良，氮气泄漏积聚导致氧含量不足", inherent: "中", existing: "阀组间强制通风；进入前测氧", suggest: "增设固定式氧含量报警仪并联动风机", residual: "低" },
-        ],
-    },
-    {
-        cid: "MOC-2026-R01-0039", item: "超压保护裕量降低", scene: "安全阀起跳压力临时上调期间，V-102 超压保护裕量降低",
-        method: "AI 预分析", residual: "中", dept: "一车间", adate: "2026-07-15", owner: "王海燕",
-        title: '紧急变更：V-102 安全阀起跳压力临时调整（补办手续）', status: '审批中',
-        info: 'MOC-2026-R01-0039 紧急变更：V-102 安全阀起跳压力临时调整（补办手续）', count: 2,
-        jsaRows: [
-        { item: "超压保护裕量降低", scene: "起跳压力由 1.0MPa 临时上调至 1.15MPa，V-102 超压工况下保护动作延迟", inherent: "高", existing: "临时期限 30 天；操作压力监控加强至每 2 小时记录", suggest: "恢复前完成新安全阀校验更换；临时期间压力联锁值同步下调验证", residual: "中" },
-        { item: "紧急变更手续补办遗漏", scene: "紧急变更先行实施，后补手续存在资料缺项风险", inherent: "中", existing: "紧急变更 48 小时内补办审批", suggest: "资料归档清单逐项核对，安全部门复核", residual: "低" },
-        ],
-    },
-    {
-        cid: "MOC-2026-R03-0040", item: "原料杂质副反应", scene: "新供应商环己烷杂质谱变化引发副反应，影响产品色相与收率",
-        method: "HAZOP", residual: "中", dept: "供应部", adate: "2026-07-18", owner: "陈质量",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '审批中',
-        info: 'MOC-2026-R03-0040 原料环己烷供应商变更（新增 B 供应商）', count: 2,
-        hazopRows: [
-        { node: "节点1 · 原料接收与储存", dev: "杂质含量高", cause: "B 供应商环己烷杂质谱（苯/硫）高于原供应商，进厂检验项目未覆盖", cons: "副反应加剧，产品色相超标、收率下降，结垢加速", L: 3, S: 3, safety: "进厂检验按原指标执行；供应商 COA 随货同行", suggest: "检验项目增加杂质谱分析；首批三批加严检验" },
-        { node: "节点2 · 聚合反应", dev: "副反应加剧", cause: "微量苯参与链转移，分子量分布变宽", cons: "产品性能波动，下游加工投诉", L: 2, S: 3, safety: "聚合配方留有调节余量", suggest: "建立 B 供应商原料的配方微调作业指导" },
-        ],
-    },
-    {
-        cid: "MOC-2026-R03-0042", item: "回路切换失误", scene: "自动化改造调试期间控制回路切换失误，造成装置非计划停车",
-        method: "JSA", residual: "中", dept: "三车间", adate: "2026-07-31", owner: "王仪表",
-        title: '三车间自动化和安全隐患整改项目变更', status: '审批中',
-        info: 'MOC-2026-R03-0042 三车间自动化和安全隐患整改项目变更', count: 2,
-        jsaRows: [
-        { item: "回路切换失误", scene: "步骤4：新旧控制系统切换，回路误切导致装置非计划停车", inherent: "高", existing: "切换方案审批；切换前模拟演练", suggest: "切换双人复核逐项签字；保留一键回切手段 72 小时", residual: "中" },
-        { item: "静电损伤卡件", scene: "步骤2：卡件插拔作业静电防护不到位，DCS 卡件损坏", inherent: "中", existing: "佩戴防静电手环", suggest: "卡件备件现场备妥，作业区铺设防静电垫", residual: "低" },
-        ],
-    },
-];
-const historyList = [
-    { id: "HAZOP-2025-018", change: "MOC-2025-R01-0023 常压炉燃料气切断阀改造", method: "HAZOP", unit: "01-常减压装置", scope: "燃料气系统节点", rows: 12, date: "2025-10-20" },
-    { id: "HAZOP-2024-006", change: "MOC-2024-R01-0003 减一线换热器 E-108 芯子更换", method: "HAZOP", unit: "01-常减压装置", scope: "换热系统节点", rows: 8, date: "2024-03-15" },
-    { id: "JSA-2025-041", change: "MOC-2025-R02-0014 再生器旋风分离器更换", method: "JSA", unit: "02-催化裂化装置", scope: "受限空间作业", rows: 6, date: "2025-05-08" },
-    { id: "JSA-2026-012", change: "MOC-2026-R01-0035 搅拌电机更换", method: "JSA", unit: "01-常减压装置", scope: "检维修作业", rows: 5, date: "2026-07-29" },
-    { id: "SCL-2025-033", change: "MOC-2025-R02-0021 气压机出口压力联锁逻辑修改", method: "检查表", unit: "02-催化裂化装置", scope: "联锁系统", rows: 14, date: "2025-09-18" },
-    { id: "AI-2026-008", change: "MOC-2026-R03-0008 聚合釜搅拌器密封形式变更", method: "AI 预分析", unit: "03-聚合装置", scope: "—", rows: 4, date: "2026-05-06" },
-];
-const templateList = [
-  { name: "HAZOP 节点划分模板", desc: "含偏差引导词库（过高/过低/无/反向等 18 个）与节点划分示例", tag: "HAZOP" },
-  { name: "JSA 作业步骤分析模板", desc: "作业步骤分解 → 危害识别 → 控制措施三段式，含检维修示例", tag: "JSA" },
-  { name: "安全检查表（SCL）模板库", desc: "按设备类型 28 套（机泵 / 换热器 / 塔器 / 储罐 / 电气 / 仪表）", tag: "检查表" },
-  { name: "风险矩阵 5×5 分级定义", desc: "可能性 × 严重性分级标准（公司 Q/SH 0600），AI 评级引用此定义", tag: "通用" },
-];
-const isHazop = computed(() => !!currentRecord.value?.hazopRows);
-const th = "border-b bg-slate-50 px-3 py-2 text-left text-[11px] font-semibold text-slate-500";
-const td = "border-b px-3 py-2 align-top text-xs leading-relaxed text-slate-700";
-
-const hazopNodes = computed(() => {
-  const scene = currentRecord.value;
-  if (!scene?.hazopRows) return [] as { node: string; dev: string; n: number }[];
-  const nodes = Array.from(new Map(scene.hazopRows.map((r:any) => [`${r.node}|${r.dev}`, { node: r.node, dev: r.dev, n: 0 }])).values());
-  scene.hazopRows.forEach((r:any) => { const k:any = nodes.find((n:any) => n.node === r.node && n.dev === r.dev); if (k) k.n += 1; });
-  return nodes;
-});
-const sel = ref(0);
-const selRows = computed(() => {
-  const scene = currentRecord.value;
-  if (!scene?.hazopRows) return [] as any;
-  const n:any = hazopNodes.value[sel.value];
-  return scene.hazopRows.filter((r:any) => r.node === n?.node && r.dev === n?.dev);
-});
-// HAZOP 风险矩阵：RR = L × S
-const rrTag = (L: number, S: number) => {
-  const v = L * S;
-  return v >= 12 ? { label: `较大 (${v})`, cls: "error" }
-    : v >= 8 ? { label: `一般 (${v})`, cls: "warning" }
-    : { label: `低 (${v})`, cls: "success" };
-};
-
-// 切换tab
-const tabChange = (k: string) => {
-    list.value = []
-    currentTab.value = k;
-    loading.value = true;
-    if(k === 'highRisk'){
-        setTimeout(() => {
-            list.value = highRiskList;
-            loading.value = false;
-        }, 1000);
-    }
-    if(k === 'history'){
-        setTimeout(() => {
-            list.value = historyList;
-            loading.value = false;
-        }, 1000);
-    }
-    if(k === 'tpl'){
-        setTimeout(() => {
-            list.value = templateList;
-            loading.value = false;
-        }, 1000);
-    }
-}
-
-// 高风险场景查看变更
-const openSceneChange = (record: any) => {
-    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
-};
-// 查看分析记录
-const viewAnalysis = (record: any) => {
-    currentRecord.value = record;
-    progressDrawer.value = true;
-};
-// 查看历史分析检索
-const viewHistory = (id: string) => {
-    window.$message?.info(`演示：在线查看 ${id} 完整分析记录`)
-};
-// 复用到新变更
-const copyHistory = (id: string) => {
-    window.$message?.success(`演示：${id} 已复用到新变更草稿，分析行已带入待确认`)
-}
-// 预览模板
-const previewTemplate = (name: string) => {
-    window.$message?.info(`演示：在线预览「${name}」`)
-}
-// 下载模板
-const downloadTemplate = (name: string) => {
-    window.$message?.success(`演示：下载「${name}」（Word）`)
-}
-// 导出
-const exportFile = () => {
-    window.$message?.success('分析记录表已导出（Excel）');
-}
-
-onMounted(() => {
-    tabChange('highRisk');
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 本专业高风险 -->
-    <NSpin :show="loading" size="small">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <div 
-                class="flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-            >
-                <div v-for="t in TABS" :key="t.k" @click="tabChange(t.k)"
-                    class="flex items-center gap-1.5 px-3 py-1 text-xs cursor-pointer select-none rounded-[20px] border"
-                    :style="{ '--theme-color': themeStore.themeColor}"
-                    :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white border-[var(--theme-color)]' : 'text-slate-600 hover:bg-slate-100'"
-                >
-                    {{ t.name }}
-                </div>
-            </div>
-            <!-- 高风险场景 -->
-            <div v-if="currentTab === 'highRisk'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
-                    <div class="flex items-center gap-2">
-                        <Icon icon="lucide:shield-check" class="size-16px" :style="{color:themeStore.themeColor}" />
-                        <p class="text-base font-semibold">变更新增高风险场景</p>
-                    </div>
-                    <div class="flex items-center gap-2 min-h-28px">
-                        <NTag size="small" type="primary" class="text-11px font-medium">单笔变更的分析编制在变更上下文内完成</NTag>
-                    </div>
-                </div>
-    
-                <div class="px-4 mb-3 flex flex-wrap items-center gap-1.5">
-                    <span class="mr-1 text-xs text-slate-400">时间</span>
-                    <NButton 
-                        size="tiny" 
-                        round 
-                        :type="range === r ? 'primary' : 'default'"
-                        v-for="r in RISK_RANGES" 
-                        :key="r" 
-                        @click="range = r"
-                    >
-                        {{ r }}
-                    </NButton>
-                    <span class="ml-3 mr-1 text-xs text-slate-400">部门</span>
-                    <NButton
-                        size="tiny" 
-                        round 
-                        v-for="d in departments" 
-                        :key="d.id" 
-                        :type="dept === d.name ? 'primary' : 'default'"
-                        @click="dept = d.name"
-                    >
-                    {{ d.name }}
-                    </NButton>
-                    <span class="ml-auto self-center text-[11px] text-slate-400">{{ list.length }} 个高风险场景</span>
-                </div>
-                <div class="scroll">
-                    <div class="space-y-3 px-4 pb-3">
-                        <div v-for="(s, i) in list" :key="`${s.cid ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-3 rounded-lg border px-4 py-3">
-                            <div class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <NTag type="info" size="small">{{ s.method }}</NTag>
-                                    <span class="text-sm font-medium text-slate-800">{{ s.item }}</span>
-                                    <NTag type="error" size="small">固有风险 · 高</NTag>
-                                    <NTag v-if="s.residual==='高'" type="error" size="small">剩余风险 · {{ s.residual }}</NTag>
-                                    <NTag v-if="s.residual==='中'" type="warning" size="small">剩余风险 · {{ s.residual }}</NTag>
-                                    <NTag v-if="s.residual==='低'" type="info" size="small">剩余风险 · {{ s.residual }}</NTag>
-                                </div>
-                                <div class="mt-0.5 text-xs text-slate-600">{{ s.scene }}</div>
-                                <div class="mt-0.5 text-xs text-slate-400">
-                                    变更：{{ s.info }} · {{ s.dept }} · 分析日期 {{ s.adate }} · 责任：{{ s.owner }} · 分析记录 {{ s.count }} 行
-                                </div>
-                            </div>
-                            <NButton ghost size="small" class="text-xs" @click="openSceneChange(s)">查看变更</NButton>
-                            <NButton size="small" type="primary" class="text-xs" @click="viewAnalysis(s)">查看分析记录</NButton>
-                        </div>
-                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">当前筛选条件下无新增高风险场景</div>
-                    </div>
-                </div>
-            </div>
-            <!-- 历史分析检索 -->
-            <div v-if="currentTab === 'history'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
-                    <div class="flex items-center gap-2">
-                        <Icon icon="mage:book" class="size-18px" :style="{color:themeStore.themeColor}" />
-                        <p class="text-base font-semibold">历史分析记录检索（企业风险知识资产）</p>
-                    </div>
-                    <div class="flex items-center gap-2 min-h-28px">
-                        <NInput v-model:value="keyword" size="small" class="text-xs !w-200px" placeholder="按单号 / 装置 / 关键词检索…">
-                            <template #suffix>
-                                <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-                            </template>
-                        </NInput>
-                    </div>
-                </div>
-                <div class="px-4 mb-3 flex flex-wrap items-center gap-1.5">
-                    <NButton 
-                        size="tiny" 
-                        round 
-                        v-for="m in ['全部', 'HAZOP', 'JSA', '检查表', 'AI 预分析']" 
-                        :key="m" 
-                        :type="method === m ? 'primary' : 'default'"
-                        @click="method = m"
-                    >
-                        {{ m }}
-                    </NButton>
-                    <span class="ml-auto self-center text-[11px] text-slate-400">{{ list.length }} 条记录</span>
-                </div>
-                <div class="scroll">
-                    <div class="space-y-3 px-4 pb-3">
-                        <div v-for="h in list" :key="h.id" class="flex flex-wrap items-center gap-3 rounded-lg border px-4 py-2.5">
-                            <div class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="font-mono text-[11px] text-slate-400">{{ h.id }}</span>
-                                    <NTag type="info" size="small">{{ h.method }}</NTag>
-                                    <span class="text-sm text-slate-800">{{ h.change }}</span>
-                                </div>
-                                <div class="mt-0.5 text-xs text-slate-500">{{ h.unit }} · 范围：{{ h.scope }} · {{ h.rows }} 行分析记录 · {{ h.date }}</div>
-                            </div>
-                            <NButton text type="primary" @click="viewHistory(h.id)">
-                                <Icon icon="lucide:eye" class="size-16px" />
-                            </NButton>
-                            <NButton ghost size="small" class="text-xs" @click="copyHistory(h.id)">复用到新变更</NButton>
-                        </div>
-                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配的分析记录</div>
-                    </div>
-                </div>
-            </div>
-            <!-- 方法模板库 -->
-            <div v-if="currentTab === 'tpl'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
-                    <div class="flex items-center gap-2">
-                        <Icon icon="akar-icons:file" class="size-16px" :style="{color:themeStore.themeColor}" />
-                        <p class="text-base font-semibold">方法模板库（AI 风险预分析的知识来源之一）</p>
-                    </div>
-                </div>
-                <div class="scroll">
-                    <div class="space-y-3 px-4 pb-3">
-                        <div class="grid gap-3 grid-cols-2">
-                            <div v-for="t in list" :key="t.name" class="rounded-lg border p-4">
-                                <div class="flex items-center gap-2">
-                                    <span class="text-sm font-medium text-slate-800">{{ t.name }}</span>
-                                    <NTag size="small" type="info">{{ t.tag }}</NTag>
-                                </div>
-                                <p class="mt-1.5 text-xs leading-relaxed text-slate-500">{{ t.desc }}</p>
-                                <div class="mt-3 flex gap-2">
-                                    <NButton ghost size="small" class="text-xs" @click="previewTemplate(t.name)">查看</NButton>
-                                    <NButton ghost size="small" class="text-xs" @click="downloadTemplate(t.name)">
-                                        <Icon icon="material-symbols:download" class="size-14px" />下载
-                                    </NButton>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配的方法模板库</div>
-                    </div>
-                </div>
-            </div>
-            <!-- 进度弹框 -->
-            <NDrawer v-model:show="progressDrawer" width="85%" placement="right">
-                <NDrawerContent closable>
-                    <template #header>
-                        <span class="flex flex-wrap items-center gap-2 text-base">
-                            风险分析记录表
-                            <NTag size="small" type="info">{{ currentRecord.method }}</NTag>
-                            <NTag size="small" type="error">含固有风险 · 高 场景</NTag>
-                        </span>
-                    </template>
-                    <div>
-                        <div class="mb-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500">
-                            <span>变更：<span class="font-medium text-slate-700">{{ currentRecord.info }}</span></span>
-                            <span>分析日期：{{ currentRecord.adate }}</span>
-                            <span>责任：{{ currentRecord.owner }}</span>
-                            <span class="ml-auto text-slate-400">分析编制与修改在变更上下文内完成，此处只读</span>
-                        </div>
-                        <div v-if="!isHazop" class="overflow-x-auto rounded-lg border border-b-0">
-                            <table class="w-full min-w-[860px] border-collapse">
-                                <thead>
-                                <tr>
-                                    <th :class="th" class="w-[130px]">风险项</th>
-                                    <th :class="th">场景描述</th>
-                                    <th :class="th" class="w-[76px] text-center">固有风险</th>
-                                    <th :class="th">现有措施</th>
-                                    <th :class="th">建议措施</th>
-                                    <th :class="th" class="w-[76px] text-center">剩余风险</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr v-for="(r, i) in currentRecord.jsaRows" :key="i" :class="r.item === currentRecord.item && r.inherent === '高' ? 'bg-red-50/40' : ''">
-                                    <td :class="td" class="font-medium text-slate-800">{{ r.item }}</td>
-                                    <td :class="td">{{ r.scene }}</td>
-                                    <td :class="td" class="text-center">
-                                        <NTag size="small" type="error" v-if="r.inherent==='高'">{{ r.inherent }}</NTag>
-                                        <NTag size="small" type="warning" v-if="r.inherent==='中'">{{ r.inherent }}</NTag>
-                                        <NTag size="small" type="info" v-if="r.inherent==='低'">{{ r.inherent }}</NTag>
-                                    </td>
-                                    <td :class="td">{{ r.existing }}</td>
-                                    <td :class="td">{{ r.suggest }}</td>
-                                    <td :class="td" class="text-center">
-                                        <NTag size="small" type="error" v-if="r.residual==='高'">{{ r.residual }}</NTag>
-                                        <NTag size="small" type="warning" v-if="r.residual==='中'">{{ r.residual }}</NTag>
-                                        <NTag size="small" type="info" v-if="r.residual==='低'">{{ r.residual }}</NTag>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <div v-else class="flex gap-3">
-                        <!-- 节点 · 偏离导航 -->
-                        <div class="w-48 shrink-0 space-y-1.5">
-                            <div v-for="(n, i) in hazopNodes" :key="i" @click="sel = i"
-                                class="w-full rounded-lg border px-3 py-2 text-left text-xs cursor-pointer"
-                                :class="sel === i ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-white' : 'hover:border-[var(--theme-color)]'"
-                                :style="{'--theme-color': themeStore.themeColor}"
-                            >
-                                <span class="block truncate font-medium">{{ n.dev }}</span>
-                                <span class="mt-0.5 flex items-center justify-between text-[11px]" :class="sel === i ? 'text-white/80' : 'text-slate-400'">
-                                    <span class="truncate">{{ n.node.replace(/^节点\d+ · /, '') }}</span>
-                                    <NTag size="tiny" round class="ml-1" :type="sel === i ? 'default' : 'success'">{{ n.n }} 条</NTag>
-                                </span>
-                            </div>
-                            <p class="px-1 pt-1 text-[11px] leading-relaxed text-slate-400">L / S 取值 1–5，RR 按 5×5 风险矩阵实时重算</p>
-                        </div>
-                        <!-- 偏差分析表 -->
-                        <div class="min-w-0 flex-1 overflow-x-auto rounded-lg border border-b-0">
-                            <table class="w-full min-w-[760px] border-collapse">
-                            <thead>
-                                <tr>
-                                <th :class="th">原因</th>
-                                <th :class="th">后果</th>
-                                <th :class="th" class="w-10 !text-center">L</th>
-                                <th :class="th" class="w-10 !text-center">S</th>
-                                <th :class="th" class="w-[92px] !text-center">RR</th>
-                                <th :class="th">安全措施</th>
-                                <th :class="th">建议措施</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="(r, i) in selRows" :key="i">
-                                <td :class="td">{{ r.cause }}</td>
-                                <td :class="td">{{ r.cons }}</td>
-                                <td :class="td" class="text-center">{{ r.L }}</td>
-                                <td :class="td" class="text-center">{{ r.S }}</td>
-                                <td :class="td" class="text-center">
-                                    <NTag size="small" :type="rrTag(r.L, r.S).cls">{{ rrTag(r.L, r.S).label }}</NTag>
-                                </td>
-                                <td :class="td">{{ r.safety }}</td>
-                                <td :class="td">{{ r.suggest }}</td>
-                                </tr>
-                            </tbody>
-                            </table>
-                        </div>
-                        </div>
-                    </div>
-                    <template #footer>
-                        <div class="flex justify-end gap-2">
-                            <NButton ghost @click="exportFile"><Icon icon="material-symbols:download" class="size-16px" />导出</NButton>
-                            <NButton type="primary" @click="progressDrawer = false">关闭</NButton>
-                        </div>
-                    </template>
-                </NDrawerContent>
-            </NDrawer>
-        </NCard>
-    </NSpin>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 303px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const themeStore = useThemeStore();
+const { routerPushByKey } = useRouterPush();
+
+const loading = ref<boolean>(false);
+const keyword = ref<string>("");
+const progressDrawer = ref<boolean>(false);
+const currentTab = ref<string>("highRisk");
+const range = ref<string>("近一个月");
+const dept = ref<string>("全部部门");
+const method = ref<string>("全部");
+// 当前记录
+const currentRecord = ref<any>(null);
+const TABS = [
+  { k: "highRisk", name: "高风险场景" },
+  { k: "history", name: "历史分析检索" },
+  { k: "tpl", name: "方法模板库" },
+];
+const RISK_RANGES = ["近一个月", "近三个月", "近半年", "全部"];
+const departments = ref<any[]>([
+    { id: 1, name: "全部部门" },
+    { id: 2, name: "一车间" },
+    { id: 3, name: "公用工程车间" },
+    { id: 4, name: "供应部" },
+    { id: 5, name: "三车间" },
+]);
+const list = ref<any[]>([]);
+const highRiskList = [
+    {
+        cid: "MOC-2026-R01-0036", item: "反应飞温", scene: "温度上限提高至 82℃ 后飞温反应加速，联锁动作前安全裕量收窄",
+        method: "HAZOP", residual: "中", dept: "一车间", adate: "2026-08-02", owner: "王海燕",
+        title: '聚合反应温度控制上限调整（78℃→82℃）', status: '审批中',
+        info: 'MOC-2026-R01-0036 聚合反应温度控制上限调整（78℃→82℃）', count: 3,
+        hazopRows: [
+        { node: "节点1 · 聚合釜 R-101", dev: "温度过高", cause: "温控回路失效或冷却水中断；82℃ 新上限更接近溶剂回流温度，超温溜温概率上升", cons: "反应溜温冲料，釜压骤升，物料喷溅造成灼烫与环境污染", L: 3, S: 4, safety: "DCS 温度高报 82℃、高高报及联锁 85℃（维持安全边界不变）；紧急冷却有效", suggest: "投用前完成联锁测试并留存记录；投用首周每班复核温度趋势" },
+        { node: "节点1 · 聚合釜 R-101", dev: "温度过高", cause: "未知杂质含量升高（0.05%→0.12%），热稳定性尚未定性，长期累积加速釜壁结垢", cons: "副反应加剧，可能引发二次分解放热，搅拌负荷异常", L: 2, S: 4, safety: "小试热稳定性筛查；安全阀泄放能力不受本次调整影响，仍然有效", suggest: "将杂质含量纳入日常分析计划（每周 1 次，连续 8 周）" },
+        { node: "节点2 · DCS 温控与联锁", dev: "报警/联锁值设置不当", cause: "上限调整后报警值与联锁值未同步复核整定", cons: "报警提前量不足，操作响应时间被压缩", L: 2, S: 4, safety: "修改执行申请-复核双人确认；修改清单与变更单逐项核对", suggest: "联锁测试全覆盖并留存记录；修改期间工艺加强监控" },
+        ],
+    },
+    {
+        cid: "MOC-2026-R01-0035", item: "动火与临时用电燃爆", scene: "电机更换动火与临时用电作业引发可燃气体燃爆",
+        method: "JSA", residual: "中", dept: "一车间", adate: "2026-07-30", owner: "王仪表",
+        title: '反应釜搅拌器电机更换（55kW→75kW 防爆电机）', status: '审批中',
+        info: 'MOC-2026-R01-0035 R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）', count: 3,
+        jsaRows: [
+        { item: "动火作业燃爆", scene: "步骤2：旧电机拆除与新电机安装动火，可燃蒸气聚集遇火源燃爆", inherent: "高", existing: "作业票证办理；动火点可燃气体检测合格；消防器材到位", suggest: "动火点下方设接火盘与防火毯，专人监护并每 30 分钟复测", residual: "中" },
+        { item: "临时用电触电", scene: "步骤1：临时电缆敷设与配电箱接线，绝缘破损导致触电", inherent: "中", existing: "临时用电票证；漏保校验合格", suggest: "电缆架空敷设并挂牌，每日开工前绝缘检查", residual: "低" },
+        { item: "起重吊装伤害", scene: "步骤3：75kW 电机吊装就位，吊具失效或指挥失误导致起重伤害", inherent: "中", existing: "吊具检验合格；起重指挥持证", suggest: "吊装区设警戒线，禁止交叉作业", residual: "低" },
+        ],
+    },
+    {
+        cid: null, changeTitle: "MOC-2026-R01-0048 R-101 温度联锁修改", item: "VOCs 直排超标", scene: "活性炭吸附饱和穿透，VOCs 直排大气超标",
+        method: "JSA", residual: "高", dept: "一车间", adate: "2026-07-31", owner: "王仪表",
+        title: '温度联锁修改', status: '审批中',
+        info: 'MOC-2026-R01-0048 R-101 温度联锁修改', count: 2,
+        jsaRows: [
+        { item: "吸附饱和穿透", scene: "步骤3：活性炭吸附床运行后期，吸附饱和穿透导致 VOCs 直排大气", inherent: "高", existing: "出口 VOCs 在线监测报警；按周期更换活性炭", suggest: "增设穿透点压差监测与双床切换程序；更换周期由 6 个月缩短至 4 个月", residual: "中" },
+        { item: "联锁参数误改", scene: "步骤3：DCS 参数修改与联锁测试，参数误改导致报警/联锁失效", inherent: "高", existing: "参数修改执行申请-复核双人确认；修改清单与变更单逐项核对", suggest: "联锁测试全覆盖并留存记录；修改期间工艺加强监控", residual: "中" },
+        ],
+    },
+    {
+        cid: "MOC-2026-R02-0041", item: "超压与窒息", scene: "氮气减压阀组失效导致下游设备超压、作业人员窒息",
+        method: "检查表", residual: "低", dept: "公用工程车间", adate: "2026-07-29", owner: "周设备",
+        title: '公用工程氮气减压阀组改造', status: '审批中',
+        info: 'MOC-2026-R02-0041 公用工程氮气减压阀组改造', count: 2,
+        jsaRows: [
+        { item: "下游设备超压", scene: "减压阀失效全开，高压氮气直入低压管网导致下游设备超压", inherent: "高", existing: "下游设安全阀；管网压力高报", suggest: "减压阀双阀串联并定期校验；安全阀起跳压力复核", residual: "低" },
+        { item: "人员窒息", scene: "阀组间通风不良，氮气泄漏积聚导致氧含量不足", inherent: "中", existing: "阀组间强制通风；进入前测氧", suggest: "增设固定式氧含量报警仪并联动风机", residual: "低" },
+        ],
+    },
+    {
+        cid: "MOC-2026-R01-0039", item: "超压保护裕量降低", scene: "安全阀起跳压力临时上调期间，V-102 超压保护裕量降低",
+        method: "AI 预分析", residual: "中", dept: "一车间", adate: "2026-07-15", owner: "王海燕",
+        title: '紧急变更：V-102 安全阀起跳压力临时调整（补办手续）', status: '审批中',
+        info: 'MOC-2026-R01-0039 紧急变更：V-102 安全阀起跳压力临时调整（补办手续）', count: 2,
+        jsaRows: [
+        { item: "超压保护裕量降低", scene: "起跳压力由 1.0MPa 临时上调至 1.15MPa，V-102 超压工况下保护动作延迟", inherent: "高", existing: "临时期限 30 天；操作压力监控加强至每 2 小时记录", suggest: "恢复前完成新安全阀校验更换；临时期间压力联锁值同步下调验证", residual: "中" },
+        { item: "紧急变更手续补办遗漏", scene: "紧急变更先行实施，后补手续存在资料缺项风险", inherent: "中", existing: "紧急变更 48 小时内补办审批", suggest: "资料归档清单逐项核对，安全部门复核", residual: "低" },
+        ],
+    },
+    {
+        cid: "MOC-2026-R03-0040", item: "原料杂质副反应", scene: "新供应商环己烷杂质谱变化引发副反应，影响产品色相与收率",
+        method: "HAZOP", residual: "中", dept: "供应部", adate: "2026-07-18", owner: "陈质量",
+        title: '原料环己烷供应商变更（新增 B 供应商）', status: '审批中',
+        info: 'MOC-2026-R03-0040 原料环己烷供应商变更（新增 B 供应商）', count: 2,
+        hazopRows: [
+        { node: "节点1 · 原料接收与储存", dev: "杂质含量高", cause: "B 供应商环己烷杂质谱（苯/硫）高于原供应商，进厂检验项目未覆盖", cons: "副反应加剧，产品色相超标、收率下降，结垢加速", L: 3, S: 3, safety: "进厂检验按原指标执行；供应商 COA 随货同行", suggest: "检验项目增加杂质谱分析；首批三批加严检验" },
+        { node: "节点2 · 聚合反应", dev: "副反应加剧", cause: "微量苯参与链转移，分子量分布变宽", cons: "产品性能波动，下游加工投诉", L: 2, S: 3, safety: "聚合配方留有调节余量", suggest: "建立 B 供应商原料的配方微调作业指导" },
+        ],
+    },
+    {
+        cid: "MOC-2026-R03-0042", item: "回路切换失误", scene: "自动化改造调试期间控制回路切换失误，造成装置非计划停车",
+        method: "JSA", residual: "中", dept: "三车间", adate: "2026-07-31", owner: "王仪表",
+        title: '三车间自动化和安全隐患整改项目变更', status: '审批中',
+        info: 'MOC-2026-R03-0042 三车间自动化和安全隐患整改项目变更', count: 2,
+        jsaRows: [
+        { item: "回路切换失误", scene: "步骤4：新旧控制系统切换，回路误切导致装置非计划停车", inherent: "高", existing: "切换方案审批；切换前模拟演练", suggest: "切换双人复核逐项签字；保留一键回切手段 72 小时", residual: "中" },
+        { item: "静电损伤卡件", scene: "步骤2：卡件插拔作业静电防护不到位，DCS 卡件损坏", inherent: "中", existing: "佩戴防静电手环", suggest: "卡件备件现场备妥，作业区铺设防静电垫", residual: "低" },
+        ],
+    },
+];
+const historyList = [
+    { id: "HAZOP-2025-018", change: "MOC-2025-R01-0023 常压炉燃料气切断阀改造", method: "HAZOP", unit: "01-常减压装置", scope: "燃料气系统节点", rows: 12, date: "2025-10-20" },
+    { id: "HAZOP-2024-006", change: "MOC-2024-R01-0003 减一线换热器 E-108 芯子更换", method: "HAZOP", unit: "01-常减压装置", scope: "换热系统节点", rows: 8, date: "2024-03-15" },
+    { id: "JSA-2025-041", change: "MOC-2025-R02-0014 再生器旋风分离器更换", method: "JSA", unit: "02-催化裂化装置", scope: "受限空间作业", rows: 6, date: "2025-05-08" },
+    { id: "JSA-2026-012", change: "MOC-2026-R01-0035 搅拌电机更换", method: "JSA", unit: "01-常减压装置", scope: "检维修作业", rows: 5, date: "2026-07-29" },
+    { id: "SCL-2025-033", change: "MOC-2025-R02-0021 气压机出口压力联锁逻辑修改", method: "检查表", unit: "02-催化裂化装置", scope: "联锁系统", rows: 14, date: "2025-09-18" },
+    { id: "AI-2026-008", change: "MOC-2026-R03-0008 聚合釜搅拌器密封形式变更", method: "AI 预分析", unit: "03-聚合装置", scope: "—", rows: 4, date: "2026-05-06" },
+];
+const templateList = [
+  { name: "HAZOP 节点划分模板", desc: "含偏差引导词库（过高/过低/无/反向等 18 个）与节点划分示例", tag: "HAZOP" },
+  { name: "JSA 作业步骤分析模板", desc: "作业步骤分解 → 危害识别 → 控制措施三段式，含检维修示例", tag: "JSA" },
+  { name: "安全检查表（SCL）模板库", desc: "按设备类型 28 套（机泵 / 换热器 / 塔器 / 储罐 / 电气 / 仪表）", tag: "检查表" },
+  { name: "风险矩阵 5×5 分级定义", desc: "可能性 × 严重性分级标准（公司 Q/SH 0600），AI 评级引用此定义", tag: "通用" },
+];
+const isHazop = computed(() => !!currentRecord.value?.hazopRows);
+const th = "border-b bg-slate-50 px-3 py-2 text-left text-[11px] font-semibold text-slate-500";
+const td = "border-b px-3 py-2 align-top text-xs leading-relaxed text-slate-700";
+
+const hazopNodes = computed(() => {
+  const scene = currentRecord.value;
+  if (!scene?.hazopRows) return [] as { node: string; dev: string; n: number }[];
+  const nodes = Array.from(new Map(scene.hazopRows.map((r:any) => [`${r.node}|${r.dev}`, { node: r.node, dev: r.dev, n: 0 }])).values());
+  scene.hazopRows.forEach((r:any) => { const k:any = nodes.find((n:any) => n.node === r.node && n.dev === r.dev); if (k) k.n += 1; });
+  return nodes;
+});
+const sel = ref(0);
+const selRows = computed(() => {
+  const scene = currentRecord.value;
+  if (!scene?.hazopRows) return [] as any;
+  const n:any = hazopNodes.value[sel.value];
+  return scene.hazopRows.filter((r:any) => r.node === n?.node && r.dev === n?.dev);
+});
+// HAZOP 风险矩阵：RR = L × S
+const rrTag = (L: number, S: number) => {
+  const v = L * S;
+  return v >= 12 ? { label: `较大 (${v})`, cls: "error" }
+    : v >= 8 ? { label: `一般 (${v})`, cls: "warning" }
+    : { label: `低 (${v})`, cls: "success" };
+};
+
+// 切换tab
+const tabChange = (k: string) => {
+    list.value = []
+    currentTab.value = k;
+    loading.value = true;
+    if(k === 'highRisk'){
+        setTimeout(() => {
+            list.value = highRiskList;
+            loading.value = false;
+        }, 1000);
+    }
+    if(k === 'history'){
+        setTimeout(() => {
+            list.value = historyList;
+            loading.value = false;
+        }, 1000);
+    }
+    if(k === 'tpl'){
+        setTimeout(() => {
+            list.value = templateList;
+            loading.value = false;
+        }, 1000);
+    }
+}
+
+// 高风险场景查看变更
+const openSceneChange = (record: any) => {
+    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
+};
+// 查看分析记录
+const viewAnalysis = (record: any) => {
+    currentRecord.value = record;
+    progressDrawer.value = true;
+};
+// 查看历史分析检索
+const viewHistory = (id: string) => {
+    window.$message?.info(`演示：在线查看 ${id} 完整分析记录`)
+};
+// 复用到新变更
+const copyHistory = (id: string) => {
+    window.$message?.success(`演示：${id} 已复用到新变更草稿，分析行已带入待确认`)
+}
+// 预览模板
+const previewTemplate = (name: string) => {
+    window.$message?.info(`演示：在线预览「${name}」`)
+}
+// 下载模板
+const downloadTemplate = (name: string) => {
+    window.$message?.success(`演示：下载「${name}」（Word）`)
+}
+// 导出
+const exportFile = () => {
+    window.$message?.success('分析记录表已导出（Excel）');
+}
+
+onMounted(() => {
+    tabChange('highRisk');
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 本专业高风险 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div 
+                class="flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+            >
+                <div v-for="t in TABS" :key="t.k" @click="tabChange(t.k)"
+                    class="flex items-center gap-1.5 px-3 py-1 text-xs cursor-pointer select-none rounded-[20px] border"
+                    :style="{ '--theme-color': themeStore.themeColor}"
+                    :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white border-[var(--theme-color)]' : 'text-slate-600 hover:bg-slate-100'"
+                >
+                    {{ t.name }}
+                </div>
+            </div>
+            <!-- 高风险场景 -->
+            <div v-if="currentTab === 'highRisk'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
+                    <div class="flex items-center gap-2">
+                        <Icon icon="lucide:shield-check" class="size-16px" :style="{color:themeStore.themeColor}" />
+                        <p class="text-base font-semibold">变更新增高风险场景</p>
+                    </div>
+                    <div class="flex items-center gap-2 min-h-28px">
+                        <NTag size="small" type="primary" class="text-11px font-medium">单笔变更的分析编制在变更上下文内完成</NTag>
+                    </div>
+                </div>
+    
+                <div class="px-4 mb-3 flex flex-wrap items-center gap-1.5">
+                    <span class="mr-1 text-xs text-slate-400">时间</span>
+                    <NButton 
+                        size="tiny" 
+                        round 
+                        :type="range === r ? 'primary' : 'default'"
+                        v-for="r in RISK_RANGES" 
+                        :key="r" 
+                        @click="range = r"
+                    >
+                        {{ r }}
+                    </NButton>
+                    <span class="ml-3 mr-1 text-xs text-slate-400">部门</span>
+                    <NButton
+                        size="tiny" 
+                        round 
+                        v-for="d in departments" 
+                        :key="d.id" 
+                        :type="dept === d.name ? 'primary' : 'default'"
+                        @click="dept = d.name"
+                    >
+                    {{ d.name }}
+                    </NButton>
+                    <span class="ml-auto self-center text-[11px] text-slate-400">{{ list.length }} 个高风险场景</span>
+                </div>
+                <div class="scroll">
+                    <div class="space-y-3 px-4 pb-3">
+                        <div v-for="(s, i) in list" :key="`${s.cid ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-3 rounded-lg border px-4 py-3">
+                            <div class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <NTag type="info" size="small">{{ s.method }}</NTag>
+                                    <span class="text-sm font-medium text-slate-800">{{ s.item }}</span>
+                                    <NTag type="error" size="small">固有风险 · 高</NTag>
+                                    <NTag v-if="s.residual==='高'" type="error" size="small">剩余风险 · {{ s.residual }}</NTag>
+                                    <NTag v-if="s.residual==='中'" type="warning" size="small">剩余风险 · {{ s.residual }}</NTag>
+                                    <NTag v-if="s.residual==='低'" type="info" size="small">剩余风险 · {{ s.residual }}</NTag>
+                                </div>
+                                <div class="mt-0.5 text-xs text-slate-600">{{ s.scene }}</div>
+                                <div class="mt-0.5 text-xs text-slate-400">
+                                    变更：{{ s.info }} · {{ s.dept }} · 分析日期 {{ s.adate }} · 责任：{{ s.owner }} · 分析记录 {{ s.count }} 行
+                                </div>
+                            </div>
+                            <NButton ghost size="small" class="text-xs" @click="openSceneChange(s)">查看变更</NButton>
+                            <NButton size="small" type="primary" class="text-xs" @click="viewAnalysis(s)">查看分析记录</NButton>
+                        </div>
+                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">当前筛选条件下无新增高风险场景</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 历史分析检索 -->
+            <div v-if="currentTab === 'history'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
+                    <div class="flex items-center gap-2">
+                        <Icon icon="mage:book" class="size-18px" :style="{color:themeStore.themeColor}" />
+                        <p class="text-base font-semibold">历史分析记录检索（企业风险知识资产）</p>
+                    </div>
+                    <div class="flex items-center gap-2 min-h-28px">
+                        <NInput v-model:value="keyword" size="small" class="text-xs !w-200px" placeholder="按单号 / 装置 / 关键词检索…">
+                            <template #suffix>
+                                <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+                            </template>
+                        </NInput>
+                    </div>
+                </div>
+                <div class="px-4 mb-3 flex flex-wrap items-center gap-1.5">
+                    <NButton 
+                        size="tiny" 
+                        round 
+                        v-for="m in ['全部', 'HAZOP', 'JSA', '检查表', 'AI 预分析']" 
+                        :key="m" 
+                        :type="method === m ? 'primary' : 'default'"
+                        @click="method = m"
+                    >
+                        {{ m }}
+                    </NButton>
+                    <span class="ml-auto self-center text-[11px] text-slate-400">{{ list.length }} 条记录</span>
+                </div>
+                <div class="scroll">
+                    <div class="space-y-3 px-4 pb-3">
+                        <div v-for="h in list" :key="h.id" class="flex flex-wrap items-center gap-3 rounded-lg border px-4 py-2.5">
+                            <div class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="font-mono text-[11px] text-slate-400">{{ h.id }}</span>
+                                    <NTag type="info" size="small">{{ h.method }}</NTag>
+                                    <span class="text-sm text-slate-800">{{ h.change }}</span>
+                                </div>
+                                <div class="mt-0.5 text-xs text-slate-500">{{ h.unit }} · 范围：{{ h.scope }} · {{ h.rows }} 行分析记录 · {{ h.date }}</div>
+                            </div>
+                            <NButton text type="primary" @click="viewHistory(h.id)">
+                                <Icon icon="lucide:eye" class="size-16px" />
+                            </NButton>
+                            <NButton ghost size="small" class="text-xs" @click="copyHistory(h.id)">复用到新变更</NButton>
+                        </div>
+                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配的分析记录</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 方法模板库 -->
+            <div v-if="currentTab === 'tpl'" class="border border-slate-200" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+                <div class="flex items-center justify-between px-4 py-3 border-b mb-3">
+                    <div class="flex items-center gap-2">
+                        <Icon icon="akar-icons:file" class="size-16px" :style="{color:themeStore.themeColor}" />
+                        <p class="text-base font-semibold">方法模板库（AI 风险预分析的知识来源之一）</p>
+                    </div>
+                </div>
+                <div class="scroll">
+                    <div class="space-y-3 px-4 pb-3">
+                        <div class="grid gap-3 grid-cols-2">
+                            <div v-for="t in list" :key="t.name" class="rounded-lg border p-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-sm font-medium text-slate-800">{{ t.name }}</span>
+                                    <NTag size="small" type="info">{{ t.tag }}</NTag>
+                                </div>
+                                <p class="mt-1.5 text-xs leading-relaxed text-slate-500">{{ t.desc }}</p>
+                                <div class="mt-3 flex gap-2">
+                                    <NButton ghost size="small" class="text-xs" @click="previewTemplate(t.name)">查看</NButton>
+                                    <NButton ghost size="small" class="text-xs" @click="downloadTemplate(t.name)">
+                                        <Icon icon="material-symbols:download" class="size-14px" />下载
+                                    </NButton>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="list.length === 0" class="py-6 text-center text-xs text-slate-400">未找到匹配的方法模板库</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 进度弹框 -->
+            <NDrawer v-model:show="progressDrawer" width="85%" placement="right">
+                <NDrawerContent closable>
+                    <template #header>
+                        <span class="flex flex-wrap items-center gap-2 text-base">
+                            风险分析记录表
+                            <NTag size="small" type="info">{{ currentRecord.method }}</NTag>
+                            <NTag size="small" type="error">含固有风险 · 高 场景</NTag>
+                        </span>
+                    </template>
+                    <div>
+                        <div class="mb-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500">
+                            <span>变更：<span class="font-medium text-slate-700">{{ currentRecord.info }}</span></span>
+                            <span>分析日期：{{ currentRecord.adate }}</span>
+                            <span>责任：{{ currentRecord.owner }}</span>
+                            <span class="ml-auto text-slate-400">分析编制与修改在变更上下文内完成，此处只读</span>
+                        </div>
+                        <div v-if="!isHazop" class="overflow-x-auto rounded-lg border border-b-0">
+                            <table class="w-full min-w-[860px] border-collapse">
+                                <thead>
+                                <tr>
+                                    <th :class="th" class="w-[130px]">风险项</th>
+                                    <th :class="th">场景描述</th>
+                                    <th :class="th" class="w-[76px] text-center">固有风险</th>
+                                    <th :class="th">现有措施</th>
+                                    <th :class="th">建议措施</th>
+                                    <th :class="th" class="w-[76px] text-center">剩余风险</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr v-for="(r, i) in currentRecord.jsaRows" :key="i" :class="r.item === currentRecord.item && r.inherent === '高' ? 'bg-red-50/40' : ''">
+                                    <td :class="td" class="font-medium text-slate-800">{{ r.item }}</td>
+                                    <td :class="td">{{ r.scene }}</td>
+                                    <td :class="td" class="text-center">
+                                        <NTag size="small" type="error" v-if="r.inherent==='高'">{{ r.inherent }}</NTag>
+                                        <NTag size="small" type="warning" v-if="r.inherent==='中'">{{ r.inherent }}</NTag>
+                                        <NTag size="small" type="info" v-if="r.inherent==='低'">{{ r.inherent }}</NTag>
+                                    </td>
+                                    <td :class="td">{{ r.existing }}</td>
+                                    <td :class="td">{{ r.suggest }}</td>
+                                    <td :class="td" class="text-center">
+                                        <NTag size="small" type="error" v-if="r.residual==='高'">{{ r.residual }}</NTag>
+                                        <NTag size="small" type="warning" v-if="r.residual==='中'">{{ r.residual }}</NTag>
+                                        <NTag size="small" type="info" v-if="r.residual==='低'">{{ r.residual }}</NTag>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div v-else class="flex gap-3">
+                        <!-- 节点 · 偏离导航 -->
+                        <div class="w-48 shrink-0 space-y-1.5">
+                            <div v-for="(n, i) in hazopNodes" :key="i" @click="sel = i"
+                                class="w-full rounded-lg border px-3 py-2 text-left text-xs cursor-pointer"
+                                :class="sel === i ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-white' : 'hover:border-[var(--theme-color)]'"
+                                :style="{'--theme-color': themeStore.themeColor}"
+                            >
+                                <span class="block truncate font-medium">{{ n.dev }}</span>
+                                <span class="mt-0.5 flex items-center justify-between text-[11px]" :class="sel === i ? 'text-white/80' : 'text-slate-400'">
+                                    <span class="truncate">{{ n.node.replace(/^节点\d+ · /, '') }}</span>
+                                    <NTag size="tiny" round class="ml-1" :type="sel === i ? 'default' : 'success'">{{ n.n }} 条</NTag>
+                                </span>
+                            </div>
+                            <p class="px-1 pt-1 text-[11px] leading-relaxed text-slate-400">L / S 取值 1–5，RR 按 5×5 风险矩阵实时重算</p>
+                        </div>
+                        <!-- 偏差分析表 -->
+                        <div class="min-w-0 flex-1 overflow-x-auto rounded-lg border border-b-0">
+                            <table class="w-full min-w-[760px] border-collapse">
+                            <thead>
+                                <tr>
+                                <th :class="th">原因</th>
+                                <th :class="th">后果</th>
+                                <th :class="th" class="w-10 !text-center">L</th>
+                                <th :class="th" class="w-10 !text-center">S</th>
+                                <th :class="th" class="w-[92px] !text-center">RR</th>
+                                <th :class="th">安全措施</th>
+                                <th :class="th">建议措施</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(r, i) in selRows" :key="i">
+                                <td :class="td">{{ r.cause }}</td>
+                                <td :class="td">{{ r.cons }}</td>
+                                <td :class="td" class="text-center">{{ r.L }}</td>
+                                <td :class="td" class="text-center">{{ r.S }}</td>
+                                <td :class="td" class="text-center">
+                                    <NTag size="small" :type="rrTag(r.L, r.S).cls">{{ rrTag(r.L, r.S).label }}</NTag>
+                                </td>
+                                <td :class="td">{{ r.safety }}</td>
+                                <td :class="td">{{ r.suggest }}</td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        </div>
+                    </div>
+                    <template #footer>
+                        <div class="flex justify-end gap-2">
+                            <NButton ghost @click="exportFile"><Icon icon="material-symbols:download" class="size-16px" />导出</NButton>
+                            <NButton type="primary" @click="progressDrawer = false">关闭</NButton>
+                        </div>
+                    </template>
+                </NDrawerContent>
+            </NDrawer>
+        </NCard>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 303px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/highRiskDetail/index.vue b/src/views/my/highRiskDetail/index.vue
index 9067b1e..8f07ac1 100644
--- a/src/views/my/highRiskDetail/index.vue
+++ b/src/views/my/highRiskDetail/index.vue
@@ -1,1220 +1,1220 @@
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { useRoute } from 'vue-router';
-import { getColorWithOpacity } from '@/utils/common';
-
-const themeStore = useThemeStore();
-const { routerBack } = useRouterPush();
-const route = useRoute();
-
-const loading = ref<boolean>(false);
-// 当前高风险详情
-const currentInfo = ref<any>(null);
-const editMode = ref<boolean>(false);
-// 变更等级
-const level = ref<string>('重要');
-// 变更培训内容
-const traceCount = ref<number>(0);
-const canCosign = ref<boolean>(false);
-const acceptSign = ref<string>("none");
-const role = ref<string>("applicant");
-const today = () => new Date().toLocaleDateString("zh-CN");
-// 判定说明抽屉
-const describeDrawer = ref<boolean>(false);
-const levelDrawer = ref<boolean>(false);
-// 判定类型
-const judgmentType = ref<string>('工艺');
-// 得分
-const totalScore = ref<number>(21);
-// 评分维度
-const SCORE_MAJOR = [
-    { dim: "设备影响", score: 3, basis: "关键设备运行边界调整，接近设计上限" },
-    { dim: "财务影响", score: 3, basis: "失效可能导致装置停车，损失较大" },
-    { dim: "质量影响", score: 4, basis: "直接影响产品关键指标" },
-    { dim: "安全影响", score: 4, basis: "涉及工艺安全边界 / 重大危险源区域" },
-    { dim: "环境影响", score: 2, basis: "排放参数需重新校核" },
-    { dim: "合规声誉", score: 5, basis: "涉及重点监管危险化工工艺" },
-];
-const SCORE_GENERAL = [
-    { dim: "设备影响", score: 2, basis: "温度 / 压力仍在设计范围内，腐蚀速率略增" },
-    { dim: "财务影响", score: 2, basis: "控制不当可能批次报废，损失中等（1万~10万）" },
-    { dim: "质量影响", score: 3, basis: "涉及主要工艺参数，需加强过程监控" },
-    { dim: "安全影响", score: 3, basis: "涉及联锁参数调整，需 PSSR 确认" },
-    { dim: "环境影响", score: 1, basis: "无新增污染物排放" },
-    { dim: "合规声誉", score: 1, basis: "不涉及监管工艺备案" },
-];
-const scoreRows = computed(() => (level.value === "重要" ? SCORE_MAJOR : SCORE_GENERAL));
-
-interface FlowNode {
-  name: string;
-  kind: "审批" | "会签" | "最终批准";
-  status: "done" | "current" | "todo";
-  members?: { name: string; done: boolean }[];
-}
-const flow = ref<FlowNode[]>([
-    { name: "部门审核", kind: "审批", status: "done" },
-    { name: "专业会签", kind: "会签", status: "done" },
-    { name: "安全审查", kind: "审批", status: "current", members: [{ name: "安全审查", done: false }] },
-    { name: "分管领导最终批准", kind: "最终批准", status: "todo" },
-]);
-const current = computed(() => flow.value.find((n:any) => n.status === "current"));
-// ai 标注抽屉
-const aiDrawer = ref<boolean>(false);
-const mandClosed = ref<boolean>(false);
-const confirmClose = () => {
-    mandClosed.value = true; 
-    window.$message?.success('强制合规项已确认闭环，操作已留痕');
-}
-const conflictHide = ref<boolean>(false);
-const PARAM_DIFF = [
-    { k: "反应温度", before: "80℃", after: "90℃", over: false, note: "仍在溶剂沸点与物料分解温度的安全裕度内" },
-    { k: "保温时间", before: "8 h", after: "4 h", over: false, note: "终点判断窗口变窄，须修订操作规程" },
-    { k: "DCS 温度高报警", before: "85℃", after: "95℃", over: true, note: "超出原报警裕度，须重新整定验证" },
-    { k: "联锁高高报", before: "90℃", after: "100℃", over: true, note: "接近设备设计温度上限，投用前须完成联锁测试" },
-    { k: "未知杂质含量", before: "0.05%", after: "0.12%", over: false, note: "结构未定，须纳入日常分析计划" },
-];
-const aiRead = ref<boolean>(false);
-const roleName = ref<string>('张工艺');
-const suggs = ref([
-    { id: 1, text: "将未知杂质含量纳入日常分析计划（每周 1 次，连续 8 周）", st: "待定" },
-    { id: 2, text: "修订操作规程并补充超温应急处置卡后再投用", st: "待定" },
-]);
-const opinion = ref<string>("");
-
-// 已阅 AI 建议
-const readSuggest = () => {
-    aiRead.value = true;
-    window.$message?.success(`${roleName} 已阅 AI 建议，时间与操作已写入审批留痕`);
-}
-// 采纳为行动项
-const acceptSuggest = (s: any) => {
-    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '已采纳' } : x)); 
-    opinion.value = (opinion.value ? `${opinion.value}\n` : '') + `采纳 AI 建议：${s.text}`; 
-    window.$message?.success('已采纳，自动生成 PSSR 行动项（来源：AI 建议），并纳入审批意见');
-}
-// 不采纳 AI 建议
-const rejectSuggest = (s: any) => {
-    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '不采纳' } : x)); 
-    window.$message?.info('不采纳理由「现有分析频次已覆盖风险」已记录留痕');
-}
-// 查看归档包
-const viewArchive = (name: string) => {
-    window.$message?.info(`新窗口打开 ${name} 归档包，不影响当前审批`);
-}
-
-
-// 返回
-const back = () => {
-    routerBack();
-};
-
-// 导出
-const exportFile = (type: string) => {
-    if(type === 'change'){
-        window.$message?.success('导出变更申请表成功');
-    }
-    if(type === 'risk'){
-        window.$message?.success('导出风险检查行动项表成功');
-    }
-    if(type === 'flow'){
-        window.$message?.info('查看审批流程图');
-    }
-};
-
-// 变更附带资料下载/一键下载
-const downloadFile = (type: string) => {
-    if(type === 'all'){
-        window.$message?.success('打包下载全部附件');
-    }else{
-        window.$message?.success('下载当前附件成功');
-    }
-};
-// 变更附带资料预览
-const previewFile = () => {
-    window.$message?.info('预览当前附件成功');
-}
-// 打开完整分析记录
-const openRecord = (name: string) => {
-    window.$message?.info(`打开「${name}」完整分析记录`);
-}
-
-// 加签
-const joinSign = () => {
-    acceptSign.value = 'safety'; 
-    window.$message?.success('演示：安全部门加签完成（电子签署留痕）· 验收签署链闭环');
-}
-// 催办
-const handleReminder = (m: any) => {
-    window.$message?.success(`演示：已催办 ${m.name}（系统消息 + 企业微信 + 短信），连续 2 次未响应将上报部门负责人`)
-}
-
-
-onMounted(() => {
-    if(route.query && route.query.params){
-        currentInfo.value = JSON.parse(route.query.params as string);
-    }
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 本专业高风险 -->
-    <NSpin :show="loading" size="small">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <div 
-                class="flex flex-wrap items-center gap-3 border border-slate-200 px-3 py-2 mb-3"
-                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-            >
-                <NButton ghost type="primary" @click="back">
-                    <Icon icon="ep:back" class="size-16px mr-1" />返回
-                </NButton>
-                <div class="min-w-0 flex-1 truncate text-base font-bold text-slate-800">{{ currentInfo?.title }}</div>
-                <NTag size="small" type="info" class="font-mono text-xs">编号：{{ currentInfo?.cid }}</NTag>
-                <NButton 
-                    v-if="currentInfo?.status === '审批中'"
-                    ghost 
-                    size="small"
-                    class="text-xs"
-                    :type="aiDrawer ? 'success' : 'default'"
-                    @click="aiDrawer = !aiDrawer"
-                >
-                    <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 标注{{ aiDrawer ? ' · 已开启' : ' · 已关闭' }}
-                </NButton>
-            </div>
-            <div class="space-y-3 scroll">
-                <!-- 直接修改：红线留痕示例 -->
-                <div v-if="editMode" class="rounded-lg border border-dashed border-red-300 bg-white p-3 text-sm">
-                    <div class="mb-1 text-xs font-semibold text-red-500">红线留痕示例</div>
-                    <p>
-                        变更等级：<del class="text-red-500 line-through">一般</del>
-                        <ins class="bg-emerald-50 px-1 text-emerald-600 no-underline">重要</ins>
-                        <span class="ml-2 text-xs text-slate-400">王海燕 · 2026-07-30 14:22 修改，已通知申请人确认</span>
-                    </p>
-                </div>
-                <!-- 变更申请表 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >变更申请表</p>
-                    <NButton ghost size="small" class="text-xs" @click="exportFile('change')"><Icon icon="material-symbols:download" class="size-16px" />导出变更申请表</NButton>
-                </div>
-                <div
-                    class="border border-slate-200"
-                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                >
-                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更发起人</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">孙丽</div>
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">申请单位</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">一车间 · 工艺组</div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">主管部门</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">技术部</div>
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更类别</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            工艺 
-                            <NButton ghost type="primary" size="small" round class="text-xs" @click="describeDrawer = true">
-                                <Icon icon="lucide:sparkles" class="size-12px mr-1" />判定说明
-                            </NButton>
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">发起日期</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-07-25</div>
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">计划投用日期</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-08-05</div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更时限</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">永久变更</div>
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">紧急</p>
-                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">否</div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更等级</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            <NRadioGroup v-model:value="level">
-                                <NRadio value="重要">重要</NRadio>
-                                <NRadio value="一般" :disabled="true">一般</NRadio>
-                            </NRadioGroup>
-                            <NTag type="error" size="small">合计 {{totalScore}} 分</NTag>
-                            <NButton ghost type="warning" size="small" round class="text-xs" @click="levelDrawer = true">
-                                <Icon icon="lucide:eye" class="size-12px mr-1" />查看等级判定
-                            </NButton>
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">涉及设备</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            R-101 聚合釜 / TIC-101
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更目的</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">预期效果</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            单釜反应周期缩短约 40 分钟，年产能预计提升 8%。
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更前</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更后</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">连带变更</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            修订工艺卡片与操作规程；DCS 参数与报警值修改；更新 HAZOP 分析报告；岗位人员再培训
-                        </div>
-                    </div>
-                    <div class="grid grid-cols-[100px_1fr]">
-                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">所需材料</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            工艺计算书、热平衡与飞温风险分析、HAZOP 分析报告、更新后的工艺卡片
-                        </div>
-                    </div>
-                </div>
-                <!-- 变更附带资料 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >变更附带资料</p>
-                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
-                </div>
-                <NTable size="small">
-                    <thead>
-                    <tr>
-                        <th class="w-60px !text-center">序号</th>
-                        <th>文件名</th>
-                        <th class="w-100px !text-center">类型</th>
-                        <th class="w-100px !text-center">文件大小</th>
-                        <th class="w-120px !text-center">上传时间</th>
-                        <th class="w-120px !text-center">上传阶段</th>
-                        <th class="w-90px !text-center">操作</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td class="text-center">1</td>
-                        <td>变更方案.pdf</td>
-                        <td class="text-center text-xs">pdf</td>
-                        <td class="text-center text-xs">441.04KB</td>
-                        <td class="text-center text-xs">2026-07-28 09:12</td>
-                        <td class="text-center text-xs">发起变更</td>
-                        <td>
-                            <div class="flex items-center justify-center gap-2">
-                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
-                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
-                            </div>
-                        </td>
-                    </tr>
-                    </tbody>
-                </NTable>
-                <!-- 试验验证和风险评估方式 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >试验验证和风险评估方式</p>
-                </div>
-                <div
-                    class="border border-slate-200"
-                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                >
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要进行试验验证</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            否
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">试验附件</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            无附件
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要设计委托</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            否
-                        </div>
-                    </div>
-                    <div class="grid grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            AI 分析、HAZOP
-                        </div>
-                    </div>
-                </div>
-                <!-- 风险辨识会议信息 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >风险辨识会议信息</p>
-                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
-                </div>
-                <div
-                    class="border border-slate-200"
-                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                >
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议主题</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            聚合反应温度控制上限调整（78℃→82℃）
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议时间</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            2026-07-29 13:32
-                        </div>
-                    </div>
-                    <div class="grid border-b grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">参会人员</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            张工艺、王仪表、周设备、王海燕、李主任
-                        </div>
-                    </div>
-                    <div class="grid grid-cols-[100px_1fr]">
-                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
-                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
-                            AI 分析、HAZOP
-                        </div>
-                    </div>
-                </div>
-                <NTable size="small">
-                    <thead>
-                    <tr>
-                        <th class="w-60px !text-center">序号</th>
-                        <th>文件名</th>
-                        <th class="w-100px !text-center">类型</th>
-                        <th class="w-100px !text-center">文件大小</th>
-                        <th class="w-120px !text-center">上传时间</th>
-                        <th class="w-120px !text-center">上传阶段</th>
-                        <th class="w-90px !text-center">操作</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td class="text-center">1</td>
-                        <td>风险辨识会议照片.pdf</td>
-                        <td class="text-center text-xs">pdf</td>
-                        <td class="text-center text-xs">441.04KB</td>
-                        <td class="text-center text-xs">2026-07-28 09:12</td>
-                        <td class="text-center text-xs">风险辨识</td>
-                        <td>
-                            <div class="flex items-center justify-center gap-2">
-                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
-                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
-                            </div>
-                        </td>
-                    </tr>
-                    </tbody>
-                </NTable>
-                
-                <!-- 风险辨识评估 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >风险辨识评估</p>
-                    <NButton ghost size="small" class="text-xs" @click="exportFile('risk')"><Icon icon="material-symbols:download" class="size-16px" />导出风险检查行动项表</NButton>
-                </div>
-                <NTable size="small">
-                    <thead>
-                        <tr>
-                            <th class="w-60px !text-center">序号</th>
-                            <th>采取的安全措施</th>
-                            <th class="w-100px !text-center">剩余风险等级</th>
-                            <th class="w-100px !text-center">负责人</th>
-                            <th class="w-100px !text-center">计划完成日期</th>
-                            <th class="w-100px !text-center">部门负责人</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td class="text-center">1</td>
-                            <td>
-                                <div class="flex items-center flex-wrap">
-                                    <p>投用前完成联锁跳车电流设定值校核并留存记录</p>
-                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
-                                </div>
-                            </td>
-                            <td class="text-center text-xs">
-                                <NTag type="success" size="small">低</NTag>
-                            </td>
-                            <td class="text-center text-xs">周设备</td>
-                            <td class="text-center text-xs">2026-07-28</td>
-                            <td class="text-center text-xs">李主任</td>
-                        </tr>
-                        <tr>
-                            <td class="text-center">2</td>
-                            <td>
-                                <div class="flex items-center flex-wrap">
-                                    <p>电缆与开关容量校核升级完成后方可送电</p>
-                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
-                                </div>
-                            </td>
-                            <td class="text-center text-xs">
-                                <NTag type="warning" size="small">中</NTag>
-                            </td>
-                            <td class="text-center text-xs">张工艺</td>
-                            <td class="text-center text-xs">2026-08-09</td>
-                            <td class="text-center text-xs">李主任</td>
-                        </tr>
-                        <tr>
-                            <td class="text-center">3</td>
-                            <td>
-                                <div class="flex items-center flex-wrap">
-                                    <p>更新 P&ID（图号 PID-R201-03）与设备台账</p>
-                                    <NTag type="info" size="small" class="ml-2">关闭前完成</NTag>
-                                </div>
-                            </td>
-                            <td class="text-center text-xs">
-                                <NTag type="error" size="small">高</NTag>
-                            </td>
-                            <td class="text-center text-xs">王仪表</td>
-                            <td class="text-center text-xs">2026-08-12</td>
-                            <td class="text-center text-xs">李主任</td>
-                        </tr>
-                    </tbody>
-                </NTable>
-                <div class="flex flex-wrap items-center gap-2 rounded-lg bg-[#fafafc] px-3 py-2.5 text-xs text-slate-500">
-                    <span>完整分析记录：</span>
-                    <template v-for="t in ['AI','HAZOP']" :key="t">
-                        <NButton size="small" ghost type="primary" class="text-xs" @click="openRecord(t)">{{  t }}分析记录</NButton>
-                    </template>
-                </div>
-
-                <div class="flex gap-2 rounded-lg border bg-[#EAF0F9]/50 px-3 py-2 text-xs text-slate-500 !mt-6">
-                    <Icon icon="lucide:sparkles" class="size-14px" />
-                    <p class="flex-1">
-                        以下表单与变更申请页同格式展示，随申请单一并提交；审批 / 会签人员可直接修改，修改自动留痕并通知申请人确认；后续培训签到、PSSR 执行、验收、关闭环节按同一格式确认
-                    </p>
-                </div>
-                <!-- 变更培训内容 -->
-                <div>
-                    <div class="flex items-center gap-2 mb-1.5">
-                        <Icon icon="lucide:graduation-cap" class="size-16px text-violet-500" />
-                        <span class="text-sm font-semibold text-slate-700">变更培训内容</span>
-                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
-                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
-                    </div>
-                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">培训安排</div>
-                            <div class="grid grid-cols-2">
-                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
-                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训对象</span>
-                                    <p>R-201 位操作人员（4 人）、维修班（2 人）</p>
-                                </div>
-                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
-                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训方式</span>
-                                    <p>现场讲解 + 操作演示</p>
-                                </div>
-                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
-                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训时长</span>
-                                    <p>2 学时（投用前完成）</p>
-                                </div>
-                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
-                                    <span class="w-20 shrink-0 text-xs text-slate-500">考核方式</span>
-                                    <p>现场提问 + 签到确认，合格后上岗</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、变更内容</div>
-                            <p class="px-3 py-1.6">M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机（ExdⅡBT4 → ExdⅡCT4），额定电流 102A → 138A；电缆与开关容量同步升级，联锁跳车电流设定值同步校核调整。</p>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、变化的操作方式</div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p class="w-[100px]">1. 搅拌器启动</p>
-                                    <p 
-                                        class="flex-1 bg-slate-50 py-1.5 px-2"
-                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">前：</span>直接启动，观察电流 ≤102A
-                                    </p>
-                                </div>
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p 
-                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                        }"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">后：</span>启动后核对电流 ≤138A，确认变频器参数已更新
-                                    </p>
-                                    <p 
-                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                            color: themeStore.otherColor.warning
-                                        }"
-                                    >
-                                        注：首次启动空载试运行 30 分钟
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p class="w-[100px]">2. 高粘度工况操作</p>
-                                    <p 
-                                        class="flex-1 bg-slate-50 py-1.5 px-2"
-                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">前：</span>粘度 >3000cP 需降速运行
-                                    </p>
-                                </div>
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p 
-                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                        }"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">后：</span>粘度 ≤6000cP 可全速运行
-                                    </p>
-                                    <p 
-                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                            color: themeStore.otherColor.warning
-                                        }"
-                                    >
-                                        注：严禁超过 6000cP 上限
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p class="w-[100px]">3. 过载跳闸处置</p>
-                                    <p 
-                                        class="flex-1 bg-slate-50 py-1.5 px-2"
-                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">前：</span>复位后直接重启
-                                    </p>
-                                </div>
-                                <div class="flex items-center gap-2 px-3 py-1.6">
-                                    <p 
-                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                        }"
-                                    >
-                                        <span :style="{color:themeStore.themeColor}">后：</span>先查明原因并记录，联锁复位需班长确认
-                                    </p>
-                                    <p 
-                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
-                                        :style="{
-                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-                                            borderRadius: themeStore.themeRadius + 'px',
-                                            color: themeStore.otherColor.warning
-                                        }"
-                                    >
-                                        注：跳闸电流设定值已调整
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、潜在风险与应对方式</div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex px-3 py-2.2">
-                                    <span class="text-slate-400 pr-1">1.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
-                                    <p>电机 / 电缆过热</p>
-                                </div>
-                                <div class="flex px-3 py-2.2">
-                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
-                                    <p class="flex-1">投用首周每班测温并记录，红外点检复核</p>
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex px-3 py-2.2">
-                                    <span class="text-slate-400 pr-1">2.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
-                                    <p class="flex-1">联锁设定错误导致拒动 / 误动</p>
-                                </div>
-                                <div class="flex px-3 py-2.2">
-                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
-                                    <p class="flex-1">投用前完成跳车试验并留存记录</p>
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 border-t text-xs">
-                                <div class="flex px-3 py-2.2">
-                                    <span class="text-slate-400 pr-1">3.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
-                                    <p class="flex-1">防爆接合面或格兰头密封失效</p>
-                                </div>
-                                <div class="flex px-3 py-2.2">
-                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
-                                    <p class="flex-1">检查防爆接合面与格兰头，严禁带电开盖</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、培训签到</div>
-                            <p class="px-3 py-1.6">反应岗位：张大勇、李强；维修班：周设备；班长：李主任（名单由培训对象岗位自动匹配，扫码签到 / 手动确认 / 拍照上传签到表）</p>
-                        </div>
-                    </div>
-                </div>
-                <!-- PSSR 检查内容 -->
-                <div>
-                    <div class="flex items-center gap-2 mb-1.5">
-                        <Icon icon="lucide:list-checks" class="size-16px text-violet-500" /> 
-                        <span class="text-sm font-semibold text-slate-700">PSSR 检查内容</span>
-                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
-                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
-                    </div>
-                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、风险分析行动项落实</div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">联锁跳车电流设定值校核并留存记录</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">周设备</NTag>
-                                    <span class="text-slate-400">手动确认 + 记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">电缆与开关容量校核升级完成后方可送电</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">王仪表</NTag>
-                                    <span class="text-slate-400">手动确认 + 记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">操作人员培训完成并考核合格，签到表归档</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">张工艺</NTag>
-                                    <span class="text-slate-400">培训签到记录</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、现场安装设备检查确认</div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">电机安装对中、地脚螺栓力矩复核</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">周设备</NTag>
-                                    <span class="text-slate-400">手动确认 + 记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">防爆接合面、格兰头密封检查</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">王仪表</NTag>
-                                    <span class="text-slate-400">手动确认 + 记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、保护措施确认</div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">联锁跳车试验合格并留存记录</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">周设备</NTag>
-                                    <span class="text-slate-400">试验记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">电机接地、漏电保护测试合格</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">王仪表</NTag>
-                                    <span class="text-slate-400">测试记录上传</span>
-                                    <NTag size="small" type="info">投用前</NTag>
-                                    <!-- <NTag size="small">关闭前</NTag> -->
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、资料归档</div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">更新 P&ID（图号 PID-R201-03）与设备台账</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small">王仪表</NTag>
-                                    <span class="text-slate-400">版本受控上传</span>
-                                    <NTag size="small">关闭前</NTag>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 验收评价 -->
-                <div>
-                    <div class="flex items-center gap-2 mb-1.5">
-                        <Icon icon="ix:success" class="size-16px text-emerald-500" />
-                        <span class="text-sm font-semibold text-slate-700">验收评价</span>
-                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
-                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
-                    </div>
-                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                        <NTable size="small">
-                            <thead>
-                                <tr>
-                                    <th class="w-160px">验收项目</th>
-                                    <th>量化标准</th>
-                                    <th class="w-190px">验收方式</th>
-                                    <th class="w-100px">责任方</th>
-                                    <th class="w-80px !text-center">评估结论</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td class="text-xs">过载跳闸消除</td>
-                                    <td class="text-xs">投用后月均过载跳闸 0 次（变更前月均 3 次）</td>
-                                    <td class="text-xs">DCS 跳闸记录统计，投用后连续 30 天</td>
-                                    <td class="text-xs">车间 · 李主任</td>
-                                    <td class="text-center text-xs">
-                                        <NTag type="warning" size="small">待验收</NTag>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </NTable>
-                        <div class="mt-1.5 text-[11px] text-slate-400">评估结论由车间与各专业在验收阶段填写：完全达到 / 基本达到 / 未达成</div>
-                        <!-- 验收审核签署链 -->
-                        <div class="mt-2 rounded-lg border border-[#ACC6E5]/60 bg-[#EAF0F9]/50 p-3">
-                            <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-slate-600">
-                                验收审核签署
-                                <span class="font-normal text-slate-400">申请人填报 → 属地负责人审核{{ level === '重要' ? ' → 安全部门加签（重要变更）' : '' }}</span>
-                            </div>
-                            <div class="flex flex-wrap items-center gap-2">
-                                <NTag size="small" type="success">
-                                    <template #icon><Icon icon="ix:success" class="size-14px" /></template>
-                                    验收填报 · 申请人
-                                </NTag>
-                                <Icon icon="formkit:right" class="size-12px text-slate-300" />
-                                <template v-if="acceptSign === 'none'">
-                                    <template v-if="role === 'dept'">
-                                        <button class="inline-flex h-7 items-center rounded-md bg-emerald-600 px-2.5 text-xs font-medium text-white transition hover:bg-emerald-700" @click="acceptSign = 'dept'; toast.success(level === '重要' ? '演示：属地负责人已审核验收结论（电子签署留痕）· 重要变更已流转安全部门加签（王海燕）' : '演示：属地负责人已审核验收结论（电子签署留痕）');">同意验收结论</button>
-                                        <button class="inline-flex h-7 items-center rounded-md border border-red-200 bg-white px-2.5 text-xs text-red-600 transition hover:bg-red-50" @click="toast.warning('演示：已退回申请人补正验收材料，补正后重新提交审核')">退回补正</button>
-                                    </template>
-                                    <NTag v-else size="small">待属地负责人（李主任）审核</NTag>
-                                </template>
-                                <NTag v-else size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />属地负责人审核 · 李主任 {{ today() }}</NTag>
-                                <template v-if="level === '重要' && acceptSign !== 'none'">
-                                    <Icon icon="formkit:right" class="size-12px text-slate-300" />
-                                    <NTag v-if="acceptSign === 'safety'" size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />安全加签 · 王海燕 {{ today() }}</NTag>
-                                    <button v-else-if="role === 'safety'" @click="joinSign">安全加签</button>
-                                    <NTag v-else size="small" class="bg-white text-slate-500">待安全部门加签（王海燕）</NTag>
-                                </template>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 变更关闭确认表 -->
-                <div>
-                    <div class="flex items-center gap-2 mb-1.5">
-                        <Icon icon="lucide:folder-archive" class="size-16px text-slate-500" />
-                        <span class="text-sm font-semibold text-slate-700">变更关闭确认表</span>
-                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
-                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
-                    </div>
-                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-                            <div class="flex items-center px-3 py-1.6 text-xs">
-                                <p class="flex-1">PID 图纸（PID-R201-03，受控最新版）</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small" type="success" round>是</NTag>
-                                    <NTag size="small" type="success">已归档</NTag>
-                                    <!-- <NTag size="small">未归档</NTag> -->
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">操作规程（含超温应急处置卡）</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small" type="success" round>是</NTag>
-                                    <NTag size="small">未归档</NTag>
-                                </div>
-                            </div>
-                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
-                                <p class="flex-1">DCS 联锁台账（新报警 / 联锁值）</p>
-                                <div class="flex items-center gap-2">
-                                    <NTag size="small" type="success" round>是</NTag>
-                                    <NTag size="small">未归档</NTag>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mt-1.5 text-[11px] text-slate-400">AI 辅助判定一次（是 / 否 / 不涉及），可改判留痕；全部资料归档且行动项关闭后，系统自动推送变更主管部门专人确认关闭</div>
-                    </div>
-                </div>
-                <!-- 审批记录 -->
-                <div class="flex items-center justify-between">
-                    <p 
-                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                    >审批记录</p>
-                    <NButton ghost size="small" class="text-xs" @click="exportFile('flow')">查看审批流程图</NButton>
-                </div>
-                <NTable size="small">
-                    <thead>
-                        <tr>
-                            <th class="w-120px">流程阶段</th>
-                            <th class="w-120px">操作人</th>
-                            <th class="w-80px !text-center">操作类型</th>
-                            <th class="w-140px !text-center">操作时间</th>
-                            <th>操作内容和意见</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td class="text-xs">专业会签（仪表）</td>
-                            <td class="text-xs">王仪表 / JC000018</td>
-                            <td class="text-center text-xs">
-                                <NTag type="info" size="small">发起</NTag>
-                            </td>
-                            <td class="text-center text-xs">2026-07-28 09:12</td>
-                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
-                        </tr>
-                        <tr>
-                            <td class="text-xs">专业会签（仪表）</td>
-                            <td class="text-xs">王仪表 / JC000018</td>
-                            <td class="text-center text-xs">
-                                <NTag type="success" size="small">同意</NTag>
-                            </td>
-                            <td class="text-center text-xs">2026-07-28 09:12</td>
-                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
-                        </tr>
-                        <tr>
-                            <td class="text-xs">专业会签（仪表）</td>
-                            <td class="text-xs">王仪表 / JC000018</td>
-                            <td class="text-center text-xs">
-                                <NTag type="warning" size="small">待处理</NTag>
-                            </td>
-                            <td class="text-center text-xs">2026-07-28 09:12</td>
-                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
-                        </tr>
-                    </tbody>
-                </NTable>
-
-                <!-- 审批流程进度 -->
-                <div class="space-y-2">
-                    <div class="text-sm font-semibold">审批流程（{{ level }}变更）</div>
-                    <div class="flex flex-wrap items-center gap-1">
-                        <template v-for="(n, i) in flow" :key="n.name">
-                        <div class="flex items-center gap-1">
-                            <div class="rounded-lg border px-3 py-2 text-center"
-                            :class="n.status === 'done' ? 'border-emerald-300 bg-emerald-50' : n.status === 'current' ? 'border-amber-400 bg-amber-50' : 'bg-slate-50'">
-                            <div class="flex items-center gap-1 text-xs font-medium">
-                                <Icon v-if="n.kind === '会签'" icon="lucide:users" class="size-12px" />
-                                <Icon v-if="n.kind === '最终批准'" icon="uil:lock" class="size-12px" />
-                                {{ n.name }}
-                            </div>
-                            <div class="text-[10px] text-slate-500">{{ n.kind }}</div>
-                            </div>
-                            <Icon v-if="i < flow.length - 1" icon="formkit:right" class="size-14px text-slate-300" />
-                        </div>
-                        </template>
-                    </div>
-                    <div v-if="current?.members" class="rounded-lg border border-amber-200 bg-amber-50/60 p-3">
-                        <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-700">
-                            会签进度（全体通过方可流转）
-                            <span class="font-normal text-amber-600">
-                                {{ current.members.filter((m) => m.done).length }}/{{ current.members.length }} 已签 · 未签已等待 22 小时
-                            </span>
-                        </div>
-                        <div class="flex flex-wrap items-center gap-2">
-                        <span v-for="m in current.members" :key="m.name" class="flex items-center gap-1">
-                            <NTag size="small" :type="m.done ? 'success' : 'default'">
-                                <template #icon>
-                                    <Icon v-if="m.done" icon="ix:success" class="size-14px" />
-                                    <Icon v-else icon="lucide:circle" class="size-12px text-slate-400" />
-                                </template>
-                                {{ m.name }}
-                            </NTag>
-                            <div v-if="!m.done && (role === 'applicant' || role === 'dept')"
-                                class="cursor-pointer inline-flex h-6 items-center gap-1 rounded-md border border-amber-300 bg-white px-2 text-[11px] text-amber-700 transition hover:bg-amber-100"
-                                @click="handleReminder(m)"
-                            >
-                                <Icon icon="lucide:bell" class="size-12px" /> 催办
-                            </div>
-                        </span>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </NCard>
-        <!-- 变更类型判定说明（右侧抽屉） -->
-        <NDrawer v-model:show="describeDrawer" :width="576" placement="right">
-            <NDrawerContent title="AI 变更类型判定说明" closable>
-                <div class="space-y-4">
-                    <div class="flex items-center gap-2">
-                        <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                            ✨ AI 生成 · 需人工确认
-                        </span>
-                        <NTag size="small" type="info">判定：{{ judgmentType }}</NTag>
-                        <NTag size="small">置信度：高</NTag>
-                    </div>
-                    <div class="space-y-3 text-sm leading-relaxed text-slate-700">
-                        <p><b>判定结论：</b>本次变更为 M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机，涉及设备本体规格型号、防爆等级（ExdⅡBT4 → ExdⅡCT4）与额定电流变化，并连带电缆、开关容量及联锁设定值调整，依据变更类型规则判定为「{{ judgmentType }}」类变更。</p>
-                        <p><b>判定依据：</b></p>
-                        <ul class="list-disc space-y-1 pl-5">
-                            <li>命中规则 3.1：设备规格型号 / 功率等级变化 → 设备类</li>
-                            <li>命中规则 3.3：防爆等级与电气配套（电缆、开关容量）变更 → 设备类（电气联动）</li>
-                            <li>排除规则 2.1：反应温度、压力等工艺控制窗口未变化 → 不构成工艺类</li>
-                        </ul>
-                        <p><b>知识库引用：</b>设备数据表 M-201A（Rev C）、防爆合格证、电气负荷校核计算书、《变更管理制度》第 4.3 条。</p>
-                        <p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考，最终类型以人工确认为准；如调整为其他类型，系统将记录修改留痕。</p>
-                    </div>
-                </div>
-            </NDrawerContent>
-        </NDrawer>
-        <!-- 变更等级判定表（右侧抽屉查看） -->
-        <NDrawer v-model:show="levelDrawer" :width="576" placement="right">
-            <NDrawerContent title="变更等级判定表" closable>
-                <div class="space-y-4">
-                    <div class="flex items-center gap-2">
-                        <NTag v-if="level==='重要'" size="small" type="error">判定：{{ level }}变更</NTag>
-                        <NTag v-if="level==='一般'" size="small">判定：{{ level }}变更</NTag>
-                        <span class="text-xs text-slate-400">合计得分 <b class="text-[#17407F]">{{ totalScore }}</b> 分（&lt;20 分为一般，≥20 分为重要）</span>
-                    </div>
-                    <NTable size="small">
-                        <thead>
-                            <tr class="border-b bg-slate-50">
-                                <th class="w-28">评估维度</th>
-                                <th class="w-20">得分</th>
-                                <th>评分依据</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="s in scoreRows" :key="s.dim" class="border-b last:border-b-0">
-                                <td class="font-medium">{{ s.dim }}</td>
-                                <td class="font-bold text-[#17407F]">{{ s.score }}</td>
-                                <td class="text-xs leading-relaxed text-slate-600">{{ s.basis }}</td>
-                            </tr>
-                        </tbody>
-                    </NTable>
-                    <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
-                        AI 初评 + 人工确认，改判留痕；评分表版本随变更提交版本冻结。
-                    </div>
-                </div>
-            </NDrawerContent>
-        </NDrawer>
-        <!-- AI 审批辅助（右侧抽屉查看） -->
-        <NDrawer v-model:show="aiDrawer" :width="576" placement="right">
-            <NDrawerContent title="变更等级判定表" closable>
-                <template #header>
-                    <span class="flex items-center gap-1.5 text-sm font-bold text-slate-700">
-                        <Icon icon="lucide:sparkles" class="size-16px text-violet-500 mr-1" />
-                        AI 审批辅助（抽屉式，正文全窗口阅读）
-                    </span>
-                </template>
-                <div class="space-y-4">
-                    <!-- 合规警告条（强制合规项，不可关闭；闭环后转绿） -->
-                    <div 
-                        class="px-3 py-2.5 text-sm" 
-                        :class="mandClosed ? 'text-[var(--success-color)] bg-[var(--success-bg-color)]' : 'text-[var(--warning-color)] bg-[var(--warning-bg-color)]'"
-                        :style="{
-                            borderRadius:themeStore.themeRadius+'px',
-                            '--success-color':themeStore.otherColor.success, 
-                            '--success-bg-color':getColorWithOpacity(themeStore.otherColor.success,0.1),
-                            '--warning-color':themeStore.otherColor.warning,
-                            '--warning-bg-color':getColorWithOpacity(themeStore.otherColor.warning,0.1)
-                        }"
-                    >
-                        <div class="flex items-center gap-2">
-                            <Icon icon="proicons:alert-triangle" class="size-16px" />
-                            <span class="font-semibold">强制合规</span>
-                            <span class="ml-auto shrink-0">
-                                <NTag v-if="mandClosed" size="small" type="success">
-                                    <template #icon>
-                                        <Icon icon="lucide:shield-check" class="size-12px" />
-                                    </template>
-                                    已闭环
-                                </NTag>
-                                <NTag v-else size="small" type="warning">未闭环</NTag>
-                            </span>
-                        </div>
-                        <p class="mt-1 text-xs leading-relaxed">
-                            本次变更涉及 DCS 联锁设定值修改，依据 AQ/T 3034《化工企业工艺安全管理实施导则》，投用前须完成联锁测试并留存记录。
-                        </p>
-                        <div v-if="!mandClosed" class="mt-1 text-right">
-                            <NButton text type="primary" class="text-xs" @click="confirmClose">确认闭环（留痕）</NButton>
-                        </div>
-                    </div>
-                    <!-- 变更冲突提示（同设备在途变更，可收起） -->
-                    <div 
-                        v-if="!conflictHide" 
-                        class="bg-[var(--bg-color)] px-3 py-2.5 text-sm text-[var(--theme-color)]"
-                        :style="{
-                            borderRadius:themeStore.themeRadius+'px',
-                            '--theme-color':themeStore.themeColor, 
-                            '--bg-color':getColorWithOpacity(themeStore.themeColor,0.1),
-                        }"
-                    >
-                        <div class="flex items-center gap-2">
-                            <Icon icon="lucide:bell" class="size-14px" />
-                            <span class="font-semibold">冲突提示</span>
-                            <NButton text type="primary" class="ml-auto shrink-0 text-xs" @click="conflictHide = true">知道了</NButton>
-                        </div>
-                        <p class="mt-1 text-xs leading-relaxed">
-                            涉及设备 R-101 关联变更 <b>MOC-2026-0038「机封冲洗方案调整」</b>正在审批中，请确认施工时序与隔离方案无冲突。
-                        </p>
-                    </div>
-                    <!-- 属地影响摘要（仅属地负责人视角） -->
-                    <div v-if="role === 'dept'" class="border" :style="{borderRadius:themeStore.themeRadius+'px'}">
-                        <div class="flex items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
-                            <Icon icon="lucide:sparkles" class="size-16px text-violet-500" />
-                            <span class="text-sm font-semibold text-slate-700">属地影响摘要</span>
-                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                                ✨ AI 生成 · 需人工确认
-                            </span>
-                        </div>
-                        <div class="space-y-1.5 px-3 py-2.5 text-xs leading-relaxed text-slate-600">
-                            <p><b class="text-slate-700">涉及单元：</b>一车间 R-201 反应釜及配套 DCS 回路，不影响相邻单元。</p>
-                            <p><b class="text-slate-700">现行规程影响：</b>操作规程第 4.2 节（报警处置）需同步修订，变更关闭前完成受控换版。</p>
-                            <p><b class="text-slate-700">交接班提示：</b>投用后首个班次需向班组交代新报警值与处置卡位置，建议纳入班前会内容。</p>
-                        </div>
-                    </div>
-                    <!-- 变更前后关键参数对比（变化标蓝 / 超限标红） -->
-                    <div 
-                        class="border" 
-                        :style="{
-                            borderRadius:themeStore.themeRadius+'px',
-                            '--error-color':themeStore.otherColor.error,
-                            '--theme-color':themeStore.themeColor
-                        }"
-                    >
-                        <div class="border-b bg-slate-50/70 px-3 py-2 text-xs font-semibold text-slate-600">
-                            关键参数对比（AI 提取） · <span class="font-bold text-[var(--theme-color)]">蓝=变化</span> · <span class="font-bold text-[var(--error-color)]">红=超限</span>
-                        </div>
-                        <div v-for="d in PARAM_DIFF" :key="d.k" class="border-b px-3 py-2 last:border-b-0">
-                            <div class="flex flex-wrap items-baseline gap-x-2 text-sm">
-                                <span class="w-24 shrink-0 text-xs text-slate-500">{{ d.k }}</span>
-                                <span class="text-xs text-slate-400">{{ d.before }}</span>
-                                <span class="text-slate-300">→</span>
-                                <span 
-                                class="text-sm font-semibold" 
-                                :class="d.over ? 'text-[var(--error-color)]' : 'text-[var(--theme-color)]'"
-                                >{{ d.after }}</span>
-                                <NTag v-if="d.over" size="small" type="error">超限</NTag>
-                            </div>
-                            <div 
-                                class="mt-0.5 text-[11px] leading-snug" 
-                                :class="d.over ? 'text-[var(--error-color)]' : 'text-slate-400'" 
-                            >{{ d.note }}</div>
-                        </div>
-                    </div>
-                    <!-- AI 审批建议（版本冻结 · 建议分级 · 已阅留痕 · 无感审计） -->
-                    <div 
-                        class="border"
-                        :style="{
-                            borderRadius:themeStore.themeRadius+'px',
-                            '--error-color':themeStore.otherColor.error,
-                            '--theme-color':themeStore.themeColor,
-                            '--warning-color':themeStore.otherColor.warning,
-                        }"
-                    >
-                        <div class="flex flex-wrap items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
-                            <Icon icon="lucide:sparkles" class="size-14px text-violet-500" />
-                            <span class="text-sm font-semibold text-slate-700">AI 审批建议</span>
-                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                                ✨ AI 生成 · 需人工确认
-                            </span>
-                            <NTag size="small">基于提交版本 V1 一次性分析 · 版本冻结</NTag>
-                            <div class="ml-auto">
-                                <NTag v-if="aiRead" size="small" type="success">✓ {{ roleName }} 已阅 AI 建议（已留痕）</NTag>
-                                <NButton v-else size="small" class="text-xs" @click="readSuggest">已阅 AI 建议</NButton>
-                            </div>
-                        </div>
-                        <div class="space-y-3 p-3">
-                            <!-- 强制合规项 -->
-                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--error-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--error-color)]" /> 强制合规项（驳回前必须处理，否则无法通过）</div>
-                            <div class="flex flex-wrap items-center gap-2 rounded-lg border border-red-100 bg-red-50/50 px-3 py-2 text-sm">
-                                <span class="min-w-0 flex-1 text-slate-700">联锁测试记录须在投用前完成并上传归档</span>
-                                <NTag v-if="mandClosed" size="small" type="success">已闭环</NTag>
-                                <NTag v-else size="small" type="warning">未闭环</NTag>
-                            </div>
-                            <!-- 推荐改进项 -->
-                            <div>
-                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--warning-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--warning-color)]" /> 推荐改进项（可采纳为行动项，可忽略但须填理由）</div>
-                            <div class="space-y-1.5">
-                                <div v-for="s in suggs" :key="s.id" class="rounded-lg border px-3 py-2 text-sm">
-                                <div class="leading-relaxed text-slate-700">{{ s.text }}</div>
-                                <div class="mt-1.5">
-                                    <div v-if="s.st === '待定'" class="flex gap-3">
-                                        <NButton text type="success" class="text-xs hover:underline"
-                                            @click="acceptSuggest(s)">
-                                            采纳为行动项
-                                        </NButton>
-                                        <NButton text class="text-xs hover:underline"
-                                            @click="rejectSuggest(s)">
-                                            已知悉，不采纳
-                                        </NButton>
-                                    </div>
-                                    <NTag v-else-if="s.st === '已采纳'" size="small" type="success">已采纳 → 已生成 PSSR 行动项</NTag>
-                                    <NTag v-else size="small" type="default">已知悉不采纳（理由已留痕）</NTag>
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                            <!-- 参考信息 -->
-                            <div>
-                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--theme-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--theme-color)]" /> 参考信息（纯参考，无强制力）</div>
-                                <div class="space-y-1.5">
-                                    <div class="flex flex-wrap items-center gap-2 rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm">
-                                        <span class="min-w-0 flex-1 text-slate-700">相似变更 <b>MOC-2025-0112「酯化反应温度上调」</b>投用后运行正常，无异常记录</span>
-                                        <NButton text type="primary" class="hover:underline text-xs" @click="viewArchive('MOC-2025-0112')">查看归档包</NButton>
-                                    </div>
-                                    <div class="rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm text-slate-700">
-                                    历史经验：温度类变更投用后首周超温报警占比约 38%，建议关注投用首周报警趋势
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
-                                查看、采纳、已阅等操作均由后台自动记录（无感审计），供内审追溯；AI 建议不强制采纳，决策主导权在审批人。驳回重新提交后，AI 将对新版本重新分析一次。
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-            </NDrawerContent>
-        </NDrawer>
-    </NSpin>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 210px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { useRoute } from 'vue-router';
+import { getColorWithOpacity } from '@/utils/common';
+
+const themeStore = useThemeStore();
+const { routerBack } = useRouterPush();
+const route = useRoute();
+
+const loading = ref<boolean>(false);
+// 当前高风险详情
+const currentInfo = ref<any>(null);
+const editMode = ref<boolean>(false);
+// 变更等级
+const level = ref<string>('重要');
+// 变更培训内容
+const traceCount = ref<number>(0);
+const canCosign = ref<boolean>(false);
+const acceptSign = ref<string>("none");
+const role = ref<string>("applicant");
+const today = () => new Date().toLocaleDateString("zh-CN");
+// 判定说明抽屉
+const describeDrawer = ref<boolean>(false);
+const levelDrawer = ref<boolean>(false);
+// 判定类型
+const judgmentType = ref<string>('工艺');
+// 得分
+const totalScore = ref<number>(21);
+// 评分维度
+const SCORE_MAJOR = [
+    { dim: "设备影响", score: 3, basis: "关键设备运行边界调整，接近设计上限" },
+    { dim: "财务影响", score: 3, basis: "失效可能导致装置停车，损失较大" },
+    { dim: "质量影响", score: 4, basis: "直接影响产品关键指标" },
+    { dim: "安全影响", score: 4, basis: "涉及工艺安全边界 / 重大危险源区域" },
+    { dim: "环境影响", score: 2, basis: "排放参数需重新校核" },
+    { dim: "合规声誉", score: 5, basis: "涉及重点监管危险化工工艺" },
+];
+const SCORE_GENERAL = [
+    { dim: "设备影响", score: 2, basis: "温度 / 压力仍在设计范围内，腐蚀速率略增" },
+    { dim: "财务影响", score: 2, basis: "控制不当可能批次报废，损失中等（1万~10万）" },
+    { dim: "质量影响", score: 3, basis: "涉及主要工艺参数，需加强过程监控" },
+    { dim: "安全影响", score: 3, basis: "涉及联锁参数调整，需 PSSR 确认" },
+    { dim: "环境影响", score: 1, basis: "无新增污染物排放" },
+    { dim: "合规声誉", score: 1, basis: "不涉及监管工艺备案" },
+];
+const scoreRows = computed(() => (level.value === "重要" ? SCORE_MAJOR : SCORE_GENERAL));
+
+interface FlowNode {
+  name: string;
+  kind: "审批" | "会签" | "最终批准";
+  status: "done" | "current" | "todo";
+  members?: { name: string; done: boolean }[];
+}
+const flow = ref<FlowNode[]>([
+    { name: "部门审核", kind: "审批", status: "done" },
+    { name: "专业会签", kind: "会签", status: "done" },
+    { name: "安全审查", kind: "审批", status: "current", members: [{ name: "安全审查", done: false }] },
+    { name: "分管领导最终批准", kind: "最终批准", status: "todo" },
+]);
+const current = computed(() => flow.value.find((n:any) => n.status === "current"));
+// ai 标注抽屉
+const aiDrawer = ref<boolean>(false);
+const mandClosed = ref<boolean>(false);
+const confirmClose = () => {
+    mandClosed.value = true; 
+    window.$message?.success('强制合规项已确认闭环，操作已留痕');
+}
+const conflictHide = ref<boolean>(false);
+const PARAM_DIFF = [
+    { k: "反应温度", before: "80℃", after: "90℃", over: false, note: "仍在溶剂沸点与物料分解温度的安全裕度内" },
+    { k: "保温时间", before: "8 h", after: "4 h", over: false, note: "终点判断窗口变窄，须修订操作规程" },
+    { k: "DCS 温度高报警", before: "85℃", after: "95℃", over: true, note: "超出原报警裕度，须重新整定验证" },
+    { k: "联锁高高报", before: "90℃", after: "100℃", over: true, note: "接近设备设计温度上限，投用前须完成联锁测试" },
+    { k: "未知杂质含量", before: "0.05%", after: "0.12%", over: false, note: "结构未定，须纳入日常分析计划" },
+];
+const aiRead = ref<boolean>(false);
+const roleName = ref<string>('张工艺');
+const suggs = ref([
+    { id: 1, text: "将未知杂质含量纳入日常分析计划（每周 1 次，连续 8 周）", st: "待定" },
+    { id: 2, text: "修订操作规程并补充超温应急处置卡后再投用", st: "待定" },
+]);
+const opinion = ref<string>("");
+
+// 已阅 AI 建议
+const readSuggest = () => {
+    aiRead.value = true;
+    window.$message?.success(`${roleName} 已阅 AI 建议，时间与操作已写入审批留痕`);
+}
+// 采纳为行动项
+const acceptSuggest = (s: any) => {
+    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '已采纳' } : x)); 
+    opinion.value = (opinion.value ? `${opinion.value}\n` : '') + `采纳 AI 建议：${s.text}`; 
+    window.$message?.success('已采纳，自动生成 PSSR 行动项（来源：AI 建议），并纳入审批意见');
+}
+// 不采纳 AI 建议
+const rejectSuggest = (s: any) => {
+    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '不采纳' } : x)); 
+    window.$message?.info('不采纳理由「现有分析频次已覆盖风险」已记录留痕');
+}
+// 查看归档包
+const viewArchive = (name: string) => {
+    window.$message?.info(`新窗口打开 ${name} 归档包，不影响当前审批`);
+}
+
+
+// 返回
+const back = () => {
+    routerBack();
+};
+
+// 导出
+const exportFile = (type: string) => {
+    if(type === 'change'){
+        window.$message?.success('导出变更申请表成功');
+    }
+    if(type === 'risk'){
+        window.$message?.success('导出风险检查行动项表成功');
+    }
+    if(type === 'flow'){
+        window.$message?.info('查看审批流程图');
+    }
+};
+
+// 变更附带资料下载/一键下载
+const downloadFile = (type: string) => {
+    if(type === 'all'){
+        window.$message?.success('打包下载全部附件');
+    }else{
+        window.$message?.success('下载当前附件成功');
+    }
+};
+// 变更附带资料预览
+const previewFile = () => {
+    window.$message?.info('预览当前附件成功');
+}
+// 打开完整分析记录
+const openRecord = (name: string) => {
+    window.$message?.info(`打开「${name}」完整分析记录`);
+}
+
+// 加签
+const joinSign = () => {
+    acceptSign.value = 'safety'; 
+    window.$message?.success('演示：安全部门加签完成（电子签署留痕）· 验收签署链闭环');
+}
+// 催办
+const handleReminder = (m: any) => {
+    window.$message?.success(`演示：已催办 ${m.name}（系统消息 + 企业微信 + 短信），连续 2 次未响应将上报部门负责人`)
+}
+
+
+onMounted(() => {
+    if(route.query && route.query.params){
+        currentInfo.value = JSON.parse(route.query.params as string);
+    }
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 本专业高风险 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div 
+                class="flex flex-wrap items-center gap-3 border border-slate-200 px-3 py-2 mb-3"
+                :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+            >
+                <NButton ghost type="primary" @click="back">
+                    <Icon icon="ep:back" class="size-16px mr-1" />返回
+                </NButton>
+                <div class="min-w-0 flex-1 truncate text-base font-bold text-slate-800">{{ currentInfo?.title }}</div>
+                <NTag size="small" type="info" class="font-mono text-xs">编号：{{ currentInfo?.cid }}</NTag>
+                <NButton 
+                    v-if="currentInfo?.status === '审批中'"
+                    ghost 
+                    size="small"
+                    class="text-xs"
+                    :type="aiDrawer ? 'success' : 'default'"
+                    @click="aiDrawer = !aiDrawer"
+                >
+                    <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 标注{{ aiDrawer ? ' · 已开启' : ' · 已关闭' }}
+                </NButton>
+            </div>
+            <div class="space-y-3 scroll">
+                <!-- 直接修改：红线留痕示例 -->
+                <div v-if="editMode" class="rounded-lg border border-dashed border-red-300 bg-white p-3 text-sm">
+                    <div class="mb-1 text-xs font-semibold text-red-500">红线留痕示例</div>
+                    <p>
+                        变更等级：<del class="text-red-500 line-through">一般</del>
+                        <ins class="bg-emerald-50 px-1 text-emerald-600 no-underline">重要</ins>
+                        <span class="ml-2 text-xs text-slate-400">王海燕 · 2026-07-30 14:22 修改，已通知申请人确认</span>
+                    </p>
+                </div>
+                <!-- 变更申请表 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >变更申请表</p>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('change')"><Icon icon="material-symbols:download" class="size-16px" />导出变更申请表</NButton>
+                </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更发起人</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">孙丽</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">申请单位</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">一车间 · 工艺组</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">主管部门</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">技术部</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更类别</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            工艺 
+                            <NButton ghost type="primary" size="small" round class="text-xs" @click="describeDrawer = true">
+                                <Icon icon="lucide:sparkles" class="size-12px mr-1" />判定说明
+                            </NButton>
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">发起日期</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-07-25</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">计划投用日期</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-08-05</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更时限</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">永久变更</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">紧急</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">否</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更等级</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            <NRadioGroup v-model:value="level">
+                                <NRadio value="重要">重要</NRadio>
+                                <NRadio value="一般" :disabled="true">一般</NRadio>
+                            </NRadioGroup>
+                            <NTag type="error" size="small">合计 {{totalScore}} 分</NTag>
+                            <NButton ghost type="warning" size="small" round class="text-xs" @click="levelDrawer = true">
+                                <Icon icon="lucide:eye" class="size-12px mr-1" />查看等级判定
+                            </NButton>
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">涉及设备</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            R-101 聚合釜 / TIC-101
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更目的</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">预期效果</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            单釜反应周期缩短约 40 分钟，年产能预计提升 8%。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更前</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更后</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">连带变更</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            修订工艺卡片与操作规程；DCS 参数与报警值修改；更新 HAZOP 分析报告；岗位人员再培训
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">所需材料</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            工艺计算书、热平衡与飞温风险分析、HAZOP 分析报告、更新后的工艺卡片
+                        </div>
+                    </div>
+                </div>
+                <!-- 变更附带资料 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >变更附带资料</p>
+                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                    <tr>
+                        <th class="w-60px !text-center">序号</th>
+                        <th>文件名</th>
+                        <th class="w-100px !text-center">类型</th>
+                        <th class="w-100px !text-center">文件大小</th>
+                        <th class="w-120px !text-center">上传时间</th>
+                        <th class="w-120px !text-center">上传阶段</th>
+                        <th class="w-90px !text-center">操作</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="text-center">1</td>
+                        <td>变更方案.pdf</td>
+                        <td class="text-center text-xs">pdf</td>
+                        <td class="text-center text-xs">441.04KB</td>
+                        <td class="text-center text-xs">2026-07-28 09:12</td>
+                        <td class="text-center text-xs">发起变更</td>
+                        <td>
+                            <div class="flex items-center justify-center gap-2">
+                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
+                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </NTable>
+                <!-- 试验验证和风险评估方式 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >试验验证和风险评估方式</p>
+                </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要进行试验验证</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            否
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">试验附件</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            无附件
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要设计委托</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            否
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            AI 分析、HAZOP
+                        </div>
+                    </div>
+                </div>
+                <!-- 风险辨识会议信息 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >风险辨识会议信息</p>
+                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
+                </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议主题</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            聚合反应温度控制上限调整（78℃→82℃）
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议时间</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            2026-07-29 13:32
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">参会人员</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            张工艺、王仪表、周设备、王海燕、李主任
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            AI 分析、HAZOP
+                        </div>
+                    </div>
+                </div>
+                <NTable size="small">
+                    <thead>
+                    <tr>
+                        <th class="w-60px !text-center">序号</th>
+                        <th>文件名</th>
+                        <th class="w-100px !text-center">类型</th>
+                        <th class="w-100px !text-center">文件大小</th>
+                        <th class="w-120px !text-center">上传时间</th>
+                        <th class="w-120px !text-center">上传阶段</th>
+                        <th class="w-90px !text-center">操作</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="text-center">1</td>
+                        <td>风险辨识会议照片.pdf</td>
+                        <td class="text-center text-xs">pdf</td>
+                        <td class="text-center text-xs">441.04KB</td>
+                        <td class="text-center text-xs">2026-07-28 09:12</td>
+                        <td class="text-center text-xs">风险辨识</td>
+                        <td>
+                            <div class="flex items-center justify-center gap-2">
+                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
+                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </NTable>
+                
+                <!-- 风险辨识评估 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >风险辨识评估</p>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('risk')"><Icon icon="material-symbols:download" class="size-16px" />导出风险检查行动项表</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                        <tr>
+                            <th class="w-60px !text-center">序号</th>
+                            <th>采取的安全措施</th>
+                            <th class="w-100px !text-center">剩余风险等级</th>
+                            <th class="w-100px !text-center">负责人</th>
+                            <th class="w-100px !text-center">计划完成日期</th>
+                            <th class="w-100px !text-center">部门负责人</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="text-center">1</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>投用前完成联锁跳车电流设定值校核并留存记录</p>
+                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="success" size="small">低</NTag>
+                            </td>
+                            <td class="text-center text-xs">周设备</td>
+                            <td class="text-center text-xs">2026-07-28</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                        <tr>
+                            <td class="text-center">2</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>电缆与开关容量校核升级完成后方可送电</p>
+                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="warning" size="small">中</NTag>
+                            </td>
+                            <td class="text-center text-xs">张工艺</td>
+                            <td class="text-center text-xs">2026-08-09</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                        <tr>
+                            <td class="text-center">3</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>更新 P&ID（图号 PID-R201-03）与设备台账</p>
+                                    <NTag type="info" size="small" class="ml-2">关闭前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="error" size="small">高</NTag>
+                            </td>
+                            <td class="text-center text-xs">王仪表</td>
+                            <td class="text-center text-xs">2026-08-12</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                    </tbody>
+                </NTable>
+                <div class="flex flex-wrap items-center gap-2 rounded-lg bg-[#fafafc] px-3 py-2.5 text-xs text-slate-500">
+                    <span>完整分析记录：</span>
+                    <template v-for="t in ['AI','HAZOP']" :key="t">
+                        <NButton size="small" ghost type="primary" class="text-xs" @click="openRecord(t)">{{  t }}分析记录</NButton>
+                    </template>
+                </div>
+
+                <div class="flex gap-2 rounded-lg border bg-[#EAF0F9]/50 px-3 py-2 text-xs text-slate-500 !mt-6">
+                    <Icon icon="lucide:sparkles" class="size-14px" />
+                    <p class="flex-1">
+                        以下表单与变更申请页同格式展示，随申请单一并提交；审批 / 会签人员可直接修改，修改自动留痕并通知申请人确认；后续培训签到、PSSR 执行、验收、关闭环节按同一格式确认
+                    </p>
+                </div>
+                <!-- 变更培训内容 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:graduation-cap" class="size-16px text-violet-500" />
+                        <span class="text-sm font-semibold text-slate-700">变更培训内容</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">培训安排</div>
+                            <div class="grid grid-cols-2">
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训对象</span>
+                                    <p>R-201 位操作人员（4 人）、维修班（2 人）</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训方式</span>
+                                    <p>现场讲解 + 操作演示</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训时长</span>
+                                    <p>2 学时（投用前完成）</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">考核方式</span>
+                                    <p>现场提问 + 签到确认，合格后上岗</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、变更内容</div>
+                            <p class="px-3 py-1.6">M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机（ExdⅡBT4 → ExdⅡCT4），额定电流 102A → 138A；电缆与开关容量同步升级，联锁跳车电流设定值同步校核调整。</p>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、变化的操作方式</div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">1. 搅拌器启动</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>直接启动，观察电流 ≤102A
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>启动后核对电流 ≤138A，确认变频器参数已更新
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：首次启动空载试运行 30 分钟
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">2. 高粘度工况操作</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>粘度 >3000cP 需降速运行
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>粘度 ≤6000cP 可全速运行
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：严禁超过 6000cP 上限
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">3. 过载跳闸处置</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>复位后直接重启
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>先查明原因并记录，联锁复位需班长确认
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：跳闸电流设定值已调整
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、潜在风险与应对方式</div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">1.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p>电机 / 电缆过热</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">投用首周每班测温并记录，红外点检复核</p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">2.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p class="flex-1">联锁设定错误导致拒动 / 误动</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">投用前完成跳车试验并留存记录</p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">3.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p class="flex-1">防爆接合面或格兰头密封失效</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">检查防爆接合面与格兰头，严禁带电开盖</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、培训签到</div>
+                            <p class="px-3 py-1.6">反应岗位：张大勇、李强；维修班：周设备；班长：李主任（名单由培训对象岗位自动匹配，扫码签到 / 手动确认 / 拍照上传签到表）</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- PSSR 检查内容 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:list-checks" class="size-16px text-violet-500" /> 
+                        <span class="text-sm font-semibold text-slate-700">PSSR 检查内容</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、风险分析行动项落实</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">联锁跳车电流设定值校核并留存记录</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电缆与开关容量校核升级完成后方可送电</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">操作人员培训完成并考核合格，签到表归档</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">张工艺</NTag>
+                                    <span class="text-slate-400">培训签到记录</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、现场安装设备检查确认</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电机安装对中、地脚螺栓力矩复核</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">防爆接合面、格兰头密封检查</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、保护措施确认</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">联锁跳车试验合格并留存记录</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">试验记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电机接地、漏电保护测试合格</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">测试记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、资料归档</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">更新 P&ID（图号 PID-R201-03）与设备台账</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">版本受控上传</span>
+                                    <NTag size="small">关闭前</NTag>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 验收评价 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="ix:success" class="size-16px text-emerald-500" />
+                        <span class="text-sm font-semibold text-slate-700">验收评价</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <NTable size="small">
+                            <thead>
+                                <tr>
+                                    <th class="w-160px">验收项目</th>
+                                    <th>量化标准</th>
+                                    <th class="w-190px">验收方式</th>
+                                    <th class="w-100px">责任方</th>
+                                    <th class="w-80px !text-center">评估结论</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="text-xs">过载跳闸消除</td>
+                                    <td class="text-xs">投用后月均过载跳闸 0 次（变更前月均 3 次）</td>
+                                    <td class="text-xs">DCS 跳闸记录统计，投用后连续 30 天</td>
+                                    <td class="text-xs">车间 · 李主任</td>
+                                    <td class="text-center text-xs">
+                                        <NTag type="warning" size="small">待验收</NTag>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </NTable>
+                        <div class="mt-1.5 text-[11px] text-slate-400">评估结论由车间与各专业在验收阶段填写：完全达到 / 基本达到 / 未达成</div>
+                        <!-- 验收审核签署链 -->
+                        <div class="mt-2 rounded-lg border border-[#ACC6E5]/60 bg-[#EAF0F9]/50 p-3">
+                            <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-slate-600">
+                                验收审核签署
+                                <span class="font-normal text-slate-400">申请人填报 → 属地负责人审核{{ level === '重要' ? ' → 安全部门加签（重要变更）' : '' }}</span>
+                            </div>
+                            <div class="flex flex-wrap items-center gap-2">
+                                <NTag size="small" type="success">
+                                    <template #icon><Icon icon="ix:success" class="size-14px" /></template>
+                                    验收填报 · 申请人
+                                </NTag>
+                                <Icon icon="formkit:right" class="size-12px text-slate-300" />
+                                <template v-if="acceptSign === 'none'">
+                                    <template v-if="role === 'dept'">
+                                        <button class="inline-flex h-7 items-center rounded-md bg-emerald-600 px-2.5 text-xs font-medium text-white transition hover:bg-emerald-700" @click="acceptSign = 'dept'; toast.success(level === '重要' ? '演示：属地负责人已审核验收结论（电子签署留痕）· 重要变更已流转安全部门加签（王海燕）' : '演示：属地负责人已审核验收结论（电子签署留痕）');">同意验收结论</button>
+                                        <button class="inline-flex h-7 items-center rounded-md border border-red-200 bg-white px-2.5 text-xs text-red-600 transition hover:bg-red-50" @click="toast.warning('演示：已退回申请人补正验收材料，补正后重新提交审核')">退回补正</button>
+                                    </template>
+                                    <NTag v-else size="small">待属地负责人（李主任）审核</NTag>
+                                </template>
+                                <NTag v-else size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />属地负责人审核 · 李主任 {{ today() }}</NTag>
+                                <template v-if="level === '重要' && acceptSign !== 'none'">
+                                    <Icon icon="formkit:right" class="size-12px text-slate-300" />
+                                    <NTag v-if="acceptSign === 'safety'" size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />安全加签 · 王海燕 {{ today() }}</NTag>
+                                    <button v-else-if="role === 'safety'" @click="joinSign">安全加签</button>
+                                    <NTag v-else size="small" class="bg-white text-slate-500">待安全部门加签（王海燕）</NTag>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 变更关闭确认表 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:folder-archive" class="size-16px text-slate-500" />
+                        <span class="text-sm font-semibold text-slate-700">变更关闭确认表</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="flex items-center px-3 py-1.6 text-xs">
+                                <p class="flex-1">PID 图纸（PID-R201-03，受控最新版）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small" type="success">已归档</NTag>
+                                    <!-- <NTag size="small">未归档</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">操作规程（含超温应急处置卡）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small">未归档</NTag>
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">DCS 联锁台账（新报警 / 联锁值）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small">未归档</NTag>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-1.5 text-[11px] text-slate-400">AI 辅助判定一次（是 / 否 / 不涉及），可改判留痕；全部资料归档且行动项关闭后，系统自动推送变更主管部门专人确认关闭</div>
+                    </div>
+                </div>
+                <!-- 审批记录 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >审批记录</p>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('flow')">查看审批流程图</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                        <tr>
+                            <th class="w-120px">流程阶段</th>
+                            <th class="w-120px">操作人</th>
+                            <th class="w-80px !text-center">操作类型</th>
+                            <th class="w-140px !text-center">操作时间</th>
+                            <th>操作内容和意见</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="info" size="small">发起</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="success" size="small">同意</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="warning" size="small">待处理</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                    </tbody>
+                </NTable>
+
+                <!-- 审批流程进度 -->
+                <div class="space-y-2">
+                    <div class="text-sm font-semibold">审批流程（{{ level }}变更）</div>
+                    <div class="flex flex-wrap items-center gap-1">
+                        <template v-for="(n, i) in flow" :key="n.name">
+                        <div class="flex items-center gap-1">
+                            <div class="rounded-lg border px-3 py-2 text-center"
+                            :class="n.status === 'done' ? 'border-emerald-300 bg-emerald-50' : n.status === 'current' ? 'border-amber-400 bg-amber-50' : 'bg-slate-50'">
+                            <div class="flex items-center gap-1 text-xs font-medium">
+                                <Icon v-if="n.kind === '会签'" icon="lucide:users" class="size-12px" />
+                                <Icon v-if="n.kind === '最终批准'" icon="uil:lock" class="size-12px" />
+                                {{ n.name }}
+                            </div>
+                            <div class="text-[10px] text-slate-500">{{ n.kind }}</div>
+                            </div>
+                            <Icon v-if="i < flow.length - 1" icon="formkit:right" class="size-14px text-slate-300" />
+                        </div>
+                        </template>
+                    </div>
+                    <div v-if="current?.members" class="rounded-lg border border-amber-200 bg-amber-50/60 p-3">
+                        <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-700">
+                            会签进度（全体通过方可流转）
+                            <span class="font-normal text-amber-600">
+                                {{ current.members.filter((m) => m.done).length }}/{{ current.members.length }} 已签 · 未签已等待 22 小时
+                            </span>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-2">
+                        <span v-for="m in current.members" :key="m.name" class="flex items-center gap-1">
+                            <NTag size="small" :type="m.done ? 'success' : 'default'">
+                                <template #icon>
+                                    <Icon v-if="m.done" icon="ix:success" class="size-14px" />
+                                    <Icon v-else icon="lucide:circle" class="size-12px text-slate-400" />
+                                </template>
+                                {{ m.name }}
+                            </NTag>
+                            <div v-if="!m.done && (role === 'applicant' || role === 'dept')"
+                                class="cursor-pointer inline-flex h-6 items-center gap-1 rounded-md border border-amber-300 bg-white px-2 text-[11px] text-amber-700 transition hover:bg-amber-100"
+                                @click="handleReminder(m)"
+                            >
+                                <Icon icon="lucide:bell" class="size-12px" /> 催办
+                            </div>
+                        </span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </NCard>
+        <!-- 变更类型判定说明（右侧抽屉） -->
+        <NDrawer v-model:show="describeDrawer" :width="576" placement="right">
+            <NDrawerContent title="AI 变更类型判定说明" closable>
+                <div class="space-y-4">
+                    <div class="flex items-center gap-2">
+                        <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                            ✨ AI 生成 · 需人工确认
+                        </span>
+                        <NTag size="small" type="info">判定：{{ judgmentType }}</NTag>
+                        <NTag size="small">置信度：高</NTag>
+                    </div>
+                    <div class="space-y-3 text-sm leading-relaxed text-slate-700">
+                        <p><b>判定结论：</b>本次变更为 M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机，涉及设备本体规格型号、防爆等级（ExdⅡBT4 → ExdⅡCT4）与额定电流变化，并连带电缆、开关容量及联锁设定值调整，依据变更类型规则判定为「{{ judgmentType }}」类变更。</p>
+                        <p><b>判定依据：</b></p>
+                        <ul class="list-disc space-y-1 pl-5">
+                            <li>命中规则 3.1：设备规格型号 / 功率等级变化 → 设备类</li>
+                            <li>命中规则 3.3：防爆等级与电气配套（电缆、开关容量）变更 → 设备类（电气联动）</li>
+                            <li>排除规则 2.1：反应温度、压力等工艺控制窗口未变化 → 不构成工艺类</li>
+                        </ul>
+                        <p><b>知识库引用：</b>设备数据表 M-201A（Rev C）、防爆合格证、电气负荷校核计算书、《变更管理制度》第 4.3 条。</p>
+                        <p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考，最终类型以人工确认为准；如调整为其他类型，系统将记录修改留痕。</p>
+                    </div>
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- 变更等级判定表（右侧抽屉查看） -->
+        <NDrawer v-model:show="levelDrawer" :width="576" placement="right">
+            <NDrawerContent title="变更等级判定表" closable>
+                <div class="space-y-4">
+                    <div class="flex items-center gap-2">
+                        <NTag v-if="level==='重要'" size="small" type="error">判定：{{ level }}变更</NTag>
+                        <NTag v-if="level==='一般'" size="small">判定：{{ level }}变更</NTag>
+                        <span class="text-xs text-slate-400">合计得分 <b class="text-[#17407F]">{{ totalScore }}</b> 分（&lt;20 分为一般，≥20 分为重要）</span>
+                    </div>
+                    <NTable size="small">
+                        <thead>
+                            <tr class="border-b bg-slate-50">
+                                <th class="w-28">评估维度</th>
+                                <th class="w-20">得分</th>
+                                <th>评分依据</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="s in scoreRows" :key="s.dim" class="border-b last:border-b-0">
+                                <td class="font-medium">{{ s.dim }}</td>
+                                <td class="font-bold text-[#17407F]">{{ s.score }}</td>
+                                <td class="text-xs leading-relaxed text-slate-600">{{ s.basis }}</td>
+                            </tr>
+                        </tbody>
+                    </NTable>
+                    <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
+                        AI 初评 + 人工确认，改判留痕；评分表版本随变更提交版本冻结。
+                    </div>
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- AI 审批辅助（右侧抽屉查看） -->
+        <NDrawer v-model:show="aiDrawer" :width="576" placement="right">
+            <NDrawerContent title="变更等级判定表" closable>
+                <template #header>
+                    <span class="flex items-center gap-1.5 text-sm font-bold text-slate-700">
+                        <Icon icon="lucide:sparkles" class="size-16px text-violet-500 mr-1" />
+                        AI 审批辅助（抽屉式，正文全窗口阅读）
+                    </span>
+                </template>
+                <div class="space-y-4">
+                    <!-- 合规警告条（强制合规项，不可关闭；闭环后转绿） -->
+                    <div 
+                        class="px-3 py-2.5 text-sm" 
+                        :class="mandClosed ? 'text-[var(--success-color)] bg-[var(--success-bg-color)]' : 'text-[var(--warning-color)] bg-[var(--warning-bg-color)]'"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--success-color':themeStore.otherColor.success, 
+                            '--success-bg-color':getColorWithOpacity(themeStore.otherColor.success,0.1),
+                            '--warning-color':themeStore.otherColor.warning,
+                            '--warning-bg-color':getColorWithOpacity(themeStore.otherColor.warning,0.1)
+                        }"
+                    >
+                        <div class="flex items-center gap-2">
+                            <Icon icon="proicons:alert-triangle" class="size-16px" />
+                            <span class="font-semibold">强制合规</span>
+                            <span class="ml-auto shrink-0">
+                                <NTag v-if="mandClosed" size="small" type="success">
+                                    <template #icon>
+                                        <Icon icon="lucide:shield-check" class="size-12px" />
+                                    </template>
+                                    已闭环
+                                </NTag>
+                                <NTag v-else size="small" type="warning">未闭环</NTag>
+                            </span>
+                        </div>
+                        <p class="mt-1 text-xs leading-relaxed">
+                            本次变更涉及 DCS 联锁设定值修改，依据 AQ/T 3034《化工企业工艺安全管理实施导则》，投用前须完成联锁测试并留存记录。
+                        </p>
+                        <div v-if="!mandClosed" class="mt-1 text-right">
+                            <NButton text type="primary" class="text-xs" @click="confirmClose">确认闭环（留痕）</NButton>
+                        </div>
+                    </div>
+                    <!-- 变更冲突提示（同设备在途变更，可收起） -->
+                    <div 
+                        v-if="!conflictHide" 
+                        class="bg-[var(--bg-color)] px-3 py-2.5 text-sm text-[var(--theme-color)]"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--theme-color':themeStore.themeColor, 
+                            '--bg-color':getColorWithOpacity(themeStore.themeColor,0.1),
+                        }"
+                    >
+                        <div class="flex items-center gap-2">
+                            <Icon icon="lucide:bell" class="size-14px" />
+                            <span class="font-semibold">冲突提示</span>
+                            <NButton text type="primary" class="ml-auto shrink-0 text-xs" @click="conflictHide = true">知道了</NButton>
+                        </div>
+                        <p class="mt-1 text-xs leading-relaxed">
+                            涉及设备 R-101 关联变更 <b>MOC-2026-0038「机封冲洗方案调整」</b>正在审批中，请确认施工时序与隔离方案无冲突。
+                        </p>
+                    </div>
+                    <!-- 属地影响摘要（仅属地负责人视角） -->
+                    <div v-if="role === 'dept'" class="border" :style="{borderRadius:themeStore.themeRadius+'px'}">
+                        <div class="flex items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
+                            <Icon icon="lucide:sparkles" class="size-16px text-violet-500" />
+                            <span class="text-sm font-semibold text-slate-700">属地影响摘要</span>
+                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                                ✨ AI 生成 · 需人工确认
+                            </span>
+                        </div>
+                        <div class="space-y-1.5 px-3 py-2.5 text-xs leading-relaxed text-slate-600">
+                            <p><b class="text-slate-700">涉及单元：</b>一车间 R-201 反应釜及配套 DCS 回路，不影响相邻单元。</p>
+                            <p><b class="text-slate-700">现行规程影响：</b>操作规程第 4.2 节（报警处置）需同步修订，变更关闭前完成受控换版。</p>
+                            <p><b class="text-slate-700">交接班提示：</b>投用后首个班次需向班组交代新报警值与处置卡位置，建议纳入班前会内容。</p>
+                        </div>
+                    </div>
+                    <!-- 变更前后关键参数对比（变化标蓝 / 超限标红） -->
+                    <div 
+                        class="border" 
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--error-color':themeStore.otherColor.error,
+                            '--theme-color':themeStore.themeColor
+                        }"
+                    >
+                        <div class="border-b bg-slate-50/70 px-3 py-2 text-xs font-semibold text-slate-600">
+                            关键参数对比（AI 提取） · <span class="font-bold text-[var(--theme-color)]">蓝=变化</span> · <span class="font-bold text-[var(--error-color)]">红=超限</span>
+                        </div>
+                        <div v-for="d in PARAM_DIFF" :key="d.k" class="border-b px-3 py-2 last:border-b-0">
+                            <div class="flex flex-wrap items-baseline gap-x-2 text-sm">
+                                <span class="w-24 shrink-0 text-xs text-slate-500">{{ d.k }}</span>
+                                <span class="text-xs text-slate-400">{{ d.before }}</span>
+                                <span class="text-slate-300">→</span>
+                                <span 
+                                class="text-sm font-semibold" 
+                                :class="d.over ? 'text-[var(--error-color)]' : 'text-[var(--theme-color)]'"
+                                >{{ d.after }}</span>
+                                <NTag v-if="d.over" size="small" type="error">超限</NTag>
+                            </div>
+                            <div 
+                                class="mt-0.5 text-[11px] leading-snug" 
+                                :class="d.over ? 'text-[var(--error-color)]' : 'text-slate-400'" 
+                            >{{ d.note }}</div>
+                        </div>
+                    </div>
+                    <!-- AI 审批建议（版本冻结 · 建议分级 · 已阅留痕 · 无感审计） -->
+                    <div 
+                        class="border"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--error-color':themeStore.otherColor.error,
+                            '--theme-color':themeStore.themeColor,
+                            '--warning-color':themeStore.otherColor.warning,
+                        }"
+                    >
+                        <div class="flex flex-wrap items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
+                            <Icon icon="lucide:sparkles" class="size-14px text-violet-500" />
+                            <span class="text-sm font-semibold text-slate-700">AI 审批建议</span>
+                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                                ✨ AI 生成 · 需人工确认
+                            </span>
+                            <NTag size="small">基于提交版本 V1 一次性分析 · 版本冻结</NTag>
+                            <div class="ml-auto">
+                                <NTag v-if="aiRead" size="small" type="success">✓ {{ roleName }} 已阅 AI 建议（已留痕）</NTag>
+                                <NButton v-else size="small" class="text-xs" @click="readSuggest">已阅 AI 建议</NButton>
+                            </div>
+                        </div>
+                        <div class="space-y-3 p-3">
+                            <!-- 强制合规项 -->
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--error-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--error-color)]" /> 强制合规项（驳回前必须处理，否则无法通过）</div>
+                            <div class="flex flex-wrap items-center gap-2 rounded-lg border border-red-100 bg-red-50/50 px-3 py-2 text-sm">
+                                <span class="min-w-0 flex-1 text-slate-700">联锁测试记录须在投用前完成并上传归档</span>
+                                <NTag v-if="mandClosed" size="small" type="success">已闭环</NTag>
+                                <NTag v-else size="small" type="warning">未闭环</NTag>
+                            </div>
+                            <!-- 推荐改进项 -->
+                            <div>
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--warning-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--warning-color)]" /> 推荐改进项（可采纳为行动项，可忽略但须填理由）</div>
+                            <div class="space-y-1.5">
+                                <div v-for="s in suggs" :key="s.id" class="rounded-lg border px-3 py-2 text-sm">
+                                <div class="leading-relaxed text-slate-700">{{ s.text }}</div>
+                                <div class="mt-1.5">
+                                    <div v-if="s.st === '待定'" class="flex gap-3">
+                                        <NButton text type="success" class="text-xs hover:underline"
+                                            @click="acceptSuggest(s)">
+                                            采纳为行动项
+                                        </NButton>
+                                        <NButton text class="text-xs hover:underline"
+                                            @click="rejectSuggest(s)">
+                                            已知悉，不采纳
+                                        </NButton>
+                                    </div>
+                                    <NTag v-else-if="s.st === '已采纳'" size="small" type="success">已采纳 → 已生成 PSSR 行动项</NTag>
+                                    <NTag v-else size="small" type="default">已知悉不采纳（理由已留痕）</NTag>
+                                </div>
+                                </div>
+                            </div>
+                            </div>
+                            <!-- 参考信息 -->
+                            <div>
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--theme-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--theme-color)]" /> 参考信息（纯参考，无强制力）</div>
+                                <div class="space-y-1.5">
+                                    <div class="flex flex-wrap items-center gap-2 rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm">
+                                        <span class="min-w-0 flex-1 text-slate-700">相似变更 <b>MOC-2025-0112「酯化反应温度上调」</b>投用后运行正常，无异常记录</span>
+                                        <NButton text type="primary" class="hover:underline text-xs" @click="viewArchive('MOC-2025-0112')">查看归档包</NButton>
+                                    </div>
+                                    <div class="rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm text-slate-700">
+                                    历史经验：温度类变更投用后首周超温报警占比约 38%，建议关注投用首周报警趋势
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
+                                查看、采纳、已阅等操作均由后台自动记录（无感审计），供内审追溯；AI 建议不强制采纳，决策主导权在审批人。驳回重新提交后，AI 将对新版本重新分析一次。
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 210px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/initiateChange/index.vue b/src/views/my/initiateChange/index.vue
index 1e68421..29d08f9 100644
--- a/src/views/my/initiateChange/index.vue
+++ b/src/views/my/initiateChange/index.vue
@@ -1,1648 +1,1648 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import {
-  CHANGES, DOC_TODO, LEVEL_COLOR, STATUS_COLOR, TEMP_WATCH, URGE_RECORDS,
-  countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
-} from "@/typings/model";
-import { getColorWithOpacity } from "@/utils/common";
-import HighlightText from "@/views/home/modules/HighlightText.vue";
-import Ed from "@/views/home/modules/Ed.vue";
-
-
-const themeStore = useThemeStore();
-
-interface ApplyForm {
-  name: string;
-  dept: string;
-  mainChanges: string[];
-  related: string;
-  purposes: string[];
-  effect: string;
-  type: string;
-  level: string;
-  duration: string;
-  urgent: boolean;
-  date: any;
-  restoreDate: any;
-}
-const form = ref<ApplyForm>({
-  name: "", dept: "", mainChanges: [""], related: "", purposes: [], effect: "",
-  type: "", level: "", duration: "", urgent: false, date: null, restoreDate: null,
-});
-const tab = ref<string>("risk");
-const TABS = [
-  { id: "pre", name: "变更预识别", icon: 'lucide:sparkles' },
-  { id: "form", name: "变更申请表", icon: 'akar-icons:file' },
-  { id: "risk", name: "风险分析记录表", icon: 'proicons:alert-triangle' },
-  { id: "train", name: "变更培训内容", icon: 'lucide:graduation-cap' },
-  { id: "pssr", name: "PSSR 检查内容", icon: 'tabler:clipboard-check' },
-  { id: "accept", name: "验收评价", icon: 'material-symbols:check-circle-outline' },
-  { id: "close", name: "变更关闭确认表", icon: 'quill:folder-open' },
-];
-const confirmed = ref<Record<string, boolean>>({});
-const blockedTabs = ref<string[]>([]);
-
-const aiEnabled = ref<boolean>(true);
-const analyzing = ref<boolean>(false);
-// ---------- 变更预识别 ----------
-const desc = ref<string>(
-  "某缩合反应现在控在80℃要反应8小时，车间反馈产能跟不上。我们小试做了几组，90℃下4小时转化率就能到98%，但有个未知杂质会从0.05%涨到0.12%。这个杂质结构还没定，不过不是基因毒性警示结构。想申请把温度提到90℃，同时把反应时间缩到4小时。",
-);
-const rows = ref<any>(null);
-const AI_ROWS = [
-  {
-    id: 1, item: "工艺流程",
-    before: "流程简述（含物料、设备）：某缩合反应，原料A与原料B在缩合反应釜中混合，加热至80℃进行保温反应8小时，反应完成后转入后处理工序。\n设计意图：通过缩合反应制得目标产物，保证转化率和杂质水平。",
-    after: "流程简述（含物料、设备）：保温温度提升至90℃，反应时间缩短为4小时，其余流程不变。\n设计意图：在保持转化率98%的前提下缩短反应时间、提升产能。",
-    hl: ["保温温度提升至90℃，反应时间缩短为4小时", "在保持转化率98%的前提下缩短反应时间、提升产能"],
-  },
-  {
-    id: 2, item: "设备信息",
-    before: "基本信息（名称、设计参数、材质、用途）：缩合反应釜，设计温度100℃，设计压力0.2MPa，材质SS304，用于缩合反应。\n使用信息（安装位置、连接方式、维护策略）：安装于反应工段，夹套加热，按预防性维护计划定期检查。",
-    after: "无变化",
-  },
-  {
-    id: 3, item: "运行条件",
-    before: "运行参数：反应温度80±2℃，保温时间8小时，压力常压。\n管控措施：DCS温度高报警设定85℃，高高报警90℃并联锁切断加热介质。",
-    after: "运行参数：反应温度改为90±2℃，保温时间改为4小时，压力不变。\n管控措施：DCS温度高报警需上调至95℃，高高报警及联锁值需上调至100℃。",
-    hl: ["90±2℃", "4小时", "DCS温度高报警需上调至95℃，高高报警及联锁值需上调至100℃"],
-  },
-  { id: 4, item: "操作方式", before: "DCS自动化控制，远程操作，单人监控。", after: "无变化" },
-];
-// ---------- AI 变更识别 ----------
-const runIdentify = () => {
-  if (!desc.value.trim()) { window.$message?.warning("请先输入变更内容描述"); return; }
-  analyzing.value = true;
-  rows.value = null;
-  setTimeout(() => {
-    rows.value = AI_ROWS.map((x) => ({ ...x }));
-    analyzing.value = false;
-    window.$message?.success("AI 变更识别完成，共 4 项，请逐项人工确认（可直接修改）");
-  }, 1200);
-};
-
-const editing = ref<any>(null);
-
-// ---------- 风险预分析 ----------
-const preRiskEdit = ref<any>(null);
-const preRiskShown = ref<boolean>(false);
-const preRiskText = ref({
-  severity: "本次变更为缩合反应温度由80℃提升至90℃、保温时间由8h缩短至4h。变更前后反应体系与物料不变，不新增化学品，不存在新增燃爆、毒害、腐蚀等危害严重性变化；温度提升后仍在溶剂沸点与物料分解温度的安全裕度之内。综上，本次变更未显著增加潜在事件的危害严重程度，事故后果（人员伤亡、财产损失、环境污染）的严重等级与变更前基本一致；但杂质水平由0.05%升至0.12%，需关注长期运行对产品质量与设备结垢的累积影响。",
-  probability: "变更引入了新的偏差场景。首先，反应温度更接近溶剂回流温度，温控失效或冷却水中断时，超温溜温概率上升，可能引发冲料；其次，保温时间缩短使反应终点判断窗口变窄，人为误判导致转化率不足或副反应增加的概率上升；再者，未知杂质含量升高（0.05%→0.12%），其热稳定性尚未定性，长期累积可能加速釜壁结垢与搅拌负荷异常；此外，DCS报警/联锁值上调后原有报警裕度改变，误报、漏报概率需重新评估。",
-  protection: "变更主要影响与温度控制相关的保护层。原DCS温度高报警85℃、高高报警及联锁90℃已不适用于新工艺窗口，需同步上调至95℃/100℃并重新整定验证；安全阀起跳压力与泄放能力不受本次温度调整直接影响，仍然有效；操作规程与应急预案须修订后，方可继续作为有效的人为保护层。建议投用前完成联锁测试与报警验证，并将杂质含量纳入日常分析计划。",
-});
-const runRiskAnalysis = () => {
-  analyzing.value = true;
-  setTimeout(() => {
-    analyzing.value = false;
-    preRiskShown.value = true;
-    window.$message?.success("AI 风险预分析报告已生成（危害严重性 / 事件概率 / 保护措施影响），内容支持手动修改");
-  }, 1300);
-};
-const saveDraft = () => window.$message?.success("已保存为草稿，可在左侧「我的草稿」中继续编辑");
-
-// ---------- 生成变更申请单 ----------
-const formGen = ref<string>("idle");
-const materialsText = ref("");
-const updateDocs = ref<string[]>([]);
-const disciplines = ref<string[]>([]);
-const tools = ref<string[]>(["JSA", "检查表法", "通用检查表"]);
-const plugin = ref<"HAZOP" | "JSA" | "检查表法" | "通用检查表" | null>(null);
-const genForm = () => {
-  if (formGen.value === "generating") return;
-  formGen.value = "generating";
-  window.$message?.info("AI 正在生成变更申请单…（「变更申请表」标签已显示生成中标识）");
-  setTimeout(() => {
-    const main: string[] = [];
-    for (const row of rows.value ?? []) {
-      if (row.after && row.after !== "无变化" && row.item === "运行条件") {
-        main.push("缩合反应温度从80±2℃提升至90±2℃");
-        main.push("保温时间从8小时缩短至4小时");
-        main.push("DCS温度高报警从85℃上调至95℃，高高报警及联锁值从90℃上调至100℃");
-      }
-    }
-    form.value = {
-      name: "缩合反应温度及时间优化",
-      dept: "",
-      mainChanges: main.length ? main : ["（请根据识别结果填写主要变更）"],
-      related: "更新操作规程、DCS联锁设定值、工艺安全信息、岗位操作法",
-      purposes: ["提高生产效能", "改善操作条件"],
-      effect: "在保持转化率不低于98%的前提下，反应时间缩短50%，产能提升一倍",
-      type: "工艺", level: "一般", duration: "永久", urgent: false, date: "", restoreDate: "",
-    };
-    materialsText.value = "1. 施工方案（含作业步骤、隔离与置换方案、作业许可）\n2. 保温材料（釜体保温更换，硅酸铝纤维毡，厚度按设计核算）\n3. 紧固件与垫片（法兰螺栓、金属缠绕垫，材质与原设计一致）\n4. 防腐涂料（釜体外表面除锈防腐）\n5. 脚手架搭拆材料及验收记录";
-    updateDocs.value = ["PID图纸", "操作规程", "总图", "设备台账"];
-    disciplines.value = ["技术", "仪表"];
-    signers.value = { 技术: "王仪表（技术部）", 仪表: "王仪表（技术部 · 仪表）" };
-    tools.value = ["JSA", "检查表法", "通用检查表"];
-    plugin.value = null;
-    formGen.value = "done";
-    tab.value = "form";
-    window.$message?.success("变更申请单已生成：AI 自动总结名称、预填内容，均可手动修改");
-  }, 1400);
-};
-// ---------- 审批流程设置 ----------
-const approvers = ref<Record<string, string>>({
-  部门审核: "李主任（一车间主任）",
-  最终批准: "李主任（部门负责人 · 固定）",
-});
-const signers = ref<Record<string, string>>({});
-const sheet = ref<"type" | "level" | "approver" | null>(null);
-let demoSeq = 43;
-function nextChangeId() {
-  return `MOC-2026-R01-${String(demoSeq++).padStart(4, "0")}`;
-}
-const today = () => new Date().toISOString().slice(0, 10);
-interface LedgerRow {
-  id: string;
-  changeId?: string; // 关联 CHANGES，可打开完整详情
-  title: string;
-  type: ChangeType;
-  level: ChangeLevel;
-  duration: "永久" | "临时";
-  urgent?: boolean;
-  applyTime: string;   // 申请时间
-  dept: string;        // 申请部门
-  applicant: string;   // 申请人
-  planUse: string;     // 计划投用时间
-  status: ChangeStatus;
-  statusDetail: string; // 当前环节说明
-  statusTime: string;  // 状态更新时间
-  overdueDays?: number;
-  approveTime?: string; // 审批通过时间
-  useTime?: string;     // 实际投用时间
-  handlers: { name: string; done: boolean }[]; // 接班人（当前待办/已办）
-}
-const LEDGER_ROWS: LedgerRow[] = [
-  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
-  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
-  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
-  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
-  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
-  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
-];
-const ROLES = [
-  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
-  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
-  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
-  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
-  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
-  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
-  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
-  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
-  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
-];
-function nowStr() {
-  const d = new Date();
-  const p = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
-}
-type DemoListener = () => void;
-const demoListeners = new Set<DemoListener>();
-function emitDemo() { demoListeners.forEach((f) => f()); }
-function submitChange(c: ChangeOrder) {
-  CHANGES.unshift(c);
-  const cur = c.flow.find((n) => n.status === "current");
-  LEDGER_ROWS.unshift({
-    id: c.id,
-    changeId: c.id,
-    title: c.title,
-    type: c.type,
-    level: c.level,
-    duration: c.duration,
-    urgent: c.urgent || undefined,
-    applyTime: nowStr(),
-    dept: c.org.split("·")[0].trim(),
-    applicant: c.applicant,
-    planUse: c.date || "待定",
-    status: c.status,
-    statusDetail: cur ? `${cur.name}（待处理）` : "审批中",
-    statusTime: nowStr(),
-    handlers: (cur?.roles ?? []).map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false })),
-  });
-  emitDemo();
-}
-// ---------- 提交 ----------
-const submitApply = () => {
-  if (!desc.value.trim()) { window.$message?.warning("请先录入变更描述并完成 AI 识别"); return; }
-  if (!form.value) { window.$message?.warning("请先在「变更预识别」页点击「生成变更申请单」，生成申请表后再提交"); return; }
-  const unconfirmed = ["form", "risk", "train", "pssr", "accept", "close"].filter((t) => !confirmed.value[t]);
-  if (unconfirmed.length) {
-    blockedTabs.value = unconfirmed;
-    window.$message?.warning(`全部标签页确认后方可提交，请先完成以下标签页的「内容确认完毕」（标签栏已用红点标出）：${unconfirmed.map((t) => TAB_NAME[t]).join("、")}`);
-    return;
-  }
-  blockedTabs.value = [];
-  const id = nextChangeId();
-  const level: ChangeLevel = form.value.level === "重要" ? "重要" : "一般";
-  const flow: any[] = level === "重要"
-    ? [
-        { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-        { name: "专业会签", kind: "会签", roles: ["process", "process2"], status: "todo", locked: true, members: [{ name: "王仪表（仪表）", done: false }, { name: "周设备（设备）", done: false }] },
-        { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
-        { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
-      ]
-    : [
-        { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
-        { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
-        { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
-      ];
-  const order: ChangeOrder = {
-    id,
-    title: form.value.name || desc.value.slice(0, 24) || "未命名变更",
-    type: (form.value.type || "工艺") as ChangeType,
-    level,
-    duration: form.value.duration === "临时" ? "临时" : "永久",
-    urgent: !!form.value.urgent,
-    status: "审批中",
-    applicant: ROLES[0].person,
-    org: form.value.dept || ROLES[0].org,
-    device: "—",
-    date: today(),
-    purpose: form.value.purposes.join("、") || "提高生产效能",
-    effect: form.value.effect || "—",
-    before: rows.value?.map((x) => `${x.item}：${x.before}`).join("；") || desc.value.slice(0, 60),
-    after: rows.value?.map((x) => `${x.item}：${x.after}`).join("；") || "—",
-    related: form.value.related ? form.value.related.split("、") : updateDocs.value,
-    materials: materialsText.value ? materialsText.value.split("\n").filter(Boolean) : [],
-    riskTools: tools.value,
-    flow,
-  };
-  submitChange(order);
-  window.$message?.success(`已提交 ${id}，进入「部门审核」节点（台账 / 审批中心 / 角标已联动）`);
-  // emit("openChange", order);
-};
-
-const PURPOSE_OPTIONS = [
-  "满足市场需求", "提高生产效能", "改善操作条件", "增加安全性能",
-  "达到环保要求", "法律合规整改", "减少能耗物损", "稳定系统运行",
-  "完善管理制度", "达到质量改进", "设备可靠性升级",
-];
-const DEPT_APPROVER_OPTS = ["李主任（一车间主任）", "赵主任（二车间主任）", "陈主任（三车间主任）"].map((x) => ({ label: x, value: x }));
-const SIGNER_POOL = ["王仪表（技术部）", "王仪表（技术部 · 仪表）", "周设备（设备科 · 电气）", "王海燕（安全环保部）", "王海燕（质量部）"];
-const signerOpts = (cur: string) => [...new Set([cur, ...SIGNER_POOL])].map((x) => ({ label: x, value: x }));
-const levelScores = ref<number[]>([2, 2, 3, 1, 2, 3]);
-const totalScore = computed(() => levelScores.value.reduce((a, b) => a + b, 0));
-const levelResult = computed(() => (totalScore.value >= 20 ? "重要变更" : "一般变更"));
-const RISK_TOOLS_FORM = [
-  { key: "HAZOP", label: "HAZOP" },
-  { key: "JSA", label: "JSA" },
-  { key: "检查表法", label: "设备SCL" },
-  { key: "通用检查表", label: "风险检查表" },
-];
-const recommendTools = () => {
-  const lv = form.value?.level === "重要" ? "重要" : "一般";
-  tools.value = lv === "重要" ? ["HAZOP", "JSA", "检查表法", "通用检查表"] : ["JSA", "检查表法", "通用检查表"];
-  window.$message?.success(`已按「${lv}变更」规则匹配风险分析工具，可继续手动重选`);
-};
-const toggleTool = (t: string) => {
-  tools.value = tools.value.includes(t) ? tools.value.filter((x) => x !== t) : [...tools.value, t];
-};
-
-const files = ref<string[]>(["小试实验报告.pdf", "杂质初步分析.docx"]);
-const previewFile = ref<string | null>(null);
-const DISCIPLINE_SIGNER: Record<string, string> = {
-  技术: "王仪表（技术部）", 仪表: "王仪表（技术部 · 仪表）", 电气: "周设备（设备科 · 电气）", 环保: "王海燕（安全环保部）", 质量: "王海燕（质量部）",
-};
-const toggleDiscipline = (d:any) => {
-  const result = disciplines.value.reduce((acc: Record<string, string>, key: string) => {
-    acc[key] = DISCIPLINE_SIGNER[key];  // 如果键不存在，值为 undefined
-    return acc;
-  }, {});
-  signers.value = {...result};
-};
-
-const TAB_NAME: Record<string, string> = {
-  pre: "变更预识别", form: "变更申请表", risk: "风险分析记录表",
-  train: "变更培训内容", pssr: "PSSR检查内容", accept: "验收评价", close: "变更关闭确认表",
-};
-const confirmTab = (t: string) => {
-  const v = !confirmed.value[t];
-  confirmed.value = { ...confirmed.value, [t]: v };
-  if (v) window.$message?.success(`已确认${TAB_NAME[t]}内容完毕（标签页栏已标记 ✓）`);
-  else window.$message?.info(`已取消${TAB_NAME[t]}的确认标记`);
-};
-const regenerate = () => window.$message?.success(`演示：已根据变更描述重新生成${TAB_NAME[tab.value]}（本页内容已刷新）`);
-const download = () => window.$message?.success(`演示：${TAB_NAME[tab.value]}已下载（Word/PDF）`);
-
-const downloadPdf = () => window.$message?.success(`演示：${previewFile.value} 已下载`);
-const LEVEL_DIMS = [
-  {
-    name: "1. 设备影响", note: "不合适的材质将会导致",
-    options: [
-      { label: "对设备带来一定的损害及腐蚀", score: 1 },
-      { label: "对设备带来中等的损害及腐蚀", score: 2 },
-      { label: "对设备带来明显的损害及腐蚀", score: 3 },
-      { label: "对设备带来重大的损害及腐蚀", score: 4 },
-    ],
-  },
-  {
-    name: "2. 财务影响", note: "工艺设计错误将会导致",
-    options: [
-      { label: "一定损失，a<1万人民币", score: 1 },
-      { label: "中等损失，直接损失1万≤a<10万人民币", score: 2 },
-      { label: "大量损失，直接损失10万≤a<100万人民币", score: 3 },
-      { label: "巨额损失，直接损失100万人民币≤a", score: 4 },
-    ],
-  },
-  {
-    name: "3. 质量影响", note: "",
-    options: [
-      { label: "对质量带来一定的风险（非关键工席、非关键设备设施的变更）", score: 1 },
-      { label: "对质量带来中等风险（B类原料替代、生产辅助设备变更）", score: 2 },
-      { label: "对质量带来明显的风险（主要工艺参数、中间体生产工艺变更）", score: 3 },
-      { label: "对质量有很高风险（主要工艺路线、关键工艺参数变更）", score: 4 },
-    ],
-  },
-  {
-    name: "4. 设计的复杂程度", note: "工艺设计包含了",
-    options: [
-      { label: "少量的简单系统（单个设备或单个部件）", score: 1 },
-      { label: "大量的简单系统（多个单类设备或部件）", score: 2 },
-      { label: "至少一个复杂系统（涉及多设备/工艺相应调整）", score: 3 },
-      { label: "大量的复杂系统（需要装置配套改造调整）", score: 4 },
-    ],
-  },
-  {
-    name: "5. 工艺设计的成熟度", note: "",
-    options: [
-      { label: "被频繁使用，且被证明为专利方设计", score: 1 },
-      { label: "被少量使用，或被证明为专利方设计", score: 2 },
-      { label: "被相关工业设计方法或参考文献认可（非专利方）", score: 3 },
-      { label: "新的，未发表的", score: 4 },
-    ],
-  },
-  {
-    name: "6. 工艺危害", note: "物料性质和工艺条件",
-    options: [
-      { label: "无危害（常压、-10℃≤温度<40℃、无毒、无腐蚀不燃）", score: 1 },
-      { label: "可燃/负压/低正压（0~0.3MPa）、40℃≤温度<80℃", score: 2 },
-      { label: "易燃/中压（0.3~1.0MPa）、80℃≤温度<150℃", score: 3 },
-      { label: "极度危害/高压（>1.0MPa）、温度≥150℃", score: 4 },
-    ],
-  },
-];
-const finishApprover = () => {
-  sheet.value = null; 
-  window.$message?.success('审批流程已更新（底部固定行摘要同步刷新）');
-}
-// 风险识别分析记录表
-const TOOL_CARDS = [
-  { key: "HAZOP" as const, name: "HAZOP 分析", desc: "节点-偏离结构化分析：原因 / 后果 / LS 风险矩阵 / 安全措施" },
-  { key: "JSA" as const, name: "JSA 分析", desc: "作业步骤分解：危害因素识别与 LS 风险分级管控" },
-  { key: "检查表法" as const, name: "设备 SCL", desc: "设备 / 管理检查项目对照标准逐项核查" },
-  { key: "通用检查表" as const, name: "风险检查表", desc: "变更通用检查项：是 / 否 / 不涉及逐项判定，输出风险描述与管控措施" },
-];
-const pluginDone = ref<Record<string, number>>({});
-const riskRecords = ref<any>([]);
-const updRec = (i: number, patch: Partial<any>) => {
-  riskRecords.value = riskRecords.value.map((x, j) => (j === i ? { ...x, ...patch } : x));
-};
-const addRiskRecords = (items: any[], mode: "manual" | "ai") => {
-  riskRecords.value = [...riskRecords.value, ...items];
-  if (mode === "ai") {
-    plugin.value = null;
-    window.$message?.success(`AI 已自动整理形成风险分析记录表（新增 ${items.length} 项），支持手动修改`);
-  } else {
-    window.$message?.success(`已选入 ${items.length} 条风险记录，可继续挑选或返回查看记录表`);
-  }
-};
-const lvlNext = (v: string) => (v === "高" ? "中" : v === "中" ? "低" : "高");
-const pssrGroups = ref<{ g: string; items: any[] }[]>([
-  { g: "一、风险分析行动项落实", items: [
-    { c: "联锁跳车电流设定值校核并留存记录", p: "投用前" },
-    { c: "电缆与开关容量校核升级完成", p: "投用前" },
-    { c: "操作人员培训完成并考核合格", p: "投用前" },
-  ] },
-  { g: "二、现场设备安装检查确认", items: [
-    { c: "电机安装就位，联轴器对中合格", p: "投用前" },
-    { c: "地脚螺栓紧固，减振垫安装到位", p: "投用前" },
-    { c: "电缆接线、防爆格兰头密封良好", p: "投用前" },
-  ] },
-  { g: "三、保护措施确认", items: [
-    { c: "联锁跳车设定值与新电机额定电流匹配", p: "投用前" },
-    { c: "电机外壳接地、防护罩完好", p: "投用前" },
-    { c: "紧急停机按钮功能试验正常", p: "投用前" },
-  ] },
-  { g: "四、资料归档确认", items: [
-    { c: "P&ID（图号 PID-R201-03）已更新并受控", p: "关闭前" },
-    { c: "设备台账、备件清单已更新", p: "关闭前" },
-    { c: "培训签到表、考核记录已归档", p: "关闭前" },
-  ] },
-]);
-const toPssr = (i: number) => {
-  const rec = riskRecords.value[i];
-  if (!rec || rec.pssr) return;
-  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0
-    ? { ...g, items: [...g.items, { c: `${rec.suggest}（来源：风险分析记录表 · ${rec.item}）`, p: "投用前" }] }
-    : g);
-  updRec(i, { pssr: true });
-  window.$message?.success("建议措施已转为 PSSR 行动项（见「PSSR 检查内容」· 一、风险分析行动项落实）");
-};
-const toPssrAll = () => {
-  const rest = riskRecords.value.map((x:any, i:any) => (x.pssr ? -1 : i)).filter((i:any) => i >= 0);
-  if (!rest.length) { window.$message?.info("所有建议措施均已转为 PSSR 行动项"); return; }
-  const items = rest.map((i:any) => ({ c: `${riskRecords.value[i].suggest}（来源：风险分析记录表 · ${riskRecords.value[i].item}）`, p: "投用前" }));
-  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0 ? { ...g, items: [...g.items, ...items] } : g);
-  riskRecords.value = riskRecords.value.map((x:any) => ({ ...x, pssr: true }));
-  window.$message?.success(`已将 ${rest.length} 条建议措施全部转为 PSSR 行动项（见「PSSR 检查内容」）`);
-};
-const aiOrganize = () => {
-  const gen: any[] = [
-    { item: "超温溜温冲料", scene: "反应温度提升至 90℃ 后更接近溶剂回流温度，温控失效或冷却水中断时反应溜温，釜压骤升可能导致冲料与物料喷溅", inherent: "高", existing: "DCS 温度高报 95℃、高高报及联锁 100℃（随变更上调并重新整定）；紧急冷却系统有效", suggest: "1. 投用前完成联锁传动测试并留存记录；2. 投用首周每班复核温度趋势，纳入交接班巡检", residual: "中", source: "AI 整理" },
-    { item: "未知杂质累积影响", scene: "未知杂质含量由 0.05% 升至 0.12%，热稳定性尚未定性，长期累积加速釜壁结垢与搅拌负荷异常", inherent: "中", existing: "小试热稳定性筛查；安全阀泄放能力不受本次调整影响", suggest: "1. 将杂质含量纳入日常分析计划（每周 1 次，连续 8 周）；2. 跟踪结垢趋势，安排周期清洗", residual: "低", source: "AI 整理" },
-    { item: "联锁 / 报警设定失效", scene: "报警 / 联锁值上调后（高报 85→95℃、联锁 90→100℃），原有报警裕度改变，存在误报、漏报风险", inherent: "中", existing: "参数修改执行申请-复核双人确认", suggest: "1. 联锁逻辑图与台账同步更新并归档；2. 联锁测试纳入 PSSR 必查项", residual: "低", source: "AI 整理" },
-  ];
-  riskRecords.value = [...riskRecords.value, ...gen];
-  window.$message?.success("AI 已根据变更内容自动整理形成风险分析记录表（3 项），支持手动修改");
-};
-// ---------- 变更培训 ----------
-const trainText = ref(
-`培训对象：R-201 岗位操作人员（4 人）、维修班（2 人）
-培训方式：现场讲解 + 操作演示
-
-一、变更内容
-M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机（ExdⅡBT4 → ExdⅡCT4），额定电流 102A → 138A；电缆与开关容量同步升级，联锁跳车电流设定值同步校核调整。
-
-二、变化的操作方式
-1. 搅拌器启动：变更前直接启动、观察电流 ≤102A；变更后启动后核对电流 ≤138A，确认变频器参数已更新（注意：首次启动空载试运行 30 分钟）
-2. 高粘度工况操作：变更前粘度 >3000cP 需降速运行；变更后粘度 ≤6000cP 可全速运行（注意：严禁超过 6000cP 上限）
-3. 过载跳闸处置：变更前复位后直接重启；变更后先查明原因并记录，联锁复位需班长确认（注意：跳闸电流设定值已调整）
-
-三、潜在风险与应对措施
-1. 风险：电机 / 电缆过热 → 应对：投用首周每班测温并记录，红外点检复核
-2. 风险：联锁设定错误导致拒动 / 误动 → 应对：投用前完成跳车试验并留存记录
-3. 风险：防爆接合面或格兰头密封失效 → 应对：检查防爆接合面与格兰头，严禁带电开盖`
-);
-// ---------- PSSR 检查内容 ----------
-const pssrDone = ref<Record<string, { by: string; at: string }>>({});
-const pssrNa = ref<Record<string, boolean>>({});
-const pssrActive = computed(() => pssrGroups.value.filter((g:any) => !pssrNa.value[g.g]));
-const pssrTotal = computed(() => pssrActive.value.reduce((a:any, g:any) => a + g.items.length, 0));
-const pssrDoneCount = computed(() => pssrActive.value.reduce((a:any, g:any) => a + g.items.filter((it:any) => pssrDone.value[it.c]).length, 0));
-const pssrAllDone = computed(() => pssrDoneCount.value === pssrTotal.value && (pssrTotal.value > 0 || (pssrGroups.value.length > 0 && pssrGroups.value.every((g) => !!pssrNa.value[g.g]))));
-const pssrFileRef = ref<any>(null);
-const pssrSheet = ref<any>(null);
-  const closeDocs = ref([
-  { name: "PID 图纸（PID-R201-03，受控最新版）", cat: "图纸与规程类", scope: "是", archived: true },
-  { name: "操作规程（含超温应急处置卡）", cat: "图纸与规程类", scope: "是", archived: false },
-  { name: "应急预案修订", cat: "图纸与规程类", scope: "不涉及", archived: false },
-  { name: "总图更新", cat: "图纸与规程类", scope: "否", archived: false },
-  { name: "DCS 联锁台账（新报警 / 联锁值）", cat: "台账与制度类", scope: "是", archived: false },
-  { name: "设备台账与备件清单", cat: "台账与制度类", scope: "是", archived: true },
-  { name: "风险分析报告（HAZOP / 检查表法）", cat: "过程与结果文件类", scope: "是", archived: true },
-  { name: "培训签到与考核记录", cat: "过程与结果文件类", scope: "是", archived: true },
-  { name: "PSSR 检查记录（含现场照片）", cat: "过程与结果文件类", scope: "是", archived: false },
-  { name: "验收报告与化验数据", cat: "过程与结果文件类", scope: "是", archived: false },
-]);
-const onPssrFile = (e: Event) => {
-  const input = e.target as HTMLInputElement;
-  const f = input.files?.[0]; input.value = "";
-  if (!f) return;
-  pssrSheet.value = f.name;
-  const at = today();
-  const n = { ...pssrDone.value };
-  pssrGroups.value.forEach((g:any) => { if (!pssrNa.value[g.g]) g.items.forEach((it:any) => { n[it.c] = { by: "纸质确认表上传", at }; }); });
-  pssrDone.value = n;
-  const archGroup = pssrGroups.value[pssrGroups.value.length - 1];
-  if (archGroup && !pssrNa.value[archGroup.g]) {
-    closeDocs.value = closeDocs.value.map((d:any) => (d.name.includes("PID") || d.name.includes("设备台账") || d.name.includes("培训签到") ? { ...d, archived: true } : d));
-  }
-  window.$message?.success(`已上传 PSSR 纸质确认表「${f.name}」：不做内容识别，上传即视为全部检查项完成确认（「不涉及」组除外），原件归档至变更档案`);
-};
-
-// ---------- 验收评价 ----------
-const acceptRows = ref([
-  { id: 1, item: "反应转化率", basis: "转化率不低于 98%", standard: "转化率 ≥ 98%（连续 3 批化验合格）", method: "化验室逐批取样分析，出具检验报告", owner: "车间 · 张工艺", result: "待验收" },
-  { id: 2, item: "单批反应时间 / 产能", basis: "反应时间缩短 50%、产能提升一倍", standard: "保温时间 4h±0.5h，产能提升 ≥ 80%", method: "DCS 批次记录统计，对比变更前 30 天均值", owner: "车间 · 李主任", result: "待验收" },
-  { id: 3, item: "未知杂质含量", basis: "杂质水平受控、产品质量合格", standard: "杂质 ≤ 0.15%，产品质量指标全部合格", method: "每批化验跟踪，连续 5 批数据趋势评估", owner: "质量 · 王海燕", result: "待验收" },
-  { id: 4, item: "温控与联锁有效性", basis: "温度窗口上调后保护层有效", standard: "温度波动 ≤ ±2℃，高报/联锁动作正确率 100%", method: "DCS 趋势核查 + 联锁测试记录复核", owner: "仪表 · 王仪表", result: "待验收" },
-  { id: 5, item: "设备运行状态", basis: "负荷变化后设备长周期稳定", standard: "搅拌电流、釜壁温度无异常趋势，无泄漏", method: "设备巡检 + 振动/温度记录评估", owner: "设备 · 周设备", result: "待验收" },
-]);
-const acceptNote = ref("");
-
-// ---------- 变更关闭确认表 ----------
-const closeFold = ref<Record<string, boolean>>({});
-const uploadDoc = ref<string | null>(null);
-const uploadSel = ref<string | null>(null);
-const UPDATE_DOC_KW: Record<string, string> = { PID图纸: "PID", 操作规程: "操作规程", 总图: "总图", 设备台账: "设备台账", 工艺卡片: "工艺卡片", 联锁台账: "联锁台账", 应急预案: "应急预案" };
-const needUpdate = (name: string) => updateDocs.value.some((d:any) => name.includes(UPDATE_DOC_KW[d] ?? d));
-
-const changeScope = (d: any, v: string) => {
-  closeDocs.value = closeDocs.value.map((x:any) => (x.name === d.name ? { ...x, scope: v } : x)); 
-  if (v !== d.scope) window.$message?.info(`演示：「${d.name}」改判为「${v}」，改判理由与操作人已留痕`);
-}
-const uploadDocInfo = computed(() => {
-  if (!uploadDoc.value) return null;
-  const doc = closeDocs.value.find((x) => x.name === uploadDoc.value);
-  const base = uploadDoc.value.replace(/[（(].*$/, "");
-  return {
-    storePath: `\\\\PLANT-DMS\\变更管理\\2026\\MOC-2026-R01-0041\\${doc?.cat ?? ""}\\`,
-    candidates: [`${base}_RevC_受控版.pdf`, `${base}_2026-08 更新版.docx`],
-    base,
-  };
-});
-const openDir = () => {
-  window.$message?.info('演示：已在文档管理系统中打开该目录')
-}
-const uploadFiles = () => {
-  uploadSel.value = `本地文件：${uploadDocInfo.value?.base}_最新版.pdf`; 
-  window.$message?.info('演示：已接收拖拽 / 选择的本地文件');
-}
-const uploadConfirm = () => {
-  closeDocs.value = closeDocs.value.map((x) => (x.name === uploadDoc.value ? { ...x, archived: true } : x)); 
-  window.$message?.success(`「${uploadDoc.value}」已上传并归档（${uploadSel.value}，受控版本，哈希留痕）`); 
-  uploadDoc.value = null;
-}
-
-
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-  <!-- 发起变更 -->
-  <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-    <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-      <!-- 顶部 -->
-      <div 
-        class="border-b bg-[var(--bg-color)]"
-        :style="{
-          '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
-        }"
-      >
-        <div 
-          class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-2 border-[var(--border-color)]"
-          :style="{'--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)}"
-        >
-          <span class="whitespace-nowrap text-sm font-medium text-slate-600">变更名称 <span class="text-red-500">*</span></span>
-          <NInput v-model:value="form.name" maxlength="28" show-count placeholder="AI 自动总结（28 字以内），可手动修改" class="!w-420px" />
-          <span class="ml-auto whitespace-nowrap text-sm text-slate-500">变更编号</span>
-          <NInput value="MOC-2026-R01-0041" disabled class="!w-44" />
-        </div>
-        <div class="flex items-center gap-1 overflow-x-auto px-3 pt-2">
-          <div v-for="t in TABS" :key="t.id" @click="tab = t.id"
-            class="flex items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm transition cursor-pointer border hover:bg-white/60 rounded-t-lg"
-            :class="tab === t.id ? 'border-b-transparent border-[var(--border-color)] bg-white text-[var(--active-color)]':'border-transparent text-slate-500'"
-            :style="{
-              '--border-color': getColorWithOpacity(themeStore.themeColor, 0.3),
-              '--active-color': themeStore.themeColor
-              }"
-          >
-            <Icon :icon="t.icon" class="size-14px" />
-            {{ t.name }}
-            <span v-if="t.id === 'form' && formGen === 'generating'"
-              class="flex items-center gap-1 rounded-full border border-violet-300 bg-violet-50 px-1.5 py-0.5 text-[10px] text-violet-600">
-              <Icon icon="ri:loader-4-fill" class="size-14px animate-spin" />
-              AI 生成中
-            </span>
-            <Icon v-if="confirmed[t.id]" icon="material-symbols:check-circle-outline" class="size-14px text-emerald-500" />
-            <span v-if="!confirmed[t.id] && blockedTabs.includes(t.id)" class="h-1.5 w-1.5 rounded-full bg-red-500" title="本页尚未确认完毕" />
-          </div>
-        </div>
-      </div>
-      <!-- 中间 -->
-      <div class="p-4">
-        <div class="space-y-4" :class="tab === 'pre'?'scroll':'scroll2'">
-          <!-- ===== 变更预识别 ===== -->
-          <template v-if="tab === 'pre'">
-            <!-- 变更内容描述 -->
-            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex items-center justify-between px-4 py-2 border-b">
-                <div class="flex items-center">
-                  <Icon icon="lucide:sparkles" class="size-16px text-violet-500" />
-                  <span class="font-semibold text-base ml-2">变更内容描述</span>
-                </div>
-                <NButton v-if="aiEnabled" ghost type="primary" @click="runIdentify" :disabled="analyzing">
-                  <Icon v-if="analyzing" icon="ri:loader-4-fill" class="size-16px animate-spin" />
-                  <Icon v-else icon="fluent:wand-24-regular" class="size-16px" /> 
-                  变更识别
-                </NButton>
-                <NTag type="info" v-else>AI 未启用</NTag>
-              </div>
-              <div class="p-4">
-                <NInput type="textarea" v-model:value="desc" rows="4" placeholder="请输入变更内容描述，例如：将反应釜R-101的搅拌速度从120rpm提高至180rpm，同时将反应温度从80℃提高至95℃…" />
-                <div v-if="!aiEnabled" class="mt-2 flex items-center gap-2 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
-                  <Icon icon="proicons:alert-triangle" class="size-14px" />
-                  AI 辅助功能未启用（可在「系统设置 → AI 辅助功能」开启），识别结果与申请表需手动填写。
-                </div>
-              </div>
-            </div>
-            <!-- 变更识别结果 -->
-            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex items-center justify-between px-4 py-2 border-b">
-                <div class="flex items-center">
-                  <Icon icon="lucide:list-checks" class="size-16px text-emerald-500" />
-                  <span class="font-semibold text-base ml-2">{{rows ? `变更识别结果（${rows.length}项）` : '变更识别结果（空表 · 可手动录入，或由 AI 识别生成）'}}</span>
-                </div>
-                <span v-if="rows" class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                  ✨ AI 生成 · 需人工确认
-                </span>
-              </div>
-              <div class="p-4">
-                <div class="overflow-x-auto">
-                  <table class="w-full min-w-[640px] border-collapse text-sm">
-                    <thead>
-                      <tr class="bg-slate-50 text-left text-slate-500">
-                        <th class="w-28 border-b px-3 py-2 font-medium">变更项目</th>
-                        <th class="border-b px-3 py-2 font-medium">变更前</th>
-                        <th class="border-b px-3 py-2 font-medium">变更后</th>
-                        <th class="w-10 border-b px-2 py-2" />
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="row in rows ?? []" :key="row.id" class="align-top">
-                        <td class="border-b px-3 py-3">
-                          <NInput 
-                            v-if="editing === `${row.id}-item`"
-                            class="text-left"
-                            type="textarea"
-                            size="small"
-                            autofocus
-                            v-model:value="row.item" 
-                            :autosize="{ minRows: 1 }"
-                            placeholder="请输入"
-                            @blur="editing = null"
-                          />
-                          <p v-else class="font-medium text-slate-700 hover:text-[#17407F] cursor-pointer"  @click="editing = `${row.id}-item`" title="点击修改项目名称">
-                            {{ row.item }}
-                          </p>
-                        </td>
-                        <td v-for="field in (['before', 'after'])" :key="field" class="border-b px-3 py-3">
-                          <NInput 
-                            v-if="editing === `${row.id}-${field}`"
-                            class="text-left"
-                            type="textarea"
-                            size="small"
-                            autofocus
-                            v-model:value="row[field]" 
-                            :autosize="{ minRows: 1 }"
-                            placeholder="请输入"
-                            @blur="editing = null"
-                          />
-                          <p v-else class="min-h-30px cursor-pointer rounded-lg border bg-slate-50/60 px-2.3 py-0.55 text-left text-sm leading-relaxed text-slate-700 transition hover:border-[#6E93C6] hover:bg-white" @click="editing = `${row.id}-${field}`" title="点击编辑">
-                            <HighlightText v-if="field === 'after'" :text="row[field]" :hl="row.hl" />
-                            <span v-else class="whitespace-pre-line">{{ row[field] }}</span>
-                          </p>
-                        </td>
-                        <td class="border-b px-2 py-3 text-center">
-                          <NButton text @click="rows = rows && rows.filter((x) => x.id !== row.id)" class="text-slate-300 hover:text-red-500" title="删除此行">
-                            <Icon icon="line-md:close-circle" class="size-16px" />
-                          </NButton>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <div class="mt-3">
-                  <NButton ghost
-                    @click="rows = [...(rows ?? []), { id: Date.now(), item: '新项目', before: '', after: '' }]">
-                    <Icon icon="ic:round-plus" class="size-16px" /> 添加行
-                  </NButton>
-                </div>
-              </div>
-            </div>
-            <!-- 风险预分析报告 -->
-            <div v-if="preRiskShown" class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex items-center justify-between px-4 py-2 border-b">
-                <div class="flex items-center">
-                  <Icon icon="lucide:list-checks" class="size-16px text-emerald-500" />
-                  <span class="font-semibold text-base ml-2">风险预分析报告</span>
-                </div>
-                <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                  ✨ AI 生成 · 需人工确认
-                </span>
-              </div>
-              <div class="p-4">
-                <div class="space-y-4">
-                  <div v-for="s in ([{ key: 'severity', name: '危害严重性分析' }, { key: 'probability', name: '事件概率分析' }, { key: 'protection', name: '保护措施影响分析' }] as const)" :key="s.key" class="rounded-lg border">
-                    <div class="flex items-center gap-2 border-b bg-slate-50/60 px-4 py-2">
-                      <span class="text-sm font-semibold text-slate-700">{{ s.name }}</span>
-                      <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="preRiskEdit = preRiskEdit === s.key ? null : s.key">
-                        {{ preRiskEdit === s.key ? "完成" : "编辑" }}
-                      </NButton>
-                    </div>
-                    <NInput v-if="preRiskEdit === s.key" type="textarea" :bordered="false" v-model:value="preRiskText[s.key]" autofocus rows="6" />
-                    <p v-else class="whitespace-pre-wrap px-3 py-1.5 text-sm leading-relaxed text-slate-700">{{ preRiskText[s.key] }}</p>
-                  </div>
-                  <div class="rounded-lg bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-700">
-                    AI 风险预分析仅供参考，用于申请阶段的快速研判；正式风险识别请前往「风险分析记录表」标签页，使用 HAZOP / JSA / 检查表法开展并留存记录。
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-          <!-- ===== 变更申请表 ===== -->
-          <template v-if="tab === 'form' && form">
-            <!-- 申请部门 / 申请人 -->
-            <div class="grid gap-4 grid-cols-2">
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">申请部门 <span class="text-red-500">*</span></div>
-                <NInput v-model:value="form.dept" placeholder="请输入申请部门" />
-              </div>
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">申请人</div>
-                <NInput v-model:value="ROLES[0].person" disabled />
-              </div>
-            </div>
-            <!-- 变更目的 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更目的</div>
-              <div class="rounded-lg border border-[#ACC6E5] bg-[#EAF0F9]/40 p-3">
-                <NCheckboxGroup v-model:value="form.purposes">
-                  <div class="flex flex-wrap gap-y-2 gap-x-4">
-                    <NCheckbox v-for="p in PURPOSE_OPTIONS" :key="p" :value="p" :label="p" />
-                  </div>
-                </NCheckboxGroup>
-              </div>
-            </div>
-            <!-- 预期效果 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">预期效果</div>
-              <NInput type="textarea" v-model:value="form.effect" rows="2" placeholder="" />
-            </div>
-            <!-- 主要变更内容 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">主要变更内容 <span class="text-red-500">*</span></div>
-              <div class="flex-1 space-y-2">
-                <div v-for="(m, i) in form.mainChanges" :key="i" class="flex items-center gap-2">
-                  <span class="w-5 shrink-0 text-sm text-slate-400">{{ i + 1 }}.</span>
-                  <NInput v-model:value="m as string" placeholder="" />
-                  <NButton text type="error" @click="form = { ...form, mainChanges: form.mainChanges.filter((_, j) => j !== i) }">
-                    <Icon icon="line-md:close-circle" class="size-16px" />
-                  </NButton>
-                </div>
-                <NButton text type="primary" class="text-xs" @click="form = { ...form, mainChanges: [...form.mainChanges, ''] }">
-                  <Icon icon="ic:round-plus" class="size-14px" /> 添加变更点
-                </NButton>
-              </div>
-            </div>
-            <!-- 连带变更内容 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">连带变更内容</div>
-              <div class="flex-1 space-y-2">
-                <div v-for="(m, i) in (form.related ? form.related.split('、') : [''])" :key="i" class="flex items-center gap-2">
-                  <span class="w-5 shrink-0 text-sm text-slate-400">{{ i + 1 }}.</span>
-                  <NInput v-model:value="m as string" placeholder="连带变更点（如：更新操作规程）" />
-                  <NButton text type="error" @click="form = { ...form, related: (form.related ? form.related.split('、') : ['']).filter((_, j) => j !== i).join('、') }">
-                    <Icon icon="line-md:close-circle" class="size-16px" />
-                  </NButton>
-                </div>
-                <NButton text type="primary" class="text-xs" @click="form = { ...form, related: form.related ? `${form.related}、` : '、' }">
-                  <Icon icon="ic:round-plus" class="size-14px" /> 添加连带变更点
-                </NButton>
-              </div>
-            </div>
-            <!-- 变更类型 / 变更等级 -->
-            <div class="grid gap-4 grid-cols-2">
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更类型 <span class="text-red-500">*</span></div>
-                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
-                  <NRadioGroup v-model:value="form.type">
-                    <div class="flex gap-x-2">
-                      <NRadio v-for="t in ['工艺', '设备', '管理']" :key="t" :value="t">{{t}}</NRadio>
-                    </div>
-                  </NRadioGroup>
-                  <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="sheet = 'type'">
-                    <Icon icon="lucide:sparkles" class="size-12px" />
-                    AI 判定说明
-                  </NButton>
-                </div>
-              </div>
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更等级 <span class="text-red-500">*</span></div>
-                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
-                  <NRadioGroup v-model:value="form.level">
-                    <div class="flex gap-x-2">
-                      <NRadio v-for="t in ['一般', '重要']" :key="t" :value="t">{{t}}</NRadio>
-                    </div>
-                  </NRadioGroup>
-                  <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="sheet = 'level'">
-                    <Icon icon="lucide:list-checks" class="size-12px" /> 等级判定表 ({{ totalScore }}分) →
-                  </NButton>
-                </div>
-              </div>
-            </div>
-            <!-- 变更时限 / 风险分析 -->
-            <div class="grid gap-4 grid-cols-2">
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更时限 <span class="text-red-500">*</span></div>
-                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
-                  <NRadioGroup v-model:value="form.duration">
-                    <div class="flex gap-x-2">
-                      <NRadio v-for="t in ['永久', '临时']" :key="t" :value="t">{{t}}</NRadio>
-                    </div>
-                  </NRadioGroup>
-                  <NCheckbox v-model:checked="form.urgent">紧急</NCheckbox>
-                </div>
-              </div>
-              <div class="flex gap-3">
-                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">风险分析</div>
-                <div class="flex flex-1 flex-wrap items-center gap-2 rounded-lg bg-slate-50 px-3 py-2">
-                  <NButton size="small" round v-for="t in RISK_TOOLS_FORM" :key="t.key" @click="toggleTool(t.key)" title="点击选用 / 取消；AI 辅助分析在各工具插件内使用"
-                    class="text-sm"
-                    :ghost="tools.includes(t.key) ? false : true"
-                    :type="tools.includes(t.key) ? 'primary' : 'default'"
-                  >
-                    {{ t.label }}
-                  </NButton>
-                  <NButton type="primary" ghost dashed size="small" round @click="recommendTools" class="text-xs">
-                    按等级重新推荐
-                  </NButton>
-                </div>
-              </div>
-            </div>
-            <!-- 计划投用时间 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">计划投用时间</div>
-              <div class="flex flex-1 flex-wrap items-center gap-2">
-                <NDatePicker v-model:value="form.date" type="date" class="!max-w-[220px]" />
-                <template v-if="form.duration === '临时'">
-                  <span class="whitespace-nowrap text-sm text-slate-500">计划恢复时间 <span class="text-red-500">*</span></span>
-                  <NDatePicker v-model:value="form.restoreDate" type="date" class="!max-w-[220px]" />
-                  <span class="text-xs text-amber-600">临时变更到期系统自动提醒恢复原状</span>
-                </template>
-                <span v-else class="whitespace-nowrap text-xs text-slate-300">（勾选「临时」后在此并排填写计划恢复时间）</span>
-              </div>
-            </div>
-            <div v-if="form.urgent" class="text-xs text-red-500">紧急变更为单独标记：走快速通道，事后限期补办风险分析与完整审批</div>
-            <!-- 所需材料 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">所需材料</div>
-              <div class="flex-1 space-y-2">
-                <div class="text-[11px] text-slate-400">施工所需材料（生成变更申请表时系统自动生成，支持手动修改）</div>
-                <NInput type="textarea" v-model:value="materialsText" rows="4" placeholder="点击「生成变更申请单」后由系统按变更内容自动生成，也可直接填写" />
-              </div>
-            </div>
-            <!-- 资料上传 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">资料上传</div>
-              <div class="flex flex-1 flex-wrap items-center gap-2 rounded-lg border border-dashed p-3">
-                <NButton size="small" class="text-xs" v-for="f in files" :key="f" @click="previewFile = f" title="点击在线预览">
-                  <Icon icon="akar-icons:file" class="size-14px" />
-                  {{ f }}
-                </NButton>
-                <NButton @click="files = [...files, `资料_${files.length + 1}.pdf`]">
-                  <Icon icon="material-symbols:upload" class="size-16px" /> 资料上传
-                </NButton>
-                <span class="text-xs text-slate-400">（点击附件名弹窗预览，支持 PDF / Word / 图片在线查看）</span>
-              </div>
-            </div>
-            <!-- 需更新的资料 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">需更新的资料</div>
-              <div class="flex flex-1 flex-wrap items-center gap-x-4 gap-y-1.5 rounded-lg bg-slate-50 px-3 py-2">
-                <NCheckboxGroup v-model:value="updateDocs">
-                  <div class="flex flex-wrap gap-y-2 gap-x-4">
-                    <NCheckbox v-for="p in ['PID图纸', '操作规程', '总图', '设备台账', '工艺卡片', '联锁台账', '应急预案']" :key="p" :value="p" :label="p" />
-                  </div>
-                </NCheckboxGroup>
-                <span class="self-center text-xs text-slate-400">（多选，变更关闭前逐项确认上传最新版本）</span>
-              </div>
-            </div>
-            <!-- 涉及专业 -->
-            <div class="flex gap-3">
-              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">涉及专业</div>
-              <div class="flex-1">
-                <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 rounded-lg bg-slate-50 px-3 py-2">
-                  <NCheckboxGroup v-model:value="disciplines" @update:value="toggleDiscipline">
-                    <div class="flex flex-wrap gap-y-2 gap-x-4">
-                      <NCheckbox v-for="p in ['技术', '仪表', '电气', '环保', '质量']" :key="p" :value="p" :label="p" />
-                    </div>
-                  </NCheckboxGroup>
-                  <span class="self-center text-xs text-slate-400">（多选，决定审批流中专业会签/审批的路由范围）</span>
-                </div>
-                <div v-if="Object.keys(signers).length > 0" class="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
-                  <Icon icon="lucide:users" class="size-12px" />已联动专业会签：
-                  <NTag size="small" type="info" v-for="(p, d) in signers" :key="d">{{ d }} · {{ p }}</NTag>
-                  <span class="text-slate-400">（在底部「审批流程设置」中可调整人选）</span>
-                </div>
-              </div>
-            </div>
-
-          </template>
-          <!-- ===== 风险记录表 ===== -->
-          <template v-if="tab === 'risk'">
-            <div class="border p-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-                  <Icon icon="lucide:shield-alert" class="size-16px" />
-                  风险识别工具（按变更等级匹配）
-                </span>
-                <NTag size="small" :type="form?.level === '重要' ? 'error' : 'default'">
-                  {{ form?.level === '重要' ? '重要变更' : '一般变更' }}
-                </NTag>
-                <span class="text-xs text-slate-400">
-                  {{ form?.level === '重要' ? '规则：HAZOP 必做，同时开展 JSA 与检查表法（SCL）' : '规则：JSA + 检查表法（SCL），涉及工艺安全边界的应升级 HAZOP' }}；可在申请表「风险分析」栏手动重选
-                </span>
-              </div>
-              <div class="grid gap-2 grid-cols-4 mt-3">
-                <div v-for="t in TOOL_CARDS" :key="t.key" :title="t.desc"
-                  class="flex items-center gap-2 rounded-lg border px-3 py-2 transition"
-                  :class="pluginDone[t.key] !== undefined ? 'border-[var(--theme-color)] bg-[var(--theme-color)]' : tools.includes(t.key) ? 'border-[var(--theme-color)] bg-white' : 'border-slate-200 bg-white'"
-                  :style="{'--theme-color': themeStore.themeColor}"
-                >
-                  <div class="min-w-0 flex-1">
-                    <div 
-                      class="flex items-center gap-1.5 text-xs font-semibold"
-                      :class="pluginDone[t.key] !== undefined ? 'text-white' : tools.includes(t.key) ? 'text-[var(--theme-color)]' : 'text-slate-500'"
-                      :style="{'--theme-color': themeStore.themeColor}"
-                    >
-                      <Icon icon="fluent:wand-24-regular" class="size-16px" />
-                      {{ t.name }}
-                    </div>
-                    <div class="mt-0.5 text-[10px]" :class="pluginDone[t.key] !== undefined ? 'text-white/75' : 'text-slate-400'">
-                      {{ pluginDone[t.key] !== undefined ? `已使用并分析了 ${pluginDone[t.key]} 条内容` : '未使用此工具分析' }}
-                    </div>
-                  </div>
-                  <NButton size="small" class="text-xs" :type="pluginDone[t.key] !== undefined ? 'default' : tools.includes(t.key) ? 'primary' : 'default'" 
-                    @click="if (!tools.includes(t.key)) toggleTool(t.key); plugin = t.key;">
-                    使用
-                  </NButton>
-                </div>
-              </div>
-            </div>
-
-            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex flex-wrap items-center gap-2 bg-slate-100 px-3 py-2">
-                <span class="flex items-center gap-1.5 text-sm font-medium text-slate-700">
-                  <Icon icon="proicons:alert-triangle" class="size-16px text-amber-500" />
-                  风险分析记录表
-                </span>
-                <span class="text-[11px] text-slate-400">共 {{ riskRecords.length }} 项</span>
-                <span class="ml-auto hidden text-[11px] text-slate-400 lg:block">插件结果「入表」或 AI 自动整理形成；单元格点击修改，风险等级点击切换</span>
-                <NButton ghost size="small" color="#7c3aed" class="text-xs" @click="toPssrAll">
-                  <Icon icon="tabler:clipboard-check" class="size-14px" />
-                  全部转 PSSR 行动项
-                </NButton>
-                <NButton ghost size="small" type="primary" class="text-xs" @click="aiOrganize">
-                  <Icon icon="lucide:sparkles" class="size-12px" />
-                  AI 自动整理
-                </NButton>
-              </div>
-              <div v-if="riskRecords.length === 0" class="px-3 py-6 text-center text-xs text-slate-400">
-                尚无风险记录：调用上方插件完成分析后逐条「入表」，或点击「AI 自动整理」形成记录表
-              </div>
-              <div v-else class="overflow-x-auto p-3">
-                <table class="w-full min-w-[960px] border-collapse text-xs">
-                  <thead>
-                    <tr>
-                      <th v-for="h in ['风险项', '场景描述', '固有风险', '现有措施', '建议措施', '剩余风险', '来源', '操作']" :key="h"
-                        class="border bg-slate-50 px-2 py-1.5 text-[11px] font-medium text-slate-500">{{ h }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="(rec, i) in riskRecords" :key="i">
-                      <td class="border px-1.5 py-1 align-top font-medium text-slate-700">
-                        <Ed :v="rec.item" @update="(x: string) => updRec(i, { item: x })" />
-                      </td>
-                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.scene" @update="(x: string) => updRec(i, { scene: x })" /></td>
-                      <td class="border px-1.5 py-1 text-center align-top">
-                        <NTag v-if="rec.inherent==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
-                          {{ rec.inherent }}
-                        </NTag>
-                        <NTag v-if="rec.inherent==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
-                          {{ rec.inherent }}
-                        </NTag>
-                        <NTag v-if="rec.inherent==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
-                          {{ rec.inherent }}
-                        </NTag>
-                      </td>
-                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.existing" @update="(x: string) => updRec(i, { existing: x })" /></td>
-                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.suggest" @update="(x: string) => updRec(i, { suggest: x })" /></td>
-                      <td class="border px-1.5 py-1 text-center align-top">
-                        <NTag v-if="rec.residual==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
-                          {{ rec.residual }}
-                        </NTag>
-                        <NTag v-if="rec.residual==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
-                          {{ rec.residual }}
-                        </NTag>
-                        <NTag v-if="rec.residual==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
-                          {{ rec.residual }}
-                        </NTag>
-                      </td>
-                      <td class="border px-1.5 py-1 text-center align-top">
-                        <NTag size="small" type="info">{{ rec.source }}</NTag>
-                      </td>
-                      <td class="border px-1.5 py-1 text-center align-top">
-                        <NTag v-if="rec.pssr" size="small" :color="{ color: '#f5f3ff', textColor: '#7c3aed', borderColor: '#f5f3ff' }">已转 PSSR</NTag>
-                        <NButton text size="tiny" color="#7c3aed" v-else class="hover:underline" @click="toPssr(i)">转 PSSR</NButton>
-                        <NButton text type="error" size="tiny" class="mt-2" @click="riskRecords = riskRecords.filter((_, j) => j !== i)">删除</NButton>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </template>
-          <!-- 变更培训内容 -->
-          <template v-if="tab === 'train'">
-            <div class="flex flex-wrap items-center gap-3 mb-3">
-              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-                <Icon icon="lucide:graduation-cap" class="size-16px text-violet-500" />
-                变更培训内容
-              </span>
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <span class="ml-auto text-xs text-slate-400">AI 生成内容均可点击修改自定义；审批通过后，相关人员在 PC / 移动端完成学习与签到确认</span>
-            </div>
-            <!-- 培训内容 -->
-            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex flex-wrap items-center gap-2 bg-slate-100 px-3 py-2">
-                <span class="text-sm font-medium text-slate-700">培训内容</span>
-                <span class="text-[11px] text-slate-400">含培训对象、培训方式、变更内容、操作方式、潜在风险与应对措施，一个文本框自动分段换行</span>
-                <span class="ml-auto text-[11px] text-slate-400">内容支持直接修改</span>
-              </div>
-              <NInput v-model:value="trainText" type="textarea" :bordered="false" :autosize="{minRows: 4}" class="font-mono text-sm" placeholder="" />
-            </div>
-          </template>
-          <!-- PSSR 检查内容 -->
-          <template v-if="tab === 'pssr'">
-            <div class="flex flex-wrap items-center gap-3">
-              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-                <Icon icon="tabler:clipboard-check" class="size-16px text-violet-500" />
-                PSSR 投用前安全检查内容
-              </span>
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <NTag size="small" :type="pssrAllDone ? 'success' : 'info'">
-                已完成 {{ pssrDoneCount }}/{{ pssrTotal }} 项
-              </NTag>
-              <span class="flex items-center gap-2">
-                <NButton ghost size="small" class="text-xs" title="上传 PSSR 纸质确认表照片 / 扫描件（JPG / PNG / PDF），系统不做内容识别，上传即视为全部检查项完成确认" @click="pssrFileRef?.click()">
-                  <Icon icon="material-symbols:upload" class="size-14px" />
-                  上传纸质确认表
-                </NButton>
-                <input ref="pssrFileRef" type="file" accept="image/*,.pdf" class="hidden" @change="onPssrFile" />
-                <span class="hidden text-xs text-slate-400 xl:inline">申请阶段：点击条目内容直接编辑，可增删项，完成时点互斥选择；审批通过后逐项点击确认（PC / 移动端均可），全部完成自动推送属地负责人</span>
-              </span>
-            </div>
-            <div v-if="pssrSheet" class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2 text-xs text-emerald-700">
-              <Icon icon="ix:success" class="size-16px" />
-              已上传 PSSR 纸质确认表「{{ pssrSheet }}」：上传即视为全部检查项完成确认（未做内容识别），原件已归档至变更档案
-            </div>
-            <div v-if="pssrAllDone" class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-xs text-emerald-700">
-              <Icon icon="ix:success" class="size-16px" />
-              全部 PSSR 检查项已确认完成，「具备投用条件」信息已自动推送属地负责人（车间 / 装置主任），可进行投用确认
-            </div>
-
-            <div v-for="(g, gi) in pssrGroups" :key="g.g" class="border" :class="pssrNa[g.g] ? 'opacity-70' : ''" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex items-center bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">
-                {{ g.g }}
-                <NTag v-if="pssrNa[g.g]" size="small" class="ml-2">不涉及</NTag>
-                <span v-else class="ml-2 text-xs font-normal text-slate-400">{{ g.items.filter((it) => pssrDone[it.c]).length }}/{{ g.items.length }} 已确认</span>
-                <NButton text type="primary" class="ml-auto text-xs font-normal hover:underline"
-                  :title="pssrNa[g.g] ? '恢复本组检查清单' : '本次变更不涉及本组内容时点击标记，标记后不计入完成统计'"
-                  @click="pssrNa = { ...pssrNa, [g.g]: !pssrNa[g.g] }">
-                  {{ pssrNa[g.g] ? '恢复清单' : '标记不涉及' }}
-                </NButton>
-                <NButton text type="primary" v-if="!pssrNa[g.g]" class="ml-3 text-xs font-normal hover:underline"
-                  @click="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: [...x.items, { c: '新检查项（点击直接编辑内容）', p: '投用前' }] } : x)">
-                  <Icon icon="ic:round-plus" class="size-14px" /> 添加检查项
-                </NButton>
-              </div>
-              <div v-if="pssrNa[g.g]" class="border-t bg-slate-50 px-3 py-3 text-xs text-slate-400">
-                本组内容经评估本次变更不涉及（如：无现场安装作业 / 不改变保护措施 / 无需归档资料），已不计入 PSSR 完成统计；如需恢复检查清单，点击右上角「恢复清单」。
-              </div>
-              <template v-else>
-                <div v-for="(it, i) in g.items" :key="`${gi}-${i}`" class="flex flex-wrap items-center gap-3 border-t px-3 py-2.5 text-sm">
-                  <span class="w-5 text-slate-400">{{ i + 1 }}</span>
-                  <NInput 
-                    v-if="editing === `pssr-c-${gi}-${i}`"
-                    class="flex-1"
-                    v-model:value="it.c"
-                    type="textarea"
-                    autofocus 
-                    rows="2"
-                    @blur="editing = null"
-                  />
-                  <button v-else @click="editing = `pssr-c-${gi}-${i}`" title="点击编辑内容"
-                    class="min-w-0 flex-1 rounded-md px-1 text-left text-slate-800 transition hover:bg-[#EAF0F9] bg-transparent"
-                  >
-                    {{ it.c }}
-                  </button>
-                  <span class="flex items-center gap-1 py-1">
-                    <NRadio :checked="it.p === '投用前'" :value="'投用前'" label="投用前完成"
-                      @change="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.map((y, yi) => yi === i ? { ...y, p: '投用前' } : y) } : x)" />
-                    <NRadio :checked="it.p === '关闭前'" :value="'关闭前'" label="关闭前完成"
-                      @change="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.map((y, yi) => yi === i ? { ...y, p: '关闭前' } : y) } : x)" />
-                  </span>
-                  <NButton text type="error" title="删除该项"
-                    @click="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.filter((_, yi) => yi !== i) } : x)"
-                  >
-                    <Icon icon="iconamoon:trash" class="size-16px" />
-                  </NButton>
-                </div>
-              </template>
-            </div>
-            <div class="rounded-lg bg-violet-50/70 px-4 py-2.5 text-xs text-violet-700">
-              完成时点说明：「投用前完成 / 关闭前完成」为互斥选择，点击即可切换。投用前完成的项未确认时属地负责人无法确认投用；关闭前完成的项不阻塞投用，但纳入关闭校验清单，未完成时变更主管部门专责无法确认关闭。
-            </div>
-            <div class="rounded-lg bg-violet-50/70 px-4 py-2.5 text-xs text-violet-700">
-              清单由 AI 依据变更类型与风险分析自动生成，专业人员审核后随审批发布；确认方式不作硬性要求——可在 PC 端直接点击确认，也可在移动端拍照上传作为佐证（系统自动记录确认人与日期）；资料归档组确认后自动同步「变更关闭确认表」显示已归档。
-            </div>
-          </template>
-          <!-- 验收评价 -->
-          <template v-if="tab === 'accept'">
-            <div class="flex flex-wrap items-center gap-3">
-              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-                <Icon icon="ix:success" class="size-18px text-emerald-500" />
-                验收评价（依据预期效果设定可量化验收标准）
-              </span>
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <span class="ml-auto text-xs text-slate-400">申请阶段由 AI 依据「预期效果」生成量化标准与验收方式，可手动修改；投用运行后由车间和各专业按标准验收并给出评估结论</span>
-            </div>
-            <div 
-              class="space-y-1.5 rounded-lg border border-[var(--border-color)] bg-[var(--bg-color)] px-4 py-3 text-xs leading-6 text-slate-700"
-              :style="{
-                '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
-                '--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)
-              }"
-            >
-              <div><b :style="{color: themeStore.themeColor}">变更目的：</b>{{ form?.purposes?.join('、') || '提高生产效能、改善操作条件' }}</div>
-              <div><b :style="{color: themeStore.themeColor}">预期效果：</b>{{ form?.effect || '在保持转化率不低于98%的前提下，反应时间缩短50%，产能提升一倍' }}</div>
-              <div 
-                class="border-t border-[var(--border-color)] pt-1.5 text-slate-500"
-                :style="{'--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)}"
-              >
-                <b :style="{color: themeStore.themeColor}">对应说明：</b>验收项目由预期效果逐条拆解设定，各项目对应的预期效果来源见表格「验收项目」列下方灰色小字（点击可修改）；验收时须逐项对照预期效果判定达成程度。
-              </div>
-            </div>
-
-            <div class="overflow-x-auto border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <table class="w-full min-w-[900px] border-collapse text-sm">
-                <thead>
-                  <tr class="bg-slate-100 text-left text-slate-600">
-                    <th class="w-8 px-3 py-2 font-medium">#</th>
-                    <th class="w-56 px-3 py-2 font-medium">验收项目（含对应预期效果）</th>
-                    <th class="px-3 py-2 font-medium">量化验收标准</th>
-                    <th class="px-3 py-2 font-medium">验收方式（可执行）</th>
-                    <th class="w-32 px-3 py-2 font-medium">责任单位/人</th>
-                    <th class="px-3 py-2 font-medium">评估结论</th>
-                    <th class="w-12 px-2 py-2 font-medium text-center">操作</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(row, i) in acceptRows" :key="row.id" class="align-top">
-                    <td class="border-t px-3 py-2.5 text-slate-400">{{ i + 1 }}</td>
-                    <td class="border-t px-3 py-2.5">
-                      <NInput
-                        v-if="editing === `acc-${row.id}-item`"
-                        class="text-xs"
-                        v-model:value="row.item"
-                        type="textarea"
-                        autofocus
-                        rows="2"
-                        @blur="editing = null"
-                      />
-                      <button v-else @click="editing = `acc-${row.id}-item`" title="点击修改"
-                        class="bg-transparent block w-full rounded-md px-2 py-1 text-left text-xs font-medium leading-relaxed text-slate-700 transition hover:bg-[#EAF0F9]"
-                      >
-                        {{ row.item }}
-                      </button>
-                      <NInput 
-                        v-if="editing === `acc-${row.id}-basis`"
-                        class="text-[11px]"
-                        size="small"
-                        v-model:value="row.basis"
-                        autofocus
-                        @blur="editing = null"
-                      />
-                      <button v-else @click="editing = `acc-${row.id}-basis`" title="本项目对应的预期效果来源，点击修改"
-                        class="bg-transparent mt-0.5 block w-full rounded px-2 text-left text-[11px] text-slate-400 transition hover:bg-[#EAF0F9] hover:text-slate-500"
-                      >
-                        对应预期：{{ row.basis || '（点击填写对应预期效果）' }}
-                      </button>
-                    </td>
-                    <td v-for="field in (['standard', 'method', 'owner'])" :key="field" class="border-t px-3 py-2.5">
-                      <NInput
-                        v-if="editing === `acc-${row.id}-${field}`"
-                        class="text-xs"
-                        v-model:value="row[field]"
-                        type="textarea"
-                        autofocus
-                        rows="2"
-                        @blur="editing = null"
-                      />
-                      <button v-else @click="editing = `acc-${row.id}-${field}`" title="点击修改"
-                        class="bg-transparent block w-full rounded-md px-2 py-1 text-left text-xs leading-relaxed text-slate-700 transition hover:bg-[#EAF0F9]"
-                      >
-                        {{ row[field] }}
-                      </button>
-                    </td>
-                    <td class="border-t px-3 py-2.5">
-                      <div class="flex flex-nowrap items-center gap-1">
-                        <NButton v-for="v in (['完全达到', '基本达到', '未达成'])" :key="v"
-                          size="small"
-                          round
-                          @click="acceptRows = acceptRows.map((x) => (x.id === row.id ? { ...x, result: x.result === v ? '待验收' : v } : x))"
-                          class="text-[11px]"
-                          :type="row.result === v
-                            ? v === '未达成' ? 'error' : v === '基本达到' ? 'warning' : 'success'
-                            : 'default'">
-                          {{ v }}
-                        </NButton>
-                      </div>
-                    </td>
-                    <td class="border-t px-2 py-2.5 text-center">
-                      <NButton text type="error" title="删除本验收项" @click="acceptRows = acceptRows.filter((x) => x.id !== row.id)">
-                        <Icon icon="iconamoon:trash" class="size-16px" />
-                      </NButton>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div class="flex items-center gap-3">
-              <NButton ghost class="text-xs"
-                @click="acceptRows = [...acceptRows, { id: Date.now(), item: '新验收项目', basis: '', standard: '', method: '', owner: '', result: '待验收' }]">
-                <Icon icon="ic:round-plus" class="size-16px" />添加验收项
-              </NButton>
-              <span class="text-xs text-slate-400">评估结论在验收阶段由责任单位填写：点击选择「完全达到 / 基本达到 / 未达成」，再次点击取消；行尾可删除验收项</span>
-            </div>
-            <div class="rounded-lg border">
-              <div class="border-b bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">综合验收结论（验收阶段由车间会同各专业评估填写）</div>
-              <div class="space-y-3 p-3">
-                <div class="flex flex-wrap items-center gap-2">
-                  <span v-for="v in (['完全达到', '基本达到', '未达成'])" :key="v">
-                    <NRadio :checked="acceptNote !== '' && acceptNote.startsWith(v)" :value="'v'" :label="v" @change="acceptNote = v + '：'"></NRadio>
-                  </span>
-                  <span class="text-xs text-slate-400">「基本达到 / 未达成」须说明偏差原因与处置措施，并纳入变更关闭审核</span>
-                </div>
-                <NInput v-model:value="acceptNote" type="textarea" rows="2" placeholder="验收意见：总体评价、偏差说明、后续跟踪措施…（验收阶段填写）" />
-              </div>
-            </div>
-            <div class="rounded-lg bg-emerald-50/80 px-4 py-2.5 text-xs leading-5 text-emerald-700">
-              流程说明：投用运行满验收周期后，系统向车间（属地）与涉及专业推送验收任务；各责任单位按上表逐项给出评估结论并上传佐证（数据报表 / 化验报告 / 现场照片），全部完成后汇总至综合验收结论，结论与佐证资料一并纳入变更关闭校验，验收不通过时退回整改或评估恢复原状。
-            </div>
-          </template>
-          <!-- 变更关闭确认表 -->
-          <template v-if="tab === 'close'">
-            <div class="flex flex-wrap items-center gap-3">
-              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-                <Icon icon="quill:folder-open" class="size-16px" />
-                变更关闭确认表（资料归档清单）
-              </span>
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <NTag size="small" class="text-xs">AI 辅助判定一次 · 支持人工改判留痕</NTag>
-              <span class="ml-auto text-xs text-slate-400">判定为「是」的资料全部归档后，变更主管部门专责方可确认关闭</span>
-            </div>
-            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-              <div class="flex items-center gap-3 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-500">
-                <span class="w-5" />
-                <span class="flex-1">资料名称（与申请表「需更新的资料」勾选联动，勾选资料标记「需更新版本」）</span>
-                <span class="w-48 text-center">是否涉及（AI 判定，可改判）</span>
-                <span class="w-32 text-center">归档状态</span>
-              </div>
-              <template v-for="cat in (['图纸与规程类', '台账与制度类', '过程与结果文件类'])" :key="cat">
-                <div v-if="closeDocs.filter((d) => d.cat === cat).length">
-                  <button @click="closeFold = { ...closeFold, [cat]: !closeFold[cat] }"
-                    class="flex w-full items-center gap-2 border-t bg-slate-50 px-3 py-2 text-left text-xs font-semibold text-slate-600 transition hover:bg-[#EAF0F9]">
-                    <Icon icon="formkit:right" class="size-14px text-slate-400 transition" :class="closeFold[cat] ? '' : 'rotate-90'" />
-                    {{ cat }}
-                    <span class="font-normal text-slate-400">
-                      {{ closeDocs.filter((d) => d.cat === cat).length }} 项 · 已归档
-                      {{ closeDocs.filter((d) => d.cat === cat && d.scope === '是' && d.archived).length }}/{{ closeDocs.filter((d) => d.cat === cat && d.scope === '是').length }}
-                    </span>
-                    <span class="ml-auto text-[11px] font-normal text-slate-400">{{ closeFold[cat] ? '点击展开' : '点击折叠' }}</span>
-                  </button>
-                  <template v-if="!closeFold[cat]">
-                    <div v-for="d in closeDocs.filter((x) => x.cat === cat)" :key="d.name" class="flex flex-wrap items-center gap-3 border-t px-3 py-2.5 text-sm">
-                      <span class="w-5 text-slate-400">{{ closeDocs.indexOf(d) + 1 }}</span>
-                      <span class="min-w-0 flex-1 text-slate-800">
-                        {{ d.name }}
-                        <NTag v-if="needUpdate(d.name)" size="small" type="info" class="ml-2">需更新版本</NTag>
-                      </span>
-                      <span class="flex w-48 shrink-0 justify-center gap-1.5">
-                        <NButton size="tiny" round v-for="v in (['是', '否', '不涉及'])" :key="v"
-                          @click="changeScope(d, v)"
-                          class="text-[11px]"
-                          :type="d.scope === v ? 'primary' : 'default'">
-                          {{ v }}
-                        </NButton>
-                      </span>
-                      <span class="flex w-32 shrink-0 items-center justify-center gap-2">
-                        <template v-if="d.scope === '是'">
-                          <NTag v-if="d.archived" size="small" type="success">已归档</NTag>
-                          <template v-else>
-                            <NTag size="small" type="warning">待上传</NTag>
-                            <NButton text type="primary" class="text-xs hover:underline" @click="uploadDoc = d.name; uploadSel = null;">上传</NButton>
-                          </template>
-                        </template>
-                        <NTag v-else size="small">{{ d.scope }}</NTag>
-                      </span>
-                    </div>
-                  </template>
-                </div>
-              </template>
-            </div>
-            <div class="flex flex-wrap items-center gap-4 text-xs text-slate-500">
-              <span>
-                统计：涉及 <b class="text-[#17407F]">{{ closeDocs.filter((d) => d.scope === '是').length }}</b> 项 ·
-                已归档 <b class="text-emerald-600">{{ closeDocs.filter((d) => d.scope === '是' && d.archived).length }}</b> 项 ·
-                待上传 <b class="text-amber-600">{{ closeDocs.filter((d) => d.scope === '是' && !d.archived).length }}</b> 项 ·
-                需更新版本 <b class="text-[#1D4E9C]">{{ closeDocs.filter((d) => needUpdate(d.name)).length }}</b> 项（联动申请表勾选）
-              </span>
-              <span class="text-slate-400">资料上传支持 PC / 移动端（拍照上传），版本受控</span>
-            </div>
-            <div class="rounded-lg bg-[#EAF0F9] px-4 py-2.5 text-xs leading-5 text-[#17407F]">
-              关闭校验说明：判定为「是」的资料项全部归档后，系统将全部流程完毕信号推送变更主管部门专责，专责确认后点击关闭，系统记录变更关闭时间；「否 / 不涉及」由 AI 辅助判定一次，人工改判须填写理由并留痕。临时变更恢复完成后，恢复操作票与参数核对记录自动追加至本清单。
-            </div>
-          </template>
-
-        </div>
-      </div>
-      <!-- 底部 -->
-      <!-- 全局按钮：下载 / 重新生成 / 确认完毕 -->
-      <div v-if="tab !== 'pre'" class="flex flex-wrap items-center justify-between gap-2 border-t p-4">
-        <div class="flex flex-wrap gap-2">
-          <NButton ghost type="success" @click="download">
-            <Icon icon="material-symbols:download" class="size-16px" /> 下载{{ TAB_NAME[tab] }}
-          </NButton>
-          <NButton ghost type="warning" @click="regenerate">
-            <Icon icon="tdesign:refresh" class="size-14px" /> 重新生成{{ TAB_NAME[tab] }}
-          </NButton>
-          <NButton ghost :type="confirmed[tab] ? 'success' : 'primary'" @click="confirmTab(tab)">
-            <Icon icon="ix:success" class="size-16px" /> {{ confirmed[tab] ? '已确认完毕' : '本标签内容确认完毕' }}
-          </NButton>
-        </div>
-        <span class="text-xs text-slate-400">审批人 / 保存 / 提交均在底部固定行，滚动时保持可见</span>
-      </div>
-      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 bg-[#EAF0F9] px-4 py-2.5 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
-        <template v-if="tab === 'pre'">
-          <span class="text-xs text-slate-400">预识别阶段不设审批人与提交：完成识别与预分析后，请切换至「变更申请表」选择审批人并提交</span>
-          <div class="ml-auto flex shrink-0 gap-2">
-            <NButton ghost type="success" size="small" @click="genForm">
-              <Icon icon="akar-icons:file" class="size-14px" /> 生成变更申请单
-            </NButton>
-            <NButton ghost type="warning" size="small" @click="runRiskAnalysis" :disabled="analyzing">
-              <Icon v-if="analyzing" icon="ri:loader-4-fill" class="size-14px animate-spin" />
-              <Icon v-else icon="mdi:shield-alert-outline" class="size-14px" />风险预分析
-            </NButton>
-            <NButton type="primary" size="small" @click="saveDraft">保存</NButton>
-          </div>
-        </template>
-        <template v-else>
-          <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-500">
-            <Icon icon="lucide:users" class="size-14px" />
-            <span class="min-w-0 truncate">
-              部门审核：{{ approvers.部门审核 }} → 专业会签：{{ Object.keys(signers).length ? Object.values(signers).join('、') : '未涉及专业 · 免会签' }} → 最终批准：{{ approvers.最终批准 }}
-            </span>
-            <NButton ghost size="small" type="primary" @click="sheet = 'approver'">
-              <Icon icon="octicon:sliders-24" class="size-14px" />
-              审批流程设置
-            </NButton>
-          </div>
-          <div class="ml-auto flex shrink-0 items-center gap-2">
-            <NButton size="small" type="primary" @click="saveDraft">保存</NButton>
-            <span v-if="!form" class="flex items-center text-xs text-amber-600">请先在「变更预识别」页生成变更申请单</span>
-            <NButton size="small" type="primary" @click="submitApply" :disabled="!form" :title="form ? '提交进入审批流' : '请先生成变更申请单'">
-              提交 <Icon icon="formkit:right" class="size-14px" />
-            </NButton>
-          </div>
-        </template>
-      </div>
-    </div>
-    <!-- 附件在线预览弹窗 -->
-    <NModal
-      :show="previewFile !== null"
-      preset="card"
-      :auto-focus="false"
-      :style="{ width: '700px', height: 'auto' }"
-      :segmented="{ content: true, footer: true }"
-      @update:show="(v: boolean) => !v && (previewFile = null)"
-    >
-      <template #header>
-        <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
-          <Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile }}
-        </div>
-      </template>
-      <template #default>
-        <div class="space-y-3">
-          <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
-            <span>上传人：{{ ROLES[0].person }}</span><span>上传时间：{{ today() }}</span><span>版本：V1（受控）</span>
-          </div>
-          <div class="flex h-72 flex-col items-center justify-center gap-2 rounded-lg border bg-slate-50 text-slate-400">
-            <Icon icon="akar-icons:file" class="size-42px" />
-            <span class="text-sm">文件在线预览区（演示）</span>
-            <span class="text-xs">正式环境由文档预览服务渲染 PDF / Word / 图片内容，支持缩放、翻页与移动端查看</span>
-          </div>
-        </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-[10px]">
-          <NButton ghost size="small" @click="downloadPdf">
-            <Icon icon="material-symbols:download" class="size-16px" /> 下载
-          </NButton>
-          <NButton size="small" type="primary" @click="previewFile = null">关闭</NButton>
-        </div>
-      </template>
-    </NModal>
-    <!-- 侧边抽屉：AI 类型判定 / 等级判定表 / 审批流程设置 -->
-    <NDrawer :show="sheet !== null" @update:show="(v: boolean) => !v && (sheet = null)" placement="right" :width="sheet === 'level' ? '45rem' : '28rem'">
-      <NDrawerContent>
-        <template #header>
-          <div v-if="sheet === 'type'" class="text-base font-semibold text-slate-800">AI 变更类型判定说明</div>
-          <div v-if="sheet === 'level'" class="text-base font-semibold text-slate-800">变更等级判定表</div>
-          <div v-if="sheet === 'approver'" class="text-base font-semibold text-slate-800">审批流程设置</div>
-        </template>
-        <div class="h-full space-y-4 overflow-y-auto">
-          <!-- AI 变更类型判定说明 -->
-          <template v-if="sheet === 'type'">
-            <div class="flex items-center gap-2">
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <NTag type="info" size="small">判定：工艺</NTag>
-              <NTag size="small">置信度：高</NTag>
-            </div>
-            <div class="space-y-3 text-sm leading-relaxed text-slate-700">
-              <p><b>判定结论：</b>本次变更涉及反应温度（80℃→90℃）、保温时间（8h→4h）等工艺参数调整及 DCS 报警/联锁值修改，未涉及设备本体更换或材质变更，依据变更类型规则判定为「工艺」类变更。</p>
-              <p><b>判定依据：</b></p>
-              <ul class="list-disc space-y-1 pl-5">
-                <li>命中规则 2.1：操作参数超出原设计控制范围 → 工艺类</li>
-                <li>命中规则 2.4：DCS 报警值/联锁值调整 → 工艺类（仪表联动）</li>
-                <li>排除规则 3.2：无设备规格型号变化 → 不构成设备类</li>
-              </ul>
-              <p><b>知识库引用：</b>工艺卡片 R-101（Rev B）、DCS 联锁台账、《变更管理制度》第 4.2 条。</p>
-              <p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考，最终类型以人工确认为准；如调整为其他类型，系统将记录修改留痕。</p>
-            </div>
-          </template>
-  
-          <!-- 变更等级判定表 -->
-          <template v-if="sheet === 'level'">
-            <div class="flex items-center gap-2">
-              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
-                ✨ AI 生成 · 需人工确认
-              </span>
-              <NTag size="small" :type="totalScore >= 20 ? 'error' : 'warning'">
-                {{ levelResult }}
-              </NTag>
-              <span class="text-xs text-slate-400">合计得分 <b class="text-[#17407F]">{{ totalScore }}</b> 分（&lt;20 分为一般，≥20 分为重要）</span>
-            </div>
-            <div class="grid gap-3 grid-cols-2">
-              <div v-for="(dim, di) in LEVEL_DIMS" :key="dim.name" class="rounded-lg border p-3">
-                <div class="mb-2 flex items-baseline justify-between gap-2">
-                  <span class="text-sm font-semibold text-slate-700">
-                    {{ dim.name }}
-                    <span v-if="dim.note" class="ml-1 text-xs font-normal text-slate-400">（{{ dim.note }}）</span>
-                  </span>
-                  <span class="text-sm text-slate-500">得分 <b class="text-[#17407F]">{{ levelScores[di] }}</b></span>
-                </div>
-                <div class="space-y-1.5">
-                  <button v-for="op in dim.options" :key="op.score" @click="levelScores = levelScores.map((s, i) => (i === di ? op.score : s))"
-                    class="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
-                    :class="levelScores[di] === op.score ? 'bg-[#EAF0F9] text-[var(--theme-color)]' : 'text-slate-600 hover:bg-slate-50 bg-white'"
-                    :style="{'--theme-color': themeStore.themeColor}"
-                  >
-                    <span 
-                      class="mt-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border" 
-                      :class="levelScores[di] === op.score ? 'border-[var(--theme-color)]' : 'border-slate-300'"
-                      :style="{'--theme-color': themeStore.themeColor}"
-                    >
-                      <span 
-                        v-if="levelScores[di] === op.score" 
-                        class="h-1.5 w-1.5 rounded-full bg-[var(--theme-color)]"
-                        :style="{'--theme-color': themeStore.themeColor}"
-                      />
-                    </span>
-                    <span class="flex-1 leading-snug">{{ op.label }}（{{ op.score }}分）</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="rounded-lg border border-violet-200 bg-violet-50/50 p-4">
-              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-violet-700">
-                <Icon icon="lucide:sparkles" class="size-14px" />
-                AI 评分分析过程
-              </div>
-              <div class="space-y-3 text-xs leading-relaxed text-slate-600">
-                <p>我们分析变更内容：缩合反应温度从80℃提高到90℃，反应时间从8小时缩短到4小时。设备材质SS304，设计温度100℃，设计压力0.2MPa，压力不变（常压）。物料为原料A与原料B，未具体说明毒性、腐蚀性。逐维度评分如下。</p>
-                <p><b class="text-[#17407F]">1. 设备影响：</b>温度从80℃升至90℃，仍在设计温度100℃范围内，但接近上限。SS304 在 80→90℃ 下腐蚀速率可能略有增加，但变化不大；保守起见给 2 分（中等损害）。</p>
-                <p><b class="text-[#17407F]">2. 财务影响：</b>变更目的是提升产能，但若设计错误可能导致反应失败、批次报废。温度提高10℃、时间缩短一半，控制不好可能影响产品质量，损失可能中等（1万~10万），取 2 分。</p>
-                <p><b class="text-[#17407F]">3. 质量影响：</b>涉及主要工艺参数变更且有未知杂质（0.05%→0.12%）结构未定，对质量带来明显风险，取 3 分。</p>
-                <p class="text-slate-400">（各维度得分均可人工改判，修改留痕；改判后等级自动回填至申请表）</p>
-              </div>
-            </div>
-          </template>
-  
-          <!-- 审批流程设置 -->
-          <template v-if="sheet === 'approver'">
-            <p class="text-xs leading-relaxed text-slate-400">审批链：部门审核 → 专业会签 → 最终批准。专业会签人由申请表「涉及专业」勾选自动增减，可在此调整人选；重要变更自动追加安全审查与分管领导终批。</p>
-            <div class="rounded-lg border p-3">
-              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
-                <NTag type="info" size="small">1</NTag> 部门审核
-              </div>
-              <NSelect :value="approvers.部门审核" :options="DEPT_APPROVER_OPTS"
-                @update:value="(v: string) => approvers = { ...approvers, 部门审核: v }" />
-            </div>
-            <div class="rounded-lg border p-3">
-              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
-                <NTag type="info" size="small">2</NTag> 专业会签
-                <span class="text-[11px] font-normal text-slate-400">（由「涉及专业」勾选联动）</span>
-              </div>
-              <p v-if="Object.keys(signers).length === 0" class="text-xs text-slate-400">未勾选涉及专业，本环节免会签；如需会签，请回申请表勾选「涉及专业」。</p>
-              <div v-else class="space-y-2">
-                <div v-for="(p, d) in signers" :key="d" class="flex items-center gap-2">
-                  <NTag size="small">{{ d }}</NTag>
-                  <NSelect class="flex-1" :value="p" :options="signerOpts(p)"
-                    @update:value="(v: string) => signers = { ...signers, [d]: v }" />
-                </div>
-              </div>
-            </div>
-            <div class="rounded-lg border p-3">
-              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
-                <NTag type="info" size="small">3</NTag> 最终批准
-                <NTag size="small" class="text-11px">制度固定</NTag>
-              </div>
-              <NInput :value="approvers.最终批准" disabled />
-              <p class="mt-1.5 text-[11px] text-slate-400">重要变更：自动追加「安全审查（安全环保部）」与「分管领导终批」节点，无需手动设置。</p>
-            </div>
-            <NButton type="primary" class="w-full" @click="finishApprover">完成设置</NButton>
-          </template>
-        </div>
-      </NDrawerContent>
-    </NDrawer>
-    <!-- 资料上传弹窗 -->
-    <NModal 
-      :show="uploadDoc !== null"
-      preset="card"
-      :auto-focus="false"
-      :style="{ width: '550px', height: 'auto' }"
-      :segmented="{ content: true, footer: true }"
-      @update:show="(v: boolean) => !v && (uploadDoc = null)"
-    >
-      <template #header>
-        <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
-          <Icon icon="material-symbols:upload" class="size-20px" /> 资料上传归档 — {{ uploadDoc }}
-        </div>
-      </template>
-      <div class="space-y-3">
-        <div>
-          <div class="mb-1 text-xs font-medium text-slate-500">系统文档存储地址（受控目录）</div>
-          <div class="flex items-center gap-2 rounded-lg border bg-slate-50 px-3 py-2">
-            <Icon icon="quill:folder-open" class="size-16px" />
-            <code class="min-w-0 flex-1 truncate text-xs text-slate-600">{{ uploadDocInfo?.storePath }}</code>
-            <NButton text type="primary" class="text-xs hover:underline" @click="openDir">打开目录</NButton>
-          </div>
-        </div>
-        <div>
-          <div class="mb-1 text-xs font-medium text-slate-500">方式一：从存储地址选择资料</div>
-          <div class="space-y-1.5">
-            <p v-for="f in uploadDocInfo?.candidates" :key="f" @click="uploadSel = f"
-              class="flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-xs transition cursor-pointer"
-              :class="uploadSel === f ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-[var(--theme-color)] text-white' : 'bg-white text-slate-600 hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]'"
-              :style="{'--theme-color': themeStore.themeColor}"
-            >
-              <Icon icon="akar-icons:file" class="size-14px mr-1" /> {{ f }}
-                <Icon v-if="uploadSel === f" icon="ix:success" class="ml-auto size-16px" />
-            </p>
-          </div>
-        </div>
-        <div>
-          <div class="mb-1 text-xs font-medium text-slate-500">方式二：拖拽本地文件到区域</div>
-          <button @click="uploadFiles"
-            class="flex h-20 w-full flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed px-3 text-xs transition"
-            :class="uploadSel?.startsWith('本地文件') ? 'border-[var(--theme-color)] bg-[#EAF0F9] text-[var(--theme-color)]' : 'border-slate-300 text-slate-400 hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]'"
-            :style="{'--theme-color': themeStore.themeColor}"
-          >
-            <Icon icon="material-symbols:upload" class="size-24px" />
-            {{ uploadSel?.startsWith('本地文件') ? uploadSel : '将资料文件拖拽到此处，或点击选择本地文件' }}
-          </button>
-        </div>
-      </div>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <NButton @click="uploadDoc = null">取消</NButton>
-          <NButton type="primary" :disabled="!uploadSel" @click="uploadConfirm">
-            确认上传归档
-          </NButton>
-        </div>
-      </template>
-    </NModal>
-  </NCard>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 326px);
-  overflow-y: auto;
-}
-.scroll2 {
-  height: calc(100vh - 393px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import {
+  CHANGES, DOC_TODO, LEVEL_COLOR, STATUS_COLOR, TEMP_WATCH, URGE_RECORDS,
+  countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
+} from "@/typings/model";
+import { getColorWithOpacity } from "@/utils/common";
+import HighlightText from "@/views/home/modules/HighlightText.vue";
+import Ed from "@/views/home/modules/Ed.vue";
+
+
+const themeStore = useThemeStore();
+
+interface ApplyForm {
+  name: string;
+  dept: string;
+  mainChanges: string[];
+  related: string;
+  purposes: string[];
+  effect: string;
+  type: string;
+  level: string;
+  duration: string;
+  urgent: boolean;
+  date: any;
+  restoreDate: any;
+}
+const form = ref<ApplyForm>({
+  name: "", dept: "", mainChanges: [""], related: "", purposes: [], effect: "",
+  type: "", level: "", duration: "", urgent: false, date: null, restoreDate: null,
+});
+const tab = ref<string>("risk");
+const TABS = [
+  { id: "pre", name: "变更预识别", icon: 'lucide:sparkles' },
+  { id: "form", name: "变更申请表", icon: 'akar-icons:file' },
+  { id: "risk", name: "风险分析记录表", icon: 'proicons:alert-triangle' },
+  { id: "train", name: "变更培训内容", icon: 'lucide:graduation-cap' },
+  { id: "pssr", name: "PSSR 检查内容", icon: 'tabler:clipboard-check' },
+  { id: "accept", name: "验收评价", icon: 'material-symbols:check-circle-outline' },
+  { id: "close", name: "变更关闭确认表", icon: 'quill:folder-open' },
+];
+const confirmed = ref<Record<string, boolean>>({});
+const blockedTabs = ref<string[]>([]);
+
+const aiEnabled = ref<boolean>(true);
+const analyzing = ref<boolean>(false);
+// ---------- 变更预识别 ----------
+const desc = ref<string>(
+  "某缩合反应现在控在80℃要反应8小时，车间反馈产能跟不上。我们小试做了几组，90℃下4小时转化率就能到98%，但有个未知杂质会从0.05%涨到0.12%。这个杂质结构还没定，不过不是基因毒性警示结构。想申请把温度提到90℃，同时把反应时间缩到4小时。",
+);
+const rows = ref<any>(null);
+const AI_ROWS = [
+  {
+    id: 1, item: "工艺流程",
+    before: "流程简述（含物料、设备）：某缩合反应，原料A与原料B在缩合反应釜中混合，加热至80℃进行保温反应8小时，反应完成后转入后处理工序。\n设计意图：通过缩合反应制得目标产物，保证转化率和杂质水平。",
+    after: "流程简述（含物料、设备）：保温温度提升至90℃，反应时间缩短为4小时，其余流程不变。\n设计意图：在保持转化率98%的前提下缩短反应时间、提升产能。",
+    hl: ["保温温度提升至90℃，反应时间缩短为4小时", "在保持转化率98%的前提下缩短反应时间、提升产能"],
+  },
+  {
+    id: 2, item: "设备信息",
+    before: "基本信息（名称、设计参数、材质、用途）：缩合反应釜，设计温度100℃，设计压力0.2MPa，材质SS304，用于缩合反应。\n使用信息（安装位置、连接方式、维护策略）：安装于反应工段，夹套加热，按预防性维护计划定期检查。",
+    after: "无变化",
+  },
+  {
+    id: 3, item: "运行条件",
+    before: "运行参数：反应温度80±2℃，保温时间8小时，压力常压。\n管控措施：DCS温度高报警设定85℃，高高报警90℃并联锁切断加热介质。",
+    after: "运行参数：反应温度改为90±2℃，保温时间改为4小时，压力不变。\n管控措施：DCS温度高报警需上调至95℃，高高报警及联锁值需上调至100℃。",
+    hl: ["90±2℃", "4小时", "DCS温度高报警需上调至95℃，高高报警及联锁值需上调至100℃"],
+  },
+  { id: 4, item: "操作方式", before: "DCS自动化控制，远程操作，单人监控。", after: "无变化" },
+];
+// ---------- AI 变更识别 ----------
+const runIdentify = () => {
+  if (!desc.value.trim()) { window.$message?.warning("请先输入变更内容描述"); return; }
+  analyzing.value = true;
+  rows.value = null;
+  setTimeout(() => {
+    rows.value = AI_ROWS.map((x) => ({ ...x }));
+    analyzing.value = false;
+    window.$message?.success("AI 变更识别完成，共 4 项，请逐项人工确认（可直接修改）");
+  }, 1200);
+};
+
+const editing = ref<any>(null);
+
+// ---------- 风险预分析 ----------
+const preRiskEdit = ref<any>(null);
+const preRiskShown = ref<boolean>(false);
+const preRiskText = ref({
+  severity: "本次变更为缩合反应温度由80℃提升至90℃、保温时间由8h缩短至4h。变更前后反应体系与物料不变，不新增化学品，不存在新增燃爆、毒害、腐蚀等危害严重性变化；温度提升后仍在溶剂沸点与物料分解温度的安全裕度之内。综上，本次变更未显著增加潜在事件的危害严重程度，事故后果（人员伤亡、财产损失、环境污染）的严重等级与变更前基本一致；但杂质水平由0.05%升至0.12%，需关注长期运行对产品质量与设备结垢的累积影响。",
+  probability: "变更引入了新的偏差场景。首先，反应温度更接近溶剂回流温度，温控失效或冷却水中断时，超温溜温概率上升，可能引发冲料；其次，保温时间缩短使反应终点判断窗口变窄，人为误判导致转化率不足或副反应增加的概率上升；再者，未知杂质含量升高（0.05%→0.12%），其热稳定性尚未定性，长期累积可能加速釜壁结垢与搅拌负荷异常；此外，DCS报警/联锁值上调后原有报警裕度改变，误报、漏报概率需重新评估。",
+  protection: "变更主要影响与温度控制相关的保护层。原DCS温度高报警85℃、高高报警及联锁90℃已不适用于新工艺窗口，需同步上调至95℃/100℃并重新整定验证；安全阀起跳压力与泄放能力不受本次温度调整直接影响，仍然有效；操作规程与应急预案须修订后，方可继续作为有效的人为保护层。建议投用前完成联锁测试与报警验证，并将杂质含量纳入日常分析计划。",
+});
+const runRiskAnalysis = () => {
+  analyzing.value = true;
+  setTimeout(() => {
+    analyzing.value = false;
+    preRiskShown.value = true;
+    window.$message?.success("AI 风险预分析报告已生成（危害严重性 / 事件概率 / 保护措施影响），内容支持手动修改");
+  }, 1300);
+};
+const saveDraft = () => window.$message?.success("已保存为草稿，可在左侧「我的草稿」中继续编辑");
+
+// ---------- 生成变更申请单 ----------
+const formGen = ref<string>("idle");
+const materialsText = ref("");
+const updateDocs = ref<string[]>([]);
+const disciplines = ref<string[]>([]);
+const tools = ref<string[]>(["JSA", "检查表法", "通用检查表"]);
+const plugin = ref<"HAZOP" | "JSA" | "检查表法" | "通用检查表" | null>(null);
+const genForm = () => {
+  if (formGen.value === "generating") return;
+  formGen.value = "generating";
+  window.$message?.info("AI 正在生成变更申请单…（「变更申请表」标签已显示生成中标识）");
+  setTimeout(() => {
+    const main: string[] = [];
+    for (const row of rows.value ?? []) {
+      if (row.after && row.after !== "无变化" && row.item === "运行条件") {
+        main.push("缩合反应温度从80±2℃提升至90±2℃");
+        main.push("保温时间从8小时缩短至4小时");
+        main.push("DCS温度高报警从85℃上调至95℃，高高报警及联锁值从90℃上调至100℃");
+      }
+    }
+    form.value = {
+      name: "缩合反应温度及时间优化",
+      dept: "",
+      mainChanges: main.length ? main : ["（请根据识别结果填写主要变更）"],
+      related: "更新操作规程、DCS联锁设定值、工艺安全信息、岗位操作法",
+      purposes: ["提高生产效能", "改善操作条件"],
+      effect: "在保持转化率不低于98%的前提下，反应时间缩短50%，产能提升一倍",
+      type: "工艺", level: "一般", duration: "永久", urgent: false, date: "", restoreDate: "",
+    };
+    materialsText.value = "1. 施工方案（含作业步骤、隔离与置换方案、作业许可）\n2. 保温材料（釜体保温更换，硅酸铝纤维毡，厚度按设计核算）\n3. 紧固件与垫片（法兰螺栓、金属缠绕垫，材质与原设计一致）\n4. 防腐涂料（釜体外表面除锈防腐）\n5. 脚手架搭拆材料及验收记录";
+    updateDocs.value = ["PID图纸", "操作规程", "总图", "设备台账"];
+    disciplines.value = ["技术", "仪表"];
+    signers.value = { 技术: "王仪表（技术部）", 仪表: "王仪表（技术部 · 仪表）" };
+    tools.value = ["JSA", "检查表法", "通用检查表"];
+    plugin.value = null;
+    formGen.value = "done";
+    tab.value = "form";
+    window.$message?.success("变更申请单已生成：AI 自动总结名称、预填内容，均可手动修改");
+  }, 1400);
+};
+// ---------- 审批流程设置 ----------
+const approvers = ref<Record<string, string>>({
+  部门审核: "李主任（一车间主任）",
+  最终批准: "李主任（部门负责人 · 固定）",
+});
+const signers = ref<Record<string, string>>({});
+const sheet = ref<"type" | "level" | "approver" | null>(null);
+let demoSeq = 43;
+function nextChangeId() {
+  return `MOC-2026-R01-${String(demoSeq++).padStart(4, "0")}`;
+}
+const today = () => new Date().toISOString().slice(0, 10);
+interface LedgerRow {
+  id: string;
+  changeId?: string; // 关联 CHANGES，可打开完整详情
+  title: string;
+  type: ChangeType;
+  level: ChangeLevel;
+  duration: "永久" | "临时";
+  urgent?: boolean;
+  applyTime: string;   // 申请时间
+  dept: string;        // 申请部门
+  applicant: string;   // 申请人
+  planUse: string;     // 计划投用时间
+  status: ChangeStatus;
+  statusDetail: string; // 当前环节说明
+  statusTime: string;  // 状态更新时间
+  overdueDays?: number;
+  approveTime?: string; // 审批通过时间
+  useTime?: string;     // 实际投用时间
+  handlers: { name: string; done: boolean }[]; // 接班人（当前待办/已办）
+}
+const LEDGER_ROWS: LedgerRow[] = [
+  { id: "MOC-2026-R01-0035", changeId: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", type: "设备", level: "重要", duration: "永久", applyTime: "2026-07-28 09:12", dept: "一车间", applicant: "张工艺", planUse: "2026-08-10", status: "审批中", statusDetail: "专业会签中（周设备、王仪表待签）", statusTime: "2026-07-30 14:20", handlers: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王仪表", done: false }] },
+  { id: "MOC-2026-R01-0036", changeId: "MOC-2026-R01-0036", title: "聚合反应温度控制上限调整（78℃→82℃）", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-07-25 10:05", dept: "一车间", applicant: "孙丽", planUse: "2026-08-05", status: "审批中", statusDetail: "安全审查（王海燕）", statusTime: "2026-07-29 16:40", handlers: [{ name: "王海燕", done: false }] },
+  { id: "MOC-2026-R02-0038", changeId: "MOC-2026-R02-0038", title: "DCS 罐区液位报警值 LIA-301 调整", type: "工艺", level: "一般", duration: "永久", applyTime: "2026-07-20 08:30", dept: "一车间", applicant: "吴强", planUse: "2026-07-31", status: "待PSSR", statusDetail: "培训 / PSSR 资料已传 · 待确认投用", statusTime: "2026-07-27 11:15", approveTime: "2026-07-26 16:40", handlers: [{ name: "吴强", done: false }] },
+  { id: "MOC-2026-R01-0039", changeId: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", type: "设备", level: "一般", duration: "临时", urgent: true, applyTime: "2026-07-15 19:40", dept: "一车间", applicant: "张工艺", planUse: "2026-07-16（已投用）", status: "待关闭", statusDetail: "待关闭确认（资料更新核查中）", statusTime: "2026-07-27 09:02", approveTime: "2026-07-15 21:05", useTime: "2026-07-16 06:30", overdueDays: 4, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R03-0040", changeId: "MOC-2026-R03-0040", title: "原料环己烷供应商变更（新增 B 供应商）", type: "管理", level: "重要", duration: "永久", applyTime: "2026-07-18 14:22", dept: "供应部", applicant: "刘芳", planUse: "2026-08-01", status: "实施中", statusDetail: "实施准备中 · 培训 / PSSR 资料待上传", statusTime: "2026-07-26 10:30", handlers: [{ name: "刘芳", done: false }] },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-28 09:50", dept: "二车间", applicant: "周涛", planUse: "2026-07-15", status: "待验收", statusDetail: "变更验收（72h 运行验证）", statusTime: "2026-07-24 15:44", overdueDays: 7, handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", type: "管理", level: "一般", duration: "临时", applyTime: "2026-06-20 11:26", dept: "一车间", applicant: "张工艺", planUse: "2026-07-01", status: "审批中", statusDetail: "部门审核（李主任）", statusTime: "2026-06-21 08:40", handlers: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R02-0033", title: "包装线贴标机控制程序升级", type: "设备", level: "一般", duration: "永久", applyTime: "2026-07-08 13:35", dept: "二车间", applicant: "吴强", planUse: "2026-08-02", status: "已批准", statusDetail: "待实施（计划 8 月 2 日投用）", statusTime: "2026-07-22 09:12", handlers: [{ name: "周设备", done: false }] },
+  { id: "MOC-2026-R03-0027", title: "化验室通风橱整体更换", type: "设备", level: "一般", duration: "永久", applyTime: "2026-06-12 15:10", dept: "质量部", applicant: "陈静", planUse: "2026-06-25", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-07-02 10:18", handlers: [{ name: "钱峰", done: true }] },
+  { id: "MOC-2026-R01-0024", title: "氮气管网压力分级调整", type: "工艺", level: "重要", duration: "永久", applyTime: "2026-05-30 09:00", dept: "一车间", applicant: "孙丽", planUse: "2026-06-20", status: "已关闭", statusDetail: "关闭确认完成，已归档", statusTime: "2026-06-28 16:30", handlers: [{ name: "李主任", done: true }, { name: "刘副总", done: true }] },
+];
+const ROLES = [
+  { id: "applicant", name: "申请人", person: "张工艺", org: "一车间 · 工艺组", desc: "发起变更申请、AI 辅助判定、跟踪进度" },
+  { id: "process", name: "专业会签（仪表）", person: "王仪表", org: "技术部 · 仪表科", desc: "专业会签、HAZOP 分析、确认连带变更" },
+  { id: "process2", name: "专业会签（设备）", person: "周设备", org: "设备管理部 · 设备科", desc: "专业会签、设备完整性检查、行动项落实" },
+  { id: "safety", name: "安全工程师", person: "王海燕", org: "安全环保部", desc: "安全审查、PSSR 检查表确认、风险分析组织" },
+  { id: "dept", name: "车间主任", person: "李主任", org: "一车间", desc: "部门审核、现场验收、变更关闭确认" },
+  { id: "vp", name: "分管领导", person: "刘副总", org: "公司领导", desc: "重要变更最终批准、移动端审批" },
+  { id: "admin", name: "系统管理员", person: "刘敏", org: "信息化部", desc: "流程配置、字典维护、权限分配" },
+  { id: "quality", name: "质量工程师", person: "陈质量", org: "质量部", desc: "质量会签、产品合格判定、检验方案确认" },
+  { id: "viewer", name: "非审批人员", person: "吴新", org: "相关部门", desc: "以信息查看为主，不参与变更流程" },
+];
+function nowStr() {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+type DemoListener = () => void;
+const demoListeners = new Set<DemoListener>();
+function emitDemo() { demoListeners.forEach((f) => f()); }
+function submitChange(c: ChangeOrder) {
+  CHANGES.unshift(c);
+  const cur = c.flow.find((n) => n.status === "current");
+  LEDGER_ROWS.unshift({
+    id: c.id,
+    changeId: c.id,
+    title: c.title,
+    type: c.type,
+    level: c.level,
+    duration: c.duration,
+    urgent: c.urgent || undefined,
+    applyTime: nowStr(),
+    dept: c.org.split("·")[0].trim(),
+    applicant: c.applicant,
+    planUse: c.date || "待定",
+    status: c.status,
+    statusDetail: cur ? `${cur.name}（待处理）` : "审批中",
+    statusTime: nowStr(),
+    handlers: (cur?.roles ?? []).map((rid) => ({ name: ROLES.find((r) => r.id === rid)?.person ?? rid, done: false })),
+  });
+  emitDemo();
+}
+// ---------- 提交 ----------
+const submitApply = () => {
+  if (!desc.value.trim()) { window.$message?.warning("请先录入变更描述并完成 AI 识别"); return; }
+  if (!form.value) { window.$message?.warning("请先在「变更预识别」页点击「生成变更申请单」，生成申请表后再提交"); return; }
+  const unconfirmed = ["form", "risk", "train", "pssr", "accept", "close"].filter((t) => !confirmed.value[t]);
+  if (unconfirmed.length) {
+    blockedTabs.value = unconfirmed;
+    window.$message?.warning(`全部标签页确认后方可提交，请先完成以下标签页的「内容确认完毕」（标签栏已用红点标出）：${unconfirmed.map((t) => TAB_NAME[t]).join("、")}`);
+    return;
+  }
+  blockedTabs.value = [];
+  const id = nextChangeId();
+  const level: ChangeLevel = form.value.level === "重要" ? "重要" : "一般";
+  const flow: any[] = level === "重要"
+    ? [
+        { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
+        { name: "专业会签", kind: "会签", roles: ["process", "process2"], status: "todo", locked: true, members: [{ name: "王仪表（仪表）", done: false }, { name: "周设备（设备）", done: false }] },
+        { name: "安全审查", kind: "审批", roles: ["safety"], status: "todo", locked: true },
+        { name: "分管领导最终批准", kind: "最终批准", roles: ["vp"], status: "todo", locked: true },
+      ]
+    : [
+        { name: "部门审核", kind: "审批", roles: ["dept"], status: "current" },
+        { name: "专业审批", kind: "审批", roles: ["process"], status: "todo", locked: true },
+        { name: "部门负责人批准", kind: "最终批准", roles: ["dept"], status: "todo", locked: true },
+      ];
+  const order: ChangeOrder = {
+    id,
+    title: form.value.name || desc.value.slice(0, 24) || "未命名变更",
+    type: (form.value.type || "工艺") as ChangeType,
+    level,
+    duration: form.value.duration === "临时" ? "临时" : "永久",
+    urgent: !!form.value.urgent,
+    status: "审批中",
+    applicant: ROLES[0].person,
+    org: form.value.dept || ROLES[0].org,
+    device: "—",
+    date: today(),
+    purpose: form.value.purposes.join("、") || "提高生产效能",
+    effect: form.value.effect || "—",
+    before: rows.value?.map((x) => `${x.item}：${x.before}`).join("；") || desc.value.slice(0, 60),
+    after: rows.value?.map((x) => `${x.item}：${x.after}`).join("；") || "—",
+    related: form.value.related ? form.value.related.split("、") : updateDocs.value,
+    materials: materialsText.value ? materialsText.value.split("\n").filter(Boolean) : [],
+    riskTools: tools.value,
+    flow,
+  };
+  submitChange(order);
+  window.$message?.success(`已提交 ${id}，进入「部门审核」节点（台账 / 审批中心 / 角标已联动）`);
+  // emit("openChange", order);
+};
+
+const PURPOSE_OPTIONS = [
+  "满足市场需求", "提高生产效能", "改善操作条件", "增加安全性能",
+  "达到环保要求", "法律合规整改", "减少能耗物损", "稳定系统运行",
+  "完善管理制度", "达到质量改进", "设备可靠性升级",
+];
+const DEPT_APPROVER_OPTS = ["李主任（一车间主任）", "赵主任（二车间主任）", "陈主任（三车间主任）"].map((x) => ({ label: x, value: x }));
+const SIGNER_POOL = ["王仪表（技术部）", "王仪表（技术部 · 仪表）", "周设备（设备科 · 电气）", "王海燕（安全环保部）", "王海燕（质量部）"];
+const signerOpts = (cur: string) => [...new Set([cur, ...SIGNER_POOL])].map((x) => ({ label: x, value: x }));
+const levelScores = ref<number[]>([2, 2, 3, 1, 2, 3]);
+const totalScore = computed(() => levelScores.value.reduce((a, b) => a + b, 0));
+const levelResult = computed(() => (totalScore.value >= 20 ? "重要变更" : "一般变更"));
+const RISK_TOOLS_FORM = [
+  { key: "HAZOP", label: "HAZOP" },
+  { key: "JSA", label: "JSA" },
+  { key: "检查表法", label: "设备SCL" },
+  { key: "通用检查表", label: "风险检查表" },
+];
+const recommendTools = () => {
+  const lv = form.value?.level === "重要" ? "重要" : "一般";
+  tools.value = lv === "重要" ? ["HAZOP", "JSA", "检查表法", "通用检查表"] : ["JSA", "检查表法", "通用检查表"];
+  window.$message?.success(`已按「${lv}变更」规则匹配风险分析工具，可继续手动重选`);
+};
+const toggleTool = (t: string) => {
+  tools.value = tools.value.includes(t) ? tools.value.filter((x) => x !== t) : [...tools.value, t];
+};
+
+const files = ref<string[]>(["小试实验报告.pdf", "杂质初步分析.docx"]);
+const previewFile = ref<string | null>(null);
+const DISCIPLINE_SIGNER: Record<string, string> = {
+  技术: "王仪表（技术部）", 仪表: "王仪表（技术部 · 仪表）", 电气: "周设备（设备科 · 电气）", 环保: "王海燕（安全环保部）", 质量: "王海燕（质量部）",
+};
+const toggleDiscipline = (d:any) => {
+  const result = disciplines.value.reduce((acc: Record<string, string>, key: string) => {
+    acc[key] = DISCIPLINE_SIGNER[key];  // 如果键不存在，值为 undefined
+    return acc;
+  }, {});
+  signers.value = {...result};
+};
+
+const TAB_NAME: Record<string, string> = {
+  pre: "变更预识别", form: "变更申请表", risk: "风险分析记录表",
+  train: "变更培训内容", pssr: "PSSR检查内容", accept: "验收评价", close: "变更关闭确认表",
+};
+const confirmTab = (t: string) => {
+  const v = !confirmed.value[t];
+  confirmed.value = { ...confirmed.value, [t]: v };
+  if (v) window.$message?.success(`已确认${TAB_NAME[t]}内容完毕（标签页栏已标记 ✓）`);
+  else window.$message?.info(`已取消${TAB_NAME[t]}的确认标记`);
+};
+const regenerate = () => window.$message?.success(`演示：已根据变更描述重新生成${TAB_NAME[tab.value]}（本页内容已刷新）`);
+const download = () => window.$message?.success(`演示：${TAB_NAME[tab.value]}已下载（Word/PDF）`);
+
+const downloadPdf = () => window.$message?.success(`演示：${previewFile.value} 已下载`);
+const LEVEL_DIMS = [
+  {
+    name: "1. 设备影响", note: "不合适的材质将会导致",
+    options: [
+      { label: "对设备带来一定的损害及腐蚀", score: 1 },
+      { label: "对设备带来中等的损害及腐蚀", score: 2 },
+      { label: "对设备带来明显的损害及腐蚀", score: 3 },
+      { label: "对设备带来重大的损害及腐蚀", score: 4 },
+    ],
+  },
+  {
+    name: "2. 财务影响", note: "工艺设计错误将会导致",
+    options: [
+      { label: "一定损失，a<1万人民币", score: 1 },
+      { label: "中等损失，直接损失1万≤a<10万人民币", score: 2 },
+      { label: "大量损失，直接损失10万≤a<100万人民币", score: 3 },
+      { label: "巨额损失，直接损失100万人民币≤a", score: 4 },
+    ],
+  },
+  {
+    name: "3. 质量影响", note: "",
+    options: [
+      { label: "对质量带来一定的风险（非关键工席、非关键设备设施的变更）", score: 1 },
+      { label: "对质量带来中等风险（B类原料替代、生产辅助设备变更）", score: 2 },
+      { label: "对质量带来明显的风险（主要工艺参数、中间体生产工艺变更）", score: 3 },
+      { label: "对质量有很高风险（主要工艺路线、关键工艺参数变更）", score: 4 },
+    ],
+  },
+  {
+    name: "4. 设计的复杂程度", note: "工艺设计包含了",
+    options: [
+      { label: "少量的简单系统（单个设备或单个部件）", score: 1 },
+      { label: "大量的简单系统（多个单类设备或部件）", score: 2 },
+      { label: "至少一个复杂系统（涉及多设备/工艺相应调整）", score: 3 },
+      { label: "大量的复杂系统（需要装置配套改造调整）", score: 4 },
+    ],
+  },
+  {
+    name: "5. 工艺设计的成熟度", note: "",
+    options: [
+      { label: "被频繁使用，且被证明为专利方设计", score: 1 },
+      { label: "被少量使用，或被证明为专利方设计", score: 2 },
+      { label: "被相关工业设计方法或参考文献认可（非专利方）", score: 3 },
+      { label: "新的，未发表的", score: 4 },
+    ],
+  },
+  {
+    name: "6. 工艺危害", note: "物料性质和工艺条件",
+    options: [
+      { label: "无危害（常压、-10℃≤温度<40℃、无毒、无腐蚀不燃）", score: 1 },
+      { label: "可燃/负压/低正压（0~0.3MPa）、40℃≤温度<80℃", score: 2 },
+      { label: "易燃/中压（0.3~1.0MPa）、80℃≤温度<150℃", score: 3 },
+      { label: "极度危害/高压（>1.0MPa）、温度≥150℃", score: 4 },
+    ],
+  },
+];
+const finishApprover = () => {
+  sheet.value = null; 
+  window.$message?.success('审批流程已更新（底部固定行摘要同步刷新）');
+}
+// 风险识别分析记录表
+const TOOL_CARDS = [
+  { key: "HAZOP" as const, name: "HAZOP 分析", desc: "节点-偏离结构化分析：原因 / 后果 / LS 风险矩阵 / 安全措施" },
+  { key: "JSA" as const, name: "JSA 分析", desc: "作业步骤分解：危害因素识别与 LS 风险分级管控" },
+  { key: "检查表法" as const, name: "设备 SCL", desc: "设备 / 管理检查项目对照标准逐项核查" },
+  { key: "通用检查表" as const, name: "风险检查表", desc: "变更通用检查项：是 / 否 / 不涉及逐项判定，输出风险描述与管控措施" },
+];
+const pluginDone = ref<Record<string, number>>({});
+const riskRecords = ref<any>([]);
+const updRec = (i: number, patch: Partial<any>) => {
+  riskRecords.value = riskRecords.value.map((x, j) => (j === i ? { ...x, ...patch } : x));
+};
+const addRiskRecords = (items: any[], mode: "manual" | "ai") => {
+  riskRecords.value = [...riskRecords.value, ...items];
+  if (mode === "ai") {
+    plugin.value = null;
+    window.$message?.success(`AI 已自动整理形成风险分析记录表（新增 ${items.length} 项），支持手动修改`);
+  } else {
+    window.$message?.success(`已选入 ${items.length} 条风险记录，可继续挑选或返回查看记录表`);
+  }
+};
+const lvlNext = (v: string) => (v === "高" ? "中" : v === "中" ? "低" : "高");
+const pssrGroups = ref<{ g: string; items: any[] }[]>([
+  { g: "一、风险分析行动项落实", items: [
+    { c: "联锁跳车电流设定值校核并留存记录", p: "投用前" },
+    { c: "电缆与开关容量校核升级完成", p: "投用前" },
+    { c: "操作人员培训完成并考核合格", p: "投用前" },
+  ] },
+  { g: "二、现场设备安装检查确认", items: [
+    { c: "电机安装就位，联轴器对中合格", p: "投用前" },
+    { c: "地脚螺栓紧固，减振垫安装到位", p: "投用前" },
+    { c: "电缆接线、防爆格兰头密封良好", p: "投用前" },
+  ] },
+  { g: "三、保护措施确认", items: [
+    { c: "联锁跳车设定值与新电机额定电流匹配", p: "投用前" },
+    { c: "电机外壳接地、防护罩完好", p: "投用前" },
+    { c: "紧急停机按钮功能试验正常", p: "投用前" },
+  ] },
+  { g: "四、资料归档确认", items: [
+    { c: "P&ID（图号 PID-R201-03）已更新并受控", p: "关闭前" },
+    { c: "设备台账、备件清单已更新", p: "关闭前" },
+    { c: "培训签到表、考核记录已归档", p: "关闭前" },
+  ] },
+]);
+const toPssr = (i: number) => {
+  const rec = riskRecords.value[i];
+  if (!rec || rec.pssr) return;
+  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0
+    ? { ...g, items: [...g.items, { c: `${rec.suggest}（来源：风险分析记录表 · ${rec.item}）`, p: "投用前" }] }
+    : g);
+  updRec(i, { pssr: true });
+  window.$message?.success("建议措施已转为 PSSR 行动项（见「PSSR 检查内容」· 一、风险分析行动项落实）");
+};
+const toPssrAll = () => {
+  const rest = riskRecords.value.map((x:any, i:any) => (x.pssr ? -1 : i)).filter((i:any) => i >= 0);
+  if (!rest.length) { window.$message?.info("所有建议措施均已转为 PSSR 行动项"); return; }
+  const items = rest.map((i:any) => ({ c: `${riskRecords.value[i].suggest}（来源：风险分析记录表 · ${riskRecords.value[i].item}）`, p: "投用前" }));
+  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0 ? { ...g, items: [...g.items, ...items] } : g);
+  riskRecords.value = riskRecords.value.map((x:any) => ({ ...x, pssr: true }));
+  window.$message?.success(`已将 ${rest.length} 条建议措施全部转为 PSSR 行动项（见「PSSR 检查内容」）`);
+};
+const aiOrganize = () => {
+  const gen: any[] = [
+    { item: "超温溜温冲料", scene: "反应温度提升至 90℃ 后更接近溶剂回流温度，温控失效或冷却水中断时反应溜温，釜压骤升可能导致冲料与物料喷溅", inherent: "高", existing: "DCS 温度高报 95℃、高高报及联锁 100℃（随变更上调并重新整定）；紧急冷却系统有效", suggest: "1. 投用前完成联锁传动测试并留存记录；2. 投用首周每班复核温度趋势，纳入交接班巡检", residual: "中", source: "AI 整理" },
+    { item: "未知杂质累积影响", scene: "未知杂质含量由 0.05% 升至 0.12%，热稳定性尚未定性，长期累积加速釜壁结垢与搅拌负荷异常", inherent: "中", existing: "小试热稳定性筛查；安全阀泄放能力不受本次调整影响", suggest: "1. 将杂质含量纳入日常分析计划（每周 1 次，连续 8 周）；2. 跟踪结垢趋势，安排周期清洗", residual: "低", source: "AI 整理" },
+    { item: "联锁 / 报警设定失效", scene: "报警 / 联锁值上调后（高报 85→95℃、联锁 90→100℃），原有报警裕度改变，存在误报、漏报风险", inherent: "中", existing: "参数修改执行申请-复核双人确认", suggest: "1. 联锁逻辑图与台账同步更新并归档；2. 联锁测试纳入 PSSR 必查项", residual: "低", source: "AI 整理" },
+  ];
+  riskRecords.value = [...riskRecords.value, ...gen];
+  window.$message?.success("AI 已根据变更内容自动整理形成风险分析记录表（3 项），支持手动修改");
+};
+// ---------- 变更培训 ----------
+const trainText = ref(
+`培训对象：R-201 岗位操作人员（4 人）、维修班（2 人）
+培训方式：现场讲解 + 操作演示
+
+一、变更内容
+M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机（ExdⅡBT4 → ExdⅡCT4），额定电流 102A → 138A；电缆与开关容量同步升级，联锁跳车电流设定值同步校核调整。
+
+二、变化的操作方式
+1. 搅拌器启动：变更前直接启动、观察电流 ≤102A；变更后启动后核对电流 ≤138A，确认变频器参数已更新（注意：首次启动空载试运行 30 分钟）
+2. 高粘度工况操作：变更前粘度 >3000cP 需降速运行；变更后粘度 ≤6000cP 可全速运行（注意：严禁超过 6000cP 上限）
+3. 过载跳闸处置：变更前复位后直接重启；变更后先查明原因并记录，联锁复位需班长确认（注意：跳闸电流设定值已调整）
+
+三、潜在风险与应对措施
+1. 风险：电机 / 电缆过热 → 应对：投用首周每班测温并记录，红外点检复核
+2. 风险：联锁设定错误导致拒动 / 误动 → 应对：投用前完成跳车试验并留存记录
+3. 风险：防爆接合面或格兰头密封失效 → 应对：检查防爆接合面与格兰头，严禁带电开盖`
+);
+// ---------- PSSR 检查内容 ----------
+const pssrDone = ref<Record<string, { by: string; at: string }>>({});
+const pssrNa = ref<Record<string, boolean>>({});
+const pssrActive = computed(() => pssrGroups.value.filter((g:any) => !pssrNa.value[g.g]));
+const pssrTotal = computed(() => pssrActive.value.reduce((a:any, g:any) => a + g.items.length, 0));
+const pssrDoneCount = computed(() => pssrActive.value.reduce((a:any, g:any) => a + g.items.filter((it:any) => pssrDone.value[it.c]).length, 0));
+const pssrAllDone = computed(() => pssrDoneCount.value === pssrTotal.value && (pssrTotal.value > 0 || (pssrGroups.value.length > 0 && pssrGroups.value.every((g) => !!pssrNa.value[g.g]))));
+const pssrFileRef = ref<any>(null);
+const pssrSheet = ref<any>(null);
+  const closeDocs = ref([
+  { name: "PID 图纸（PID-R201-03，受控最新版）", cat: "图纸与规程类", scope: "是", archived: true },
+  { name: "操作规程（含超温应急处置卡）", cat: "图纸与规程类", scope: "是", archived: false },
+  { name: "应急预案修订", cat: "图纸与规程类", scope: "不涉及", archived: false },
+  { name: "总图更新", cat: "图纸与规程类", scope: "否", archived: false },
+  { name: "DCS 联锁台账（新报警 / 联锁值）", cat: "台账与制度类", scope: "是", archived: false },
+  { name: "设备台账与备件清单", cat: "台账与制度类", scope: "是", archived: true },
+  { name: "风险分析报告（HAZOP / 检查表法）", cat: "过程与结果文件类", scope: "是", archived: true },
+  { name: "培训签到与考核记录", cat: "过程与结果文件类", scope: "是", archived: true },
+  { name: "PSSR 检查记录（含现场照片）", cat: "过程与结果文件类", scope: "是", archived: false },
+  { name: "验收报告与化验数据", cat: "过程与结果文件类", scope: "是", archived: false },
+]);
+const onPssrFile = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  const f = input.files?.[0]; input.value = "";
+  if (!f) return;
+  pssrSheet.value = f.name;
+  const at = today();
+  const n = { ...pssrDone.value };
+  pssrGroups.value.forEach((g:any) => { if (!pssrNa.value[g.g]) g.items.forEach((it:any) => { n[it.c] = { by: "纸质确认表上传", at }; }); });
+  pssrDone.value = n;
+  const archGroup = pssrGroups.value[pssrGroups.value.length - 1];
+  if (archGroup && !pssrNa.value[archGroup.g]) {
+    closeDocs.value = closeDocs.value.map((d:any) => (d.name.includes("PID") || d.name.includes("设备台账") || d.name.includes("培训签到") ? { ...d, archived: true } : d));
+  }
+  window.$message?.success(`已上传 PSSR 纸质确认表「${f.name}」：不做内容识别，上传即视为全部检查项完成确认（「不涉及」组除外），原件归档至变更档案`);
+};
+
+// ---------- 验收评价 ----------
+const acceptRows = ref([
+  { id: 1, item: "反应转化率", basis: "转化率不低于 98%", standard: "转化率 ≥ 98%（连续 3 批化验合格）", method: "化验室逐批取样分析，出具检验报告", owner: "车间 · 张工艺", result: "待验收" },
+  { id: 2, item: "单批反应时间 / 产能", basis: "反应时间缩短 50%、产能提升一倍", standard: "保温时间 4h±0.5h，产能提升 ≥ 80%", method: "DCS 批次记录统计，对比变更前 30 天均值", owner: "车间 · 李主任", result: "待验收" },
+  { id: 3, item: "未知杂质含量", basis: "杂质水平受控、产品质量合格", standard: "杂质 ≤ 0.15%，产品质量指标全部合格", method: "每批化验跟踪，连续 5 批数据趋势评估", owner: "质量 · 王海燕", result: "待验收" },
+  { id: 4, item: "温控与联锁有效性", basis: "温度窗口上调后保护层有效", standard: "温度波动 ≤ ±2℃，高报/联锁动作正确率 100%", method: "DCS 趋势核查 + 联锁测试记录复核", owner: "仪表 · 王仪表", result: "待验收" },
+  { id: 5, item: "设备运行状态", basis: "负荷变化后设备长周期稳定", standard: "搅拌电流、釜壁温度无异常趋势，无泄漏", method: "设备巡检 + 振动/温度记录评估", owner: "设备 · 周设备", result: "待验收" },
+]);
+const acceptNote = ref("");
+
+// ---------- 变更关闭确认表 ----------
+const closeFold = ref<Record<string, boolean>>({});
+const uploadDoc = ref<string | null>(null);
+const uploadSel = ref<string | null>(null);
+const UPDATE_DOC_KW: Record<string, string> = { PID图纸: "PID", 操作规程: "操作规程", 总图: "总图", 设备台账: "设备台账", 工艺卡片: "工艺卡片", 联锁台账: "联锁台账", 应急预案: "应急预案" };
+const needUpdate = (name: string) => updateDocs.value.some((d:any) => name.includes(UPDATE_DOC_KW[d] ?? d));
+
+const changeScope = (d: any, v: string) => {
+  closeDocs.value = closeDocs.value.map((x:any) => (x.name === d.name ? { ...x, scope: v } : x)); 
+  if (v !== d.scope) window.$message?.info(`演示：「${d.name}」改判为「${v}」，改判理由与操作人已留痕`);
+}
+const uploadDocInfo = computed(() => {
+  if (!uploadDoc.value) return null;
+  const doc = closeDocs.value.find((x) => x.name === uploadDoc.value);
+  const base = uploadDoc.value.replace(/[（(].*$/, "");
+  return {
+    storePath: `\\\\PLANT-DMS\\变更管理\\2026\\MOC-2026-R01-0041\\${doc?.cat ?? ""}\\`,
+    candidates: [`${base}_RevC_受控版.pdf`, `${base}_2026-08 更新版.docx`],
+    base,
+  };
+});
+const openDir = () => {
+  window.$message?.info('演示：已在文档管理系统中打开该目录')
+}
+const uploadFiles = () => {
+  uploadSel.value = `本地文件：${uploadDocInfo.value?.base}_最新版.pdf`; 
+  window.$message?.info('演示：已接收拖拽 / 选择的本地文件');
+}
+const uploadConfirm = () => {
+  closeDocs.value = closeDocs.value.map((x) => (x.name === uploadDoc.value ? { ...x, archived: true } : x)); 
+  window.$message?.success(`「${uploadDoc.value}」已上传并归档（${uploadSel.value}，受控版本，哈希留痕）`); 
+  uploadDoc.value = null;
+}
+
+
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 发起变更 -->
+  <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+    <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+      <!-- 顶部 -->
+      <div 
+        class="border-b bg-[var(--bg-color)]"
+        :style="{
+          '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
+        }"
+      >
+        <div 
+          class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-2 border-[var(--border-color)]"
+          :style="{'--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)}"
+        >
+          <span class="whitespace-nowrap text-sm font-medium text-slate-600">变更名称 <span class="text-red-500">*</span></span>
+          <NInput v-model:value="form.name" maxlength="28" show-count placeholder="AI 自动总结（28 字以内），可手动修改" class="!w-420px" />
+          <span class="ml-auto whitespace-nowrap text-sm text-slate-500">变更编号</span>
+          <NInput value="MOC-2026-R01-0041" disabled class="!w-44" />
+        </div>
+        <div class="flex items-center gap-1 overflow-x-auto px-3 pt-2">
+          <div v-for="t in TABS" :key="t.id" @click="tab = t.id"
+            class="flex items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm transition cursor-pointer border hover:bg-white/60 rounded-t-lg"
+            :class="tab === t.id ? 'border-b-transparent border-[var(--border-color)] bg-white text-[var(--active-color)]':'border-transparent text-slate-500'"
+            :style="{
+              '--border-color': getColorWithOpacity(themeStore.themeColor, 0.3),
+              '--active-color': themeStore.themeColor
+              }"
+          >
+            <Icon :icon="t.icon" class="size-14px" />
+            {{ t.name }}
+            <span v-if="t.id === 'form' && formGen === 'generating'"
+              class="flex items-center gap-1 rounded-full border border-violet-300 bg-violet-50 px-1.5 py-0.5 text-[10px] text-violet-600">
+              <Icon icon="ri:loader-4-fill" class="size-14px animate-spin" />
+              AI 生成中
+            </span>
+            <Icon v-if="confirmed[t.id]" icon="material-symbols:check-circle-outline" class="size-14px text-emerald-500" />
+            <span v-if="!confirmed[t.id] && blockedTabs.includes(t.id)" class="h-1.5 w-1.5 rounded-full bg-red-500" title="本页尚未确认完毕" />
+          </div>
+        </div>
+      </div>
+      <!-- 中间 -->
+      <div class="p-4">
+        <div class="space-y-4" :class="tab === 'pre'?'scroll':'scroll2'">
+          <!-- ===== 变更预识别 ===== -->
+          <template v-if="tab === 'pre'">
+            <!-- 变更内容描述 -->
+            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex items-center justify-between px-4 py-2 border-b">
+                <div class="flex items-center">
+                  <Icon icon="lucide:sparkles" class="size-16px text-violet-500" />
+                  <span class="font-semibold text-base ml-2">变更内容描述</span>
+                </div>
+                <NButton v-if="aiEnabled" ghost type="primary" @click="runIdentify" :disabled="analyzing">
+                  <Icon v-if="analyzing" icon="ri:loader-4-fill" class="size-16px animate-spin" />
+                  <Icon v-else icon="fluent:wand-24-regular" class="size-16px" /> 
+                  变更识别
+                </NButton>
+                <NTag type="info" v-else>AI 未启用</NTag>
+              </div>
+              <div class="p-4">
+                <NInput type="textarea" v-model:value="desc" rows="4" placeholder="请输入变更内容描述，例如：将反应釜R-101的搅拌速度从120rpm提高至180rpm，同时将反应温度从80℃提高至95℃…" />
+                <div v-if="!aiEnabled" class="mt-2 flex items-center gap-2 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
+                  <Icon icon="proicons:alert-triangle" class="size-14px" />
+                  AI 辅助功能未启用（可在「系统设置 → AI 辅助功能」开启），识别结果与申请表需手动填写。
+                </div>
+              </div>
+            </div>
+            <!-- 变更识别结果 -->
+            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex items-center justify-between px-4 py-2 border-b">
+                <div class="flex items-center">
+                  <Icon icon="lucide:list-checks" class="size-16px text-emerald-500" />
+                  <span class="font-semibold text-base ml-2">{{rows ? `变更识别结果（${rows.length}项）` : '变更识别结果（空表 · 可手动录入，或由 AI 识别生成）'}}</span>
+                </div>
+                <span v-if="rows" class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                  ✨ AI 生成 · 需人工确认
+                </span>
+              </div>
+              <div class="p-4">
+                <div class="overflow-x-auto">
+                  <table class="w-full min-w-[640px] border-collapse text-sm">
+                    <thead>
+                      <tr class="bg-slate-50 text-left text-slate-500">
+                        <th class="w-28 border-b px-3 py-2 font-medium">变更项目</th>
+                        <th class="border-b px-3 py-2 font-medium">变更前</th>
+                        <th class="border-b px-3 py-2 font-medium">变更后</th>
+                        <th class="w-10 border-b px-2 py-2" />
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="row in rows ?? []" :key="row.id" class="align-top">
+                        <td class="border-b px-3 py-3">
+                          <NInput 
+                            v-if="editing === `${row.id}-item`"
+                            class="text-left"
+                            type="textarea"
+                            size="small"
+                            autofocus
+                            v-model:value="row.item" 
+                            :autosize="{ minRows: 1 }"
+                            placeholder="请输入"
+                            @blur="editing = null"
+                          />
+                          <p v-else class="font-medium text-slate-700 hover:text-[#17407F] cursor-pointer"  @click="editing = `${row.id}-item`" title="点击修改项目名称">
+                            {{ row.item }}
+                          </p>
+                        </td>
+                        <td v-for="field in (['before', 'after'])" :key="field" class="border-b px-3 py-3">
+                          <NInput 
+                            v-if="editing === `${row.id}-${field}`"
+                            class="text-left"
+                            type="textarea"
+                            size="small"
+                            autofocus
+                            v-model:value="row[field]" 
+                            :autosize="{ minRows: 1 }"
+                            placeholder="请输入"
+                            @blur="editing = null"
+                          />
+                          <p v-else class="min-h-30px cursor-pointer rounded-lg border bg-slate-50/60 px-2.3 py-0.55 text-left text-sm leading-relaxed text-slate-700 transition hover:border-[#6E93C6] hover:bg-white" @click="editing = `${row.id}-${field}`" title="点击编辑">
+                            <HighlightText v-if="field === 'after'" :text="row[field]" :hl="row.hl" />
+                            <span v-else class="whitespace-pre-line">{{ row[field] }}</span>
+                          </p>
+                        </td>
+                        <td class="border-b px-2 py-3 text-center">
+                          <NButton text @click="rows = rows && rows.filter((x) => x.id !== row.id)" class="text-slate-300 hover:text-red-500" title="删除此行">
+                            <Icon icon="line-md:close-circle" class="size-16px" />
+                          </NButton>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <div class="mt-3">
+                  <NButton ghost
+                    @click="rows = [...(rows ?? []), { id: Date.now(), item: '新项目', before: '', after: '' }]">
+                    <Icon icon="ic:round-plus" class="size-16px" /> 添加行
+                  </NButton>
+                </div>
+              </div>
+            </div>
+            <!-- 风险预分析报告 -->
+            <div v-if="preRiskShown" class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex items-center justify-between px-4 py-2 border-b">
+                <div class="flex items-center">
+                  <Icon icon="lucide:list-checks" class="size-16px text-emerald-500" />
+                  <span class="font-semibold text-base ml-2">风险预分析报告</span>
+                </div>
+                <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                  ✨ AI 生成 · 需人工确认
+                </span>
+              </div>
+              <div class="p-4">
+                <div class="space-y-4">
+                  <div v-for="s in ([{ key: 'severity', name: '危害严重性分析' }, { key: 'probability', name: '事件概率分析' }, { key: 'protection', name: '保护措施影响分析' }] as const)" :key="s.key" class="rounded-lg border">
+                    <div class="flex items-center gap-2 border-b bg-slate-50/60 px-4 py-2">
+                      <span class="text-sm font-semibold text-slate-700">{{ s.name }}</span>
+                      <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="preRiskEdit = preRiskEdit === s.key ? null : s.key">
+                        {{ preRiskEdit === s.key ? "完成" : "编辑" }}
+                      </NButton>
+                    </div>
+                    <NInput v-if="preRiskEdit === s.key" type="textarea" :bordered="false" v-model:value="preRiskText[s.key]" autofocus rows="6" />
+                    <p v-else class="whitespace-pre-wrap px-3 py-1.5 text-sm leading-relaxed text-slate-700">{{ preRiskText[s.key] }}</p>
+                  </div>
+                  <div class="rounded-lg bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-700">
+                    AI 风险预分析仅供参考，用于申请阶段的快速研判；正式风险识别请前往「风险分析记录表」标签页，使用 HAZOP / JSA / 检查表法开展并留存记录。
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+          <!-- ===== 变更申请表 ===== -->
+          <template v-if="tab === 'form' && form">
+            <!-- 申请部门 / 申请人 -->
+            <div class="grid gap-4 grid-cols-2">
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">申请部门 <span class="text-red-500">*</span></div>
+                <NInput v-model:value="form.dept" placeholder="请输入申请部门" />
+              </div>
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">申请人</div>
+                <NInput v-model:value="ROLES[0].person" disabled />
+              </div>
+            </div>
+            <!-- 变更目的 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更目的</div>
+              <div class="rounded-lg border border-[#ACC6E5] bg-[#EAF0F9]/40 p-3">
+                <NCheckboxGroup v-model:value="form.purposes">
+                  <div class="flex flex-wrap gap-y-2 gap-x-4">
+                    <NCheckbox v-for="p in PURPOSE_OPTIONS" :key="p" :value="p" :label="p" />
+                  </div>
+                </NCheckboxGroup>
+              </div>
+            </div>
+            <!-- 预期效果 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">预期效果</div>
+              <NInput type="textarea" v-model:value="form.effect" rows="2" placeholder="" />
+            </div>
+            <!-- 主要变更内容 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">主要变更内容 <span class="text-red-500">*</span></div>
+              <div class="flex-1 space-y-2">
+                <div v-for="(m, i) in form.mainChanges" :key="i" class="flex items-center gap-2">
+                  <span class="w-5 shrink-0 text-sm text-slate-400">{{ i + 1 }}.</span>
+                  <NInput v-model:value="m as string" placeholder="" />
+                  <NButton text type="error" @click="form = { ...form, mainChanges: form.mainChanges.filter((_, j) => j !== i) }">
+                    <Icon icon="line-md:close-circle" class="size-16px" />
+                  </NButton>
+                </div>
+                <NButton text type="primary" class="text-xs" @click="form = { ...form, mainChanges: [...form.mainChanges, ''] }">
+                  <Icon icon="ic:round-plus" class="size-14px" /> 添加变更点
+                </NButton>
+              </div>
+            </div>
+            <!-- 连带变更内容 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">连带变更内容</div>
+              <div class="flex-1 space-y-2">
+                <div v-for="(m, i) in (form.related ? form.related.split('、') : [''])" :key="i" class="flex items-center gap-2">
+                  <span class="w-5 shrink-0 text-sm text-slate-400">{{ i + 1 }}.</span>
+                  <NInput v-model:value="m as string" placeholder="连带变更点（如：更新操作规程）" />
+                  <NButton text type="error" @click="form = { ...form, related: (form.related ? form.related.split('、') : ['']).filter((_, j) => j !== i).join('、') }">
+                    <Icon icon="line-md:close-circle" class="size-16px" />
+                  </NButton>
+                </div>
+                <NButton text type="primary" class="text-xs" @click="form = { ...form, related: form.related ? `${form.related}、` : '、' }">
+                  <Icon icon="ic:round-plus" class="size-14px" /> 添加连带变更点
+                </NButton>
+              </div>
+            </div>
+            <!-- 变更类型 / 变更等级 -->
+            <div class="grid gap-4 grid-cols-2">
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更类型 <span class="text-red-500">*</span></div>
+                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
+                  <NRadioGroup v-model:value="form.type">
+                    <div class="flex gap-x-2">
+                      <NRadio v-for="t in ['工艺', '设备', '管理']" :key="t" :value="t">{{t}}</NRadio>
+                    </div>
+                  </NRadioGroup>
+                  <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="sheet = 'type'">
+                    <Icon icon="lucide:sparkles" class="size-12px" />
+                    AI 判定说明
+                  </NButton>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更等级 <span class="text-red-500">*</span></div>
+                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
+                  <NRadioGroup v-model:value="form.level">
+                    <div class="flex gap-x-2">
+                      <NRadio v-for="t in ['一般', '重要']" :key="t" :value="t">{{t}}</NRadio>
+                    </div>
+                  </NRadioGroup>
+                  <NButton text type="primary" class="ml-auto text-xs hover:underline" @click="sheet = 'level'">
+                    <Icon icon="lucide:list-checks" class="size-12px" /> 等级判定表 ({{ totalScore }}分) →
+                  </NButton>
+                </div>
+              </div>
+            </div>
+            <!-- 变更时限 / 风险分析 -->
+            <div class="grid gap-4 grid-cols-2">
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">变更时限 <span class="text-red-500">*</span></div>
+                <div class="flex flex-1 items-center gap-4 rounded-lg bg-slate-50 px-3 py-2">
+                  <NRadioGroup v-model:value="form.duration">
+                    <div class="flex gap-x-2">
+                      <NRadio v-for="t in ['永久', '临时']" :key="t" :value="t">{{t}}</NRadio>
+                    </div>
+                  </NRadioGroup>
+                  <NCheckbox v-model:checked="form.urgent">紧急</NCheckbox>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">风险分析</div>
+                <div class="flex flex-1 flex-wrap items-center gap-2 rounded-lg bg-slate-50 px-3 py-2">
+                  <NButton size="small" round v-for="t in RISK_TOOLS_FORM" :key="t.key" @click="toggleTool(t.key)" title="点击选用 / 取消；AI 辅助分析在各工具插件内使用"
+                    class="text-sm"
+                    :ghost="tools.includes(t.key) ? false : true"
+                    :type="tools.includes(t.key) ? 'primary' : 'default'"
+                  >
+                    {{ t.label }}
+                  </NButton>
+                  <NButton type="primary" ghost dashed size="small" round @click="recommendTools" class="text-xs">
+                    按等级重新推荐
+                  </NButton>
+                </div>
+              </div>
+            </div>
+            <!-- 计划投用时间 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">计划投用时间</div>
+              <div class="flex flex-1 flex-wrap items-center gap-2">
+                <NDatePicker v-model:value="form.date" type="date" class="!max-w-[220px]" />
+                <template v-if="form.duration === '临时'">
+                  <span class="whitespace-nowrap text-sm text-slate-500">计划恢复时间 <span class="text-red-500">*</span></span>
+                  <NDatePicker v-model:value="form.restoreDate" type="date" class="!max-w-[220px]" />
+                  <span class="text-xs text-amber-600">临时变更到期系统自动提醒恢复原状</span>
+                </template>
+                <span v-else class="whitespace-nowrap text-xs text-slate-300">（勾选「临时」后在此并排填写计划恢复时间）</span>
+              </div>
+            </div>
+            <div v-if="form.urgent" class="text-xs text-red-500">紧急变更为单独标记：走快速通道，事后限期补办风险分析与完整审批</div>
+            <!-- 所需材料 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">所需材料</div>
+              <div class="flex-1 space-y-2">
+                <div class="text-[11px] text-slate-400">施工所需材料（生成变更申请表时系统自动生成，支持手动修改）</div>
+                <NInput type="textarea" v-model:value="materialsText" rows="4" placeholder="点击「生成变更申请单」后由系统按变更内容自动生成，也可直接填写" />
+              </div>
+            </div>
+            <!-- 资料上传 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600 text-right">资料上传</div>
+              <div class="flex flex-1 flex-wrap items-center gap-2 rounded-lg border border-dashed p-3">
+                <NButton size="small" class="text-xs" v-for="f in files" :key="f" @click="previewFile = f" title="点击在线预览">
+                  <Icon icon="akar-icons:file" class="size-14px" />
+                  {{ f }}
+                </NButton>
+                <NButton @click="files = [...files, `资料_${files.length + 1}.pdf`]">
+                  <Icon icon="material-symbols:upload" class="size-16px" /> 资料上传
+                </NButton>
+                <span class="text-xs text-slate-400">（点击附件名弹窗预览，支持 PDF / Word / 图片在线查看）</span>
+              </div>
+            </div>
+            <!-- 需更新的资料 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">需更新的资料</div>
+              <div class="flex flex-1 flex-wrap items-center gap-x-4 gap-y-1.5 rounded-lg bg-slate-50 px-3 py-2">
+                <NCheckboxGroup v-model:value="updateDocs">
+                  <div class="flex flex-wrap gap-y-2 gap-x-4">
+                    <NCheckbox v-for="p in ['PID图纸', '操作规程', '总图', '设备台账', '工艺卡片', '联锁台账', '应急预案']" :key="p" :value="p" :label="p" />
+                  </div>
+                </NCheckboxGroup>
+                <span class="self-center text-xs text-slate-400">（多选，变更关闭前逐项确认上传最新版本）</span>
+              </div>
+            </div>
+            <!-- 涉及专业 -->
+            <div class="flex gap-3">
+              <div class="w-24 shrink-0 pt-2 text-sm font-medium text-slate-600">涉及专业</div>
+              <div class="flex-1">
+                <div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 rounded-lg bg-slate-50 px-3 py-2">
+                  <NCheckboxGroup v-model:value="disciplines" @update:value="toggleDiscipline">
+                    <div class="flex flex-wrap gap-y-2 gap-x-4">
+                      <NCheckbox v-for="p in ['技术', '仪表', '电气', '环保', '质量']" :key="p" :value="p" :label="p" />
+                    </div>
+                  </NCheckboxGroup>
+                  <span class="self-center text-xs text-slate-400">（多选，决定审批流中专业会签/审批的路由范围）</span>
+                </div>
+                <div v-if="Object.keys(signers).length > 0" class="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
+                  <Icon icon="lucide:users" class="size-12px" />已联动专业会签：
+                  <NTag size="small" type="info" v-for="(p, d) in signers" :key="d">{{ d }} · {{ p }}</NTag>
+                  <span class="text-slate-400">（在底部「审批流程设置」中可调整人选）</span>
+                </div>
+              </div>
+            </div>
+
+          </template>
+          <!-- ===== 风险记录表 ===== -->
+          <template v-if="tab === 'risk'">
+            <div class="border p-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+                  <Icon icon="lucide:shield-alert" class="size-16px" />
+                  风险识别工具（按变更等级匹配）
+                </span>
+                <NTag size="small" :type="form?.level === '重要' ? 'error' : 'default'">
+                  {{ form?.level === '重要' ? '重要变更' : '一般变更' }}
+                </NTag>
+                <span class="text-xs text-slate-400">
+                  {{ form?.level === '重要' ? '规则：HAZOP 必做，同时开展 JSA 与检查表法（SCL）' : '规则：JSA + 检查表法（SCL），涉及工艺安全边界的应升级 HAZOP' }}；可在申请表「风险分析」栏手动重选
+                </span>
+              </div>
+              <div class="grid gap-2 grid-cols-4 mt-3">
+                <div v-for="t in TOOL_CARDS" :key="t.key" :title="t.desc"
+                  class="flex items-center gap-2 rounded-lg border px-3 py-2 transition"
+                  :class="pluginDone[t.key] !== undefined ? 'border-[var(--theme-color)] bg-[var(--theme-color)]' : tools.includes(t.key) ? 'border-[var(--theme-color)] bg-white' : 'border-slate-200 bg-white'"
+                  :style="{'--theme-color': themeStore.themeColor}"
+                >
+                  <div class="min-w-0 flex-1">
+                    <div 
+                      class="flex items-center gap-1.5 text-xs font-semibold"
+                      :class="pluginDone[t.key] !== undefined ? 'text-white' : tools.includes(t.key) ? 'text-[var(--theme-color)]' : 'text-slate-500'"
+                      :style="{'--theme-color': themeStore.themeColor}"
+                    >
+                      <Icon icon="fluent:wand-24-regular" class="size-16px" />
+                      {{ t.name }}
+                    </div>
+                    <div class="mt-0.5 text-[10px]" :class="pluginDone[t.key] !== undefined ? 'text-white/75' : 'text-slate-400'">
+                      {{ pluginDone[t.key] !== undefined ? `已使用并分析了 ${pluginDone[t.key]} 条内容` : '未使用此工具分析' }}
+                    </div>
+                  </div>
+                  <NButton size="small" class="text-xs" :type="pluginDone[t.key] !== undefined ? 'default' : tools.includes(t.key) ? 'primary' : 'default'" 
+                    @click="if (!tools.includes(t.key)) toggleTool(t.key); plugin = t.key;">
+                    使用
+                  </NButton>
+                </div>
+              </div>
+            </div>
+
+            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex flex-wrap items-center gap-2 bg-slate-100 px-3 py-2">
+                <span class="flex items-center gap-1.5 text-sm font-medium text-slate-700">
+                  <Icon icon="proicons:alert-triangle" class="size-16px text-amber-500" />
+                  风险分析记录表
+                </span>
+                <span class="text-[11px] text-slate-400">共 {{ riskRecords.length }} 项</span>
+                <span class="ml-auto hidden text-[11px] text-slate-400 lg:block">插件结果「入表」或 AI 自动整理形成；单元格点击修改，风险等级点击切换</span>
+                <NButton ghost size="small" color="#7c3aed" class="text-xs" @click="toPssrAll">
+                  <Icon icon="tabler:clipboard-check" class="size-14px" />
+                  全部转 PSSR 行动项
+                </NButton>
+                <NButton ghost size="small" type="primary" class="text-xs" @click="aiOrganize">
+                  <Icon icon="lucide:sparkles" class="size-12px" />
+                  AI 自动整理
+                </NButton>
+              </div>
+              <div v-if="riskRecords.length === 0" class="px-3 py-6 text-center text-xs text-slate-400">
+                尚无风险记录：调用上方插件完成分析后逐条「入表」，或点击「AI 自动整理」形成记录表
+              </div>
+              <div v-else class="overflow-x-auto p-3">
+                <table class="w-full min-w-[960px] border-collapse text-xs">
+                  <thead>
+                    <tr>
+                      <th v-for="h in ['风险项', '场景描述', '固有风险', '现有措施', '建议措施', '剩余风险', '来源', '操作']" :key="h"
+                        class="border bg-slate-50 px-2 py-1.5 text-[11px] font-medium text-slate-500">{{ h }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(rec, i) in riskRecords" :key="i">
+                      <td class="border px-1.5 py-1 align-top font-medium text-slate-700">
+                        <Ed :v="rec.item" @update="(x: string) => updRec(i, { item: x })" />
+                      </td>
+                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.scene" @update="(x: string) => updRec(i, { scene: x })" /></td>
+                      <td class="border px-1.5 py-1 text-center align-top">
+                        <NTag v-if="rec.inherent==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                          {{ rec.inherent }}
+                        </NTag>
+                        <NTag v-if="rec.inherent==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                          {{ rec.inherent }}
+                        </NTag>
+                        <NTag v-if="rec.inherent==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                          {{ rec.inherent }}
+                        </NTag>
+                      </td>
+                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.existing" @update="(x: string) => updRec(i, { existing: x })" /></td>
+                      <td class="border px-1.5 py-1 align-top"><Ed :v="rec.suggest" @update="(x: string) => updRec(i, { suggest: x })" /></td>
+                      <td class="border px-1.5 py-1 text-center align-top">
+                        <NTag v-if="rec.residual==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                          {{ rec.residual }}
+                        </NTag>
+                        <NTag v-if="rec.residual==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                          {{ rec.residual }}
+                        </NTag>
+                        <NTag v-if="rec.residual==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                          {{ rec.residual }}
+                        </NTag>
+                      </td>
+                      <td class="border px-1.5 py-1 text-center align-top">
+                        <NTag size="small" type="info">{{ rec.source }}</NTag>
+                      </td>
+                      <td class="border px-1.5 py-1 text-center align-top">
+                        <NTag v-if="rec.pssr" size="small" :color="{ color: '#f5f3ff', textColor: '#7c3aed', borderColor: '#f5f3ff' }">已转 PSSR</NTag>
+                        <NButton text size="tiny" color="#7c3aed" v-else class="hover:underline" @click="toPssr(i)">转 PSSR</NButton>
+                        <NButton text type="error" size="tiny" class="mt-2" @click="riskRecords = riskRecords.filter((_, j) => j !== i)">删除</NButton>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+          <!-- 变更培训内容 -->
+          <template v-if="tab === 'train'">
+            <div class="flex flex-wrap items-center gap-3 mb-3">
+              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+                <Icon icon="lucide:graduation-cap" class="size-16px text-violet-500" />
+                变更培训内容
+              </span>
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <span class="ml-auto text-xs text-slate-400">AI 生成内容均可点击修改自定义；审批通过后，相关人员在 PC / 移动端完成学习与签到确认</span>
+            </div>
+            <!-- 培训内容 -->
+            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex flex-wrap items-center gap-2 bg-slate-100 px-3 py-2">
+                <span class="text-sm font-medium text-slate-700">培训内容</span>
+                <span class="text-[11px] text-slate-400">含培训对象、培训方式、变更内容、操作方式、潜在风险与应对措施，一个文本框自动分段换行</span>
+                <span class="ml-auto text-[11px] text-slate-400">内容支持直接修改</span>
+              </div>
+              <NInput v-model:value="trainText" type="textarea" :bordered="false" :autosize="{minRows: 4}" class="font-mono text-sm" placeholder="" />
+            </div>
+          </template>
+          <!-- PSSR 检查内容 -->
+          <template v-if="tab === 'pssr'">
+            <div class="flex flex-wrap items-center gap-3">
+              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+                <Icon icon="tabler:clipboard-check" class="size-16px text-violet-500" />
+                PSSR 投用前安全检查内容
+              </span>
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <NTag size="small" :type="pssrAllDone ? 'success' : 'info'">
+                已完成 {{ pssrDoneCount }}/{{ pssrTotal }} 项
+              </NTag>
+              <span class="flex items-center gap-2">
+                <NButton ghost size="small" class="text-xs" title="上传 PSSR 纸质确认表照片 / 扫描件（JPG / PNG / PDF），系统不做内容识别，上传即视为全部检查项完成确认" @click="pssrFileRef?.click()">
+                  <Icon icon="material-symbols:upload" class="size-14px" />
+                  上传纸质确认表
+                </NButton>
+                <input ref="pssrFileRef" type="file" accept="image/*,.pdf" class="hidden" @change="onPssrFile" />
+                <span class="hidden text-xs text-slate-400 xl:inline">申请阶段：点击条目内容直接编辑，可增删项，完成时点互斥选择；审批通过后逐项点击确认（PC / 移动端均可），全部完成自动推送属地负责人</span>
+              </span>
+            </div>
+            <div v-if="pssrSheet" class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2 text-xs text-emerald-700">
+              <Icon icon="ix:success" class="size-16px" />
+              已上传 PSSR 纸质确认表「{{ pssrSheet }}」：上传即视为全部检查项完成确认（未做内容识别），原件已归档至变更档案
+            </div>
+            <div v-if="pssrAllDone" class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-xs text-emerald-700">
+              <Icon icon="ix:success" class="size-16px" />
+              全部 PSSR 检查项已确认完成，「具备投用条件」信息已自动推送属地负责人（车间 / 装置主任），可进行投用确认
+            </div>
+
+            <div v-for="(g, gi) in pssrGroups" :key="g.g" class="border" :class="pssrNa[g.g] ? 'opacity-70' : ''" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex items-center bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">
+                {{ g.g }}
+                <NTag v-if="pssrNa[g.g]" size="small" class="ml-2">不涉及</NTag>
+                <span v-else class="ml-2 text-xs font-normal text-slate-400">{{ g.items.filter((it) => pssrDone[it.c]).length }}/{{ g.items.length }} 已确认</span>
+                <NButton text type="primary" class="ml-auto text-xs font-normal hover:underline"
+                  :title="pssrNa[g.g] ? '恢复本组检查清单' : '本次变更不涉及本组内容时点击标记，标记后不计入完成统计'"
+                  @click="pssrNa = { ...pssrNa, [g.g]: !pssrNa[g.g] }">
+                  {{ pssrNa[g.g] ? '恢复清单' : '标记不涉及' }}
+                </NButton>
+                <NButton text type="primary" v-if="!pssrNa[g.g]" class="ml-3 text-xs font-normal hover:underline"
+                  @click="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: [...x.items, { c: '新检查项（点击直接编辑内容）', p: '投用前' }] } : x)">
+                  <Icon icon="ic:round-plus" class="size-14px" /> 添加检查项
+                </NButton>
+              </div>
+              <div v-if="pssrNa[g.g]" class="border-t bg-slate-50 px-3 py-3 text-xs text-slate-400">
+                本组内容经评估本次变更不涉及（如：无现场安装作业 / 不改变保护措施 / 无需归档资料），已不计入 PSSR 完成统计；如需恢复检查清单，点击右上角「恢复清单」。
+              </div>
+              <template v-else>
+                <div v-for="(it, i) in g.items" :key="`${gi}-${i}`" class="flex flex-wrap items-center gap-3 border-t px-3 py-2.5 text-sm">
+                  <span class="w-5 text-slate-400">{{ i + 1 }}</span>
+                  <NInput 
+                    v-if="editing === `pssr-c-${gi}-${i}`"
+                    class="flex-1"
+                    v-model:value="it.c"
+                    type="textarea"
+                    autofocus 
+                    rows="2"
+                    @blur="editing = null"
+                  />
+                  <button v-else @click="editing = `pssr-c-${gi}-${i}`" title="点击编辑内容"
+                    class="min-w-0 flex-1 rounded-md px-1 text-left text-slate-800 transition hover:bg-[#EAF0F9] bg-transparent"
+                  >
+                    {{ it.c }}
+                  </button>
+                  <span class="flex items-center gap-1 py-1">
+                    <NRadio :checked="it.p === '投用前'" :value="'投用前'" label="投用前完成"
+                      @change="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.map((y, yi) => yi === i ? { ...y, p: '投用前' } : y) } : x)" />
+                    <NRadio :checked="it.p === '关闭前'" :value="'关闭前'" label="关闭前完成"
+                      @change="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.map((y, yi) => yi === i ? { ...y, p: '关闭前' } : y) } : x)" />
+                  </span>
+                  <NButton text type="error" title="删除该项"
+                    @click="pssrGroups = pssrGroups.map((x, xi) => xi === gi ? { ...x, items: x.items.filter((_, yi) => yi !== i) } : x)"
+                  >
+                    <Icon icon="iconamoon:trash" class="size-16px" />
+                  </NButton>
+                </div>
+              </template>
+            </div>
+            <div class="rounded-lg bg-violet-50/70 px-4 py-2.5 text-xs text-violet-700">
+              完成时点说明：「投用前完成 / 关闭前完成」为互斥选择，点击即可切换。投用前完成的项未确认时属地负责人无法确认投用；关闭前完成的项不阻塞投用，但纳入关闭校验清单，未完成时变更主管部门专责无法确认关闭。
+            </div>
+            <div class="rounded-lg bg-violet-50/70 px-4 py-2.5 text-xs text-violet-700">
+              清单由 AI 依据变更类型与风险分析自动生成，专业人员审核后随审批发布；确认方式不作硬性要求——可在 PC 端直接点击确认，也可在移动端拍照上传作为佐证（系统自动记录确认人与日期）；资料归档组确认后自动同步「变更关闭确认表」显示已归档。
+            </div>
+          </template>
+          <!-- 验收评价 -->
+          <template v-if="tab === 'accept'">
+            <div class="flex flex-wrap items-center gap-3">
+              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+                <Icon icon="ix:success" class="size-18px text-emerald-500" />
+                验收评价（依据预期效果设定可量化验收标准）
+              </span>
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <span class="ml-auto text-xs text-slate-400">申请阶段由 AI 依据「预期效果」生成量化标准与验收方式，可手动修改；投用运行后由车间和各专业按标准验收并给出评估结论</span>
+            </div>
+            <div 
+              class="space-y-1.5 rounded-lg border border-[var(--border-color)] bg-[var(--bg-color)] px-4 py-3 text-xs leading-6 text-slate-700"
+              :style="{
+                '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                '--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)
+              }"
+            >
+              <div><b :style="{color: themeStore.themeColor}">变更目的：</b>{{ form?.purposes?.join('、') || '提高生产效能、改善操作条件' }}</div>
+              <div><b :style="{color: themeStore.themeColor}">预期效果：</b>{{ form?.effect || '在保持转化率不低于98%的前提下，反应时间缩短50%，产能提升一倍' }}</div>
+              <div 
+                class="border-t border-[var(--border-color)] pt-1.5 text-slate-500"
+                :style="{'--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)}"
+              >
+                <b :style="{color: themeStore.themeColor}">对应说明：</b>验收项目由预期效果逐条拆解设定，各项目对应的预期效果来源见表格「验收项目」列下方灰色小字（点击可修改）；验收时须逐项对照预期效果判定达成程度。
+              </div>
+            </div>
+
+            <div class="overflow-x-auto border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <table class="w-full min-w-[900px] border-collapse text-sm">
+                <thead>
+                  <tr class="bg-slate-100 text-left text-slate-600">
+                    <th class="w-8 px-3 py-2 font-medium">#</th>
+                    <th class="w-56 px-3 py-2 font-medium">验收项目（含对应预期效果）</th>
+                    <th class="px-3 py-2 font-medium">量化验收标准</th>
+                    <th class="px-3 py-2 font-medium">验收方式（可执行）</th>
+                    <th class="w-32 px-3 py-2 font-medium">责任单位/人</th>
+                    <th class="px-3 py-2 font-medium">评估结论</th>
+                    <th class="w-12 px-2 py-2 font-medium text-center">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, i) in acceptRows" :key="row.id" class="align-top">
+                    <td class="border-t px-3 py-2.5 text-slate-400">{{ i + 1 }}</td>
+                    <td class="border-t px-3 py-2.5">
+                      <NInput
+                        v-if="editing === `acc-${row.id}-item`"
+                        class="text-xs"
+                        v-model:value="row.item"
+                        type="textarea"
+                        autofocus
+                        rows="2"
+                        @blur="editing = null"
+                      />
+                      <button v-else @click="editing = `acc-${row.id}-item`" title="点击修改"
+                        class="bg-transparent block w-full rounded-md px-2 py-1 text-left text-xs font-medium leading-relaxed text-slate-700 transition hover:bg-[#EAF0F9]"
+                      >
+                        {{ row.item }}
+                      </button>
+                      <NInput 
+                        v-if="editing === `acc-${row.id}-basis`"
+                        class="text-[11px]"
+                        size="small"
+                        v-model:value="row.basis"
+                        autofocus
+                        @blur="editing = null"
+                      />
+                      <button v-else @click="editing = `acc-${row.id}-basis`" title="本项目对应的预期效果来源，点击修改"
+                        class="bg-transparent mt-0.5 block w-full rounded px-2 text-left text-[11px] text-slate-400 transition hover:bg-[#EAF0F9] hover:text-slate-500"
+                      >
+                        对应预期：{{ row.basis || '（点击填写对应预期效果）' }}
+                      </button>
+                    </td>
+                    <td v-for="field in (['standard', 'method', 'owner'])" :key="field" class="border-t px-3 py-2.5">
+                      <NInput
+                        v-if="editing === `acc-${row.id}-${field}`"
+                        class="text-xs"
+                        v-model:value="row[field]"
+                        type="textarea"
+                        autofocus
+                        rows="2"
+                        @blur="editing = null"
+                      />
+                      <button v-else @click="editing = `acc-${row.id}-${field}`" title="点击修改"
+                        class="bg-transparent block w-full rounded-md px-2 py-1 text-left text-xs leading-relaxed text-slate-700 transition hover:bg-[#EAF0F9]"
+                      >
+                        {{ row[field] }}
+                      </button>
+                    </td>
+                    <td class="border-t px-3 py-2.5">
+                      <div class="flex flex-nowrap items-center gap-1">
+                        <NButton v-for="v in (['完全达到', '基本达到', '未达成'])" :key="v"
+                          size="small"
+                          round
+                          @click="acceptRows = acceptRows.map((x) => (x.id === row.id ? { ...x, result: x.result === v ? '待验收' : v } : x))"
+                          class="text-[11px]"
+                          :type="row.result === v
+                            ? v === '未达成' ? 'error' : v === '基本达到' ? 'warning' : 'success'
+                            : 'default'">
+                          {{ v }}
+                        </NButton>
+                      </div>
+                    </td>
+                    <td class="border-t px-2 py-2.5 text-center">
+                      <NButton text type="error" title="删除本验收项" @click="acceptRows = acceptRows.filter((x) => x.id !== row.id)">
+                        <Icon icon="iconamoon:trash" class="size-16px" />
+                      </NButton>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="flex items-center gap-3">
+              <NButton ghost class="text-xs"
+                @click="acceptRows = [...acceptRows, { id: Date.now(), item: '新验收项目', basis: '', standard: '', method: '', owner: '', result: '待验收' }]">
+                <Icon icon="ic:round-plus" class="size-16px" />添加验收项
+              </NButton>
+              <span class="text-xs text-slate-400">评估结论在验收阶段由责任单位填写：点击选择「完全达到 / 基本达到 / 未达成」，再次点击取消；行尾可删除验收项</span>
+            </div>
+            <div class="rounded-lg border">
+              <div class="border-b bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">综合验收结论（验收阶段由车间会同各专业评估填写）</div>
+              <div class="space-y-3 p-3">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span v-for="v in (['完全达到', '基本达到', '未达成'])" :key="v">
+                    <NRadio :checked="acceptNote !== '' && acceptNote.startsWith(v)" :value="'v'" :label="v" @change="acceptNote = v + '：'"></NRadio>
+                  </span>
+                  <span class="text-xs text-slate-400">「基本达到 / 未达成」须说明偏差原因与处置措施，并纳入变更关闭审核</span>
+                </div>
+                <NInput v-model:value="acceptNote" type="textarea" rows="2" placeholder="验收意见：总体评价、偏差说明、后续跟踪措施…（验收阶段填写）" />
+              </div>
+            </div>
+            <div class="rounded-lg bg-emerald-50/80 px-4 py-2.5 text-xs leading-5 text-emerald-700">
+              流程说明：投用运行满验收周期后，系统向车间（属地）与涉及专业推送验收任务；各责任单位按上表逐项给出评估结论并上传佐证（数据报表 / 化验报告 / 现场照片），全部完成后汇总至综合验收结论，结论与佐证资料一并纳入变更关闭校验，验收不通过时退回整改或评估恢复原状。
+            </div>
+          </template>
+          <!-- 变更关闭确认表 -->
+          <template v-if="tab === 'close'">
+            <div class="flex flex-wrap items-center gap-3">
+              <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+                <Icon icon="quill:folder-open" class="size-16px" />
+                变更关闭确认表（资料归档清单）
+              </span>
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <NTag size="small" class="text-xs">AI 辅助判定一次 · 支持人工改判留痕</NTag>
+              <span class="ml-auto text-xs text-slate-400">判定为「是」的资料全部归档后，变更主管部门专责方可确认关闭</span>
+            </div>
+            <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+              <div class="flex items-center gap-3 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-500">
+                <span class="w-5" />
+                <span class="flex-1">资料名称（与申请表「需更新的资料」勾选联动，勾选资料标记「需更新版本」）</span>
+                <span class="w-48 text-center">是否涉及（AI 判定，可改判）</span>
+                <span class="w-32 text-center">归档状态</span>
+              </div>
+              <template v-for="cat in (['图纸与规程类', '台账与制度类', '过程与结果文件类'])" :key="cat">
+                <div v-if="closeDocs.filter((d) => d.cat === cat).length">
+                  <button @click="closeFold = { ...closeFold, [cat]: !closeFold[cat] }"
+                    class="flex w-full items-center gap-2 border-t bg-slate-50 px-3 py-2 text-left text-xs font-semibold text-slate-600 transition hover:bg-[#EAF0F9]">
+                    <Icon icon="formkit:right" class="size-14px text-slate-400 transition" :class="closeFold[cat] ? '' : 'rotate-90'" />
+                    {{ cat }}
+                    <span class="font-normal text-slate-400">
+                      {{ closeDocs.filter((d) => d.cat === cat).length }} 项 · 已归档
+                      {{ closeDocs.filter((d) => d.cat === cat && d.scope === '是' && d.archived).length }}/{{ closeDocs.filter((d) => d.cat === cat && d.scope === '是').length }}
+                    </span>
+                    <span class="ml-auto text-[11px] font-normal text-slate-400">{{ closeFold[cat] ? '点击展开' : '点击折叠' }}</span>
+                  </button>
+                  <template v-if="!closeFold[cat]">
+                    <div v-for="d in closeDocs.filter((x) => x.cat === cat)" :key="d.name" class="flex flex-wrap items-center gap-3 border-t px-3 py-2.5 text-sm">
+                      <span class="w-5 text-slate-400">{{ closeDocs.indexOf(d) + 1 }}</span>
+                      <span class="min-w-0 flex-1 text-slate-800">
+                        {{ d.name }}
+                        <NTag v-if="needUpdate(d.name)" size="small" type="info" class="ml-2">需更新版本</NTag>
+                      </span>
+                      <span class="flex w-48 shrink-0 justify-center gap-1.5">
+                        <NButton size="tiny" round v-for="v in (['是', '否', '不涉及'])" :key="v"
+                          @click="changeScope(d, v)"
+                          class="text-[11px]"
+                          :type="d.scope === v ? 'primary' : 'default'">
+                          {{ v }}
+                        </NButton>
+                      </span>
+                      <span class="flex w-32 shrink-0 items-center justify-center gap-2">
+                        <template v-if="d.scope === '是'">
+                          <NTag v-if="d.archived" size="small" type="success">已归档</NTag>
+                          <template v-else>
+                            <NTag size="small" type="warning">待上传</NTag>
+                            <NButton text type="primary" class="text-xs hover:underline" @click="uploadDoc = d.name; uploadSel = null;">上传</NButton>
+                          </template>
+                        </template>
+                        <NTag v-else size="small">{{ d.scope }}</NTag>
+                      </span>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+            <div class="flex flex-wrap items-center gap-4 text-xs text-slate-500">
+              <span>
+                统计：涉及 <b class="text-[#17407F]">{{ closeDocs.filter((d) => d.scope === '是').length }}</b> 项 ·
+                已归档 <b class="text-emerald-600">{{ closeDocs.filter((d) => d.scope === '是' && d.archived).length }}</b> 项 ·
+                待上传 <b class="text-amber-600">{{ closeDocs.filter((d) => d.scope === '是' && !d.archived).length }}</b> 项 ·
+                需更新版本 <b class="text-[#1D4E9C]">{{ closeDocs.filter((d) => needUpdate(d.name)).length }}</b> 项（联动申请表勾选）
+              </span>
+              <span class="text-slate-400">资料上传支持 PC / 移动端（拍照上传），版本受控</span>
+            </div>
+            <div class="rounded-lg bg-[#EAF0F9] px-4 py-2.5 text-xs leading-5 text-[#17407F]">
+              关闭校验说明：判定为「是」的资料项全部归档后，系统将全部流程完毕信号推送变更主管部门专责，专责确认后点击关闭，系统记录变更关闭时间；「否 / 不涉及」由 AI 辅助判定一次，人工改判须填写理由并留痕。临时变更恢复完成后，恢复操作票与参数核对记录自动追加至本清单。
+            </div>
+          </template>
+
+        </div>
+      </div>
+      <!-- 底部 -->
+      <!-- 全局按钮：下载 / 重新生成 / 确认完毕 -->
+      <div v-if="tab !== 'pre'" class="flex flex-wrap items-center justify-between gap-2 border-t p-4">
+        <div class="flex flex-wrap gap-2">
+          <NButton ghost type="success" @click="download">
+            <Icon icon="material-symbols:download" class="size-16px" /> 下载{{ TAB_NAME[tab] }}
+          </NButton>
+          <NButton ghost type="warning" @click="regenerate">
+            <Icon icon="tdesign:refresh" class="size-14px" /> 重新生成{{ TAB_NAME[tab] }}
+          </NButton>
+          <NButton ghost :type="confirmed[tab] ? 'success' : 'primary'" @click="confirmTab(tab)">
+            <Icon icon="ix:success" class="size-16px" /> {{ confirmed[tab] ? '已确认完毕' : '本标签内容确认完毕' }}
+          </NButton>
+        </div>
+        <span class="text-xs text-slate-400">审批人 / 保存 / 提交均在底部固定行，滚动时保持可见</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 bg-[#EAF0F9] px-4 py-2.5 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
+        <template v-if="tab === 'pre'">
+          <span class="text-xs text-slate-400">预识别阶段不设审批人与提交：完成识别与预分析后，请切换至「变更申请表」选择审批人并提交</span>
+          <div class="ml-auto flex shrink-0 gap-2">
+            <NButton ghost type="success" size="small" @click="genForm">
+              <Icon icon="akar-icons:file" class="size-14px" /> 生成变更申请单
+            </NButton>
+            <NButton ghost type="warning" size="small" @click="runRiskAnalysis" :disabled="analyzing">
+              <Icon v-if="analyzing" icon="ri:loader-4-fill" class="size-14px animate-spin" />
+              <Icon v-else icon="mdi:shield-alert-outline" class="size-14px" />风险预分析
+            </NButton>
+            <NButton type="primary" size="small" @click="saveDraft">保存</NButton>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-500">
+            <Icon icon="lucide:users" class="size-14px" />
+            <span class="min-w-0 truncate">
+              部门审核：{{ approvers.部门审核 }} → 专业会签：{{ Object.keys(signers).length ? Object.values(signers).join('、') : '未涉及专业 · 免会签' }} → 最终批准：{{ approvers.最终批准 }}
+            </span>
+            <NButton ghost size="small" type="primary" @click="sheet = 'approver'">
+              <Icon icon="octicon:sliders-24" class="size-14px" />
+              审批流程设置
+            </NButton>
+          </div>
+          <div class="ml-auto flex shrink-0 items-center gap-2">
+            <NButton size="small" type="primary" @click="saveDraft">保存</NButton>
+            <span v-if="!form" class="flex items-center text-xs text-amber-600">请先在「变更预识别」页生成变更申请单</span>
+            <NButton size="small" type="primary" @click="submitApply" :disabled="!form" :title="form ? '提交进入审批流' : '请先生成变更申请单'">
+              提交 <Icon icon="formkit:right" class="size-14px" />
+            </NButton>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 附件在线预览弹窗 -->
+    <NModal
+      :show="previewFile !== null"
+      preset="card"
+      :auto-focus="false"
+      :style="{ width: '700px', height: 'auto' }"
+      :segmented="{ content: true, footer: true }"
+      @update:show="(v: boolean) => !v && (previewFile = null)"
+    >
+      <template #header>
+        <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
+          <Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile }}
+        </div>
+      </template>
+      <template #default>
+        <div class="space-y-3">
+          <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
+            <span>上传人：{{ ROLES[0].person }}</span><span>上传时间：{{ today() }}</span><span>版本：V1（受控）</span>
+          </div>
+          <div class="flex h-72 flex-col items-center justify-center gap-2 rounded-lg border bg-slate-50 text-slate-400">
+            <Icon icon="akar-icons:file" class="size-42px" />
+            <span class="text-sm">文件在线预览区（演示）</span>
+            <span class="text-xs">正式环境由文档预览服务渲染 PDF / Word / 图片内容，支持缩放、翻页与移动端查看</span>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-[10px]">
+          <NButton ghost size="small" @click="downloadPdf">
+            <Icon icon="material-symbols:download" class="size-16px" /> 下载
+          </NButton>
+          <NButton size="small" type="primary" @click="previewFile = null">关闭</NButton>
+        </div>
+      </template>
+    </NModal>
+    <!-- 侧边抽屉：AI 类型判定 / 等级判定表 / 审批流程设置 -->
+    <NDrawer :show="sheet !== null" @update:show="(v: boolean) => !v && (sheet = null)" placement="right" :width="sheet === 'level' ? '45rem' : '28rem'">
+      <NDrawerContent>
+        <template #header>
+          <div v-if="sheet === 'type'" class="text-base font-semibold text-slate-800">AI 变更类型判定说明</div>
+          <div v-if="sheet === 'level'" class="text-base font-semibold text-slate-800">变更等级判定表</div>
+          <div v-if="sheet === 'approver'" class="text-base font-semibold text-slate-800">审批流程设置</div>
+        </template>
+        <div class="h-full space-y-4 overflow-y-auto">
+          <!-- AI 变更类型判定说明 -->
+          <template v-if="sheet === 'type'">
+            <div class="flex items-center gap-2">
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <NTag type="info" size="small">判定：工艺</NTag>
+              <NTag size="small">置信度：高</NTag>
+            </div>
+            <div class="space-y-3 text-sm leading-relaxed text-slate-700">
+              <p><b>判定结论：</b>本次变更涉及反应温度（80℃→90℃）、保温时间（8h→4h）等工艺参数调整及 DCS 报警/联锁值修改，未涉及设备本体更换或材质变更，依据变更类型规则判定为「工艺」类变更。</p>
+              <p><b>判定依据：</b></p>
+              <ul class="list-disc space-y-1 pl-5">
+                <li>命中规则 2.1：操作参数超出原设计控制范围 → 工艺类</li>
+                <li>命中规则 2.4：DCS 报警值/联锁值调整 → 工艺类（仪表联动）</li>
+                <li>排除规则 3.2：无设备规格型号变化 → 不构成设备类</li>
+              </ul>
+              <p><b>知识库引用：</b>工艺卡片 R-101（Rev B）、DCS 联锁台账、《变更管理制度》第 4.2 条。</p>
+              <p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考，最终类型以人工确认为准；如调整为其他类型，系统将记录修改留痕。</p>
+            </div>
+          </template>
+  
+          <!-- 变更等级判定表 -->
+          <template v-if="sheet === 'level'">
+            <div class="flex items-center gap-2">
+              <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                ✨ AI 生成 · 需人工确认
+              </span>
+              <NTag size="small" :type="totalScore >= 20 ? 'error' : 'warning'">
+                {{ levelResult }}
+              </NTag>
+              <span class="text-xs text-slate-400">合计得分 <b class="text-[#17407F]">{{ totalScore }}</b> 分（&lt;20 分为一般，≥20 分为重要）</span>
+            </div>
+            <div class="grid gap-3 grid-cols-2">
+              <div v-for="(dim, di) in LEVEL_DIMS" :key="dim.name" class="rounded-lg border p-3">
+                <div class="mb-2 flex items-baseline justify-between gap-2">
+                  <span class="text-sm font-semibold text-slate-700">
+                    {{ dim.name }}
+                    <span v-if="dim.note" class="ml-1 text-xs font-normal text-slate-400">（{{ dim.note }}）</span>
+                  </span>
+                  <span class="text-sm text-slate-500">得分 <b class="text-[#17407F]">{{ levelScores[di] }}</b></span>
+                </div>
+                <div class="space-y-1.5">
+                  <button v-for="op in dim.options" :key="op.score" @click="levelScores = levelScores.map((s, i) => (i === di ? op.score : s))"
+                    class="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
+                    :class="levelScores[di] === op.score ? 'bg-[#EAF0F9] text-[var(--theme-color)]' : 'text-slate-600 hover:bg-slate-50 bg-white'"
+                    :style="{'--theme-color': themeStore.themeColor}"
+                  >
+                    <span 
+                      class="mt-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border" 
+                      :class="levelScores[di] === op.score ? 'border-[var(--theme-color)]' : 'border-slate-300'"
+                      :style="{'--theme-color': themeStore.themeColor}"
+                    >
+                      <span 
+                        v-if="levelScores[di] === op.score" 
+                        class="h-1.5 w-1.5 rounded-full bg-[var(--theme-color)]"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                      />
+                    </span>
+                    <span class="flex-1 leading-snug">{{ op.label }}（{{ op.score }}分）</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="rounded-lg border border-violet-200 bg-violet-50/50 p-4">
+              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-violet-700">
+                <Icon icon="lucide:sparkles" class="size-14px" />
+                AI 评分分析过程
+              </div>
+              <div class="space-y-3 text-xs leading-relaxed text-slate-600">
+                <p>我们分析变更内容：缩合反应温度从80℃提高到90℃，反应时间从8小时缩短到4小时。设备材质SS304，设计温度100℃，设计压力0.2MPa，压力不变（常压）。物料为原料A与原料B，未具体说明毒性、腐蚀性。逐维度评分如下。</p>
+                <p><b class="text-[#17407F]">1. 设备影响：</b>温度从80℃升至90℃，仍在设计温度100℃范围内，但接近上限。SS304 在 80→90℃ 下腐蚀速率可能略有增加，但变化不大；保守起见给 2 分（中等损害）。</p>
+                <p><b class="text-[#17407F]">2. 财务影响：</b>变更目的是提升产能，但若设计错误可能导致反应失败、批次报废。温度提高10℃、时间缩短一半，控制不好可能影响产品质量，损失可能中等（1万~10万），取 2 分。</p>
+                <p><b class="text-[#17407F]">3. 质量影响：</b>涉及主要工艺参数变更且有未知杂质（0.05%→0.12%）结构未定，对质量带来明显风险，取 3 分。</p>
+                <p class="text-slate-400">（各维度得分均可人工改判，修改留痕；改判后等级自动回填至申请表）</p>
+              </div>
+            </div>
+          </template>
+  
+          <!-- 审批流程设置 -->
+          <template v-if="sheet === 'approver'">
+            <p class="text-xs leading-relaxed text-slate-400">审批链：部门审核 → 专业会签 → 最终批准。专业会签人由申请表「涉及专业」勾选自动增减，可在此调整人选；重要变更自动追加安全审查与分管领导终批。</p>
+            <div class="rounded-lg border p-3">
+              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <NTag type="info" size="small">1</NTag> 部门审核
+              </div>
+              <NSelect :value="approvers.部门审核" :options="DEPT_APPROVER_OPTS"
+                @update:value="(v: string) => approvers = { ...approvers, 部门审核: v }" />
+            </div>
+            <div class="rounded-lg border p-3">
+              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <NTag type="info" size="small">2</NTag> 专业会签
+                <span class="text-[11px] font-normal text-slate-400">（由「涉及专业」勾选联动）</span>
+              </div>
+              <p v-if="Object.keys(signers).length === 0" class="text-xs text-slate-400">未勾选涉及专业，本环节免会签；如需会签，请回申请表勾选「涉及专业」。</p>
+              <div v-else class="space-y-2">
+                <div v-for="(p, d) in signers" :key="d" class="flex items-center gap-2">
+                  <NTag size="small">{{ d }}</NTag>
+                  <NSelect class="flex-1" :value="p" :options="signerOpts(p)"
+                    @update:value="(v: string) => signers = { ...signers, [d]: v }" />
+                </div>
+              </div>
+            </div>
+            <div class="rounded-lg border p-3">
+              <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
+                <NTag type="info" size="small">3</NTag> 最终批准
+                <NTag size="small" class="text-11px">制度固定</NTag>
+              </div>
+              <NInput :value="approvers.最终批准" disabled />
+              <p class="mt-1.5 text-[11px] text-slate-400">重要变更：自动追加「安全审查（安全环保部）」与「分管领导终批」节点，无需手动设置。</p>
+            </div>
+            <NButton type="primary" class="w-full" @click="finishApprover">完成设置</NButton>
+          </template>
+        </div>
+      </NDrawerContent>
+    </NDrawer>
+    <!-- 资料上传弹窗 -->
+    <NModal 
+      :show="uploadDoc !== null"
+      preset="card"
+      :auto-focus="false"
+      :style="{ width: '550px', height: 'auto' }"
+      :segmented="{ content: true, footer: true }"
+      @update:show="(v: boolean) => !v && (uploadDoc = null)"
+    >
+      <template #header>
+        <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
+          <Icon icon="material-symbols:upload" class="size-20px" /> 资料上传归档 — {{ uploadDoc }}
+        </div>
+      </template>
+      <div class="space-y-3">
+        <div>
+          <div class="mb-1 text-xs font-medium text-slate-500">系统文档存储地址（受控目录）</div>
+          <div class="flex items-center gap-2 rounded-lg border bg-slate-50 px-3 py-2">
+            <Icon icon="quill:folder-open" class="size-16px" />
+            <code class="min-w-0 flex-1 truncate text-xs text-slate-600">{{ uploadDocInfo?.storePath }}</code>
+            <NButton text type="primary" class="text-xs hover:underline" @click="openDir">打开目录</NButton>
+          </div>
+        </div>
+        <div>
+          <div class="mb-1 text-xs font-medium text-slate-500">方式一：从存储地址选择资料</div>
+          <div class="space-y-1.5">
+            <p v-for="f in uploadDocInfo?.candidates" :key="f" @click="uploadSel = f"
+              class="flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-xs transition cursor-pointer"
+              :class="uploadSel === f ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-[var(--theme-color)] text-white' : 'bg-white text-slate-600 hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]'"
+              :style="{'--theme-color': themeStore.themeColor}"
+            >
+              <Icon icon="akar-icons:file" class="size-14px mr-1" /> {{ f }}
+                <Icon v-if="uploadSel === f" icon="ix:success" class="ml-auto size-16px" />
+            </p>
+          </div>
+        </div>
+        <div>
+          <div class="mb-1 text-xs font-medium text-slate-500">方式二：拖拽本地文件到区域</div>
+          <button @click="uploadFiles"
+            class="flex h-20 w-full flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed px-3 text-xs transition"
+            :class="uploadSel?.startsWith('本地文件') ? 'border-[var(--theme-color)] bg-[#EAF0F9] text-[var(--theme-color)]' : 'border-slate-300 text-slate-400 hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]'"
+            :style="{'--theme-color': themeStore.themeColor}"
+          >
+            <Icon icon="material-symbols:upload" class="size-24px" />
+            {{ uploadSel?.startsWith('本地文件') ? uploadSel : '将资料文件拖拽到此处，或点击选择本地文件' }}
+          </button>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <NButton @click="uploadDoc = null">取消</NButton>
+          <NButton type="primary" :disabled="!uploadSel" @click="uploadConfirm">
+            确认上传归档
+          </NButton>
+        </div>
+      </template>
+    </NModal>
+  </NCard>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 326px);
+  overflow-y: auto;
+}
+.scroll2 {
+  height: calc(100vh - 393px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/myDraft/index.vue b/src/views/my/myDraft/index.vue
index 36b5153..b3baa81 100644
--- a/src/views/my/myDraft/index.vue
+++ b/src/views/my/myDraft/index.vue
@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string];}>();
-
-interface Draft {
-  id: string;
-  name: string;
-  time: string;
-  step: string;
-  progress: string;
-}
-const drafts = ref<Draft[]>([
-    { id: "D-2026-011", name: "R-101 搅拌提速至 180rpm（80℃→95℃）", time: "2026-08-02 09:41", step: "已生成申请表 · 待提交", progress: "4/6 页" },
-    { id: "D-2026-009", name: "P-301 机封冲洗方案调整（驳回重报）", time: "2026-07-30 16:22", step: "变更预识别完成", progress: "2/6 页" },
-    { id: "D-2026-007", name: "化验室新增 COD 在线分析仪", time: "2026-07-28 11:05", step: "仅填写变更描述", progress: "1/6 页" },
-]);
-
-const continueEdit = (d: Draft) => {
-    window.$message?.success(`已载入草稿 ${d.id}，从「${d.step}」断点继续编辑`);
-    emit("go", "apply");
-};
-const remove = (d: Draft) => {
-    drafts.value = drafts.value.filter((x: Draft) => x.id !== d.id);
-    window.$message?.success(`草稿 ${d.id} 已删除`);
-};
-const progressPct = (p: string) => {
-    const m = p.match(/(\d+)\s*\/\s*(\d+)/);
-    return m ? Math.round((Number(m[1]) / Number(m[2])) * 100) : 0;
-};
-
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 我的草稿箱 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <div class="border mb-3 py-3 px-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-          <NGi span="24 s:24 m:16">
-              <div class="h-100% flex items-center gap-2">
-                  <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                  <p class="text-sm font-600">我的草稿箱</p>
-                  <span class="rounded bg-slate-100 px-1.5 text-xs font-semibold text-slate-700">{{ drafts.length }}</span>
-                  <p class="text-xs text-#94a3b8">草稿仅本人可见，提交后自动从草稿箱移除</p>
-              </div>
-          </NGi>
-          <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
-            <NButton type="primary" size="small" @click="emit('go', 'apply')">
-              <Icon icon="ic:round-plus" class="size-16px" />
-              新建空白变更
-            </NButton>
-          </NGi>
-        </NGrid>
-      </div>
-      <div class="space-y-2 scroll">
-        <div v-for="d in drafts" :key="d.id" class="rounded-lg border px-4 py-3">
-            <div class="flex flex-wrap items-start gap-3">
-            <div class="min-w-0 flex-1">
-                <div class="text-sm font-semibold text-slate-800 dark:text-white">{{ d.name }}</div>
-                <div class="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-slate-400">
-                <span class="font-mono">{{ d.id }}</span>
-                <span>保存于 {{ d.time }}</span>
-                <NTag type="primary" size="small" class="text-11px">{{ d.step }}</NTag>
-                </div>
-                <div class="mt-2 flex items-center gap-2">
-                <div class="h-1.5 w-40 overflow-hidden rounded-full bg-slate-100">
-                    <div class="h-full rounded-full bg-[#6E93C6]" :style="{ width: progressPct(d.progress) + '%' }" />
-                </div>
-                <span class="text-[11px] text-slate-400">编辑进度 {{ d.progress }}</span>
-                </div>
-            </div>
-            <div class="flex shrink-0 items-center gap-2 pt-2px">
-                <NButton class="text-xs" text type="error" @click="remove(d)">删除</NButton>
-                <NButton class="text-xs" text type="primary" @click="continueEdit(d)">继续编辑</NButton>
-            </div>
-            </div>
-        </div>
-        <div v-if="drafts.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center">
-            <div class="text-sm text-slate-400">暂无草稿</div>
-            <div class="mt-1 text-xs text-slate-300">在变更申请页点击右上角「保存」，即可将当前内容存为草稿</div>
-        </div>
-        </div>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 212px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const emit = defineEmits<{ go: [v: string, preset?: string];}>();
+
+interface Draft {
+  id: string;
+  name: string;
+  time: string;
+  step: string;
+  progress: string;
+}
+const drafts = ref<Draft[]>([
+    { id: "D-2026-011", name: "R-101 搅拌提速至 180rpm（80℃→95℃）", time: "2026-08-02 09:41", step: "已生成申请表 · 待提交", progress: "4/6 页" },
+    { id: "D-2026-009", name: "P-301 机封冲洗方案调整（驳回重报）", time: "2026-07-30 16:22", step: "变更预识别完成", progress: "2/6 页" },
+    { id: "D-2026-007", name: "化验室新增 COD 在线分析仪", time: "2026-07-28 11:05", step: "仅填写变更描述", progress: "1/6 页" },
+]);
+
+const continueEdit = (d: Draft) => {
+    window.$message?.success(`已载入草稿 ${d.id}，从「${d.step}」断点继续编辑`);
+    emit("go", "apply");
+};
+const remove = (d: Draft) => {
+    drafts.value = drafts.value.filter((x: Draft) => x.id !== d.id);
+    window.$message?.success(`草稿 ${d.id} 已删除`);
+};
+const progressPct = (p: string) => {
+    const m = p.match(/(\d+)\s*\/\s*(\d+)/);
+    return m ? Math.round((Number(m[1]) / Number(m[2])) * 100) : 0;
+};
+
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 我的草稿箱 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <div class="border mb-3 py-3 px-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+          <NGi span="24 s:24 m:16">
+              <div class="h-100% flex items-center gap-2">
+                  <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                  <p class="text-sm font-600">我的草稿箱</p>
+                  <span class="rounded bg-slate-100 px-1.5 text-xs font-semibold text-slate-700">{{ drafts.length }}</span>
+                  <p class="text-xs text-#94a3b8">草稿仅本人可见，提交后自动从草稿箱移除</p>
+              </div>
+          </NGi>
+          <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
+            <NButton type="primary" size="small" @click="emit('go', 'apply')">
+              <Icon icon="ic:round-plus" class="size-16px" />
+              新建空白变更
+            </NButton>
+          </NGi>
+        </NGrid>
+      </div>
+      <div class="space-y-2 scroll">
+        <div v-for="d in drafts" :key="d.id" class="rounded-lg border px-4 py-3">
+            <div class="flex flex-wrap items-start gap-3">
+            <div class="min-w-0 flex-1">
+                <div class="text-sm font-semibold text-slate-800 dark:text-white">{{ d.name }}</div>
+                <div class="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-slate-400">
+                <span class="font-mono">{{ d.id }}</span>
+                <span>保存于 {{ d.time }}</span>
+                <NTag type="primary" size="small" class="text-11px">{{ d.step }}</NTag>
+                </div>
+                <div class="mt-2 flex items-center gap-2">
+                <div class="h-1.5 w-40 overflow-hidden rounded-full bg-slate-100">
+                    <div class="h-full rounded-full bg-[#6E93C6]" :style="{ width: progressPct(d.progress) + '%' }" />
+                </div>
+                <span class="text-[11px] text-slate-400">编辑进度 {{ d.progress }}</span>
+                </div>
+            </div>
+            <div class="flex shrink-0 items-center gap-2 pt-2px">
+                <NButton class="text-xs" text type="error" @click="remove(d)">删除</NButton>
+                <NButton class="text-xs" text type="primary" @click="continueEdit(d)">继续编辑</NButton>
+            </div>
+            </div>
+        </div>
+        <div v-if="drafts.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center">
+            <div class="text-sm text-slate-400">暂无草稿</div>
+            <div class="mt-1 text-xs text-slate-300">在变更申请页点击右上角「保存」，即可将当前内容存为草稿</div>
+        </div>
+        </div>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 212px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/myTask/index.vue b/src/views/my/myTask/index.vue
index d6f25ef..d3d2d2f 100644
--- a/src/views/my/myTask/index.vue
+++ b/src/views/my/myTask/index.vue
@@ -1,631 +1,631 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string];}>();
-interface MyChange {
-    id: string;title: string;status: string;detail: string;applyTime: string;updateTime: string;
-    level: "重要" | "一般"; dur: "永久" | "临时"; urgent?: boolean;deadline?: string;
-    stage: string; meta: string; left?: number; extended?: boolean;
-    node?: string; members?: { name: string; done: boolean }[];
-}
-
-const currentRow = ref<any>(null);
-const progressDrawer = ref<boolean>(false);
-const revokeModal = ref<boolean>(false);
-const revokeSaving = ref<boolean>(false);
-const revokeReason = ref<string>("");
-const disposalModal = ref<boolean>(false);
-
-const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
-const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[currentRow.value?.status ?? ""] ?? 1);
-const closed = computed(() => currentRow.value?.status === "已关闭");
-const timeOf = (i: number) => (i === 0 ? currentRow.value?.applyTime : i === 3 ? currentRow.value?.actualUse : i === 5 ? currentRow.value?.closeTime : undefined);
-const currentTab = ref<string>("all");
-const visibleTabs = ref<{ k: string; name: string; count: number }[]>([
-  { k: "all", name: "全部", count: 10 },
-  { k: "approval", name: "待我审批", count: 1 },
-]);
-
-interface ListType {
-    id: string;
-    title: string;
-    status: string;
-    list: any[];
-}
-const list = ref<ListType[]>([
-    {
-        id: "MOC-2026-R01-001",
-        title: '待我审批',
-        status: 'pending',
-        list: [
-            {
-                id: "MOC-2026-R01-0001",
-                title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）',
-                level: "重要",
-                dur: "永久",
-                stage: "pending",
-                status: "审批中",
-                node: "专业会签",
-                overdue: false,//是否超期
-                near: false,//是否临期
-                extended: false,//是否延期
-                extendedCount: 0,//延期次数
-                day: 0,
-                urgent: false,
-                members: [{ name: "王仪表", done: true },{ name: "周设备", done: false },{ name: "王海燕", done: false }],
-                applyTime: "2026-07-28 09:12",
-                updateTime: "2026-07-30 14:20",
-                meta: "计划投用 2026-08-10",
-                detail: "专业会签中（周设备、王海燕待签）"
-            },
-            {
-                id: "MOC-2026-R01-0002",
-                title:'操作规程修订（夏季工况）',
-                level: "一般",
-                dur: "临时",
-                stage: "pending",
-                status: "审批中",
-                node: "部门审核",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 2,
-                urgent: false,
-                members: [{ name: "李主任", done: false }],
-                applyTime: "2026-06-20 11:26",
-                updateTime: "2026-06-21 08:40",
-                meta: "计划投用 2026-07-01",
-                deadline: "2026-08-01",
-                detail: "部门审核（李主任）"
-            },
-        ]
-    },
-    {
-        id: "MOC-2026-R01-002",
-        title: '我的申请',
-        status: 'approved',
-        list: [
-            {
-                id: "MOC-2026-R02-0001",
-                title:'循环水加药泵冲程临时调整',
-                level: "一般",
-                dur: "临时",
-                stage: "approved",
-                status: "已批准",
-                node: "投用准备",
-                overdue: false,//是否超期
-                near: false,//是否临期
-                extended: false,//是否延期
-                extendedCount: 0,//延期次数
-                day: 0,
-                urgent: false,
-                members: [{ name: "张工艺", done: false }],
-                applyTime: "2026-07-26 10:15",
-                updateTime: "2026-07-30 16:20",
-                meta: "批准 2026-07-30 · 待实施",
-                deadline: "2026-08-20",
-                detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）",
-            },
-            {
-                id: "MOC-2026-R02-0002",
-                title:'氮气吹扫流程临时调整',
-                level: "一般",
-                dur: "临时",
-                stage: "approved",
-                status: "已批准",
-                node: "实施执行",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 3,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-10 10:05",
-                updateTime: "2026-07-31 08:10",
-                meta: "批准 2026-07-12 · 待实施",
-                deadline: "2026-07-31",
-                detail: "已到期未办理恢复 / 延期 / 转永久",
-            },
-            {
-                id: "MOC-2026-R02-0003",
-                title:'P-204 出口管线伴热改造',
-                level: "一般",
-                dur: "永久",
-                stage: "approved",
-                status: "已批准",
-                node: "实施执行",
-                overdue: false,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 0,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-15 09:40",
-                updateTime: "2026-07-20 11:00",
-                meta: "审批通过 2026-07-20 · 计划投用 2026-07-30",
-                detail: "因装置检修窗口调整未实施",
-            },
-            {
-                id: "MOC-2026-R02-0004",
-                title:'循环水旁滤器临时绕流运行',
-                level: "一般",
-                dur: "临时",
-                stage: "inuse",
-                status: "待验收",
-                node: "变更验收",
-                overdue: false,
-                near: true,
-                extended: false,
-                extendedCount: 0,
-                day: 6,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-28 14:10",
-                updateTime: "2026-08-02 08:30",
-                deadline: "2026-08-09",
-                meta: "投用 2026-08-02 · 到期 2026-08-09",
-                detail: "验收材料准备中",
-            },
-            {
-                id: "MOC-2026-R02-0005",
-                title:'空压站干燥器再生周期调整',
-                level: "一般",
-                dur: "永久",
-                stage: "inuse",
-                status: "待验收",
-                node: "运行验证",
-                overdue: false,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 0,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-18 10:25",
-                updateTime: "2026-07-25 09:12",
-                meta: "投用 2026-07-25 · 计划验收 2026-08-24",
-                detail: "运行数据收集中（验收周期 30 天）",
-            },
-            {
-                id: "MOC-2026-R02-0006",
-                title:'V-102 安全阀起跳压力临时调整（紧急补办）',
-                level: "一般",
-                dur: "临时",
-                stage: "closing",
-                status: "待关闭",
-                node: "关闭确认",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 4,
-                urgent: true,
-                members: [{ name: "钱峰", done: false }],
-                applyTime: "2026-07-15 19:40",
-                updateTime: "2026-07-27 09:02",
-                deadline: "2026-07-27",
-                meta: "已投用 · 到期 2026-07-27",
-                detail: "待关闭确认（资料更新核查中）",
-            },
-        ]
-    },
-    {
-        id: "MOC-2026-R01-003",
-        title: '驳回处理',
-        status: 'reject',
-        list: [
-            {
-                id: "MOC-2026-R03-0001",
-                title: 'P-301 机封冲洗方案调整',
-                stage: "reject",
-                overdue: false,
-                rejectReason: '变更前后对比描述不完整，缺少冲洗流量核算数据（李主任 · 车间主任）',
-                updateTime: "2026-07-29",
-            },
-            {
-                id: "MOC-2026-R03-0002",
-                title: '活性炭更换周期延长（3→6 个月）',
-                stage: "reject",
-                overdue: true,
-                rejectReason: '风险分析未覆盖吸附饱和穿透情景，请补充 JSA 分析（王海燕 · 安全工程师）',
-                updateTime: "2026-07-25",
-            },
-        ]
-    },
-]);
-
-interface SubOrder {
-  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
-  parentId: string;              // 原变更单号
-  parentTitle: string;
-  kind: "extend" | "permanent";
-  applicant: string;
-  reason: string;
-  newDeadline?: string;          // 延期子单：申请延期至
-  status: "审批中" | "已通过" | "已驳回";
-  submitTime: string;
-  steps: { role: string; name: string; done: boolean }[]; // 会签：全员同意即通过
-  rejectNote?: string;
-}
-const SUB_ORDERS: SubOrder[] = [];
-const subsOf = (id: string) => SUB_ORDERS.filter((s:any) => s.parentId === id);
-const pendingSubs = computed(() => subsOf(currentRow.value?.id).filter((s:any) => s.status === "审批中"));
-interface Opt { act: any; name: string; desc: string; disabled?: boolean; note?: string }
-const convPassed = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status === "已通过"));
-const convActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status !== "已驳回"));
-const extActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "extend" && s.status === "审批中"));
-const opts = computed<Opt[]>(() => {
-  const list: Opt[] = [
-    { act: "restore", name: "申请恢复", desc: "投用后申请恢复原状：生成恢复操作票（执行类单据，随单归档，无需另行审批），现场恢复并拍照确认后纳入归档" },
-  ];
-  if (currentRow.value?.dur === "临时" && !convPassed.value) {
-    list.push(
-      { act: "extend", name: currentRow.value?.extended ? "申请延期（已延期 1 次）" : "申请延期", desc: "临时变更到期前申请延期：子单走属地 + 主管部门简化审批，通过后回写原单到期时间 · 至多延期 1 次", disabled: !!currentRow.value?.extended || extActive.value, note: extActive.value ? "延期子单审批中" : currentRow.value?.extended ? "本变更已延期 1 次，不可再次延期" : "" },
-      { act: "permanent", name: "申请转为永久", desc: "临时运行一个验证周期效果稳定后转永久：按永久变更补齐风险评估与完整审批链，通过后原临时变更自动关闭", disabled: convActive.value, note: convActive.value ? "转永久子单审批中 / 已通过" : "" },
-    );
-  }
-  list.push(
-    { act: "unimpl", name: "未实施情况说明", desc: "审批通过后变更未实施：填写情况说明（未实施原因、现场维持原状确认），知会原审批人后直接转入关闭流程" },
-    { act: "unuse", name: "未投用情况说明", desc: "变更已实施完成但未正式投用：填写情况说明（含现场状态与后续安排），知会原审批人后直接转入关闭流程" },
-  );
-  return list;
-});
-
-// 打开详情
-const openDetail = (c: MyChange,type:string = '') => {
-   if(type==='reject'){
-        window.$message?.info("演示：打开详情");
-        return;
-    }
-};
-// 打开进度
-const openProgress = (c: MyChange,type:string = '') => {
-    currentRow.value = c;
-    if(type==='reject'){
-        window.$message?.info("该任务暂无关联变更进度");
-        return;
-    }
-    progressDrawer.value = true;
-};
-// 打开撤回
-const openWithdraw = (c: MyChange) => {
-    revokeReason.value = "";
-    currentRow.value = c;
-    revokeModal.value = true;
-};
-// 打开处置申请、修改重报
-const openDisposal = (c: MyChange,type:string = '') => {
-    currentRow.value = c;
-    if(type==='reject'){
-        window.$message?.info("该任务暂无处置申请");
-        return;
-    }
-    disposalModal.value = true;
-};
-// 打开资料关闭、关闭变更
-const openClosure = (c: MyChange,type:string = '') => {
-    if(type==='reject'){
-        window.$message?.info("关闭该变更（驳回后不再推进，流程终止并归档备查）");
-        return;
-    }
-};
-// 撤回取消
-const revokeCancel = () => {
-    revokeModal.value = false;
-};
-// 撤回确认
-const revokeSave = () => {
-    if (!revokeReason.value) {
-        window.$message?.warning("请填写撤回理由");
-        return;
-    }
-    revokeSaving.value = true;
-    setTimeout(() => {
-        revokeSaving.value = false;
-        revokeModal.value = false;
-        const pendingGroup = list.value.find((item: any) => item.status === 'pending');
-        if (pendingGroup) {
-            // 过滤掉匹配 targetId 的项
-            pendingGroup.list = pendingGroup.list.filter((item:any) => item.id !== currentRow.value?.id);
-        }
-        window.$message?.success(`已撤回 ${currentRow.value?.id}，申请退回草稿箱，审批记录保留可查，修改后可重新提交`);
-    }, 1000);
-};
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 待我处理 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div 
-            class="h-100% flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
-            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-            <div v-for="t in visibleTabs" :key="t.k" @click="currentTab = t.k"
-                class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
-                :style="{ 
-                    borderRadius: themeStore.themeRadius + 'px',
-                    '--theme-color': themeStore.themeColor,
-                }"
-                :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
-                {{ t.name }}
-                <!-- 驳回处理/资料上传/临时变更超期未处理/变更超期未关闭 -->
-                <NTag v-if="t.k==='reject' || t.k==='upload' || t.k==='tempOverdue' || t.k==='closeOverdue'" size="tiny" round :type="currentTab === t.k ?'default':'error'">{{ t.count }}</NTag>
-                <NTag v-else size="tiny" round :type="currentTab === t.k ?'default':'primary'">{{ t.count }}</NTag>
-            </div>
-        </div>
-        <div class="space-y-2 scroll">
-            <div class="flex flex-col gap-3">
-                <div 
-                    class="border border-slate-200 p-4"
-                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                    v-for="item in list"
-                    :key="item.id"
-                >
-                    <div class="flex items-center gap-2">
-                        <!-- 待我审批 -->
-                        <Icon v-if="item.status==='pending'" icon="ix:success" class="size-16px" :style="{ color: themeStore.otherColor.success }" />
-                        <!-- 我的申请 -->
-                        <Icon v-if="item.status==='approved'" icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                        <!-- 驳回处理 -->
-                        <Icon v-if="item.status==='reject'" icon="system-uicons:reset" class="size-16px" :style="{ color: themeStore.otherColor.error }" />
-                        <h3 class="text-sm font-bold text-slate-800">{{item.title}}</h3>
-                        
-                        <!-- 待我审批 -->
-                        <p v-if="item.status==='pending'" class="text-11px text-slate-400">共 {{ item.list.length }} 项 · 流程当前节点轮到您处理 · 点击进入审批</p>
-                        <!-- 我的申请 -->
-                        <p v-if="item.status==='approved'" class="text-11px text-slate-400">共 {{item.list.length}} 项</p>
-                        <!-- 驳回处理 -->
-                        <p v-if="item.status==='reject'" class="text-11px text-slate-400">{{item.list.length}} 项待处理</p>
-                    </div>
-                    <div v-if="item.list && item.list.length" class="flex flex-col gap-3 mt-3">
-                        <div v-for="c in item.list" :key="c.id"
-                            class="flex flex-wrap items-center gap-3 border px-4 py-3"
-                            :class="c.overdue ? 'border-red-200 bg-[#FFF2F0]' : c.near ? 'border-amber-200 bg-amber-50/40' : ''"
-                            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                        >
-                            <!-- 左区 -->
-                            <!-- 待我审批 -->
-                            <div v-if="item.status==='pending' || item.status==='approved'" class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
-                                    <NTag v-if="c.level==='重要'" size="small" type="error">{{c.level}}</NTag>
-                                    <NTag v-if="c.level==='一般'" size="small" type="primary">{{c.level}}</NTag>
-                                    <NTag v-if="c.dur==='临时'" size="small" type="warning">{{c.dur}}</NTag>
-                                    <NTag v-if="c.dur==='永久'" size="small" type="primary">{{c.dur}}</NTag>
-                                    <NTag v-if="c.dur==='临时转永久'" size="small">{{c.dur}}</NTag>
-                                    <NTag v-if="c.urgent" size="small" type="error">紧急</NTag>
-                                    <NTag v-if="c.overdue" size="small" type="error">已超期 {{ c.day }} 天</NTag>
-                                    <NTag v-if="c.near" size="small" type="warning">临期 · 剩 {{ c.day }} 天</NTag>
-                                    <NTag v-if="c.extended" size="small">已延期 {{ c.extendedCount }} 次</NTag>
-                                    <NTag v-if="c.status==='审批中'" size="small" type="warning">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='已批准'" size="small" type="primary">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='待验收'" size="small" type="success">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='待关闭'" size="small" type="error">{{c.status}}</NTag>
-                                </div>
-                                <div class="mt-1 flex flex-wrap items-baseline gap-x-2">
-                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
-                                    <span v-if="c.applyTime" class="text-[11px] text-slate-400">申请 {{ c.applyTime }}</span>
-                                </div>
-                                <div v-if="c.stage === 'closing'" class="mt-0.5 text-[11px] text-slate-400">{{ c.meta }}</div>
-                                <!-- 当前节点与会签成员进度；状态更新时间跟在审核人员名字后面 -->
-                                <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
-                                    <span class="text-slate-400">当前节点</span>
-                                    <span class="font-medium text-slate-600">{{ c.node ?? c.status }}</span>
-                                    <div v-if="c.members && c.members.length" class="flex items-center gap-1">
-                                        <div v-for="(m, mi) in c.members" :key="mi">
-                                            <NTag v-if="m.done" size="small" type="success">
-                                                <div class="flex items-center">
-                                                    <Icon icon="ix:success" />{{ m.name }}
-                                                </div>
-                                            </NTag>
-                                            <NTag v-else size="small" type="warning">
-                                                <div class="flex items-center">
-                                                    <Icon icon="tabler:clock" />{{ m.name }}
-                                                </div>
-                                            </NTag>
-                                        </div>
-                                    </div>
-                                    <span v-else class="text-slate-400">{{ c.detail }}</span>
-                                    <span v-if="c.updateTime" class="text-slate-400">状态更新 {{ c.updateTime }}</span>
-                                </div>
-                            </div>
-                            <!-- 驳回处理 -->
-                            <NTag v-if="item.status==='reject'" size="small" type="error">
-                                <div class="flex items-center">
-                                    <Icon icon="system-uicons:reset" />驳回处理
-                                </div>
-                            </NTag>
-                            <div v-if="item.status==='reject'" class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
-                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
-                                </div>
-                                <p class="px-2 py-1 text-xs border border-red-100 bg-red-50/60 px-2 py-1 text-red-600 rounded-md mt-1">
-                                    驳回原因：{{ c.rejectReason }}
-                                </p>
-                                <span v-if="c.updateTime" class="text-11px text-slate-400">驳回于 {{ c.updateTime }}</span>
-                            </div>
-                            <!-- 右区 -->
-                            <!-- 待我审批 -->
-                            <div v-if="c.stage === 'pending'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">去审批</NButton>
-                            </div>
-                            <!-- 我的申请 -->
-                            <div v-if="c.stage === 'approved'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
-                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
-                                <NButton class="text-xs" text type="error" @click="openClosure(c)">资料关闭</NButton>
-                            </div>
-                            <!-- 驳回处理 -->
-                             <div v-if="c.stage === 'reject'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c,'reject')">详情</NButton>
-                                <NButton class="text-xs" text type="warning" @click="openProgress(c,'reject')">进度</NButton>
-                                <NButton class="text-xs" text type="primary" @click="openDisposal(c,'reject')">修改重报</NButton>
-                                <NButton class="text-xs" text type="error" @click="openClosure(c,'reject')">关闭变更</NButton>
-                            </div>
-                        </div>
-                    </div>
-                    
-                </div>
-            </div>
-        </div>
-        <!-- 进度弹框 -->
-        <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-            <NDrawerContent title="变更进度">
-                <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-                    <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
-                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                        <span class="font-mono">{{ currentRow?.id }}</span>
-                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow.status}}</NTag>
-                        <span v-if="currentRow?.overdue" class="font-medium text-red-500">超期 {{ currentRow?.day }} 天</span>
-                    </div>
-                    <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
-                    <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
-                </div>
-                <div class="mt-4">
-                    <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
-                        <div class="flex flex-col items-center">
-                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
-                                :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
-                                <Icon v-if="i < curIdx || closed" icon="ix:success" />
-                                <Icon v-else-if="i === curIdx" icon="tabler:clock" />
-                                <span v-else class="text-[10px]">{{ i + 1 }}</span>
-                            </span>
-                            <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
-                        </div>
-                        <div class="pb-5">
-                            <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
-                                {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
-                            </div>
-                            <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
-                            <div v-if="i === curIdx && !closed && (currentRow?.detail || currentRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
-                                {{ [currentRow?.detail, currentRow?.updateTime ? `更新 ${currentRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-if="currentRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-                    临时变更：计划恢复 {{ currentRow?.deadline ?? '—' }}{{ currentRow?.extended ? ` · 延期后恢复 ${currentRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
-                </div>
-            </NDrawerContent>
-        </NDrawer>
-        <!-- 撤回弹框 -->
-        <NModal
-            v-model:show="revokeModal"
-            preset="card"
-            :auto-focus="false"
-            :style="{ width: '450px', height: 'auto' }"
-            :segmented="{ content: true, footer: true }"
-        >
-            <template #header>
-                <h3 class="text-sm font-bold text-slate-800">撤回变更申请</h3>
-            </template>
-            <template #default>
-                <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                    变更编号 {{ currentRow?.id }}：撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交，重新提交按新申请计。
-                </div>
-                <NInput
-                    class="mt-3"
-                    v-model:value="revokeReason"
-                    type="textarea"
-                    :rows="3"
-                    placeholder="撤回理由（必填）：如补充材料、变更范围调整、需重新组织风险分析…"
-                />
-            </template>
-            <template #footer>
-                <div class="flex justify-end gap-[10px]">
-                    <NButton size="small" @click="revokeCancel">取消</NButton>
-                    <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">保存</NButton>
-                </div>
-            </template>
-        </NModal>
-        <!-- 处置申请弹框 -->
-        <NModal
-            v-model:show="disposalModal"
-            preset="card"
-            :auto-focus="false"
-            :style="{ width: '670px', height: 'auto' }"
-            :segmented="{ content: true, footer: false }"
-        >
-            <template #header>
-                <div class="flex items-center gap-2 flex-wrap">
-                    <h3 class="text-base font-semibold text-slate-800">处置申请 · {{ currentRow?.title }}</h3>
-                    <span class="shrink-0 border-slate-200 bg-slate-100 font-mono text-xs text-slate-600 px-1.5 py-0.5 border rounded-md">编号：{{ currentRow?.id }}</span>
-                </div>
-            </template>
-            <template #default>
-                <div class="rounded-lg border bg-white px-4 py-3">
-                    <div class="flex flex-wrap items-center gap-2">
-                        <NTag v-if="currentRow?.level=== '重要'" type="error" size="small">{{ currentRow?.level }}</NTag>
-                        <NTag v-else type="primary" size="small">{{ currentRow?.level }}</NTag>
-                        <NTag v-if="currentRow?.dur=== '临时'" type="warning" size="small">{{ currentRow?.dur }}</NTag>
-                        <NTag v-else type="primary" size="small">{{ currentRow?.dur }}</NTag>
-                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='实施中'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待PSSR'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已关闭'" size="small" type="primary">{{currentRow?.status}}</NTag>
-                        <span v-if="currentRow?.applyTime" class="text-[11px] text-slate-400">申请 {{ currentRow?.applyTime }}</span>
-                        <span v-if="currentRow?.dur === '临时' && currentRow?.deadline" class="text-[11px] text-amber-600">
-                            到期 {{ currentRow?.deadline }}{{ (currentRow?.day ?? 0) < 0 ? ` · 已超期 ${-(currentRow?.day ?? 0)} 天` : currentRow?.day !== undefined ? ` · 剩 ${currentRow?.day} 天` : '' }}
-                        </span>
-                    </div>
-                    <div class="mt-1 text-[11px] text-slate-400">{{ currentRow?.detail }}</div>
-                </div>
-                <!-- 进行中的子单提示 -->
-                <div v-if="pendingSubs.length" class="rounded-lg border border-amber-200 bg-amber-50/60 px-4 py-2.5 text-xs text-amber-700">
-                已有子单在审批中：{{ pendingSubs.map((s:any) => s.id).join('、') }} · 审批进度见「待我处理」列表行内展示
-                </div>
-                <!-- 处置选项 -->
-                <div class="rounded-lg border bg-white mt-3">
-                    <div class="border-b px-4 py-2.5 text-sm font-bold text-slate-800">
-                        选择处置方式
-                        <span class="ml-2 text-[11px] font-normal text-slate-400">申请恢复所有变更可发起；申请延期 / 申请转为永久仅临时变更可用</span>
-                    </div>
-                    <div class="divide-y">
-                        <div v-for="o in opts" :key="o.act" class="flex flex-wrap items-center gap-3 px-4 py-3.5">
-                            <div class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="text-sm font-semibold text-slate-800">{{ o.name }}</span>
-                                    <NTag v-if="o.note" type="warning" size="small">{{ o.note }}</NTag>
-                                </div>
-                                <div class="mt-0.5 text-[11px] leading-4 text-slate-400">{{ o.desc }}</div>
-                            </div>
-                            <NButton size="small" type="primary" :disabled="o.disabled">
-                                发起<Icon icon="formkit:right" class="size-12px text-white ml-1" />
-                            </NButton>
-                        </div>
-                    </div>
-                </div>
-                
-            </template>
-        </NModal>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 260px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const emit = defineEmits<{ go: [v: string, preset?: string];}>();
+interface MyChange {
+    id: string;title: string;status: string;detail: string;applyTime: string;updateTime: string;
+    level: "重要" | "一般"; dur: "永久" | "临时"; urgent?: boolean;deadline?: string;
+    stage: string; meta: string; left?: number; extended?: boolean;
+    node?: string; members?: { name: string; done: boolean }[];
+}
+
+const currentRow = ref<any>(null);
+const progressDrawer = ref<boolean>(false);
+const revokeModal = ref<boolean>(false);
+const revokeSaving = ref<boolean>(false);
+const revokeReason = ref<string>("");
+const disposalModal = ref<boolean>(false);
+
+const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
+const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[currentRow.value?.status ?? ""] ?? 1);
+const closed = computed(() => currentRow.value?.status === "已关闭");
+const timeOf = (i: number) => (i === 0 ? currentRow.value?.applyTime : i === 3 ? currentRow.value?.actualUse : i === 5 ? currentRow.value?.closeTime : undefined);
+const currentTab = ref<string>("all");
+const visibleTabs = ref<{ k: string; name: string; count: number }[]>([
+  { k: "all", name: "全部", count: 10 },
+  { k: "approval", name: "待我审批", count: 1 },
+]);
+
+interface ListType {
+    id: string;
+    title: string;
+    status: string;
+    list: any[];
+}
+const list = ref<ListType[]>([
+    {
+        id: "MOC-2026-R01-001",
+        title: '待我审批',
+        status: 'pending',
+        list: [
+            {
+                id: "MOC-2026-R01-0001",
+                title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）',
+                level: "重要",
+                dur: "永久",
+                stage: "pending",
+                status: "审批中",
+                node: "专业会签",
+                overdue: false,//是否超期
+                near: false,//是否临期
+                extended: false,//是否延期
+                extendedCount: 0,//延期次数
+                day: 0,
+                urgent: false,
+                members: [{ name: "王仪表", done: true },{ name: "周设备", done: false },{ name: "王海燕", done: false }],
+                applyTime: "2026-07-28 09:12",
+                updateTime: "2026-07-30 14:20",
+                meta: "计划投用 2026-08-10",
+                detail: "专业会签中（周设备、王海燕待签）"
+            },
+            {
+                id: "MOC-2026-R01-0002",
+                title:'操作规程修订（夏季工况）',
+                level: "一般",
+                dur: "临时",
+                stage: "pending",
+                status: "审批中",
+                node: "部门审核",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 2,
+                urgent: false,
+                members: [{ name: "李主任", done: false }],
+                applyTime: "2026-06-20 11:26",
+                updateTime: "2026-06-21 08:40",
+                meta: "计划投用 2026-07-01",
+                deadline: "2026-08-01",
+                detail: "部门审核（李主任）"
+            },
+        ]
+    },
+    {
+        id: "MOC-2026-R01-002",
+        title: '我的申请',
+        status: 'approved',
+        list: [
+            {
+                id: "MOC-2026-R02-0001",
+                title:'循环水加药泵冲程临时调整',
+                level: "一般",
+                dur: "临时",
+                stage: "approved",
+                status: "已批准",
+                node: "投用准备",
+                overdue: false,//是否超期
+                near: false,//是否临期
+                extended: false,//是否延期
+                extendedCount: 0,//延期次数
+                day: 0,
+                urgent: false,
+                members: [{ name: "张工艺", done: false }],
+                applyTime: "2026-07-26 10:15",
+                updateTime: "2026-07-30 16:20",
+                meta: "批准 2026-07-30 · 待实施",
+                deadline: "2026-08-20",
+                detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）",
+            },
+            {
+                id: "MOC-2026-R02-0002",
+                title:'氮气吹扫流程临时调整',
+                level: "一般",
+                dur: "临时",
+                stage: "approved",
+                status: "已批准",
+                node: "实施执行",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 3,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-10 10:05",
+                updateTime: "2026-07-31 08:10",
+                meta: "批准 2026-07-12 · 待实施",
+                deadline: "2026-07-31",
+                detail: "已到期未办理恢复 / 延期 / 转永久",
+            },
+            {
+                id: "MOC-2026-R02-0003",
+                title:'P-204 出口管线伴热改造',
+                level: "一般",
+                dur: "永久",
+                stage: "approved",
+                status: "已批准",
+                node: "实施执行",
+                overdue: false,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 0,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-15 09:40",
+                updateTime: "2026-07-20 11:00",
+                meta: "审批通过 2026-07-20 · 计划投用 2026-07-30",
+                detail: "因装置检修窗口调整未实施",
+            },
+            {
+                id: "MOC-2026-R02-0004",
+                title:'循环水旁滤器临时绕流运行',
+                level: "一般",
+                dur: "临时",
+                stage: "inuse",
+                status: "待验收",
+                node: "变更验收",
+                overdue: false,
+                near: true,
+                extended: false,
+                extendedCount: 0,
+                day: 6,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-28 14:10",
+                updateTime: "2026-08-02 08:30",
+                deadline: "2026-08-09",
+                meta: "投用 2026-08-02 · 到期 2026-08-09",
+                detail: "验收材料准备中",
+            },
+            {
+                id: "MOC-2026-R02-0005",
+                title:'空压站干燥器再生周期调整',
+                level: "一般",
+                dur: "永久",
+                stage: "inuse",
+                status: "待验收",
+                node: "运行验证",
+                overdue: false,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 0,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-18 10:25",
+                updateTime: "2026-07-25 09:12",
+                meta: "投用 2026-07-25 · 计划验收 2026-08-24",
+                detail: "运行数据收集中（验收周期 30 天）",
+            },
+            {
+                id: "MOC-2026-R02-0006",
+                title:'V-102 安全阀起跳压力临时调整（紧急补办）',
+                level: "一般",
+                dur: "临时",
+                stage: "closing",
+                status: "待关闭",
+                node: "关闭确认",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 4,
+                urgent: true,
+                members: [{ name: "钱峰", done: false }],
+                applyTime: "2026-07-15 19:40",
+                updateTime: "2026-07-27 09:02",
+                deadline: "2026-07-27",
+                meta: "已投用 · 到期 2026-07-27",
+                detail: "待关闭确认（资料更新核查中）",
+            },
+        ]
+    },
+    {
+        id: "MOC-2026-R01-003",
+        title: '驳回处理',
+        status: 'reject',
+        list: [
+            {
+                id: "MOC-2026-R03-0001",
+                title: 'P-301 机封冲洗方案调整',
+                stage: "reject",
+                overdue: false,
+                rejectReason: '变更前后对比描述不完整，缺少冲洗流量核算数据（李主任 · 车间主任）',
+                updateTime: "2026-07-29",
+            },
+            {
+                id: "MOC-2026-R03-0002",
+                title: '活性炭更换周期延长（3→6 个月）',
+                stage: "reject",
+                overdue: true,
+                rejectReason: '风险分析未覆盖吸附饱和穿透情景，请补充 JSA 分析（王海燕 · 安全工程师）',
+                updateTime: "2026-07-25",
+            },
+        ]
+    },
+]);
+
+interface SubOrder {
+  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
+  parentId: string;              // 原变更单号
+  parentTitle: string;
+  kind: "extend" | "permanent";
+  applicant: string;
+  reason: string;
+  newDeadline?: string;          // 延期子单：申请延期至
+  status: "审批中" | "已通过" | "已驳回";
+  submitTime: string;
+  steps: { role: string; name: string; done: boolean }[]; // 会签：全员同意即通过
+  rejectNote?: string;
+}
+const SUB_ORDERS: SubOrder[] = [];
+const subsOf = (id: string) => SUB_ORDERS.filter((s:any) => s.parentId === id);
+const pendingSubs = computed(() => subsOf(currentRow.value?.id).filter((s:any) => s.status === "审批中"));
+interface Opt { act: any; name: string; desc: string; disabled?: boolean; note?: string }
+const convPassed = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status === "已通过"));
+const convActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status !== "已驳回"));
+const extActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "extend" && s.status === "审批中"));
+const opts = computed<Opt[]>(() => {
+  const list: Opt[] = [
+    { act: "restore", name: "申请恢复", desc: "投用后申请恢复原状：生成恢复操作票（执行类单据，随单归档，无需另行审批），现场恢复并拍照确认后纳入归档" },
+  ];
+  if (currentRow.value?.dur === "临时" && !convPassed.value) {
+    list.push(
+      { act: "extend", name: currentRow.value?.extended ? "申请延期（已延期 1 次）" : "申请延期", desc: "临时变更到期前申请延期：子单走属地 + 主管部门简化审批，通过后回写原单到期时间 · 至多延期 1 次", disabled: !!currentRow.value?.extended || extActive.value, note: extActive.value ? "延期子单审批中" : currentRow.value?.extended ? "本变更已延期 1 次，不可再次延期" : "" },
+      { act: "permanent", name: "申请转为永久", desc: "临时运行一个验证周期效果稳定后转永久：按永久变更补齐风险评估与完整审批链，通过后原临时变更自动关闭", disabled: convActive.value, note: convActive.value ? "转永久子单审批中 / 已通过" : "" },
+    );
+  }
+  list.push(
+    { act: "unimpl", name: "未实施情况说明", desc: "审批通过后变更未实施：填写情况说明（未实施原因、现场维持原状确认），知会原审批人后直接转入关闭流程" },
+    { act: "unuse", name: "未投用情况说明", desc: "变更已实施完成但未正式投用：填写情况说明（含现场状态与后续安排），知会原审批人后直接转入关闭流程" },
+  );
+  return list;
+});
+
+// 打开详情
+const openDetail = (c: MyChange,type:string = '') => {
+   if(type==='reject'){
+        window.$message?.info("演示：打开详情");
+        return;
+    }
+};
+// 打开进度
+const openProgress = (c: MyChange,type:string = '') => {
+    currentRow.value = c;
+    if(type==='reject'){
+        window.$message?.info("该任务暂无关联变更进度");
+        return;
+    }
+    progressDrawer.value = true;
+};
+// 打开撤回
+const openWithdraw = (c: MyChange) => {
+    revokeReason.value = "";
+    currentRow.value = c;
+    revokeModal.value = true;
+};
+// 打开处置申请、修改重报
+const openDisposal = (c: MyChange,type:string = '') => {
+    currentRow.value = c;
+    if(type==='reject'){
+        window.$message?.info("该任务暂无处置申请");
+        return;
+    }
+    disposalModal.value = true;
+};
+// 打开资料关闭、关闭变更
+const openClosure = (c: MyChange,type:string = '') => {
+    if(type==='reject'){
+        window.$message?.info("关闭该变更（驳回后不再推进，流程终止并归档备查）");
+        return;
+    }
+};
+// 撤回取消
+const revokeCancel = () => {
+    revokeModal.value = false;
+};
+// 撤回确认
+const revokeSave = () => {
+    if (!revokeReason.value) {
+        window.$message?.warning("请填写撤回理由");
+        return;
+    }
+    revokeSaving.value = true;
+    setTimeout(() => {
+        revokeSaving.value = false;
+        revokeModal.value = false;
+        const pendingGroup = list.value.find((item: any) => item.status === 'pending');
+        if (pendingGroup) {
+            // 过滤掉匹配 targetId 的项
+            pendingGroup.list = pendingGroup.list.filter((item:any) => item.id !== currentRow.value?.id);
+        }
+        window.$message?.success(`已撤回 ${currentRow.value?.id}，申请退回草稿箱，审批记录保留可查，修改后可重新提交`);
+    }, 1000);
+};
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 待我处理 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div 
+            class="h-100% flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
+            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+            <div v-for="t in visibleTabs" :key="t.k" @click="currentTab = t.k"
+                class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
+                :style="{ 
+                    borderRadius: themeStore.themeRadius + 'px',
+                    '--theme-color': themeStore.themeColor,
+                }"
+                :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                {{ t.name }}
+                <!-- 驳回处理/资料上传/临时变更超期未处理/变更超期未关闭 -->
+                <NTag v-if="t.k==='reject' || t.k==='upload' || t.k==='tempOverdue' || t.k==='closeOverdue'" size="tiny" round :type="currentTab === t.k ?'default':'error'">{{ t.count }}</NTag>
+                <NTag v-else size="tiny" round :type="currentTab === t.k ?'default':'primary'">{{ t.count }}</NTag>
+            </div>
+        </div>
+        <div class="space-y-2 scroll">
+            <div class="flex flex-col gap-3">
+                <div 
+                    class="border border-slate-200 p-4"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                    v-for="item in list"
+                    :key="item.id"
+                >
+                    <div class="flex items-center gap-2">
+                        <!-- 待我审批 -->
+                        <Icon v-if="item.status==='pending'" icon="ix:success" class="size-16px" :style="{ color: themeStore.otherColor.success }" />
+                        <!-- 我的申请 -->
+                        <Icon v-if="item.status==='approved'" icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                        <!-- 驳回处理 -->
+                        <Icon v-if="item.status==='reject'" icon="system-uicons:reset" class="size-16px" :style="{ color: themeStore.otherColor.error }" />
+                        <h3 class="text-sm font-bold text-slate-800">{{item.title}}</h3>
+                        
+                        <!-- 待我审批 -->
+                        <p v-if="item.status==='pending'" class="text-11px text-slate-400">共 {{ item.list.length }} 项 · 流程当前节点轮到您处理 · 点击进入审批</p>
+                        <!-- 我的申请 -->
+                        <p v-if="item.status==='approved'" class="text-11px text-slate-400">共 {{item.list.length}} 项</p>
+                        <!-- 驳回处理 -->
+                        <p v-if="item.status==='reject'" class="text-11px text-slate-400">{{item.list.length}} 项待处理</p>
+                    </div>
+                    <div v-if="item.list && item.list.length" class="flex flex-col gap-3 mt-3">
+                        <div v-for="c in item.list" :key="c.id"
+                            class="flex flex-wrap items-center gap-3 border px-4 py-3"
+                            :class="c.overdue ? 'border-red-200 bg-[#FFF2F0]' : c.near ? 'border-amber-200 bg-amber-50/40' : ''"
+                            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                        >
+                            <!-- 左区 -->
+                            <!-- 待我审批 -->
+                            <div v-if="item.status==='pending' || item.status==='approved'" class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
+                                    <NTag v-if="c.level==='重要'" size="small" type="error">{{c.level}}</NTag>
+                                    <NTag v-if="c.level==='一般'" size="small" type="primary">{{c.level}}</NTag>
+                                    <NTag v-if="c.dur==='临时'" size="small" type="warning">{{c.dur}}</NTag>
+                                    <NTag v-if="c.dur==='永久'" size="small" type="primary">{{c.dur}}</NTag>
+                                    <NTag v-if="c.dur==='临时转永久'" size="small">{{c.dur}}</NTag>
+                                    <NTag v-if="c.urgent" size="small" type="error">紧急</NTag>
+                                    <NTag v-if="c.overdue" size="small" type="error">已超期 {{ c.day }} 天</NTag>
+                                    <NTag v-if="c.near" size="small" type="warning">临期 · 剩 {{ c.day }} 天</NTag>
+                                    <NTag v-if="c.extended" size="small">已延期 {{ c.extendedCount }} 次</NTag>
+                                    <NTag v-if="c.status==='审批中'" size="small" type="warning">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='已批准'" size="small" type="primary">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='待验收'" size="small" type="success">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='待关闭'" size="small" type="error">{{c.status}}</NTag>
+                                </div>
+                                <div class="mt-1 flex flex-wrap items-baseline gap-x-2">
+                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
+                                    <span v-if="c.applyTime" class="text-[11px] text-slate-400">申请 {{ c.applyTime }}</span>
+                                </div>
+                                <div v-if="c.stage === 'closing'" class="mt-0.5 text-[11px] text-slate-400">{{ c.meta }}</div>
+                                <!-- 当前节点与会签成员进度；状态更新时间跟在审核人员名字后面 -->
+                                <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
+                                    <span class="text-slate-400">当前节点</span>
+                                    <span class="font-medium text-slate-600">{{ c.node ?? c.status }}</span>
+                                    <div v-if="c.members && c.members.length" class="flex items-center gap-1">
+                                        <div v-for="(m, mi) in c.members" :key="mi">
+                                            <NTag v-if="m.done" size="small" type="success">
+                                                <div class="flex items-center">
+                                                    <Icon icon="ix:success" />{{ m.name }}
+                                                </div>
+                                            </NTag>
+                                            <NTag v-else size="small" type="warning">
+                                                <div class="flex items-center">
+                                                    <Icon icon="tabler:clock" />{{ m.name }}
+                                                </div>
+                                            </NTag>
+                                        </div>
+                                    </div>
+                                    <span v-else class="text-slate-400">{{ c.detail }}</span>
+                                    <span v-if="c.updateTime" class="text-slate-400">状态更新 {{ c.updateTime }}</span>
+                                </div>
+                            </div>
+                            <!-- 驳回处理 -->
+                            <NTag v-if="item.status==='reject'" size="small" type="error">
+                                <div class="flex items-center">
+                                    <Icon icon="system-uicons:reset" />驳回处理
+                                </div>
+                            </NTag>
+                            <div v-if="item.status==='reject'" class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
+                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
+                                </div>
+                                <p class="px-2 py-1 text-xs border border-red-100 bg-red-50/60 px-2 py-1 text-red-600 rounded-md mt-1">
+                                    驳回原因：{{ c.rejectReason }}
+                                </p>
+                                <span v-if="c.updateTime" class="text-11px text-slate-400">驳回于 {{ c.updateTime }}</span>
+                            </div>
+                            <!-- 右区 -->
+                            <!-- 待我审批 -->
+                            <div v-if="c.stage === 'pending'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">去审批</NButton>
+                            </div>
+                            <!-- 我的申请 -->
+                            <div v-if="c.stage === 'approved'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
+                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
+                                <NButton class="text-xs" text type="error" @click="openClosure(c)">资料关闭</NButton>
+                            </div>
+                            <!-- 驳回处理 -->
+                             <div v-if="c.stage === 'reject'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c,'reject')">详情</NButton>
+                                <NButton class="text-xs" text type="warning" @click="openProgress(c,'reject')">进度</NButton>
+                                <NButton class="text-xs" text type="primary" @click="openDisposal(c,'reject')">修改重报</NButton>
+                                <NButton class="text-xs" text type="error" @click="openClosure(c,'reject')">关闭变更</NButton>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        <!-- 进度弹框 -->
+        <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
+            <NDrawerContent title="变更进度">
+                <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
+                    <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
+                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
+                        <span class="font-mono">{{ currentRow?.id }}</span>
+                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow.status}}</NTag>
+                        <span v-if="currentRow?.overdue" class="font-medium text-red-500">超期 {{ currentRow?.day }} 天</span>
+                    </div>
+                    <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
+                    <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
+                </div>
+                <div class="mt-4">
+                    <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
+                        <div class="flex flex-col items-center">
+                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
+                                :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
+                                <Icon v-if="i < curIdx || closed" icon="ix:success" />
+                                <Icon v-else-if="i === curIdx" icon="tabler:clock" />
+                                <span v-else class="text-[10px]">{{ i + 1 }}</span>
+                            </span>
+                            <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
+                        </div>
+                        <div class="pb-5">
+                            <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
+                                {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
+                            </div>
+                            <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
+                            <div v-if="i === curIdx && !closed && (currentRow?.detail || currentRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
+                                {{ [currentRow?.detail, currentRow?.updateTime ? `更新 ${currentRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="currentRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
+                    临时变更：计划恢复 {{ currentRow?.deadline ?? '—' }}{{ currentRow?.extended ? ` · 延期后恢复 ${currentRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- 撤回弹框 -->
+        <NModal
+            v-model:show="revokeModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '450px', height: 'auto' }"
+            :segmented="{ content: true, footer: true }"
+        >
+            <template #header>
+                <h3 class="text-sm font-bold text-slate-800">撤回变更申请</h3>
+            </template>
+            <template #default>
+                <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
+                    变更编号 {{ currentRow?.id }}：撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交，重新提交按新申请计。
+                </div>
+                <NInput
+                    class="mt-3"
+                    v-model:value="revokeReason"
+                    type="textarea"
+                    :rows="3"
+                    placeholder="撤回理由（必填）：如补充材料、变更范围调整、需重新组织风险分析…"
+                />
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-[10px]">
+                    <NButton size="small" @click="revokeCancel">取消</NButton>
+                    <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">保存</NButton>
+                </div>
+            </template>
+        </NModal>
+        <!-- 处置申请弹框 -->
+        <NModal
+            v-model:show="disposalModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '670px', height: 'auto' }"
+            :segmented="{ content: true, footer: false }"
+        >
+            <template #header>
+                <div class="flex items-center gap-2 flex-wrap">
+                    <h3 class="text-base font-semibold text-slate-800">处置申请 · {{ currentRow?.title }}</h3>
+                    <span class="shrink-0 border-slate-200 bg-slate-100 font-mono text-xs text-slate-600 px-1.5 py-0.5 border rounded-md">编号：{{ currentRow?.id }}</span>
+                </div>
+            </template>
+            <template #default>
+                <div class="rounded-lg border bg-white px-4 py-3">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <NTag v-if="currentRow?.level=== '重要'" type="error" size="small">{{ currentRow?.level }}</NTag>
+                        <NTag v-else type="primary" size="small">{{ currentRow?.level }}</NTag>
+                        <NTag v-if="currentRow?.dur=== '临时'" type="warning" size="small">{{ currentRow?.dur }}</NTag>
+                        <NTag v-else type="primary" size="small">{{ currentRow?.dur }}</NTag>
+                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='实施中'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待PSSR'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已关闭'" size="small" type="primary">{{currentRow?.status}}</NTag>
+                        <span v-if="currentRow?.applyTime" class="text-[11px] text-slate-400">申请 {{ currentRow?.applyTime }}</span>
+                        <span v-if="currentRow?.dur === '临时' && currentRow?.deadline" class="text-[11px] text-amber-600">
+                            到期 {{ currentRow?.deadline }}{{ (currentRow?.day ?? 0) < 0 ? ` · 已超期 ${-(currentRow?.day ?? 0)} 天` : currentRow?.day !== undefined ? ` · 剩 ${currentRow?.day} 天` : '' }}
+                        </span>
+                    </div>
+                    <div class="mt-1 text-[11px] text-slate-400">{{ currentRow?.detail }}</div>
+                </div>
+                <!-- 进行中的子单提示 -->
+                <div v-if="pendingSubs.length" class="rounded-lg border border-amber-200 bg-amber-50/60 px-4 py-2.5 text-xs text-amber-700">
+                已有子单在审批中：{{ pendingSubs.map((s:any) => s.id).join('、') }} · 审批进度见「待我处理」列表行内展示
+                </div>
+                <!-- 处置选项 -->
+                <div class="rounded-lg border bg-white mt-3">
+                    <div class="border-b px-4 py-2.5 text-sm font-bold text-slate-800">
+                        选择处置方式
+                        <span class="ml-2 text-[11px] font-normal text-slate-400">申请恢复所有变更可发起；申请延期 / 申请转为永久仅临时变更可用</span>
+                    </div>
+                    <div class="divide-y">
+                        <div v-for="o in opts" :key="o.act" class="flex flex-wrap items-center gap-3 px-4 py-3.5">
+                            <div class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-semibold text-slate-800">{{ o.name }}</span>
+                                    <NTag v-if="o.note" type="warning" size="small">{{ o.note }}</NTag>
+                                </div>
+                                <div class="mt-0.5 text-[11px] leading-4 text-slate-400">{{ o.desc }}</div>
+                            </div>
+                            <NButton size="small" type="primary" :disabled="o.disabled">
+                                发起<Icon icon="formkit:right" class="size-12px text-white ml-1" />
+                            </NButton>
+                        </div>
+                    </div>
+                </div>
+                
+            </template>
+        </NModal>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 260px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/pending/index.vue b/src/views/my/pending/index.vue
index 3016e72..8ff2cd1 100644
--- a/src/views/my/pending/index.vue
+++ b/src/views/my/pending/index.vue
@@ -1,666 +1,666 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string];}>();
-interface MyChange {
-    id: string;title: string;status: string;detail: string;applyTime: string;updateTime: string;
-    level: "重要" | "一般"; dur: "永久" | "临时"; urgent?: boolean;deadline?: string;
-    stage: string; meta: string; left?: number; extended?: boolean;
-    node?: string; members?: { name: string; done: boolean }[];
-}
-
-const currentRow = ref<any>(null);
-const progressDrawer = ref<boolean>(false);
-const revokeModal = ref<boolean>(false);
-const revokeSaving = ref<boolean>(false);
-const revokeReason = ref<string>("");
-const disposalModal = ref<boolean>(false);
-
-const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
-const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[currentRow.value?.status ?? ""] ?? 1);
-const closed = computed(() => currentRow.value?.status === "已关闭");
-const timeOf = (i: number) => (i === 0 ? currentRow.value?.applyTime : i === 3 ? currentRow.value?.actualUse : i === 5 ? currentRow.value?.closeTime : undefined);
-
-const role = ref<string>("applicant");
-const currentTab = ref<string>("all");
-const visibleTabs = ref<{ k: string; name: string; count: number }[]>([
-  { k: "all", name: "全部", count: 10 },
-  { k: "approval", name: "待我审批", count: 1 },
-  { k: "apply", name: "我的申请", count: 8 },
-  { k: "tempOverdue", name: "临时变更超期未处理", count: 1 },
-  { k: "closeOverdue", name: "变更超期未关闭", count: 1 },
-  { k: "reject", name: "驳回处理", count: 2 },
-  { k: "accept", name: "参与验收", count: 3 },
-  { k: "upload", name: "资料上传", count: 2 },
-]);
-const remindDays = ref<number>(7);
-const specialTab = computed(() => currentTab.value === "tempOverdue" || currentTab.value === "closeOverdue");
-const myChanges = ref<MyChange[]>([
-  { id: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", level: "重要", dur: "永久", stage: "pending", status: "审批中", detail: "专业会签中（周设备、王海燕待签）", applyTime: "2026-07-28 09:12", meta: "计划投用 2026-08-10", updateTime: "2026-07-30 14:20", node: "专业会签", members: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王海燕", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", level: "一般", dur: "临时", stage: "pending", status: "审批中", detail: "部门审核（李主任）", applyTime: "2026-06-20 11:26", meta: "计划投用 2026-07-01", updateTime: "2026-06-21 08:40", deadline: "2026-08-01", left: -2, extended: false, node: "部门审核", members: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0046", title: "循环水加药泵冲程临时调整", level: "一般", dur: "临时", stage: "approved", status: "已批准", detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）", applyTime: "2026-07-26 10:15", meta: "批准 2026-07-30 · 待实施", updateTime: "2026-07-30 16:20", deadline: "2026-08-20", left: 17, extended: false, node: "投用准备", members: [{ name: "张工艺", done: false }] },
-  { id: "MOC-2026-R02-0047", title: "氮气吹扫流程临时调整", level: "一般", dur: "临时", stage: "approved", status: "已批准", detail: "已到期未办理恢复 / 延期 / 转永久", applyTime: "2026-07-10 10:05", meta: "批准 2026-07-12 · 待实施", updateTime: "2026-07-31 08:10", deadline: "2026-07-31", left: -3, extended: false, node: "实施执行" },
-  { id: "MOC-2026-R02-0045", title: "P-204 出口管线伴热改造", level: "一般", dur: "永久", stage: "approved", status: "已批准", detail: "因装置检修窗口调整未实施", applyTime: "2026-07-15 09:40", meta: "审批通过 2026-07-20 · 计划投用 2026-07-30", updateTime: "2026-07-20 11:00", node: "实施执行" },
-  { id: "MOC-2026-R02-0042", title: "循环水旁滤器临时绕流运行", level: "一般", dur: "临时", stage: "inuse", status: "待验收", detail: "验收材料准备中", applyTime: "2026-07-28 14:10", meta: "投用 2026-08-02 · 到期 2026-08-09", updateTime: "2026-08-02 08:30", deadline: "2026-08-09", left: 6, extended: false, node: "变更验收" },
-  { id: "MOC-2026-R02-0043", title: "空压站干燥器再生周期调整", level: "一般", dur: "永久", stage: "inuse", status: "待验收", detail: "运行数据收集中（验收周期 30 天）", applyTime: "2026-07-18 10:25", meta: "投用 2026-07-25 · 计划验收 2026-08-24", updateTime: "2026-07-25 09:12", node: "运行验证" },
-  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", level: "一般", dur: "临时", urgent: true, stage: "closing", status: "待关闭", detail: "待关闭确认（资料更新核查中）", applyTime: "2026-07-15 19:40", meta: "已投用 · 到期 2026-07-27", updateTime: "2026-07-27 09:02", deadline: "2026-07-27", left: -4, extended: false, node: "关闭确认", members: [{ name: "钱峰", done: false }] },
-]);
-const tempOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "approved" && c.dur === "临时" && (c.left ?? 0) < 0));
-const closeOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "closing" && (c.left ?? 0) < 0));
-
-interface ListType {
-    id: string;
-    title: string;
-    status: string;
-    list: any[];
-}
-const list = ref<ListType[]>([
-    {
-        id: "MOC-2026-R01-001",
-        title: '审批流转中',
-        status: 'pending',
-        list: [
-            {
-                id: "MOC-2026-R01-0001",
-                title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）',
-                level: "重要",
-                dur: "永久",
-                stage: "pending",
-                status: "审批中",
-                node: "专业会签",
-                overdue: false,//是否超期
-                near: false,//是否临期
-                extended: false,//是否延期
-                extendedCount: 0,//延期次数
-                day: 0,
-                urgent: false,
-                members: [{ name: "王仪表", done: true },{ name: "周设备", done: false },{ name: "王海燕", done: false }],
-                applyTime: "2026-07-28 09:12",
-                updateTime: "2026-07-30 14:20",
-                meta: "计划投用 2026-08-10",
-                detail: "专业会签中（周设备、王海燕待签）"
-            },
-            {
-                id: "MOC-2026-R01-0002",
-                title:'操作规程修订（夏季工况）',
-                level: "一般",
-                dur: "临时",
-                stage: "pending",
-                status: "审批中",
-                node: "部门审核",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 2,
-                urgent: false,
-                members: [{ name: "李主任", done: false }],
-                applyTime: "2026-06-20 11:26",
-                updateTime: "2026-06-21 08:40",
-                meta: "计划投用 2026-07-01",
-                deadline: "2026-08-01",
-                detail: "部门审核（李主任）"
-            },
-        ]
-    },
-    {
-        id: "MOC-2026-R01-002",
-        title: '审批通过',
-        status: 'approved',
-        list: [
-            {
-                id: "MOC-2026-R02-0001",
-                title:'循环水加药泵冲程临时调整',
-                level: "一般",
-                dur: "临时",
-                stage: "approved",
-                status: "已批准",
-                node: "投用准备",
-                overdue: false,//是否超期
-                near: false,//是否临期
-                extended: false,//是否延期
-                extendedCount: 0,//延期次数
-                day: 0,
-                urgent: false,
-                members: [{ name: "张工艺", done: false }],
-                applyTime: "2026-07-26 10:15",
-                updateTime: "2026-07-30 16:20",
-                meta: "批准 2026-07-30 · 待实施",
-                deadline: "2026-08-20",
-                detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）",
-            },
-            {
-                id: "MOC-2026-R02-0002",
-                title:'氮气吹扫流程临时调整',
-                level: "一般",
-                dur: "临时",
-                stage: "approved",
-                status: "已批准",
-                node: "实施执行",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 3,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-10 10:05",
-                updateTime: "2026-07-31 08:10",
-                meta: "批准 2026-07-12 · 待实施",
-                deadline: "2026-07-31",
-                detail: "已到期未办理恢复 / 延期 / 转永久",
-            },
-            {
-                id: "MOC-2026-R02-0003",
-                title:'P-204 出口管线伴热改造',
-                level: "一般",
-                dur: "永久",
-                stage: "approved",
-                status: "已批准",
-                node: "实施执行",
-                overdue: false,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 0,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-15 09:40",
-                updateTime: "2026-07-20 11:00",
-                meta: "审批通过 2026-07-20 · 计划投用 2026-07-30",
-                detail: "因装置检修窗口调整未实施",
-            },
-            {
-                id: "MOC-2026-R02-0004",
-                title:'循环水旁滤器临时绕流运行',
-                level: "一般",
-                dur: "临时",
-                stage: "inuse",
-                status: "待验收",
-                node: "变更验收",
-                overdue: false,
-                near: true,
-                extended: false,
-                extendedCount: 0,
-                day: 6,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-28 14:10",
-                updateTime: "2026-08-02 08:30",
-                deadline: "2026-08-09",
-                meta: "投用 2026-08-02 · 到期 2026-08-09",
-                detail: "验收材料准备中",
-            },
-            {
-                id: "MOC-2026-R02-0005",
-                title:'空压站干燥器再生周期调整',
-                level: "一般",
-                dur: "永久",
-                stage: "inuse",
-                status: "待验收",
-                node: "运行验证",
-                overdue: false,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 0,
-                urgent: false,
-                members: [],
-                applyTime: "2026-07-18 10:25",
-                updateTime: "2026-07-25 09:12",
-                meta: "投用 2026-07-25 · 计划验收 2026-08-24",
-                detail: "运行数据收集中（验收周期 30 天）",
-            },
-            {
-                id: "MOC-2026-R02-0006",
-                title:'V-102 安全阀起跳压力临时调整（紧急补办）',
-                level: "一般",
-                dur: "临时",
-                stage: "closing",
-                status: "待关闭",
-                node: "关闭确认",
-                overdue: true,
-                near: false,
-                extended: false,
-                extendedCount: 0,
-                day: 4,
-                urgent: true,
-                members: [{ name: "钱峰", done: false }],
-                applyTime: "2026-07-15 19:40",
-                updateTime: "2026-07-27 09:02",
-                deadline: "2026-07-27",
-                meta: "已投用 · 到期 2026-07-27",
-                detail: "待关闭确认（资料更新核查中）",
-            },
-        ]
-    },
-    {
-        id: "MOC-2026-R01-003",
-        title: '驳回处理',
-        status: 'reject',
-        list: [
-            {
-                id: "MOC-2026-R03-0001",
-                title: 'P-301 机封冲洗方案调整',
-                stage: "reject",
-                overdue: false,
-                rejectReason: '变更前后对比描述不完整，缺少冲洗流量核算数据（李主任 · 车间主任）',
-                updateTime: "2026-07-29",
-            },
-            {
-                id: "MOC-2026-R03-0002",
-                title: '活性炭更换周期延长（3→6 个月）',
-                stage: "reject",
-                overdue: true,
-                rejectReason: '风险分析未覆盖吸附饱和穿透情景，请补充 JSA 分析（王海燕 · 安全工程师）',
-                updateTime: "2026-07-25",
-            },
-        ]
-    },
-]);
-
-interface SubOrder {
-  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
-  parentId: string;              // 原变更单号
-  parentTitle: string;
-  kind: "extend" | "permanent";
-  applicant: string;
-  reason: string;
-  newDeadline?: string;          // 延期子单：申请延期至
-  status: "审批中" | "已通过" | "已驳回";
-  submitTime: string;
-  steps: { role: string; name: string; done: boolean }[]; // 会签：全员同意即通过
-  rejectNote?: string;
-}
-const SUB_ORDERS: SubOrder[] = [];
-const subsOf = (id: string) => SUB_ORDERS.filter((s:any) => s.parentId === id);
-const pendingSubs = computed(() => subsOf(currentRow.value?.id).filter((s:any) => s.status === "审批中"));
-interface Opt { act: any; name: string; desc: string; disabled?: boolean; note?: string }
-const convPassed = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status === "已通过"));
-const convActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status !== "已驳回"));
-const extActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "extend" && s.status === "审批中"));
-const opts = computed<Opt[]>(() => {
-  const list: Opt[] = [
-    { act: "restore", name: "申请恢复", desc: "投用后申请恢复原状：生成恢复操作票（执行类单据，随单归档，无需另行审批），现场恢复并拍照确认后纳入归档" },
-  ];
-  if (currentRow.value?.dur === "临时" && !convPassed.value) {
-    list.push(
-      { act: "extend", name: currentRow.value?.extended ? "申请延期（已延期 1 次）" : "申请延期", desc: "临时变更到期前申请延期：子单走属地 + 主管部门简化审批，通过后回写原单到期时间 · 至多延期 1 次", disabled: !!currentRow.value?.extended || extActive.value, note: extActive.value ? "延期子单审批中" : currentRow.value?.extended ? "本变更已延期 1 次，不可再次延期" : "" },
-      { act: "permanent", name: "申请转为永久", desc: "临时运行一个验证周期效果稳定后转永久：按永久变更补齐风险评估与完整审批链，通过后原临时变更自动关闭", disabled: convActive.value, note: convActive.value ? "转永久子单审批中 / 已通过" : "" },
-    );
-  }
-  list.push(
-    { act: "unimpl", name: "未实施情况说明", desc: "审批通过后变更未实施：填写情况说明（未实施原因、现场维持原状确认），知会原审批人后直接转入关闭流程" },
-    { act: "unuse", name: "未投用情况说明", desc: "变更已实施完成但未正式投用：填写情况说明（含现场状态与后续安排），知会原审批人后直接转入关闭流程" },
-  );
-  return list;
-});
-
-// 打开详情
-const openDetail = (c: MyChange,type:string = '') => {
-   if(type==='reject'){
-        window.$message?.info("演示：打开详情");
-        return;
-    }
-};
-// 打开进度
-const openProgress = (c: MyChange,type:string = '') => {
-    currentRow.value = c;
-    if(type==='reject'){
-        window.$message?.info("该任务暂无关联变更进度");
-        return;
-    }
-    progressDrawer.value = true;
-};
-// 打开撤回
-const openWithdraw = (c: MyChange) => {
-    revokeReason.value = "";
-    currentRow.value = c;
-    revokeModal.value = true;
-};
-// 打开处置申请、修改重报
-const openDisposal = (c: MyChange,type:string = '') => {
-    currentRow.value = c;
-    if(type==='reject'){
-        window.$message?.info("该任务暂无处置申请");
-        return;
-    }
-    disposalModal.value = true;
-};
-// 打开资料关闭、关闭变更
-const openClosure = (c: MyChange,type:string = '') => {
-    if(type==='reject'){
-        window.$message?.info("关闭该变更（驳回后不再推进，流程终止并归档备查）");
-        return;
-    }
-};
-// 撤回取消
-const revokeCancel = () => {
-    revokeModal.value = false;
-};
-// 撤回确认
-const revokeSave = () => {
-    if (!revokeReason.value) {
-        window.$message?.warning("请填写撤回理由");
-        return;
-    }
-    revokeSaving.value = true;
-    setTimeout(() => {
-        revokeSaving.value = false;
-        revokeModal.value = false;
-        const pendingGroup = list.value.find((item: any) => item.status === 'pending');
-        if (pendingGroup) {
-            // 过滤掉匹配 targetId 的项
-            pendingGroup.list = pendingGroup.list.filter((item:any) => item.id !== currentRow.value?.id);
-        }
-        window.$message?.success(`已撤回 ${currentRow.value?.id}，申请退回草稿箱，审批记录保留可查，修改后可重新提交`);
-    }, 1000);
-};
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 待我处理 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div 
-            class="h-100% flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
-            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-            <div v-for="t in visibleTabs" :key="t.k" @click="currentTab = t.k"
-                class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
-                :style="{ 
-                    borderRadius: themeStore.themeRadius + 'px',
-                    '--theme-color': themeStore.themeColor,
-                }"
-                :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
-                {{ t.name }}
-                <!-- 驳回处理/资料上传/临时变更超期未处理/变更超期未关闭 -->
-                <NTag v-if="t.k==='reject' || t.k==='upload' || t.k==='tempOverdue' || t.k==='closeOverdue'" size="tiny" round :type="currentTab === t.k ?'default':'error'">{{ t.count }}</NTag>
-                <NTag v-else size="tiny" round :type="currentTab === t.k ?'default':'primary'">{{ t.count }}</NTag>
-            </div>
-        </div>
-        <!-- 临时变更临期提醒 -->
-        <div 
-            class="flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 text-xs text-slate-400 mb-3"
-            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-            <Icon icon="lets-icons:clock" class="size-16px text-amber-600" />
-            临时变更临期提醒：到期前
-            <NInputNumber v-model:value="remindDays" :min="1" :max="30" size="tiny" placeholder="" :show-button="false" class="text-11px w-14 text-center" />
-            天提醒（可设置）· 超期红色、临期琥珀色标识
-            <span class="ml-auto">
-                {{ specialTab ? (currentTab === 'tempOverdue' ? `超期 ${tempOverdueList.length} 项 · 点击行内按钮办理恢复 / 延期 / 转永久` : `超期 ${closeOverdueList.length} 项 · 点击行内按钮进入关闭确认`) : `共 ${myChanges.length} 项 · 点击行内按钮办理各阶段业务` }}
-            </span>
-        </div>
-        <div class="space-y-2 scroll">
-            <div class="flex flex-col gap-3">
-                <div 
-                    class="border border-slate-200 p-4"
-                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                    v-for="item in list"
-                    :key="item.id"
-                >
-                    <div class="flex items-center gap-2">
-                        <!-- 审批流转中/已通过 -->
-                        <Icon v-if="item.status==='pending' || item.status==='approved'" icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                        <!-- 被驳回处理 -->
-                        <Icon v-if="item.status==='reject'" icon="system-uicons:reset" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                        <p class="text-13px font-700 text-#64749a">{{item.title}}</p>
-                        <!-- 审批流转中 -->
-                        <p v-if="item.status==='pending'" class="text-11px text-#94a3b8">共 {{item.list.length}} 项 · 审批流程推进中 · 可查看进度或撤回</p>
-                        <!-- 已通过 -->
-                        <p v-if="item.status==='approved'" class="text-11px text-#94a3b8">共 {{item.list.length}} 项 · 待实施 / 待验收 / 待关闭 · 处置申请与资料关闭在行内办理</p>
-                        <!-- 驳回处理 -->
-                         <p v-if="item.status==='reject'" class="text-11px text-#94a3b8">{{item.list.length}} 项待处理</p>
-                    </div>
-                    <div v-if="item.list && item.list.length" class="flex flex-col gap-3 mt-3">
-                        <div v-for="c in item.list" :key="c.id"
-                            class="flex flex-wrap items-center gap-3 border px-4 py-3"
-                            :class="c.overdue ? 'border-red-200 bg-[#FFF2F0]' : c.near ? 'border-amber-200 bg-amber-50/40' : ''"
-                            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-                        >
-                            <!-- 左区 -->
-                            <!-- 审批流转中/已通过 -->
-                            <div v-if="item.status==='pending' || item.status==='approved'" class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
-                                    <NTag v-if="c.level==='重要'" size="small" type="error">{{c.level}}</NTag>
-                                    <NTag v-if="c.level==='一般'" size="small" type="primary">{{c.level}}</NTag>
-                                    <NTag v-if="c.dur==='临时'" size="small" type="warning">{{c.dur}}</NTag>
-                                    <NTag v-if="c.dur==='永久'" size="small" type="primary">{{c.dur}}</NTag>
-                                    <NTag v-if="c.dur==='临时转永久'" size="small">{{c.dur}}</NTag>
-                                    <NTag v-if="c.urgent" size="small" type="error">紧急</NTag>
-                                    <NTag v-if="c.overdue" size="small" type="error">已超期 {{ c.day }} 天</NTag>
-                                    <NTag v-if="c.near" size="small" type="warning">临期 · 剩 {{ c.day }} 天</NTag>
-                                    <NTag v-if="c.extended" size="small">已延期 {{ c.extendedCount }} 次</NTag>
-                                    <NTag v-if="c.status==='审批中'" size="small" type="warning">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='已批准'" size="small" type="primary">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='待验收'" size="small" type="success">{{c.status}}</NTag>
-                                    <NTag v-if="c.status==='待关闭'" size="small" type="error">{{c.status}}</NTag>
-                                </div>
-                                <div class="mt-1 flex flex-wrap items-baseline gap-x-2">
-                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
-                                    <span v-if="c.applyTime" class="text-[11px] text-slate-400">申请 {{ c.applyTime }}</span>
-                                </div>
-                                <div v-if="c.stage === 'closing'" class="mt-0.5 text-[11px] text-slate-400">{{ c.meta }}</div>
-                                <!-- 当前节点与会签成员进度；状态更新时间跟在审核人员名字后面 -->
-                                <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
-                                    <span class="text-slate-400">当前节点</span>
-                                    <span class="font-medium text-slate-600">{{ c.node ?? c.status }}</span>
-                                    <div v-if="c.members && c.members.length" class="flex items-center gap-1">
-                                        <div v-for="(m, mi) in c.members" :key="mi">
-                                            <NTag v-if="m.done" size="small" type="success">
-                                                <div class="flex items-center">
-                                                    <Icon icon="ix:success" />{{ m.name }}
-                                                </div>
-                                            </NTag>
-                                            <NTag v-else size="small" type="warning">
-                                                <div class="flex items-center">
-                                                    <Icon icon="tabler:clock" />{{ m.name }}
-                                                </div>
-                                            </NTag>
-                                        </div>
-                                    </div>
-                                    <span v-else class="text-slate-400">{{ c.detail }}</span>
-                                    <span v-if="c.updateTime" class="text-slate-400">状态更新 {{ c.updateTime }}</span>
-                                </div>
-                            </div>
-                            <!-- 驳回处理 -->
-                            <NTag v-if="item.status==='reject'" size="small" type="error">
-                                <div class="flex items-center">
-                                    <Icon icon="system-uicons:reset" />驳回处理
-                                </div>
-                            </NTag>
-                            <div v-if="item.status==='reject'" class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
-                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
-                                </div>
-                                <p class="px-2 py-1 text-xs border border-red-100 bg-red-50/60 px-2 py-1 text-red-600 rounded-md mt-1">
-                                    驳回原因：{{ c.rejectReason }}
-                                </p>
-                                <span v-if="c.updateTime" class="text-11px text-slate-400">驳回于 {{ c.updateTime }}</span>
-                            </div>
-                            <!-- 右区 -->
-                            <!-- 审批流转中 -->
-                            <div v-if="c.stage === 'pending'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
-                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
-                                <NButton class="text-xs" text type="error" @click="openWithdraw(c)">撤回</NButton>
-                            </div>
-                            <!-- 审批通过、待验收、待关闭 -->
-                            <div v-if="c.stage === 'approved' || c.stage === 'inuse' || c.stage === 'closing'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
-                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
-                                <NButton class="text-xs" text type="primary" @click="openDisposal(c)">处置申请</NButton>
-                                <NButton class="text-xs" text type="error" @click="openClosure(c)">资料关闭</NButton>
-                            </div>
-                            <!-- 驳回处理 -->
-                             <div v-if="c.stage === 'reject'" class="flex gap-1.5">
-                                <NButton class="text-xs" text type="primary" @click="openDetail(c,'reject')">详情</NButton>
-                                <NButton class="text-xs" text type="warning" @click="openProgress(c,'reject')">进度</NButton>
-                                <NButton class="text-xs" text type="primary" @click="openDisposal(c,'reject')">修改重报</NButton>
-                                <NButton class="text-xs" text type="error" @click="openClosure(c,'reject')">关闭变更</NButton>
-                            </div>
-                        </div>
-                    </div>
-                    
-                </div>
-            </div>
-        </div>
-        <!-- 进度弹框 -->
-        <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
-            <NDrawerContent title="变更进度">
-                <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
-                    <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
-                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
-                        <span class="font-mono">{{ currentRow?.id }}</span>
-                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow.status}}</NTag>
-                        <span v-if="currentRow?.overdue" class="font-medium text-red-500">超期 {{ currentRow?.day }} 天</span>
-                    </div>
-                    <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
-                    <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
-                </div>
-                <div class="mt-4">
-                    <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
-                        <div class="flex flex-col items-center">
-                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
-                                :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
-                                <Icon v-if="i < curIdx || closed" icon="ix:success" />
-                                <Icon v-else-if="i === curIdx" icon="tabler:clock" />
-                                <span v-else class="text-[10px]">{{ i + 1 }}</span>
-                            </span>
-                            <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
-                        </div>
-                        <div class="pb-5">
-                            <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
-                                {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
-                            </div>
-                            <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
-                            <div v-if="i === curIdx && !closed && (currentRow?.detail || currentRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
-                                {{ [currentRow?.detail, currentRow?.updateTime ? `更新 ${currentRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-if="currentRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
-                    临时变更：计划恢复 {{ currentRow?.deadline ?? '—' }}{{ currentRow?.extended ? ` · 延期后恢复 ${currentRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
-                </div>
-            </NDrawerContent>
-        </NDrawer>
-        <!-- 撤回弹框 -->
-        <NModal
-            v-model:show="revokeModal"
-            preset="card"
-            :auto-focus="false"
-            :style="{ width: '450px', height: 'auto' }"
-            :segmented="{ content: true, footer: true }"
-        >
-            <template #header>
-                <h3 class="text-sm font-bold text-slate-800">撤回变更申请</h3>
-            </template>
-            <template #default>
-                <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
-                    变更编号 {{ currentRow?.id }}：撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交，重新提交按新申请计。
-                </div>
-                <NInput
-                    class="mt-3"
-                    v-model:value="revokeReason"
-                    type="textarea"
-                    :rows="3"
-                    placeholder="撤回理由（必填）：如补充材料、变更范围调整、需重新组织风险分析…"
-                />
-            </template>
-            <template #footer>
-                <div class="flex justify-end gap-[10px]">
-                    <NButton size="small" @click="revokeCancel">取消</NButton>
-                    <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">保存</NButton>
-                </div>
-            </template>
-        </NModal>
-        <!-- 处置申请弹框 -->
-        <NModal
-            v-model:show="disposalModal"
-            preset="card"
-            :auto-focus="false"
-            :style="{ width: '670px', height: 'auto' }"
-            :segmented="{ content: true, footer: false }"
-        >
-            <template #header>
-                <div class="flex items-center gap-2 flex-wrap">
-                    <h3 class="text-base font-semibold text-slate-800">处置申请 · {{ currentRow?.title }}</h3>
-                    <span class="shrink-0 border-slate-200 bg-slate-100 font-mono text-xs text-slate-600 px-1.5 py-0.5 border rounded-md">编号：{{ currentRow?.id }}</span>
-                </div>
-            </template>
-            <template #default>
-                <div class="rounded-lg border bg-white px-4 py-3">
-                    <div class="flex flex-wrap items-center gap-2">
-                        <NTag v-if="currentRow?.level=== '重要'" type="error" size="small">{{ currentRow?.level }}</NTag>
-                        <NTag v-else type="primary" size="small">{{ currentRow?.level }}</NTag>
-                        <NTag v-if="currentRow?.dur=== '临时'" type="warning" size="small">{{ currentRow?.dur }}</NTag>
-                        <NTag v-else type="primary" size="small">{{ currentRow?.dur }}</NTag>
-                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='实施中'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待PSSR'" size="small" type="warning">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow?.status}}</NTag>
-                        <NTag v-if="currentRow?.status==='已关闭'" size="small" type="primary">{{currentRow?.status}}</NTag>
-                        <span v-if="currentRow?.applyTime" class="text-[11px] text-slate-400">申请 {{ currentRow?.applyTime }}</span>
-                        <span v-if="currentRow?.dur === '临时' && currentRow?.deadline" class="text-[11px] text-amber-600">
-                            到期 {{ currentRow?.deadline }}{{ (currentRow?.day ?? 0) < 0 ? ` · 已超期 ${-(currentRow?.day ?? 0)} 天` : currentRow?.day !== undefined ? ` · 剩 ${currentRow?.day} 天` : '' }}
-                        </span>
-                    </div>
-                    <div class="mt-1 text-[11px] text-slate-400">{{ currentRow?.detail }}</div>
-                </div>
-                <!-- 进行中的子单提示 -->
-                <div v-if="pendingSubs.length" class="rounded-lg border border-amber-200 bg-amber-50/60 px-4 py-2.5 text-xs text-amber-700">
-                已有子单在审批中：{{ pendingSubs.map((s:any) => s.id).join('、') }} · 审批进度见「待我处理」列表行内展示
-                </div>
-                <!-- 处置选项 -->
-                <div class="rounded-lg border bg-white mt-3">
-                    <div class="border-b px-4 py-2.5 text-sm font-bold text-slate-800">
-                        选择处置方式
-                        <span class="ml-2 text-[11px] font-normal text-slate-400">申请恢复所有变更可发起；申请延期 / 申请转为永久仅临时变更可用</span>
-                    </div>
-                    <div class="divide-y">
-                        <div v-for="o in opts" :key="o.act" class="flex flex-wrap items-center gap-3 px-4 py-3.5">
-                            <div class="min-w-0 flex-1">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="text-sm font-semibold text-slate-800">{{ o.name }}</span>
-                                    <NTag v-if="o.note" type="warning" size="small">{{ o.note }}</NTag>
-                                </div>
-                                <div class="mt-0.5 text-[11px] leading-4 text-slate-400">{{ o.desc }}</div>
-                            </div>
-                            <NButton size="small" type="primary" :disabled="o.disabled">
-                                发起<Icon icon="formkit:right" class="size-12px text-white ml-1" />
-                            </NButton>
-                        </div>
-                    </div>
-                </div>
-                
-            </template>
-        </NModal>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 260px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const emit = defineEmits<{ go: [v: string, preset?: string];}>();
+interface MyChange {
+    id: string;title: string;status: string;detail: string;applyTime: string;updateTime: string;
+    level: "重要" | "一般"; dur: "永久" | "临时"; urgent?: boolean;deadline?: string;
+    stage: string; meta: string; left?: number; extended?: boolean;
+    node?: string; members?: { name: string; done: boolean }[];
+}
+
+const currentRow = ref<any>(null);
+const progressDrawer = ref<boolean>(false);
+const revokeModal = ref<boolean>(false);
+const revokeSaving = ref<boolean>(false);
+const revokeReason = ref<string>("");
+const disposalModal = ref<boolean>(false);
+
+const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
+const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[currentRow.value?.status ?? ""] ?? 1);
+const closed = computed(() => currentRow.value?.status === "已关闭");
+const timeOf = (i: number) => (i === 0 ? currentRow.value?.applyTime : i === 3 ? currentRow.value?.actualUse : i === 5 ? currentRow.value?.closeTime : undefined);
+
+const role = ref<string>("applicant");
+const currentTab = ref<string>("all");
+const visibleTabs = ref<{ k: string; name: string; count: number }[]>([
+  { k: "all", name: "全部", count: 10 },
+  { k: "approval", name: "待我审批", count: 1 },
+  { k: "apply", name: "我的申请", count: 8 },
+  { k: "tempOverdue", name: "临时变更超期未处理", count: 1 },
+  { k: "closeOverdue", name: "变更超期未关闭", count: 1 },
+  { k: "reject", name: "驳回处理", count: 2 },
+  { k: "accept", name: "参与验收", count: 3 },
+  { k: "upload", name: "资料上传", count: 2 },
+]);
+const remindDays = ref<number>(7);
+const specialTab = computed(() => currentTab.value === "tempOverdue" || currentTab.value === "closeOverdue");
+const myChanges = ref<MyChange[]>([
+  { id: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", level: "重要", dur: "永久", stage: "pending", status: "审批中", detail: "专业会签中（周设备、王海燕待签）", applyTime: "2026-07-28 09:12", meta: "计划投用 2026-08-10", updateTime: "2026-07-30 14:20", node: "专业会签", members: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王海燕", done: false }] },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", level: "一般", dur: "临时", stage: "pending", status: "审批中", detail: "部门审核（李主任）", applyTime: "2026-06-20 11:26", meta: "计划投用 2026-07-01", updateTime: "2026-06-21 08:40", deadline: "2026-08-01", left: -2, extended: false, node: "部门审核", members: [{ name: "李主任", done: false }] },
+  { id: "MOC-2026-R02-0046", title: "循环水加药泵冲程临时调整", level: "一般", dur: "临时", stage: "approved", status: "已批准", detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）", applyTime: "2026-07-26 10:15", meta: "批准 2026-07-30 · 待实施", updateTime: "2026-07-30 16:20", deadline: "2026-08-20", left: 17, extended: false, node: "投用准备", members: [{ name: "张工艺", done: false }] },
+  { id: "MOC-2026-R02-0047", title: "氮气吹扫流程临时调整", level: "一般", dur: "临时", stage: "approved", status: "已批准", detail: "已到期未办理恢复 / 延期 / 转永久", applyTime: "2026-07-10 10:05", meta: "批准 2026-07-12 · 待实施", updateTime: "2026-07-31 08:10", deadline: "2026-07-31", left: -3, extended: false, node: "实施执行" },
+  { id: "MOC-2026-R02-0045", title: "P-204 出口管线伴热改造", level: "一般", dur: "永久", stage: "approved", status: "已批准", detail: "因装置检修窗口调整未实施", applyTime: "2026-07-15 09:40", meta: "审批通过 2026-07-20 · 计划投用 2026-07-30", updateTime: "2026-07-20 11:00", node: "实施执行" },
+  { id: "MOC-2026-R02-0042", title: "循环水旁滤器临时绕流运行", level: "一般", dur: "临时", stage: "inuse", status: "待验收", detail: "验收材料准备中", applyTime: "2026-07-28 14:10", meta: "投用 2026-08-02 · 到期 2026-08-09", updateTime: "2026-08-02 08:30", deadline: "2026-08-09", left: 6, extended: false, node: "变更验收" },
+  { id: "MOC-2026-R02-0043", title: "空压站干燥器再生周期调整", level: "一般", dur: "永久", stage: "inuse", status: "待验收", detail: "运行数据收集中（验收周期 30 天）", applyTime: "2026-07-18 10:25", meta: "投用 2026-07-25 · 计划验收 2026-08-24", updateTime: "2026-07-25 09:12", node: "运行验证" },
+  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", level: "一般", dur: "临时", urgent: true, stage: "closing", status: "待关闭", detail: "待关闭确认（资料更新核查中）", applyTime: "2026-07-15 19:40", meta: "已投用 · 到期 2026-07-27", updateTime: "2026-07-27 09:02", deadline: "2026-07-27", left: -4, extended: false, node: "关闭确认", members: [{ name: "钱峰", done: false }] },
+]);
+const tempOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "approved" && c.dur === "临时" && (c.left ?? 0) < 0));
+const closeOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "closing" && (c.left ?? 0) < 0));
+
+interface ListType {
+    id: string;
+    title: string;
+    status: string;
+    list: any[];
+}
+const list = ref<ListType[]>([
+    {
+        id: "MOC-2026-R01-001",
+        title: '审批流转中',
+        status: 'pending',
+        list: [
+            {
+                id: "MOC-2026-R01-0001",
+                title:'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）',
+                level: "重要",
+                dur: "永久",
+                stage: "pending",
+                status: "审批中",
+                node: "专业会签",
+                overdue: false,//是否超期
+                near: false,//是否临期
+                extended: false,//是否延期
+                extendedCount: 0,//延期次数
+                day: 0,
+                urgent: false,
+                members: [{ name: "王仪表", done: true },{ name: "周设备", done: false },{ name: "王海燕", done: false }],
+                applyTime: "2026-07-28 09:12",
+                updateTime: "2026-07-30 14:20",
+                meta: "计划投用 2026-08-10",
+                detail: "专业会签中（周设备、王海燕待签）"
+            },
+            {
+                id: "MOC-2026-R01-0002",
+                title:'操作规程修订（夏季工况）',
+                level: "一般",
+                dur: "临时",
+                stage: "pending",
+                status: "审批中",
+                node: "部门审核",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 2,
+                urgent: false,
+                members: [{ name: "李主任", done: false }],
+                applyTime: "2026-06-20 11:26",
+                updateTime: "2026-06-21 08:40",
+                meta: "计划投用 2026-07-01",
+                deadline: "2026-08-01",
+                detail: "部门审核（李主任）"
+            },
+        ]
+    },
+    {
+        id: "MOC-2026-R01-002",
+        title: '审批通过',
+        status: 'approved',
+        list: [
+            {
+                id: "MOC-2026-R02-0001",
+                title:'循环水加药泵冲程临时调整',
+                level: "一般",
+                dur: "临时",
+                stage: "approved",
+                status: "已批准",
+                node: "投用准备",
+                overdue: false,//是否超期
+                near: false,//是否临期
+                extended: false,//是否延期
+                extendedCount: 0,//延期次数
+                day: 0,
+                urgent: false,
+                members: [{ name: "张工艺", done: false }],
+                applyTime: "2026-07-26 10:15",
+                updateTime: "2026-07-30 16:20",
+                meta: "批准 2026-07-30 · 待实施",
+                deadline: "2026-08-20",
+                detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）",
+            },
+            {
+                id: "MOC-2026-R02-0002",
+                title:'氮气吹扫流程临时调整',
+                level: "一般",
+                dur: "临时",
+                stage: "approved",
+                status: "已批准",
+                node: "实施执行",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 3,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-10 10:05",
+                updateTime: "2026-07-31 08:10",
+                meta: "批准 2026-07-12 · 待实施",
+                deadline: "2026-07-31",
+                detail: "已到期未办理恢复 / 延期 / 转永久",
+            },
+            {
+                id: "MOC-2026-R02-0003",
+                title:'P-204 出口管线伴热改造',
+                level: "一般",
+                dur: "永久",
+                stage: "approved",
+                status: "已批准",
+                node: "实施执行",
+                overdue: false,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 0,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-15 09:40",
+                updateTime: "2026-07-20 11:00",
+                meta: "审批通过 2026-07-20 · 计划投用 2026-07-30",
+                detail: "因装置检修窗口调整未实施",
+            },
+            {
+                id: "MOC-2026-R02-0004",
+                title:'循环水旁滤器临时绕流运行',
+                level: "一般",
+                dur: "临时",
+                stage: "inuse",
+                status: "待验收",
+                node: "变更验收",
+                overdue: false,
+                near: true,
+                extended: false,
+                extendedCount: 0,
+                day: 6,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-28 14:10",
+                updateTime: "2026-08-02 08:30",
+                deadline: "2026-08-09",
+                meta: "投用 2026-08-02 · 到期 2026-08-09",
+                detail: "验收材料准备中",
+            },
+            {
+                id: "MOC-2026-R02-0005",
+                title:'空压站干燥器再生周期调整',
+                level: "一般",
+                dur: "永久",
+                stage: "inuse",
+                status: "待验收",
+                node: "运行验证",
+                overdue: false,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 0,
+                urgent: false,
+                members: [],
+                applyTime: "2026-07-18 10:25",
+                updateTime: "2026-07-25 09:12",
+                meta: "投用 2026-07-25 · 计划验收 2026-08-24",
+                detail: "运行数据收集中（验收周期 30 天）",
+            },
+            {
+                id: "MOC-2026-R02-0006",
+                title:'V-102 安全阀起跳压力临时调整（紧急补办）',
+                level: "一般",
+                dur: "临时",
+                stage: "closing",
+                status: "待关闭",
+                node: "关闭确认",
+                overdue: true,
+                near: false,
+                extended: false,
+                extendedCount: 0,
+                day: 4,
+                urgent: true,
+                members: [{ name: "钱峰", done: false }],
+                applyTime: "2026-07-15 19:40",
+                updateTime: "2026-07-27 09:02",
+                deadline: "2026-07-27",
+                meta: "已投用 · 到期 2026-07-27",
+                detail: "待关闭确认（资料更新核查中）",
+            },
+        ]
+    },
+    {
+        id: "MOC-2026-R01-003",
+        title: '驳回处理',
+        status: 'reject',
+        list: [
+            {
+                id: "MOC-2026-R03-0001",
+                title: 'P-301 机封冲洗方案调整',
+                stage: "reject",
+                overdue: false,
+                rejectReason: '变更前后对比描述不完整，缺少冲洗流量核算数据（李主任 · 车间主任）',
+                updateTime: "2026-07-29",
+            },
+            {
+                id: "MOC-2026-R03-0002",
+                title: '活性炭更换周期延长（3→6 个月）',
+                stage: "reject",
+                overdue: true,
+                rejectReason: '风险分析未覆盖吸附饱和穿透情景，请补充 JSA 分析（王海燕 · 安全工程师）',
+                updateTime: "2026-07-25",
+            },
+        ]
+    },
+]);
+
+interface SubOrder {
+  id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
+  parentId: string;              // 原变更单号
+  parentTitle: string;
+  kind: "extend" | "permanent";
+  applicant: string;
+  reason: string;
+  newDeadline?: string;          // 延期子单：申请延期至
+  status: "审批中" | "已通过" | "已驳回";
+  submitTime: string;
+  steps: { role: string; name: string; done: boolean }[]; // 会签：全员同意即通过
+  rejectNote?: string;
+}
+const SUB_ORDERS: SubOrder[] = [];
+const subsOf = (id: string) => SUB_ORDERS.filter((s:any) => s.parentId === id);
+const pendingSubs = computed(() => subsOf(currentRow.value?.id).filter((s:any) => s.status === "审批中"));
+interface Opt { act: any; name: string; desc: string; disabled?: boolean; note?: string }
+const convPassed = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status === "已通过"));
+const convActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "permanent" && s.status !== "已驳回"));
+const extActive = computed(() => subsOf(currentRow.value?.id).some((s) => s.kind === "extend" && s.status === "审批中"));
+const opts = computed<Opt[]>(() => {
+  const list: Opt[] = [
+    { act: "restore", name: "申请恢复", desc: "投用后申请恢复原状：生成恢复操作票（执行类单据，随单归档，无需另行审批），现场恢复并拍照确认后纳入归档" },
+  ];
+  if (currentRow.value?.dur === "临时" && !convPassed.value) {
+    list.push(
+      { act: "extend", name: currentRow.value?.extended ? "申请延期（已延期 1 次）" : "申请延期", desc: "临时变更到期前申请延期：子单走属地 + 主管部门简化审批，通过后回写原单到期时间 · 至多延期 1 次", disabled: !!currentRow.value?.extended || extActive.value, note: extActive.value ? "延期子单审批中" : currentRow.value?.extended ? "本变更已延期 1 次，不可再次延期" : "" },
+      { act: "permanent", name: "申请转为永久", desc: "临时运行一个验证周期效果稳定后转永久：按永久变更补齐风险评估与完整审批链，通过后原临时变更自动关闭", disabled: convActive.value, note: convActive.value ? "转永久子单审批中 / 已通过" : "" },
+    );
+  }
+  list.push(
+    { act: "unimpl", name: "未实施情况说明", desc: "审批通过后变更未实施：填写情况说明（未实施原因、现场维持原状确认），知会原审批人后直接转入关闭流程" },
+    { act: "unuse", name: "未投用情况说明", desc: "变更已实施完成但未正式投用：填写情况说明（含现场状态与后续安排），知会原审批人后直接转入关闭流程" },
+  );
+  return list;
+});
+
+// 打开详情
+const openDetail = (c: MyChange,type:string = '') => {
+   if(type==='reject'){
+        window.$message?.info("演示：打开详情");
+        return;
+    }
+};
+// 打开进度
+const openProgress = (c: MyChange,type:string = '') => {
+    currentRow.value = c;
+    if(type==='reject'){
+        window.$message?.info("该任务暂无关联变更进度");
+        return;
+    }
+    progressDrawer.value = true;
+};
+// 打开撤回
+const openWithdraw = (c: MyChange) => {
+    revokeReason.value = "";
+    currentRow.value = c;
+    revokeModal.value = true;
+};
+// 打开处置申请、修改重报
+const openDisposal = (c: MyChange,type:string = '') => {
+    currentRow.value = c;
+    if(type==='reject'){
+        window.$message?.info("该任务暂无处置申请");
+        return;
+    }
+    disposalModal.value = true;
+};
+// 打开资料关闭、关闭变更
+const openClosure = (c: MyChange,type:string = '') => {
+    if(type==='reject'){
+        window.$message?.info("关闭该变更（驳回后不再推进，流程终止并归档备查）");
+        return;
+    }
+};
+// 撤回取消
+const revokeCancel = () => {
+    revokeModal.value = false;
+};
+// 撤回确认
+const revokeSave = () => {
+    if (!revokeReason.value) {
+        window.$message?.warning("请填写撤回理由");
+        return;
+    }
+    revokeSaving.value = true;
+    setTimeout(() => {
+        revokeSaving.value = false;
+        revokeModal.value = false;
+        const pendingGroup = list.value.find((item: any) => item.status === 'pending');
+        if (pendingGroup) {
+            // 过滤掉匹配 targetId 的项
+            pendingGroup.list = pendingGroup.list.filter((item:any) => item.id !== currentRow.value?.id);
+        }
+        window.$message?.success(`已撤回 ${currentRow.value?.id}，申请退回草稿箱，审批记录保留可查，修改后可重新提交`);
+    }, 1000);
+};
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 待我处理 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div 
+            class="h-100% flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
+            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+            <div v-for="t in visibleTabs" :key="t.k" @click="currentTab = t.k"
+                class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
+                :style="{ 
+                    borderRadius: themeStore.themeRadius + 'px',
+                    '--theme-color': themeStore.themeColor,
+                }"
+                :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                {{ t.name }}
+                <!-- 驳回处理/资料上传/临时变更超期未处理/变更超期未关闭 -->
+                <NTag v-if="t.k==='reject' || t.k==='upload' || t.k==='tempOverdue' || t.k==='closeOverdue'" size="tiny" round :type="currentTab === t.k ?'default':'error'">{{ t.count }}</NTag>
+                <NTag v-else size="tiny" round :type="currentTab === t.k ?'default':'primary'">{{ t.count }}</NTag>
+            </div>
+        </div>
+        <!-- 临时变更临期提醒 -->
+        <div 
+            class="flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 text-xs text-slate-400 mb-3"
+            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+            <Icon icon="lets-icons:clock" class="size-16px text-amber-600" />
+            临时变更临期提醒：到期前
+            <NInputNumber v-model:value="remindDays" :min="1" :max="30" size="tiny" placeholder="" :show-button="false" class="text-11px w-14 text-center" />
+            天提醒（可设置）· 超期红色、临期琥珀色标识
+            <span class="ml-auto">
+                {{ specialTab ? (currentTab === 'tempOverdue' ? `超期 ${tempOverdueList.length} 项 · 点击行内按钮办理恢复 / 延期 / 转永久` : `超期 ${closeOverdueList.length} 项 · 点击行内按钮进入关闭确认`) : `共 ${myChanges.length} 项 · 点击行内按钮办理各阶段业务` }}
+            </span>
+        </div>
+        <div class="space-y-2 scroll">
+            <div class="flex flex-col gap-3">
+                <div 
+                    class="border border-slate-200 p-4"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                    v-for="item in list"
+                    :key="item.id"
+                >
+                    <div class="flex items-center gap-2">
+                        <!-- 审批流转中/已通过 -->
+                        <Icon v-if="item.status==='pending' || item.status==='approved'" icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                        <!-- 被驳回处理 -->
+                        <Icon v-if="item.status==='reject'" icon="system-uicons:reset" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                        <p class="text-13px font-700 text-#64749a">{{item.title}}</p>
+                        <!-- 审批流转中 -->
+                        <p v-if="item.status==='pending'" class="text-11px text-#94a3b8">共 {{item.list.length}} 项 · 审批流程推进中 · 可查看进度或撤回</p>
+                        <!-- 已通过 -->
+                        <p v-if="item.status==='approved'" class="text-11px text-#94a3b8">共 {{item.list.length}} 项 · 待实施 / 待验收 / 待关闭 · 处置申请与资料关闭在行内办理</p>
+                        <!-- 驳回处理 -->
+                         <p v-if="item.status==='reject'" class="text-11px text-#94a3b8">{{item.list.length}} 项待处理</p>
+                    </div>
+                    <div v-if="item.list && item.list.length" class="flex flex-col gap-3 mt-3">
+                        <div v-for="c in item.list" :key="c.id"
+                            class="flex flex-wrap items-center gap-3 border px-4 py-3"
+                            :class="c.overdue ? 'border-red-200 bg-[#FFF2F0]' : c.near ? 'border-amber-200 bg-amber-50/40' : ''"
+                            :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                        >
+                            <!-- 左区 -->
+                            <!-- 审批流转中/已通过 -->
+                            <div v-if="item.status==='pending' || item.status==='approved'" class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
+                                    <NTag v-if="c.level==='重要'" size="small" type="error">{{c.level}}</NTag>
+                                    <NTag v-if="c.level==='一般'" size="small" type="primary">{{c.level}}</NTag>
+                                    <NTag v-if="c.dur==='临时'" size="small" type="warning">{{c.dur}}</NTag>
+                                    <NTag v-if="c.dur==='永久'" size="small" type="primary">{{c.dur}}</NTag>
+                                    <NTag v-if="c.dur==='临时转永久'" size="small">{{c.dur}}</NTag>
+                                    <NTag v-if="c.urgent" size="small" type="error">紧急</NTag>
+                                    <NTag v-if="c.overdue" size="small" type="error">已超期 {{ c.day }} 天</NTag>
+                                    <NTag v-if="c.near" size="small" type="warning">临期 · 剩 {{ c.day }} 天</NTag>
+                                    <NTag v-if="c.extended" size="small">已延期 {{ c.extendedCount }} 次</NTag>
+                                    <NTag v-if="c.status==='审批中'" size="small" type="warning">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='已批准'" size="small" type="primary">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='待验收'" size="small" type="success">{{c.status}}</NTag>
+                                    <NTag v-if="c.status==='待关闭'" size="small" type="error">{{c.status}}</NTag>
+                                </div>
+                                <div class="mt-1 flex flex-wrap items-baseline gap-x-2">
+                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
+                                    <span v-if="c.applyTime" class="text-[11px] text-slate-400">申请 {{ c.applyTime }}</span>
+                                </div>
+                                <div v-if="c.stage === 'closing'" class="mt-0.5 text-[11px] text-slate-400">{{ c.meta }}</div>
+                                <!-- 当前节点与会签成员进度；状态更新时间跟在审核人员名字后面 -->
+                                <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
+                                    <span class="text-slate-400">当前节点</span>
+                                    <span class="font-medium text-slate-600">{{ c.node ?? c.status }}</span>
+                                    <div v-if="c.members && c.members.length" class="flex items-center gap-1">
+                                        <div v-for="(m, mi) in c.members" :key="mi">
+                                            <NTag v-if="m.done" size="small" type="success">
+                                                <div class="flex items-center">
+                                                    <Icon icon="ix:success" />{{ m.name }}
+                                                </div>
+                                            </NTag>
+                                            <NTag v-else size="small" type="warning">
+                                                <div class="flex items-center">
+                                                    <Icon icon="tabler:clock" />{{ m.name }}
+                                                </div>
+                                            </NTag>
+                                        </div>
+                                    </div>
+                                    <span v-else class="text-slate-400">{{ c.detail }}</span>
+                                    <span v-if="c.updateTime" class="text-slate-400">状态更新 {{ c.updateTime }}</span>
+                                </div>
+                            </div>
+                            <!-- 驳回处理 -->
+                            <NTag v-if="item.status==='reject'" size="small" type="error">
+                                <div class="flex items-center">
+                                    <Icon icon="system-uicons:reset" />驳回处理
+                                </div>
+                            </NTag>
+                            <div v-if="item.status==='reject'" class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-medium text-slate-800">{{ c.title }}</span>
+                                    <span class="font-mono text-[11px] text-slate-400">{{ c.id }}</span>
+                                </div>
+                                <p class="px-2 py-1 text-xs border border-red-100 bg-red-50/60 px-2 py-1 text-red-600 rounded-md mt-1">
+                                    驳回原因：{{ c.rejectReason }}
+                                </p>
+                                <span v-if="c.updateTime" class="text-11px text-slate-400">驳回于 {{ c.updateTime }}</span>
+                            </div>
+                            <!-- 右区 -->
+                            <!-- 审批流转中 -->
+                            <div v-if="c.stage === 'pending'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
+                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
+                                <NButton class="text-xs" text type="error" @click="openWithdraw(c)">撤回</NButton>
+                            </div>
+                            <!-- 审批通过、待验收、待关闭 -->
+                            <div v-if="c.stage === 'approved' || c.stage === 'inuse' || c.stage === 'closing'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c)">详情</NButton>
+                                <NButton class="text-xs" text type="warning" @click="openProgress(c)">进度</NButton>
+                                <NButton class="text-xs" text type="primary" @click="openDisposal(c)">处置申请</NButton>
+                                <NButton class="text-xs" text type="error" @click="openClosure(c)">资料关闭</NButton>
+                            </div>
+                            <!-- 驳回处理 -->
+                             <div v-if="c.stage === 'reject'" class="flex gap-1.5">
+                                <NButton class="text-xs" text type="primary" @click="openDetail(c,'reject')">详情</NButton>
+                                <NButton class="text-xs" text type="warning" @click="openProgress(c,'reject')">进度</NButton>
+                                <NButton class="text-xs" text type="primary" @click="openDisposal(c,'reject')">修改重报</NButton>
+                                <NButton class="text-xs" text type="error" @click="openClosure(c,'reject')">关闭变更</NButton>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        <!-- 进度弹框 -->
+        <NDrawer v-model:show="progressDrawer" :width="502" placement="right">
+            <NDrawerContent title="变更进度">
+                <div class="rounded-lg border bg-slate-50/60 px-3 py-2.5">
+                    <div class="text-sm font-semibold text-slate-800">{{ currentRow?.title }}</div>
+                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-400">
+                        <span class="font-mono">{{ currentRow?.id }}</span>
+                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow.status}}</NTag>
+                        <span v-if="currentRow?.overdue" class="font-medium text-red-500">超期 {{ currentRow?.day }} 天</span>
+                    </div>
+                    <div v-if="currentRow?.dept || currentRow?.applicant" class="mt-1 text-[11px] text-slate-400">{{ [currentRow?.dept, currentRow?.applicant].filter(Boolean).join(' · ') }}</div>
+                    <div v-if="currentRow?.meta" class="mt-1 text-[11px] text-slate-400">{{ currentRow?.meta }}</div>
+                </div>
+                <div class="mt-4">
+                    <div v-for="(s, i) in stages" :key="s" class="flex gap-3">
+                        <div class="flex flex-col items-center">
+                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2"
+                                :class="i < curIdx || closed ? 'border-[#7CC242] bg-[#7CC242] text-white' : i === curIdx && !closed ? 'border-[#1D4E9C] bg-[#1D4E9C] text-white' : 'border-slate-200 bg-white text-slate-300'">
+                                <Icon v-if="i < curIdx || closed" icon="ix:success" />
+                                <Icon v-else-if="i === curIdx" icon="tabler:clock" />
+                                <span v-else class="text-[10px]">{{ i + 1 }}</span>
+                            </span>
+                            <span v-if="i < stages.length - 1" class="w-0.5 flex-1" :class="i < curIdx ? 'bg-[#7CC242]' : 'bg-slate-200'" />
+                        </div>
+                        <div class="pb-5">
+                            <div class="text-sm" :class="i === curIdx && !closed ? 'font-semibold text-[#1D4E9C]' : i < curIdx || closed ? 'font-medium text-slate-700' : 'text-slate-400'">
+                                {{ s }}{{ i === curIdx && !closed ? '（当前）' : '' }}
+                            </div>
+                            <div v-if="timeOf(i)" class="mt-0.5 text-[11px] text-slate-400">{{ timeOf(i) }}</div>
+                            <div v-if="i === curIdx && !closed && (currentRow?.detail || currentRow?.updateTime)" class="mt-0.5 text-[11px] text-slate-400">
+                                {{ [currentRow?.detail, currentRow?.updateTime ? `更新 ${currentRow?.updateTime}` : ''].filter(Boolean).join(' · ') }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="currentRow?.dur === '临时'" class="rounded-lg border border-amber-200 bg-amber-50/50 px-3 py-2 text-[11px] leading-5 text-amber-700">
+                    临时变更：计划恢复 {{ currentRow?.deadline ?? '—' }}{{ currentRow?.extended ? ` · 延期后恢复 ${currentRow?.deadline}` : '' }} · 恢复 / 延期 / 转永久请在详情页中操作
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- 撤回弹框 -->
+        <NModal
+            v-model:show="revokeModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '450px', height: 'auto' }"
+            :segmented="{ content: true, footer: true }"
+        >
+            <template #header>
+                <h3 class="text-sm font-bold text-slate-800">撤回变更申请</h3>
+            </template>
+            <template #default>
+                <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-500">
+                    变更编号 {{ currentRow?.id }}：撤回后申请退回草稿状态，已产生的审批记录保留可查；修改内容后可重新提交，重新提交按新申请计。
+                </div>
+                <NInput
+                    class="mt-3"
+                    v-model:value="revokeReason"
+                    type="textarea"
+                    :rows="3"
+                    placeholder="撤回理由（必填）：如补充材料、变更范围调整、需重新组织风险分析…"
+                />
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-[10px]">
+                    <NButton size="small" @click="revokeCancel">取消</NButton>
+                    <NButton size="small" type="primary" :loading="revokeSaving" @click="revokeSave">保存</NButton>
+                </div>
+            </template>
+        </NModal>
+        <!-- 处置申请弹框 -->
+        <NModal
+            v-model:show="disposalModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '670px', height: 'auto' }"
+            :segmented="{ content: true, footer: false }"
+        >
+            <template #header>
+                <div class="flex items-center gap-2 flex-wrap">
+                    <h3 class="text-base font-semibold text-slate-800">处置申请 · {{ currentRow?.title }}</h3>
+                    <span class="shrink-0 border-slate-200 bg-slate-100 font-mono text-xs text-slate-600 px-1.5 py-0.5 border rounded-md">编号：{{ currentRow?.id }}</span>
+                </div>
+            </template>
+            <template #default>
+                <div class="rounded-lg border bg-white px-4 py-3">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <NTag v-if="currentRow?.level=== '重要'" type="error" size="small">{{ currentRow?.level }}</NTag>
+                        <NTag v-else type="primary" size="small">{{ currentRow?.level }}</NTag>
+                        <NTag v-if="currentRow?.dur=== '临时'" type="warning" size="small">{{ currentRow?.dur }}</NTag>
+                        <NTag v-else type="primary" size="small">{{ currentRow?.dur }}</NTag>
+                        <NTag v-if="currentRow?.status==='审批中'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已批准'" size="small" type="primary">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='实施中'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待PSSR'" size="small" type="warning">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待验收'" size="small" type="success">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='待关闭'" size="small" type="error">{{currentRow?.status}}</NTag>
+                        <NTag v-if="currentRow?.status==='已关闭'" size="small" type="primary">{{currentRow?.status}}</NTag>
+                        <span v-if="currentRow?.applyTime" class="text-[11px] text-slate-400">申请 {{ currentRow?.applyTime }}</span>
+                        <span v-if="currentRow?.dur === '临时' && currentRow?.deadline" class="text-[11px] text-amber-600">
+                            到期 {{ currentRow?.deadline }}{{ (currentRow?.day ?? 0) < 0 ? ` · 已超期 ${-(currentRow?.day ?? 0)} 天` : currentRow?.day !== undefined ? ` · 剩 ${currentRow?.day} 天` : '' }}
+                        </span>
+                    </div>
+                    <div class="mt-1 text-[11px] text-slate-400">{{ currentRow?.detail }}</div>
+                </div>
+                <!-- 进行中的子单提示 -->
+                <div v-if="pendingSubs.length" class="rounded-lg border border-amber-200 bg-amber-50/60 px-4 py-2.5 text-xs text-amber-700">
+                已有子单在审批中：{{ pendingSubs.map((s:any) => s.id).join('、') }} · 审批进度见「待我处理」列表行内展示
+                </div>
+                <!-- 处置选项 -->
+                <div class="rounded-lg border bg-white mt-3">
+                    <div class="border-b px-4 py-2.5 text-sm font-bold text-slate-800">
+                        选择处置方式
+                        <span class="ml-2 text-[11px] font-normal text-slate-400">申请恢复所有变更可发起；申请延期 / 申请转为永久仅临时变更可用</span>
+                    </div>
+                    <div class="divide-y">
+                        <div v-for="o in opts" :key="o.act" class="flex flex-wrap items-center gap-3 px-4 py-3.5">
+                            <div class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-semibold text-slate-800">{{ o.name }}</span>
+                                    <NTag v-if="o.note" type="warning" size="small">{{ o.note }}</NTag>
+                                </div>
+                                <div class="mt-0.5 text-[11px] leading-4 text-slate-400">{{ o.desc }}</div>
+                            </div>
+                            <NButton size="small" type="primary" :disabled="o.disabled">
+                                发起<Icon icon="formkit:right" class="size-12px text-white ml-1" />
+                            </NButton>
+                        </div>
+                    </div>
+                </div>
+                
+            </template>
+        </NModal>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 260px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/pendingChange/index.vue b/src/views/my/pendingChange/index.vue
index 80888a3..f79e29e 100644
--- a/src/views/my/pendingChange/index.vue
+++ b/src/views/my/pendingChange/index.vue
@@ -1,195 +1,195 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { getColorWithOpacity } from '@/utils/common';
-
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-
-const loading = ref<boolean>(false);
-const btnLoading = ref<boolean>(false);
-const useTime = ref<any>(null);
-const useTimeModal = ref<boolean>(false);
-const currentRow = ref<any>(null);
-const list = ref<any[]>([]);
-const lists = [
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        approveTime: "2026-07-31", applicant: "吴强", level: "一般", type: "工艺",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "永久",
-        useTime: "", planUse: "2026-08-01", pssr: "PSSR 检查确认表-签字版.pdf",
-        hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        approveTime: "2026-07-31", applicant: "吴强", level: "重要", type: "工艺",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "临时",
-        useTime: "2026-07-16 06:30", planUse: "2026-08-01", pssr: "",
-        hasChange: true,
-    },
-];
-
-const timePickerProps = {
-  format: 'HH:mm',      // 时间选择器面板上显示的格式
-  seconds: false        // 隐藏秒选择器[reference:3][reference:4]
-}
-
-// 禁用今天之前的日期（今天可选）
-const disabledDate = (ts: number) => {
-  const today = new Date()
-  today.setHours(0, 0, 0, 0) // 今天的 00:00:00
-  return ts < today.getTime() // 时间戳小于今天 0 点则禁用
-}
-// 获取列表数据
-const getList = () => {
-    loading.value = true;
-    setTimeout(() => {
-        list.value = lists;
-        loading.value = false;
-    }, 1000);
-}
-
-// 查看
-const viewFile = (record: any) => {
-    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
-};
-// 下载
-const downloadFile = (record: any) => {
-    window.$message?.success(`下载「${record.pssr}」`)
-};
-// 打开变更单
-const openChange = (record: any) => {
-    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
-};
-// 填写投用日期
-const fillUseTime = (record: any) => {
-    useTime.value = null;
-    currentRow.value = record;
-    useTimeModal.value = true;
-};
-// 保存投用日期
-const saveUseTime = () => {
-    if (!useTime.value) {
-        return window.$message?.warning("请选择投用时间");
-    }
-    btnLoading.value = true;
-    setTimeout(() => {
-        btnLoading.value = false;
-        useTimeModal.value = false;
-    }, 1000);
-}
-
-
-
-onMounted(() => {
-    getList();
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- PSSR监督 -->
-    <NSpin :show="loading" size="small">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <div class="flex flex-wrap items-center gap-2 mb-3">
-                <span class="text-sm font-semibold text-slate-700">待投用变更（本车间 · 一车间）</span>
-                <NTag size="small" type="primary">{{ list.length }} 起</NTag>
-                <span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
-            </div>
-            <div class="scroll">
-                <div 
-                    class="space-y-3 h-100%"
-                    :style="{ 
-                        '--theme-color': themeStore.themeColor,
-                        '--warning-color': themeStore.otherColor.warning,
-                    }"
-                >
-                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
-                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
-                        <div class="min-w-0 flex-1">
-                            <div class="flex flex-wrap items-center gap-1.5">
-                                <p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
-                                <NTag v-if="s.level==='一般'" size="small">{{s.level}}</NTag>
-                                <NTag v-if="s.level==='重要'" size="small" type="error">{{s.level}}</NTag>
-                                <NTag size="small" type="primary">{{s.type}}</NTag>
-                                <NTag v-if="s.duration==='永久'" size="small">{{s.duration}}</NTag>
-                                <NTag v-if="s.duration==='临时'" size="small" type="warning">{{s.duration}}</NTag>
-                            </div>
-                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.id }} · {{ s.applicant }}</p>
-                            <p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approveTime ?? '—' }}</span></p>
-                            <p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.useTime ? s.useTime : `待投用（计划 ${s.planUse}）` }}</span></p>
-                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.statusDetail }}</p>
-                        </div>
-                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
-                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
-                            <span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
-                            <template v-if="s.pssr">
-                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
-                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
-                            </template>
-                            <template v-else>
-                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
-                            </template>
-                        </div>
-                        <NButton v-if="!s.useTime" size="small" type="primary" class="text-xs" @click="fillUseTime(s)">填写投用日期</NButton>
-                        <NButton v-if="s.hasChange" size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
-                    </div>
-                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
-                        <NEmpty description="暂无数据"></NEmpty>
-                    </div>
-                </div>
-            </div>
-        </NCard>
-        <!-- 填写投用日期弹窗 -->
-        <NModal
-              v-model:show="useTimeModal"
-              preset="card"
-              title="填写投用日期"
-              :auto-focus="false"
-              :style="{ width: '450px', height: 'auto' }"
-              :segmented="{ content: true, footer: true }"
-          >
-              <template #default>
-                <div
-                 class="space-y-3 text-sm"
-                 :style="{ 
-                    '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-                    '--warning-color': themeStore.otherColor.warning,
-                }"
-                >
-                    <p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
-                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-xs leading-relaxed text-[var(--warning-color)]">
-                        提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
-                    </div>
-                    <NDatePicker 
-                        v-model:value="useTime" 
-                        type="datetime" 
-                        :is-date-disabled="disabledDate" 
-                        format="yyyy-MM-dd HH:mm" 
-                        placeholder="请选择投用时间"
-                        :time-picker-props="timePickerProps"
-                    />
-                </div>
-              </template>
-              <template #footer>
-                  <div class="flex justify-end gap-[10px]">
-                      <NButton size="small" @click="useTimeModal = false">取消</NButton>
-                      <NButton size="small" type="primary" :loading="btnLoading" @click="saveUseTime">确认投用</NButton>
-                  </div>
-              </template>
-          </NModal>
-    </NSpin>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 180px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { getColorWithOpacity } from '@/utils/common';
+
+const themeStore = useThemeStore();
+const { routerPushByKey } = useRouterPush();
+
+const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
+const useTime = ref<any>(null);
+const useTimeModal = ref<boolean>(false);
+const currentRow = ref<any>(null);
+const list = ref<any[]>([]);
+const lists = [
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        approveTime: "2026-07-31", applicant: "吴强", level: "一般", type: "工艺",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "永久",
+        useTime: "", planUse: "2026-08-01", pssr: "PSSR 检查确认表-签字版.pdf",
+        hasChange: true,
+    },
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        approveTime: "2026-07-31", applicant: "吴强", level: "重要", type: "工艺",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "临时",
+        useTime: "2026-07-16 06:30", planUse: "2026-08-01", pssr: "",
+        hasChange: true,
+    },
+];
+
+const timePickerProps = {
+  format: 'HH:mm',      // 时间选择器面板上显示的格式
+  seconds: false        // 隐藏秒选择器[reference:3][reference:4]
+}
+
+// 禁用今天之前的日期（今天可选）
+const disabledDate = (ts: number) => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0) // 今天的 00:00:00
+  return ts < today.getTime() // 时间戳小于今天 0 点则禁用
+}
+// 获取列表数据
+const getList = () => {
+    loading.value = true;
+    setTimeout(() => {
+        list.value = lists;
+        loading.value = false;
+    }, 1000);
+}
+
+// 查看
+const viewFile = (record: any) => {
+    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
+};
+// 下载
+const downloadFile = (record: any) => {
+    window.$message?.success(`下载「${record.pssr}」`)
+};
+// 打开变更单
+const openChange = (record: any) => {
+    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
+};
+// 填写投用日期
+const fillUseTime = (record: any) => {
+    useTime.value = null;
+    currentRow.value = record;
+    useTimeModal.value = true;
+};
+// 保存投用日期
+const saveUseTime = () => {
+    if (!useTime.value) {
+        return window.$message?.warning("请选择投用时间");
+    }
+    btnLoading.value = true;
+    setTimeout(() => {
+        btnLoading.value = false;
+        useTimeModal.value = false;
+    }, 1000);
+}
+
+
+
+onMounted(() => {
+    getList();
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- PSSR监督 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div class="flex flex-wrap items-center gap-2 mb-3">
+                <span class="text-sm font-semibold text-slate-700">待投用变更（本车间 · 一车间）</span>
+                <NTag size="small" type="primary">{{ list.length }} 起</NTag>
+                <span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
+            </div>
+            <div class="scroll">
+                <div 
+                    class="space-y-3 h-100%"
+                    :style="{ 
+                        '--theme-color': themeStore.themeColor,
+                        '--warning-color': themeStore.otherColor.warning,
+                    }"
+                >
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex flex-wrap items-center gap-1.5">
+                                <p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
+                                <NTag v-if="s.level==='一般'" size="small">{{s.level}}</NTag>
+                                <NTag v-if="s.level==='重要'" size="small" type="error">{{s.level}}</NTag>
+                                <NTag size="small" type="primary">{{s.type}}</NTag>
+                                <NTag v-if="s.duration==='永久'" size="small">{{s.duration}}</NTag>
+                                <NTag v-if="s.duration==='临时'" size="small" type="warning">{{s.duration}}</NTag>
+                            </div>
+                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.id }} · {{ s.applicant }}</p>
+                            <p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approveTime ?? '—' }}</span></p>
+                            <p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.useTime ? s.useTime : `待投用（计划 ${s.planUse}）` }}</span></p>
+                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.statusDetail }}</p>
+                        </div>
+                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
+                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
+                            <span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
+                            <template v-if="s.pssr">
+                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
+                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
+                            </template>
+                            <template v-else>
+                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
+                            </template>
+                        </div>
+                        <NButton v-if="!s.useTime" size="small" type="primary" class="text-xs" @click="fillUseTime(s)">填写投用日期</NButton>
+                        <NButton v-if="s.hasChange" size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
+                    </div>
+                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
+                        <NEmpty description="暂无数据"></NEmpty>
+                    </div>
+                </div>
+            </div>
+        </NCard>
+        <!-- 填写投用日期弹窗 -->
+        <NModal
+              v-model:show="useTimeModal"
+              preset="card"
+              title="填写投用日期"
+              :auto-focus="false"
+              :style="{ width: '450px', height: 'auto' }"
+              :segmented="{ content: true, footer: true }"
+          >
+              <template #default>
+                <div
+                 class="space-y-3 text-sm"
+                 :style="{ 
+                    '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                    '--warning-color': themeStore.otherColor.warning,
+                }"
+                >
+                    <p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-xs leading-relaxed text-[var(--warning-color)]">
+                        提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
+                    </div>
+                    <NDatePicker 
+                        v-model:value="useTime" 
+                        type="datetime" 
+                        :is-date-disabled="disabledDate" 
+                        format="yyyy-MM-dd HH:mm" 
+                        placeholder="请选择投用时间"
+                        :time-picker-props="timePickerProps"
+                    />
+                </div>
+              </template>
+              <template #footer>
+                  <div class="flex justify-end gap-[10px]">
+                      <NButton size="small" @click="useTimeModal = false">取消</NButton>
+                      <NButton size="small" type="primary" :loading="btnLoading" @click="saveUseTime">确认投用</NButton>
+                  </div>
+              </template>
+          </NModal>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 180px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/process/index.vue b/src/views/my/process/index.vue
index 10446a8..92fd4ee 100644
--- a/src/views/my/process/index.vue
+++ b/src/views/my/process/index.vue
@@ -1,218 +1,218 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-interface FlowStep {
-  stage: string;
-  actor: string;
-  role?: string;
-  title: string;
-  detail?: string;
-  system?: string;
-  time: string;
-  branch?: string;
-}
-interface Scenario {
-  id: string; no: string; title: string; changeName: string;
-  tags: { text: string; cls: string }[];
-  desc: string; stages: string[]; steps: FlowStep[];
-}
-const T = {
-  perm: "border-[#ACC6E5] bg-[#DFE9F6] text-[#1D4E9C]",
-  temp: "border-amber-200 bg-amber-50 text-amber-700",
-  general: "bg-slate-100 text-slate-600",
-  major: "border-red-200 bg-red-50 text-red-600",
-  urgent: "border-red-600 bg-red-600 text-white",
-  branch: "border-violet-200 bg-violet-50 text-violet-600",
-};
-const STAGE_MAIN = ["变更申请", "会签与审批", "投用前确认", "投用", "验收", "关闭"];
-const STAGE_TEMP = ["变更申请", "会签与审批", "投用前确认", "投用", "临时运行与恢复", "验收", "关闭"];
-const SCENARIOS: Scenario[] = [
-  {
-    id: "s1", no: "示例 1", title: "永久 · 一般变更 全流程",
-    changeName: "MOC-2026-R01-0041「缩合反应温度及时间优化」",
-    tags: [{ text: "永久", cls: T.perm }, { text: "一般", cls: T.general }],
-    desc: "覆盖：AI 识别 → 申请表 → 风险分析 → 培训/PSSR/验收/关闭表生成 → 部门审核 → 专业会签 → 最终批准 → 培训签到 → PSSR → 确认投用 → 验收 → 关闭归档。",
-    stages: STAGE_MAIN,
-    steps: [
-      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "录入变更描述，AI 完成变更识别", detail: "判定为「变更」（非同类替换）：反应温度 80℃→90℃、保温 8h→4h、DCS 报警/联锁值上调等 4 项前后对比，输出所需材料清单；识别结果人工确认，可直接修改", system: "AI 识别完成，自动预填变更前后对比表", time: "08-01 09:12" },
-      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "AI 自动总结名称「缩合反应温度及时间优化」（28 字内）；类型判定：工艺；等级评分 12 分 → 一般变更；时限：永久；上传小试报告、杂质分析等附件", system: "附件版本受控，变更编号 MOC-2026-R01-0041 生成", time: "08-01 09:40" },
-      { stage: "变更申请", actor: "张工艺", title: "AI 风险预分析，形成风险分析记录表", detail: "输出危害严重性 / 事件概率 / 保护层影响预分析；系统按规则推荐 HAZOP + 检查表法（支持手动重选），形成风险分析记录与管控措施", system: "预分析报告经人工确认后生效", time: "08-01 10:05" },
-      { stage: "变更申请", actor: "张工艺", title: "生成培训 / PSSR / 验收评价 / 关闭确认表，提交审批", detail: "验收评价按预期效果量化：转化率 ≥98%、保温 4h±0.5h、杂质 ≤0.15% 等 5 项；选择审批人后提交", system: "进入一般变更审批流，企业微信 + 短信通知李主任", time: "08-01 10:20" },
-      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", detail: "AI 审批辅助：强制合规提示（联锁测试投用前完成）、冲突提示（无冲突）、关键参数对比；意见：变更方案可行，同意", system: "审批留痕，流转专业会签", time: "08-01 14:32" },
-      { stage: "会签与审批", actor: "王仪表", role: "专业会签 · 仪表", title: "专业会签：同意", detail: "核对 DCS 高报 85→95℃、联锁 90→100℃ 整定方案；采纳 AI 建议「联锁测试记录投用前完成」为行动项", system: "行动项自动写入 PSSR 清单，会签进度 1/2", time: "08-02 09:15" },
-      { stage: "会签与审批", actor: "周设备", role: "专业会签 · 设备", title: "专业会签：同意（会签完成 2/2）", detail: "确认保温更换与紧固件方案满足要求", system: "全体会签通过，流转最终批准", time: "08-02 10:40" },
-      { stage: "会签与审批", actor: "李主任", role: "部门负责人", title: "最终批准，变更下达实施", system: "自动生成培训任务与 PSSR 行动项并推送相关人员；状态 → 投用前确认；发布「审批通过」公告", time: "08-02 11:05" },
-      { stage: "投用前确认", actor: "岗位人员（4 人）+ 维修班（2 人）", title: "培训签到与考核", detail: "扫码签到 + 现场提问考核合格；维修班拍照上传纸质签到表", system: "签到与考核记录自动归档至变更档案", time: "08-03 15:00" },
-      { stage: "投用前确认", actor: "周设备 / 王仪表", title: "PSSR 逐项确认", detail: "联锁校核记录上传、送电前容量校核、保温验收；移动端现场拍照上传", system: "全部完成，自动推送属地负责人「具备投用条件」", time: "08-04 10:30" },
-      { stage: "投用", actor: "李主任", role: "属地负责人", title: "确认投用", detail: "投用时间默认当前日期时间，手动确认为 08-05 08:30", system: "状态 → 实施中；发布「确定投用」公告", time: "08-05 08:30" },
-      { stage: "验收", actor: "车间 + 各专业", title: "投用后验收评估", detail: "72h 运行验证 + 连续 3 批化验：转化率 98.6%（完全达到）、保温 4h（完全达到）、杂质 0.11%（完全达到）、温控联锁动作正确（完全达到）", system: "验收结论留痕：完全达到", time: "08-08 16:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "变更关闭确认", detail: "8 项资料全部归档、行动项全部关闭，系统推送专人；关闭确认表 AI 辅助判定逐项核对", system: "记录关闭时间，台账 → 已关闭；发布「变更关闭」公告", time: "08-09 09:20" },
-    ],
-  },
-  {
-    id: "s2", no: "示例 2", title: "永久 · 重要变更 全流程",
-    changeName: "MOC-2026-R01-0035「R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）」",
-    tags: [{ text: "永久", cls: T.perm }, { text: "重要", cls: T.major }],
-    desc: "重要变更差异：等级评分 ≥20 分，审批流增加安全审查与公司领导终批，PSSR 需安全部门审核，投用由公司领导确认。",
-    stages: STAGE_MAIN,
-    steps: [
-      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别：判定为变更（排除同类替换）", detail: "功率 55→75kW、防爆等级 ExdⅡBT4→ExdⅡCT4、额定电流 102A→138A，超出同类替换范围；输出前后对比与所需材料清单", system: "AI 类型预判：设备类", time: "07-28 09:12" },
-      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：设备；等级评分 21 分 → 重要变更；时限：永久；上传变更方案、设备数据表、防爆合格证、电气负荷校核计算书", system: "编号 MOC-2026-R01-0035；按「重要变更」自动匹配审批流：部门审核 → 专业会签 → 安全审查 → 公司领导终批", time: "07-28 09:45" },
-      { stage: "变更申请", actor: "张工艺", title: "风险分析：HAZOP + JSA + 检查表法", detail: "风险辨识会议（张工艺、王仪表、周设备、王海燕、李主任）；4 项安全措施：联锁校核、送电前容量校核、培训考核、P&ID 与台账更新", system: "风险分析记录表随申请单一并提交", time: "07-29 13:32" },
-      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", detail: "经综合评审，变更方案与风险管控措施可行", system: "审批留痕，流转专业会签", time: "07-29 08:31" },
-      { stage: "会签与审批", actor: "王仪表 / 周设备 / 工艺专业", title: "专业会签：3/3 全部同意", detail: "王仪表核对联锁设定；周设备确认安装与校核方案；工艺专业确认运行窗口无变化", system: "会签全体通过，流转安全审查", time: "07-30 09:00" },
-      { stage: "会签与审批", actor: "安全部", role: "安全审查", title: "安全审查：同意", detail: "强制合规项确认：联锁测试记录投用前完成并归档；防爆接合面检查纳入 PSSR", system: "审查留痕，流转公司领导终批", time: "07-30 15:20" },
-      { stage: "会签与审批", actor: "刘副总", role: "公司领导", title: "最终批准", system: "变更下达实施；发布「审批通过」公告；培训与 PSSR 任务自动推送", time: "07-31 10:00" },
-      { stage: "投用前确认", actor: "岗位人员", title: "培训签到与考核合格", system: "培训记录自动归档", time: "08-01 14:00" },
-      { stage: "投用前确认", actor: "安全部", title: "PSSR 清单审核通过（重要变更）", detail: "审核现场检查项目与保护措施确认项", time: "08-02 09:00" },
-      { stage: "投用前确认", actor: "周设备 / 王仪表", title: "现场 PSSR 逐项确认", detail: "联锁跳车试验记录、防爆接合面与格兰头检查、送电前校核；移动端拍照上传", system: "全部完成，推送属地负责人与公司领导", time: "08-03 11:00" },
-      { stage: "投用", actor: "刘副总", role: "公司领导", title: "确认投用（重要变更由公司领导确认）", detail: "属地负责人确认条件具备后，公司领导确认投用 08-05 08:00", system: "状态 → 实施中；发布「确定投用」公告", time: "08-05 08:00" },
-      { stage: "验收", actor: "车间 + 各专业", title: "验收评估", detail: "投用首周每班测温与振动记录：无过载跳闸（完全达到）、电流裕量 27%（完全达到）、批次合格率 +1.6%（完全达到）", system: "验收结论留痕", time: "08-12 17:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "关闭确认", detail: "资料归档齐全（含联锁测试记录、PSSR 现场照片、验收报告）", system: "记录关闭时间；发布「变更关闭」公告", time: "08-13 10:00" },
-    ],
-  },
-  {
-    id: "s3", no: "示例 3", title: "临时 · 一般变更 全流程（3.1 到期恢复）",
-    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」",
-    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.1 到期恢复", cls: T.branch }],
-    desc: "临时变更差异：强制填写计划恢复时间，到期前 7 天系统提醒；本示例按「3.1 到期恢复原状」走通全流程。",
-    stages: STAGE_TEMP,
-    steps: [
-      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别", detail: "循环水旁路阀开度由 30% 调整为 60%，应对夏季高温工况；判定为变更", time: "06-10 09:00" },
-      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：工艺；等级评分 10 分 → 一般；时限：临时（计划恢复时间 2026-09-15），非紧急", system: "临时变更强制填写计划恢复时间", time: "06-10 09:30" },
-      { stage: "变更申请", actor: "张工艺", title: "风险分析并提交", detail: "AI 预分析 + 检查表法；验收评价：换热器出口温度 ≤42℃、无超温报警", system: "进入一般变更审批流", time: "06-10 10:00" },
-      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", time: "06-10 14:00" },
-      { stage: "会签与审批", actor: "王仪表 / 周设备", title: "专业会签：2/2 同意", time: "06-11 09:30" },
-      { stage: "会签与审批", actor: "李主任", role: "部门负责人", title: "最终批准", system: "变更下达；发布「审批通过」公告", time: "06-11 10:20" },
-      { stage: "投用前确认", actor: "岗位人员", title: "培训签到完成", system: "记录自动归档", time: "06-12 09:00" },
-      { stage: "投用前确认", actor: "周设备", title: "PSSR 确认完成", detail: "旁路阀行程确认、温度仪表校验", system: "全部完成，推送属地负责人", time: "06-12 15:00" },
-      { stage: "投用", actor: "李主任", role: "属地负责人", title: "确认投用 06-13 08:00", system: "台账标记「临时变更 · 计划恢复 09-15」；发布「确定投用」公告", time: "06-13 08:00" },
-      { stage: "临时运行与恢复", actor: "系统", title: "到期前 7 天自动提醒", detail: "向申请人、属地负责人推送「临时变更将于 09-15 到期，请安排恢复原状」（企业微信 + 短信），每日复提", branch: "分支：到期恢复", time: "09-08 09:00" },
-      { stage: "临时运行与恢复", actor: "张工艺", title: "现场恢复原状", detail: "旁路阀开度恢复至 30%，移动端拍照上传恢复确认", system: "恢复记录归档，推送属地确认", time: "09-10 10:00" },
-      { stage: "临时运行与恢复", actor: "李主任", role: "属地负责人", title: "属地确认恢复完成", time: "09-10 15:00" },
-      { stage: "验收", actor: "车间 + 各专业", title: "验收评估", detail: "临时运行期间换热器出口温度均值 39.8℃（完全达到）、无超温报警（完全达到）", time: "09-12 16:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭（含恢复记录归档）", system: "记录关闭时间；发布「变更关闭」公告", time: "09-13 09:00" },
-    ],
-  },
-  {
-    id: "s32", no: "示例 3.2", title: "临时 · 一般变更（延期一次，到期再恢复）",
-    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」（延续示例 3）",
-    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.2 延期后恢复", cls: T.branch }],
-    desc: "从到期提醒开始：延期申请 → 部门审批 → 到期时间更新（已延期 1 次）→ 新到期恢复 → 验收 → 关闭。",
-    stages: ["到期提醒", "延期申请与审批", "恢复", "验收", "关闭"],
-    steps: [
-      { stage: "到期提醒", actor: "系统", title: "前置流程与示例 3 相同", detail: "申请 → 审批 → 培训 → PSSR → 投用（共 9 步）已于 06-13 完成，变更处于临时运行中", time: "06-13" },
-      { stage: "到期提醒", actor: "系统", title: "到期前 7 天提醒", detail: "推送「将于 09-15 到期」；因高温天气持续，申请人决定办理延期", time: "09-08 09:00" },
-      { stage: "延期申请与审批", actor: "张工艺", title: "发起延期申请", detail: "延期事项：计划恢复时间 09-15 → 10-15；理由：高温天气持续，装置仍需旁路运行；系统自动校验剩余延期次数（≤1 次）", branch: "分支：延期一次", time: "09-08 10:00" },
-      { stage: "延期申请与审批", actor: "李主任", role: "部门负责人", title: "延期审批：同意", detail: "一般临时变更延期由部门负责人批准", system: "留痕并更新到期时间；台账标记「已延期 1 次」", time: "09-09 09:00" },
-      { stage: "恢复", actor: "系统", title: "新到期日前 7 天再次提醒", time: "10-08 09:00" },
-      { stage: "恢复", actor: "张工艺", title: "恢复原状 + 拍照上传", detail: "旁路阀开度恢复至 30%，移动端拍照上传", system: "恢复记录归档，推送属地确认", time: "10-10 10:00" },
-      { stage: "恢复", actor: "李主任", role: "属地负责人", title: "属地确认恢复完成", time: "10-10 15:00" },
-      { stage: "验收", actor: "车间 + 各专业", title: "验收评估：延期期间运行数据达标", detail: "出口温度均值 40.2℃（完全达到）、无超温报警（完全达到）", time: "10-12 16:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "延期与恢复全程留痕可追溯；发布「变更关闭」公告", time: "10-13 09:00" },
-    ],
-  },
-  {
-    id: "s33", no: "示例 3.3", title: "临时 · 一般变更（到期转化为永久）",
-    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」（延续示例 3）",
-    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.3 转为永久", cls: T.branch }],
-    desc: "从到期提醒开始：转永久申请 → AI 补充长期风险分析 → 按原等级审批 → 时限改判留痕、取消恢复期限 → 验收 → 关闭。",
-    stages: ["到期提醒", "转永久申请", "补充风险分析", "转永久审批", "验收", "关闭"],
-    steps: [
-      { stage: "到期提醒", actor: "系统", title: "前置流程与示例 3 相同", detail: "已投用，变更处于临时运行中（计划恢复 09-15）", time: "06-13" },
-      { stage: "到期提醒", actor: "系统", title: "到期前 7 天提醒", time: "09-08 09:00" },
-      { stage: "转永久申请", actor: "张工艺", title: "发起「临时转永久」申请", detail: "理由：临时运行 3 个月效果稳定，夏季工况每年重现，建议转为永久；转永久后不再恢复原状", branch: "分支：转为永久", time: "09-08 10:30" },
-      { stage: "补充风险分析", actor: "张工艺", title: "AI 重新分析长期运行风险", detail: "补充长期运行场景：旁路长期 60% 开度对换热器结垢的影响、冬季低负荷工况影响；更新管控措施", system: "风险分析记录版本 V2 留痕", time: "09-09 09:00" },
-      { stage: "转永久审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", time: "09-09 14:00" },
-      { stage: "转永久审批", actor: "王仪表 / 周设备", title: "专业会签：同意", time: "09-10 09:00" },
-      { stage: "转永久审批", actor: "李主任", role: "部门负责人", title: "批准转为永久变更", system: "变更时限「临时 → 永久」改判留痕；取消恢复期限与到期提醒", time: "09-10 10:00" },
-      { stage: "验收", actor: "车间 + 各专业", title: "按永久变更标准验收", detail: "连续 30 天运行数据评估：温度、能耗指标全部达标（完全达到）", time: "10-10 16:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "转永久审批记录并入变更档案；发布「变更关闭」公告", time: "10-12 09:00" },
-    ],
-  },
-  {
-    id: "s4", no: "示例 4", title: "临时 · 重要变更 全流程",
-    changeName: "MOC-2026-R01-0039「V-102 安全阀起跳压力临时调整」",
-    tags: [{ text: "临时", cls: T.temp }, { text: "重要", cls: T.major }, { text: "紧急", cls: T.urgent }],
-    desc: "重要 + 临时 + 紧急：紧急标记各节点加急提醒当日办结，安全审查强制合规项，到期恢复起跳压力并重新校验。",
-    stages: STAGE_TEMP,
-    steps: [
-      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别", detail: "V-102 安全阀起跳压力由 1.6MPa 临时调整为 1.45MPa（上游管网改造期间）", system: "紧急标记：安全生产需要，各节点加急提醒", time: "07-16 08:00" },
-      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：设备；等级评分 22 分 → 重要；时限：临时（计划恢复 08-30）；紧急标记", system: "按「重要 + 紧急」匹配审批流并加急推送", time: "07-16 08:20" },
-      { stage: "变更申请", actor: "张工艺", title: "风险分析：JSA + 检查表法 + AI 预分析", detail: "起跳压力下调后泄放能力复核、工艺波动场景评估", time: "07-16 09:00" },
-      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意（加急）", time: "07-16 10:00" },
-      { stage: "会签与审批", actor: "王仪表 / 周设备 / 安全员", title: "专业会签：3/3 同意", detail: "安全阀校验报告复核、泄放量核算", time: "07-16 11:30" },
-      { stage: "会签与审批", actor: "安全部", role: "安全审查", title: "安全审查：同意", detail: "强制合规：调整期间每班巡查记录、恢复后重新校验", time: "07-16 14:00" },
-      { stage: "会签与审批", actor: "刘副总", role: "公司领导", title: "最终批准（加急）", system: "当日完成全部审批；发布「审批通过」公告", time: "07-16 15:30" },
-      { stage: "投用前确认", actor: "岗位人员", title: "培训签到（新起跳压力与应急处置）", system: "记录自动归档", time: "07-17 09:00" },
-      { stage: "投用前确认", actor: "安全部 / 周设备", title: "PSSR 确认", detail: "安全阀重新铅封、校验标签更新、巡查记录表就位", system: "全部完成，推送属地负责人与公司领导", time: "07-17 14:00" },
-      { stage: "投用", actor: "刘副总", role: "公司领导", title: "确认投用（重要变更）", system: "状态 → 实施中；发布「确定投用」公告", time: "07-18 08:00" },
-      { stage: "临时运行与恢复", actor: "系统", title: "到期前 7 天提醒（临时变更 08-30 到期）", branch: "分支：到期恢复", time: "08-23 09:00" },
-      { stage: "临时运行与恢复", actor: "张工艺 / 周设备", title: "恢复起跳压力至 1.6MPa", detail: "安全阀重新校验、铅封，校验报告与现场照片上传", system: "恢复记录归档，推送属地确认", time: "08-25 10:00" },
-      { stage: "验收", actor: "车间 + 各专业 + 安全部", title: "验收评估", detail: "调整期间无超压、无泄放事件；恢复后校验合格（完全达到）", time: "08-27 16:00" },
-      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "记录关闭时间；发布「变更关闭」公告", time: "08-28 09:00" },
-    ],
-  },
-];
-function open(item:any) {
-    routerPushByKey('home_processdetail', { query: { params: JSON.stringify(item) } })
-}
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 流程演示 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div class="flex flex-wrap items-center gap-3 mb-3.5">
-            <span class="flex items-center gap-1.5 text-base font-bold text-slate-800">
-                <Icon icon="fluent:flow-dot-24-filled" class="size-22px" :style="{ color: themeStore.themeColor }" />全流程走通演示
-            </span>
-            <span class="text-xs text-slate-400">
-                6 个完整示例：永久 / 临时 × 一般 / 重要，含临时到期恢复、延期、转永久分支；逐步推进查看每个环节的操作人与系统行为
-            </span>
-        </div>
-        <div class="space-y-2 scroll">
-            <div class="grid gap-3 grid-cols-2">
-                <div 
-                    v-for="s in SCENARIOS" :key="s.id" 
-                    class="flex flex-col border bg-white p-4 transition hover:border-[var(--hover-border-color)] hover:shadow-sm"
-                    :style="{ 
-                        borderRadius: themeStore.themeRadius + 'px',
-                        '--hover-border-color': themeStore.themeColor,
-                    }"
-                >
-                    <div class="flex flex-wrap items-center gap-2">
-                        <span class="text-sm font-bold" :style="{ color: themeStore.themeColor }">{{ s.no }}</span>
-                        <span class="text-sm font-semibold text-slate-800">{{ s.title }}</span>
-                        <NTag v-for="t in s.tags" :key="t.text" :class="t.cls" size="small">{{ t.text }}</NTag>
-                    </div>
-                    <div class="mt-1.5 text-xs text-slate-500">示例变更:{{ s.changeName }}</div>
-                    <p class="mt-2 flex-1 text-xs leading-relaxed text-slate-400">{{ s.desc }}</p>
-                    <div class="mt-3 flex items-center justify-between">
-                        <span class="text-[11px] text-slate-400">{{ s.stages.length }} 个阶段 · {{ s.steps.length }} 个步骤</span>
-                        <NButton type="primary" size="small" class="text-xs" @click="open(s)">
-                            <Icon icon="griddy-icons:play" class="size-16px" /> 开始演示
-                        </NButton>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 185px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const { routerPushByKey } = useRouterPush();
+const themeStore = useThemeStore();
+
+interface FlowStep {
+  stage: string;
+  actor: string;
+  role?: string;
+  title: string;
+  detail?: string;
+  system?: string;
+  time: string;
+  branch?: string;
+}
+interface Scenario {
+  id: string; no: string; title: string; changeName: string;
+  tags: { text: string; cls: string }[];
+  desc: string; stages: string[]; steps: FlowStep[];
+}
+const T = {
+  perm: "border-[#ACC6E5] bg-[#DFE9F6] text-[#1D4E9C]",
+  temp: "border-amber-200 bg-amber-50 text-amber-700",
+  general: "bg-slate-100 text-slate-600",
+  major: "border-red-200 bg-red-50 text-red-600",
+  urgent: "border-red-600 bg-red-600 text-white",
+  branch: "border-violet-200 bg-violet-50 text-violet-600",
+};
+const STAGE_MAIN = ["变更申请", "会签与审批", "投用前确认", "投用", "验收", "关闭"];
+const STAGE_TEMP = ["变更申请", "会签与审批", "投用前确认", "投用", "临时运行与恢复", "验收", "关闭"];
+const SCENARIOS: Scenario[] = [
+  {
+    id: "s1", no: "示例 1", title: "永久 · 一般变更 全流程",
+    changeName: "MOC-2026-R01-0041「缩合反应温度及时间优化」",
+    tags: [{ text: "永久", cls: T.perm }, { text: "一般", cls: T.general }],
+    desc: "覆盖：AI 识别 → 申请表 → 风险分析 → 培训/PSSR/验收/关闭表生成 → 部门审核 → 专业会签 → 最终批准 → 培训签到 → PSSR → 确认投用 → 验收 → 关闭归档。",
+    stages: STAGE_MAIN,
+    steps: [
+      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "录入变更描述，AI 完成变更识别", detail: "判定为「变更」（非同类替换）：反应温度 80℃→90℃、保温 8h→4h、DCS 报警/联锁值上调等 4 项前后对比，输出所需材料清单；识别结果人工确认，可直接修改", system: "AI 识别完成，自动预填变更前后对比表", time: "08-01 09:12" },
+      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "AI 自动总结名称「缩合反应温度及时间优化」（28 字内）；类型判定：工艺；等级评分 12 分 → 一般变更；时限：永久；上传小试报告、杂质分析等附件", system: "附件版本受控，变更编号 MOC-2026-R01-0041 生成", time: "08-01 09:40" },
+      { stage: "变更申请", actor: "张工艺", title: "AI 风险预分析，形成风险分析记录表", detail: "输出危害严重性 / 事件概率 / 保护层影响预分析；系统按规则推荐 HAZOP + 检查表法（支持手动重选），形成风险分析记录与管控措施", system: "预分析报告经人工确认后生效", time: "08-01 10:05" },
+      { stage: "变更申请", actor: "张工艺", title: "生成培训 / PSSR / 验收评价 / 关闭确认表，提交审批", detail: "验收评价按预期效果量化：转化率 ≥98%、保温 4h±0.5h、杂质 ≤0.15% 等 5 项；选择审批人后提交", system: "进入一般变更审批流，企业微信 + 短信通知李主任", time: "08-01 10:20" },
+      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", detail: "AI 审批辅助：强制合规提示（联锁测试投用前完成）、冲突提示（无冲突）、关键参数对比；意见：变更方案可行，同意", system: "审批留痕，流转专业会签", time: "08-01 14:32" },
+      { stage: "会签与审批", actor: "王仪表", role: "专业会签 · 仪表", title: "专业会签：同意", detail: "核对 DCS 高报 85→95℃、联锁 90→100℃ 整定方案；采纳 AI 建议「联锁测试记录投用前完成」为行动项", system: "行动项自动写入 PSSR 清单，会签进度 1/2", time: "08-02 09:15" },
+      { stage: "会签与审批", actor: "周设备", role: "专业会签 · 设备", title: "专业会签：同意（会签完成 2/2）", detail: "确认保温更换与紧固件方案满足要求", system: "全体会签通过，流转最终批准", time: "08-02 10:40" },
+      { stage: "会签与审批", actor: "李主任", role: "部门负责人", title: "最终批准，变更下达实施", system: "自动生成培训任务与 PSSR 行动项并推送相关人员；状态 → 投用前确认；发布「审批通过」公告", time: "08-02 11:05" },
+      { stage: "投用前确认", actor: "岗位人员（4 人）+ 维修班（2 人）", title: "培训签到与考核", detail: "扫码签到 + 现场提问考核合格；维修班拍照上传纸质签到表", system: "签到与考核记录自动归档至变更档案", time: "08-03 15:00" },
+      { stage: "投用前确认", actor: "周设备 / 王仪表", title: "PSSR 逐项确认", detail: "联锁校核记录上传、送电前容量校核、保温验收；移动端现场拍照上传", system: "全部完成，自动推送属地负责人「具备投用条件」", time: "08-04 10:30" },
+      { stage: "投用", actor: "李主任", role: "属地负责人", title: "确认投用", detail: "投用时间默认当前日期时间，手动确认为 08-05 08:30", system: "状态 → 实施中；发布「确定投用」公告", time: "08-05 08:30" },
+      { stage: "验收", actor: "车间 + 各专业", title: "投用后验收评估", detail: "72h 运行验证 + 连续 3 批化验：转化率 98.6%（完全达到）、保温 4h（完全达到）、杂质 0.11%（完全达到）、温控联锁动作正确（完全达到）", system: "验收结论留痕：完全达到", time: "08-08 16:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "变更关闭确认", detail: "8 项资料全部归档、行动项全部关闭，系统推送专人；关闭确认表 AI 辅助判定逐项核对", system: "记录关闭时间，台账 → 已关闭；发布「变更关闭」公告", time: "08-09 09:20" },
+    ],
+  },
+  {
+    id: "s2", no: "示例 2", title: "永久 · 重要变更 全流程",
+    changeName: "MOC-2026-R01-0035「R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）」",
+    tags: [{ text: "永久", cls: T.perm }, { text: "重要", cls: T.major }],
+    desc: "重要变更差异：等级评分 ≥20 分，审批流增加安全审查与公司领导终批，PSSR 需安全部门审核，投用由公司领导确认。",
+    stages: STAGE_MAIN,
+    steps: [
+      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别：判定为变更（排除同类替换）", detail: "功率 55→75kW、防爆等级 ExdⅡBT4→ExdⅡCT4、额定电流 102A→138A，超出同类替换范围；输出前后对比与所需材料清单", system: "AI 类型预判：设备类", time: "07-28 09:12" },
+      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：设备；等级评分 21 分 → 重要变更；时限：永久；上传变更方案、设备数据表、防爆合格证、电气负荷校核计算书", system: "编号 MOC-2026-R01-0035；按「重要变更」自动匹配审批流：部门审核 → 专业会签 → 安全审查 → 公司领导终批", time: "07-28 09:45" },
+      { stage: "变更申请", actor: "张工艺", title: "风险分析：HAZOP + JSA + 检查表法", detail: "风险辨识会议（张工艺、王仪表、周设备、王海燕、李主任）；4 项安全措施：联锁校核、送电前容量校核、培训考核、P&ID 与台账更新", system: "风险分析记录表随申请单一并提交", time: "07-29 13:32" },
+      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", detail: "经综合评审，变更方案与风险管控措施可行", system: "审批留痕，流转专业会签", time: "07-29 08:31" },
+      { stage: "会签与审批", actor: "王仪表 / 周设备 / 工艺专业", title: "专业会签：3/3 全部同意", detail: "王仪表核对联锁设定；周设备确认安装与校核方案；工艺专业确认运行窗口无变化", system: "会签全体通过，流转安全审查", time: "07-30 09:00" },
+      { stage: "会签与审批", actor: "安全部", role: "安全审查", title: "安全审查：同意", detail: "强制合规项确认：联锁测试记录投用前完成并归档；防爆接合面检查纳入 PSSR", system: "审查留痕，流转公司领导终批", time: "07-30 15:20" },
+      { stage: "会签与审批", actor: "刘副总", role: "公司领导", title: "最终批准", system: "变更下达实施；发布「审批通过」公告；培训与 PSSR 任务自动推送", time: "07-31 10:00" },
+      { stage: "投用前确认", actor: "岗位人员", title: "培训签到与考核合格", system: "培训记录自动归档", time: "08-01 14:00" },
+      { stage: "投用前确认", actor: "安全部", title: "PSSR 清单审核通过（重要变更）", detail: "审核现场检查项目与保护措施确认项", time: "08-02 09:00" },
+      { stage: "投用前确认", actor: "周设备 / 王仪表", title: "现场 PSSR 逐项确认", detail: "联锁跳车试验记录、防爆接合面与格兰头检查、送电前校核；移动端拍照上传", system: "全部完成，推送属地负责人与公司领导", time: "08-03 11:00" },
+      { stage: "投用", actor: "刘副总", role: "公司领导", title: "确认投用（重要变更由公司领导确认）", detail: "属地负责人确认条件具备后，公司领导确认投用 08-05 08:00", system: "状态 → 实施中；发布「确定投用」公告", time: "08-05 08:00" },
+      { stage: "验收", actor: "车间 + 各专业", title: "验收评估", detail: "投用首周每班测温与振动记录：无过载跳闸（完全达到）、电流裕量 27%（完全达到）、批次合格率 +1.6%（完全达到）", system: "验收结论留痕", time: "08-12 17:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "关闭确认", detail: "资料归档齐全（含联锁测试记录、PSSR 现场照片、验收报告）", system: "记录关闭时间；发布「变更关闭」公告", time: "08-13 10:00" },
+    ],
+  },
+  {
+    id: "s3", no: "示例 3", title: "临时 · 一般变更 全流程（3.1 到期恢复）",
+    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」",
+    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.1 到期恢复", cls: T.branch }],
+    desc: "临时变更差异：强制填写计划恢复时间，到期前 7 天系统提醒；本示例按「3.1 到期恢复原状」走通全流程。",
+    stages: STAGE_TEMP,
+    steps: [
+      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别", detail: "循环水旁路阀开度由 30% 调整为 60%，应对夏季高温工况；判定为变更", time: "06-10 09:00" },
+      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：工艺；等级评分 10 分 → 一般；时限：临时（计划恢复时间 2026-09-15），非紧急", system: "临时变更强制填写计划恢复时间", time: "06-10 09:30" },
+      { stage: "变更申请", actor: "张工艺", title: "风险分析并提交", detail: "AI 预分析 + 检查表法；验收评价：换热器出口温度 ≤42℃、无超温报警", system: "进入一般变更审批流", time: "06-10 10:00" },
+      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", time: "06-10 14:00" },
+      { stage: "会签与审批", actor: "王仪表 / 周设备", title: "专业会签：2/2 同意", time: "06-11 09:30" },
+      { stage: "会签与审批", actor: "李主任", role: "部门负责人", title: "最终批准", system: "变更下达；发布「审批通过」公告", time: "06-11 10:20" },
+      { stage: "投用前确认", actor: "岗位人员", title: "培训签到完成", system: "记录自动归档", time: "06-12 09:00" },
+      { stage: "投用前确认", actor: "周设备", title: "PSSR 确认完成", detail: "旁路阀行程确认、温度仪表校验", system: "全部完成，推送属地负责人", time: "06-12 15:00" },
+      { stage: "投用", actor: "李主任", role: "属地负责人", title: "确认投用 06-13 08:00", system: "台账标记「临时变更 · 计划恢复 09-15」；发布「确定投用」公告", time: "06-13 08:00" },
+      { stage: "临时运行与恢复", actor: "系统", title: "到期前 7 天自动提醒", detail: "向申请人、属地负责人推送「临时变更将于 09-15 到期，请安排恢复原状」（企业微信 + 短信），每日复提", branch: "分支：到期恢复", time: "09-08 09:00" },
+      { stage: "临时运行与恢复", actor: "张工艺", title: "现场恢复原状", detail: "旁路阀开度恢复至 30%，移动端拍照上传恢复确认", system: "恢复记录归档，推送属地确认", time: "09-10 10:00" },
+      { stage: "临时运行与恢复", actor: "李主任", role: "属地负责人", title: "属地确认恢复完成", time: "09-10 15:00" },
+      { stage: "验收", actor: "车间 + 各专业", title: "验收评估", detail: "临时运行期间换热器出口温度均值 39.8℃（完全达到）、无超温报警（完全达到）", time: "09-12 16:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭（含恢复记录归档）", system: "记录关闭时间；发布「变更关闭」公告", time: "09-13 09:00" },
+    ],
+  },
+  {
+    id: "s32", no: "示例 3.2", title: "临时 · 一般变更（延期一次，到期再恢复）",
+    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」（延续示例 3）",
+    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.2 延期后恢复", cls: T.branch }],
+    desc: "从到期提醒开始：延期申请 → 部门审批 → 到期时间更新（已延期 1 次）→ 新到期恢复 → 验收 → 关闭。",
+    stages: ["到期提醒", "延期申请与审批", "恢复", "验收", "关闭"],
+    steps: [
+      { stage: "到期提醒", actor: "系统", title: "前置流程与示例 3 相同", detail: "申请 → 审批 → 培训 → PSSR → 投用（共 9 步）已于 06-13 完成，变更处于临时运行中", time: "06-13" },
+      { stage: "到期提醒", actor: "系统", title: "到期前 7 天提醒", detail: "推送「将于 09-15 到期」；因高温天气持续，申请人决定办理延期", time: "09-08 09:00" },
+      { stage: "延期申请与审批", actor: "张工艺", title: "发起延期申请", detail: "延期事项：计划恢复时间 09-15 → 10-15；理由：高温天气持续，装置仍需旁路运行；系统自动校验剩余延期次数（≤1 次）", branch: "分支：延期一次", time: "09-08 10:00" },
+      { stage: "延期申请与审批", actor: "李主任", role: "部门负责人", title: "延期审批：同意", detail: "一般临时变更延期由部门负责人批准", system: "留痕并更新到期时间；台账标记「已延期 1 次」", time: "09-09 09:00" },
+      { stage: "恢复", actor: "系统", title: "新到期日前 7 天再次提醒", time: "10-08 09:00" },
+      { stage: "恢复", actor: "张工艺", title: "恢复原状 + 拍照上传", detail: "旁路阀开度恢复至 30%，移动端拍照上传", system: "恢复记录归档，推送属地确认", time: "10-10 10:00" },
+      { stage: "恢复", actor: "李主任", role: "属地负责人", title: "属地确认恢复完成", time: "10-10 15:00" },
+      { stage: "验收", actor: "车间 + 各专业", title: "验收评估：延期期间运行数据达标", detail: "出口温度均值 40.2℃（完全达到）、无超温报警（完全达到）", time: "10-12 16:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "延期与恢复全程留痕可追溯；发布「变更关闭」公告", time: "10-13 09:00" },
+    ],
+  },
+  {
+    id: "s33", no: "示例 3.3", title: "临时 · 一般变更（到期转化为永久）",
+    changeName: "MOC-2026-R02-0052「夏季工况循环水旁路临时调整」（延续示例 3）",
+    tags: [{ text: "临时", cls: T.temp }, { text: "一般", cls: T.general }, { text: "3.3 转为永久", cls: T.branch }],
+    desc: "从到期提醒开始：转永久申请 → AI 补充长期风险分析 → 按原等级审批 → 时限改判留痕、取消恢复期限 → 验收 → 关闭。",
+    stages: ["到期提醒", "转永久申请", "补充风险分析", "转永久审批", "验收", "关闭"],
+    steps: [
+      { stage: "到期提醒", actor: "系统", title: "前置流程与示例 3 相同", detail: "已投用，变更处于临时运行中（计划恢复 09-15）", time: "06-13" },
+      { stage: "到期提醒", actor: "系统", title: "到期前 7 天提醒", time: "09-08 09:00" },
+      { stage: "转永久申请", actor: "张工艺", title: "发起「临时转永久」申请", detail: "理由：临时运行 3 个月效果稳定，夏季工况每年重现，建议转为永久；转永久后不再恢复原状", branch: "分支：转为永久", time: "09-08 10:30" },
+      { stage: "补充风险分析", actor: "张工艺", title: "AI 重新分析长期运行风险", detail: "补充长期运行场景：旁路长期 60% 开度对换热器结垢的影响、冬季低负荷工况影响；更新管控措施", system: "风险分析记录版本 V2 留痕", time: "09-09 09:00" },
+      { stage: "转永久审批", actor: "李主任", role: "车间主任", title: "部门审核：同意", time: "09-09 14:00" },
+      { stage: "转永久审批", actor: "王仪表 / 周设备", title: "专业会签：同意", time: "09-10 09:00" },
+      { stage: "转永久审批", actor: "李主任", role: "部门负责人", title: "批准转为永久变更", system: "变更时限「临时 → 永久」改判留痕；取消恢复期限与到期提醒", time: "09-10 10:00" },
+      { stage: "验收", actor: "车间 + 各专业", title: "按永久变更标准验收", detail: "连续 30 天运行数据评估：温度、能耗指标全部达标（完全达到）", time: "10-10 16:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "转永久审批记录并入变更档案；发布「变更关闭」公告", time: "10-12 09:00" },
+    ],
+  },
+  {
+    id: "s4", no: "示例 4", title: "临时 · 重要变更 全流程",
+    changeName: "MOC-2026-R01-0039「V-102 安全阀起跳压力临时调整」",
+    tags: [{ text: "临时", cls: T.temp }, { text: "重要", cls: T.major }, { text: "紧急", cls: T.urgent }],
+    desc: "重要 + 临时 + 紧急：紧急标记各节点加急提醒当日办结，安全审查强制合规项，到期恢复起跳压力并重新校验。",
+    stages: STAGE_TEMP,
+    steps: [
+      { stage: "变更申请", actor: "张工艺", role: "车间工程师", title: "AI 变更识别", detail: "V-102 安全阀起跳压力由 1.6MPa 临时调整为 1.45MPa（上游管网改造期间）", system: "紧急标记：安全生产需要，各节点加急提醒", time: "07-16 08:00" },
+      { stage: "变更申请", actor: "张工艺", title: "生成变更申请表", detail: "类型：设备；等级评分 22 分 → 重要；时限：临时（计划恢复 08-30）；紧急标记", system: "按「重要 + 紧急」匹配审批流并加急推送", time: "07-16 08:20" },
+      { stage: "变更申请", actor: "张工艺", title: "风险分析：JSA + 检查表法 + AI 预分析", detail: "起跳压力下调后泄放能力复核、工艺波动场景评估", time: "07-16 09:00" },
+      { stage: "会签与审批", actor: "李主任", role: "车间主任", title: "部门审核：同意（加急）", time: "07-16 10:00" },
+      { stage: "会签与审批", actor: "王仪表 / 周设备 / 安全员", title: "专业会签：3/3 同意", detail: "安全阀校验报告复核、泄放量核算", time: "07-16 11:30" },
+      { stage: "会签与审批", actor: "安全部", role: "安全审查", title: "安全审查：同意", detail: "强制合规：调整期间每班巡查记录、恢复后重新校验", time: "07-16 14:00" },
+      { stage: "会签与审批", actor: "刘副总", role: "公司领导", title: "最终批准（加急）", system: "当日完成全部审批；发布「审批通过」公告", time: "07-16 15:30" },
+      { stage: "投用前确认", actor: "岗位人员", title: "培训签到（新起跳压力与应急处置）", system: "记录自动归档", time: "07-17 09:00" },
+      { stage: "投用前确认", actor: "安全部 / 周设备", title: "PSSR 确认", detail: "安全阀重新铅封、校验标签更新、巡查记录表就位", system: "全部完成，推送属地负责人与公司领导", time: "07-17 14:00" },
+      { stage: "投用", actor: "刘副总", role: "公司领导", title: "确认投用（重要变更）", system: "状态 → 实施中；发布「确定投用」公告", time: "07-18 08:00" },
+      { stage: "临时运行与恢复", actor: "系统", title: "到期前 7 天提醒（临时变更 08-30 到期）", branch: "分支：到期恢复", time: "08-23 09:00" },
+      { stage: "临时运行与恢复", actor: "张工艺 / 周设备", title: "恢复起跳压力至 1.6MPa", detail: "安全阀重新校验、铅封，校验报告与现场照片上传", system: "恢复记录归档，推送属地确认", time: "08-25 10:00" },
+      { stage: "验收", actor: "车间 + 各专业 + 安全部", title: "验收评估", detail: "调整期间无超压、无泄放事件；恢复后校验合格（完全达到）", time: "08-27 16:00" },
+      { stage: "关闭", actor: "变更主管部门专人", title: "确认关闭", system: "记录关闭时间；发布「变更关闭」公告", time: "08-28 09:00" },
+    ],
+  },
+];
+function open(item:any) {
+    routerPushByKey('home_processdetail', { query: { params: JSON.stringify(item) } })
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 流程演示 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div class="flex flex-wrap items-center gap-3 mb-3.5">
+            <span class="flex items-center gap-1.5 text-base font-bold text-slate-800">
+                <Icon icon="fluent:flow-dot-24-filled" class="size-22px" :style="{ color: themeStore.themeColor }" />全流程走通演示
+            </span>
+            <span class="text-xs text-slate-400">
+                6 个完整示例：永久 / 临时 × 一般 / 重要，含临时到期恢复、延期、转永久分支；逐步推进查看每个环节的操作人与系统行为
+            </span>
+        </div>
+        <div class="space-y-2 scroll">
+            <div class="grid gap-3 grid-cols-2">
+                <div 
+                    v-for="s in SCENARIOS" :key="s.id" 
+                    class="flex flex-col border bg-white p-4 transition hover:border-[var(--hover-border-color)] hover:shadow-sm"
+                    :style="{ 
+                        borderRadius: themeStore.themeRadius + 'px',
+                        '--hover-border-color': themeStore.themeColor,
+                    }"
+                >
+                    <div class="flex flex-wrap items-center gap-2">
+                        <span class="text-sm font-bold" :style="{ color: themeStore.themeColor }">{{ s.no }}</span>
+                        <span class="text-sm font-semibold text-slate-800">{{ s.title }}</span>
+                        <NTag v-for="t in s.tags" :key="t.text" :class="t.cls" size="small">{{ t.text }}</NTag>
+                    </div>
+                    <div class="mt-1.5 text-xs text-slate-500">示例变更:{{ s.changeName }}</div>
+                    <p class="mt-2 flex-1 text-xs leading-relaxed text-slate-400">{{ s.desc }}</p>
+                    <div class="mt-3 flex items-center justify-between">
+                        <span class="text-[11px] text-slate-400">{{ s.stages.length }} 个阶段 · {{ s.steps.length }} 个步骤</span>
+                        <NButton type="primary" size="small" class="text-xs" @click="open(s)">
+                            <Icon icon="griddy-icons:play" class="size-16px" /> 开始演示
+                        </NButton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 185px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/processDetail/index.vue b/src/views/my/processDetail/index.vue
index 9f35f9c..3c437bb 100644
--- a/src/views/my/processDetail/index.vue
+++ b/src/views/my/processDetail/index.vue
@@ -1,184 +1,184 @@
-<script setup lang="ts">
-import { onMounted, ref, computed, watch } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-const { routerPushByKey } = useRouterPush();
-const themeStore = useThemeStore();
-
-const sc = ref<any>(null);
-const cur = ref<number>(0);
-const playing = ref(false);
-const curStageIdx = computed(() => (sc.value ? sc.value.stages.indexOf(sc.value.steps[cur.value].stage) : 0));
-const finished = computed(() => (sc.value ? cur.value >= sc.value?.steps?.length - 1 : false));
-const ROLES_NAME: Record<string, string> = {
-  applicant: "申请人（张工艺）", process: "专业会签（王仪表）", process2: "专业会签（周设备）",
-  safety: "安全工程师（王海燕）", dept: "车间主任（李主任）", vp: "分管领导（刘副总）", admin: "系统管理员",
-  quality: "质量工程师（陈质量）", viewer: "非审批人员（吴新）",
-};
-const VIEW_NAME: Record<string, string> = {
-  apply: "变更申请", tasks: "我的任务", approvals: "审批中心", execution: "PSSR / 验收", closure: "关闭管理",
-};
-
-let timer: ReturnType<typeof setTimeout> | undefined;
-watch([playing, cur, sc], ([p, c, s]) => {
-  if (timer) { clearTimeout(timer); timer = undefined; }
-  if (!p || !s) return;
-  if (c >= s.steps.length - 1) { playing.value = false; return; }
-  timer = setTimeout(() => { cur.value = Math.min(cur.value + 1, (sc.value?.steps.length ?? 1) - 1); }, 2000);
-});
-
-function jumpFor(s: any): { role: string; view: string } | null {
-  const a = s.actor;
-  if (a === "系统") return null;
-  let role: string;
-  if (a.includes("张工艺")) role = "applicant";
-  else if (a.includes("李主任")) role = "dept";
-  else if (a.includes("王仪表")) role = "process";
-  else if (a.includes("周设备")) role = "process2";
-  else if (a.includes("刘副总")) role = "vp";
-  else if (a.includes("专人") || a.includes("安全")) role = "safety";
-  else if (a.includes("岗位") || a.includes("维修班")) role = "applicant";
-  else if (a.includes("车间")) role = "dept";
-  else return null;
-  let view: string;
-  if (role === "applicant") view = s.stage === "变更申请" ? "apply" : "tasks";
-  else if (s.stage.includes("审批")) view = "approvals";
-  else if (s.stage === "关闭") view = "closure";
-  else view = "execution";
-  return { role, view };
-}
-function prev() { playing.value = false; cur.value = Math.max(0, cur.value - 1); }
-function next() { playing.value = false; if (sc.value) cur.value = Math.min(sc.value.steps.length - 1, cur.value + 1); }
-function reset() { playing.value = false; cur.value = 0; }
-function back() { 
-    routerPushByKey("home_process");
-}
-function jumpTo() {
-    routerPushByKey("home_initiatechange");
-}
-onMounted(() => {
-    if(route.query && route.query.params){
-        sc.value = JSON.parse(route.query.params as string);
-    }
-})
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 流程演示详情 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div class="space-y-3">
-            <div class="flex flex-wrap items-center gap-2">
-                <NButton ghost type="primary" class="text-sm font-medium" @click="back">
-                    <Icon icon="ep:back" class="size-16px mr-1" /> 返回示例列表
-                </NButton>
-                <span class="text-base font-bold text-slate-800">{{ sc?.no }} {{ sc?.title }}</span>
-                <NTag size="small" v-for="t in sc?.tags" :key="t.text" :class="t.cls">{{ t.text }}</NTag>
-                <span class="text-xs text-slate-400">示例变更：{{ sc?.changeName }}</span>
-            </div>
-
-            <!-- 阶段进度条 -->
-            <div class="flex items-center gap-1 overflow-x-auto rounded-lg border bg-white p-3">
-            <div v-for="(st, i) in sc?.stages" :key="st" class="flex shrink-0 items-center gap-1">
-                <span 
-                    class="flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium"
-                    :class="i < curStageIdx ? 'bg-emerald-50 text-emerald-600' : i === curStageIdx ? 'bg-[var(--theme-color)] text-white' : 'bg-slate-100 text-slate-400'"
-                    :style="{ '--theme-color': themeStore.themeColor }"
-                >
-                    <Icon v-if="i < curStageIdx" icon="ix:success" class="size-14px" />
-                    <span v-else class="flex h-3.5 w-3.5 items-center justify-center rounded-full border text-[10px]" :class="i === curStageIdx ? 'border-white' : 'border-slate-300'">{{ Number(i) + 1 }}</span>
-                    {{ st }}
-                </span>
-                <Icon v-if="Number(i) < sc?.stages?.length - 1" icon="formkit:right" class="size-12px text-slate-300" />
-            </div>
-            </div>
-
-            <!-- 控制条 -->
-            <div class="flex flex-wrap items-center gap-2 rounded-lg border bg-white px-3 py-2">
-                <NButton ghost size="small" class="text-xs" :disabled="cur === 0" @click="prev">
-                    <Icon icon="formkit:left" class="size-12px" /> 上一步
-                </NButton>
-                <NButton type="primary" size="small" class="text-xs text-white" :disabled="finished" @click="next">
-                    下一步 <Icon icon="formkit:right" class="size-12px" />
-                </NButton>
-                <NButton ghost size="small" class="text-xs" :disabled="finished && !playing" @click="playing = !playing">
-                    <template v-if="playing"><Icon icon="material-symbols:pause-outline-rounded" class="size-14px" /> 暂停</template>
-                    <template v-else><Icon icon="griddy-icons:play" class="size-14px" /> 自动播放</template>
-                </NButton>
-                <NButton ghost size="small" class="text-xs" @click="reset">
-                    <Icon icon="system-uicons:reset" class="size-12px" /> 重置
-                </NButton>
-                <span class="ml-auto text-xs text-slate-400">第 {{ cur + 1 }} / {{ sc?.steps?.length }} 步{{ finished ? " · 流程已走通 ✓" : "" }}</span>
-            </div>
-
-            <!-- 完成横幅 -->
-            <div v-if="finished" class="flex flex-wrap items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700">
-                <Icon icon="ix:success" class="size-16px" />
-                <b>流程已走通：</b>共 {{ sc.steps.length }} 步，{{ sc.stages.length }} 个阶段全部闭环；全程操作留痕、资料归档、公告发布完整可追溯。
-            </div>
-
-            <!-- 步骤时间线 -->
-            <div class="space-y-2">
-                <div 
-                    v-for="(s, i) in sc?.steps" :key="i" @click="playing = false; cur = Number(i)"
-                    class="flex w-full cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition"
-                    :class="i === cur ? 'border-[var(--theme-color)] bg-[#EAF0F9]/50 shadow-sm' : Number(i) < cur ? 'border-emerald-100 bg-emerald-50/30' : 'bg-white hover:border-slate-300'"
-                    :style="{ '--theme-color': themeStore.themeColor }"
-                >
-                    <span 
-                        class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold"
-                        :class="Number(i) < cur ? 'bg-emerald-500 text-white' : i === cur ? 'bg-[var(--theme-color)] text-white' : 'bg-slate-100 text-slate-400'"
-                        :style="{ '--theme-color': themeStore.themeColor }"
-                    >
-                        <Icon v-if="Number(i) < cur" icon="ix:success" class="size-16px" />
-                        <template v-else>{{ Number(i) + 1 }}</template>
-                    </span>
-                    <span class="min-w-0 flex-1">
-                    <span class="flex flex-wrap items-center gap-x-2 gap-y-1">
-                        <span class="flex items-center gap-1 text-xs text-slate-500">
-                            <Icon icon="lucide:user-round" class="size-14px" />
-                            {{ s.actor }}{{ s.role ? `（${s.role}）` : "" }}
-                        </span>
-                        <span class="rounded bg-slate-100 px-1.5 text-[10px] text-slate-400">{{ s.stage }}</span>
-                        <span class="text-sm font-medium" :class="i === cur ? 'text-[#17407F]' : 'text-slate-700'">{{ s.title }}</span>
-                        <NTag v-if="s.branch" class="border-violet-200 bg-violet-50 text-violet-600">{{ s.branch }}</NTag>
-                        <span class="ml-auto shrink-0 font-mono text-[11px] text-slate-400">{{ s.time }}</span>
-                        <NButton ghost type="primary" size="tiny" v-if="jumpFor(s) && s.actor !== '系统'"
-                            class="text-[10px] font-medium"
-                            :title="`切换到${ROLES_NAME[jumpFor(s)!.role]}的「${VIEW_NAME[jumpFor(s)!.view] ?? jumpFor(s)!.view}」界面`"
-                            @click.stop="jumpTo"
-                        >
-                            进入界面 →
-                        </NButton>
-                    </span>
-                    <span v-if="i === cur && (s.detail || s.system)" class="mt-2 block space-y-1.5 border-t border-[#ACC6E5]/40 pt-2">
-                        <span v-if="s.detail" class="block text-xs leading-relaxed text-slate-600"><b class="text-slate-500">内容：</b>{{ s.detail }}</span>
-                        <span 
-                            v-if="s.system" 
-                            class="flex items-start gap-1.5 text-xs leading-relaxed"
-                            :style="{ color: themeStore.themeColor }"
-                        >
-                            <Icon icon="lucide:sparkles" class="mt-0.8 size-12px" />{{ s.system }}
-                        </span>
-                    </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped>
-
-</style>
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 185px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { onMounted, ref, computed, watch } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const { routerPushByKey } = useRouterPush();
+const themeStore = useThemeStore();
+
+const sc = ref<any>(null);
+const cur = ref<number>(0);
+const playing = ref(false);
+const curStageIdx = computed(() => (sc.value ? sc.value.stages.indexOf(sc.value.steps[cur.value].stage) : 0));
+const finished = computed(() => (sc.value ? cur.value >= sc.value?.steps?.length - 1 : false));
+const ROLES_NAME: Record<string, string> = {
+  applicant: "申请人（张工艺）", process: "专业会签（王仪表）", process2: "专业会签（周设备）",
+  safety: "安全工程师（王海燕）", dept: "车间主任（李主任）", vp: "分管领导（刘副总）", admin: "系统管理员",
+  quality: "质量工程师（陈质量）", viewer: "非审批人员（吴新）",
+};
+const VIEW_NAME: Record<string, string> = {
+  apply: "变更申请", tasks: "我的任务", approvals: "审批中心", execution: "PSSR / 验收", closure: "关闭管理",
+};
+
+let timer: ReturnType<typeof setTimeout> | undefined;
+watch([playing, cur, sc], ([p, c, s]) => {
+  if (timer) { clearTimeout(timer); timer = undefined; }
+  if (!p || !s) return;
+  if (c >= s.steps.length - 1) { playing.value = false; return; }
+  timer = setTimeout(() => { cur.value = Math.min(cur.value + 1, (sc.value?.steps.length ?? 1) - 1); }, 2000);
+});
+
+function jumpFor(s: any): { role: string; view: string } | null {
+  const a = s.actor;
+  if (a === "系统") return null;
+  let role: string;
+  if (a.includes("张工艺")) role = "applicant";
+  else if (a.includes("李主任")) role = "dept";
+  else if (a.includes("王仪表")) role = "process";
+  else if (a.includes("周设备")) role = "process2";
+  else if (a.includes("刘副总")) role = "vp";
+  else if (a.includes("专人") || a.includes("安全")) role = "safety";
+  else if (a.includes("岗位") || a.includes("维修班")) role = "applicant";
+  else if (a.includes("车间")) role = "dept";
+  else return null;
+  let view: string;
+  if (role === "applicant") view = s.stage === "变更申请" ? "apply" : "tasks";
+  else if (s.stage.includes("审批")) view = "approvals";
+  else if (s.stage === "关闭") view = "closure";
+  else view = "execution";
+  return { role, view };
+}
+function prev() { playing.value = false; cur.value = Math.max(0, cur.value - 1); }
+function next() { playing.value = false; if (sc.value) cur.value = Math.min(sc.value.steps.length - 1, cur.value + 1); }
+function reset() { playing.value = false; cur.value = 0; }
+function back() { 
+    routerPushByKey("home_process");
+}
+function jumpTo() {
+    routerPushByKey("home_initiatechange");
+}
+onMounted(() => {
+    if(route.query && route.query.params){
+        sc.value = JSON.parse(route.query.params as string);
+    }
+})
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 流程演示详情 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div class="space-y-3">
+            <div class="flex flex-wrap items-center gap-2">
+                <NButton ghost type="primary" class="text-sm font-medium" @click="back">
+                    <Icon icon="ep:back" class="size-16px mr-1" /> 返回示例列表
+                </NButton>
+                <span class="text-base font-bold text-slate-800">{{ sc?.no }} {{ sc?.title }}</span>
+                <NTag size="small" v-for="t in sc?.tags" :key="t.text" :class="t.cls">{{ t.text }}</NTag>
+                <span class="text-xs text-slate-400">示例变更：{{ sc?.changeName }}</span>
+            </div>
+
+            <!-- 阶段进度条 -->
+            <div class="flex items-center gap-1 overflow-x-auto rounded-lg border bg-white p-3">
+            <div v-for="(st, i) in sc?.stages" :key="st" class="flex shrink-0 items-center gap-1">
+                <span 
+                    class="flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium"
+                    :class="i < curStageIdx ? 'bg-emerald-50 text-emerald-600' : i === curStageIdx ? 'bg-[var(--theme-color)] text-white' : 'bg-slate-100 text-slate-400'"
+                    :style="{ '--theme-color': themeStore.themeColor }"
+                >
+                    <Icon v-if="i < curStageIdx" icon="ix:success" class="size-14px" />
+                    <span v-else class="flex h-3.5 w-3.5 items-center justify-center rounded-full border text-[10px]" :class="i === curStageIdx ? 'border-white' : 'border-slate-300'">{{ Number(i) + 1 }}</span>
+                    {{ st }}
+                </span>
+                <Icon v-if="Number(i) < sc?.stages?.length - 1" icon="formkit:right" class="size-12px text-slate-300" />
+            </div>
+            </div>
+
+            <!-- 控制条 -->
+            <div class="flex flex-wrap items-center gap-2 rounded-lg border bg-white px-3 py-2">
+                <NButton ghost size="small" class="text-xs" :disabled="cur === 0" @click="prev">
+                    <Icon icon="formkit:left" class="size-12px" /> 上一步
+                </NButton>
+                <NButton type="primary" size="small" class="text-xs text-white" :disabled="finished" @click="next">
+                    下一步 <Icon icon="formkit:right" class="size-12px" />
+                </NButton>
+                <NButton ghost size="small" class="text-xs" :disabled="finished && !playing" @click="playing = !playing">
+                    <template v-if="playing"><Icon icon="material-symbols:pause-outline-rounded" class="size-14px" /> 暂停</template>
+                    <template v-else><Icon icon="griddy-icons:play" class="size-14px" /> 自动播放</template>
+                </NButton>
+                <NButton ghost size="small" class="text-xs" @click="reset">
+                    <Icon icon="system-uicons:reset" class="size-12px" /> 重置
+                </NButton>
+                <span class="ml-auto text-xs text-slate-400">第 {{ cur + 1 }} / {{ sc?.steps?.length }} 步{{ finished ? " · 流程已走通 ✓" : "" }}</span>
+            </div>
+
+            <!-- 完成横幅 -->
+            <div v-if="finished" class="flex flex-wrap items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700">
+                <Icon icon="ix:success" class="size-16px" />
+                <b>流程已走通：</b>共 {{ sc.steps.length }} 步，{{ sc.stages.length }} 个阶段全部闭环；全程操作留痕、资料归档、公告发布完整可追溯。
+            </div>
+
+            <!-- 步骤时间线 -->
+            <div class="space-y-2">
+                <div 
+                    v-for="(s, i) in sc?.steps" :key="i" @click="playing = false; cur = Number(i)"
+                    class="flex w-full cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition"
+                    :class="i === cur ? 'border-[var(--theme-color)] bg-[#EAF0F9]/50 shadow-sm' : Number(i) < cur ? 'border-emerald-100 bg-emerald-50/30' : 'bg-white hover:border-slate-300'"
+                    :style="{ '--theme-color': themeStore.themeColor }"
+                >
+                    <span 
+                        class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold"
+                        :class="Number(i) < cur ? 'bg-emerald-500 text-white' : i === cur ? 'bg-[var(--theme-color)] text-white' : 'bg-slate-100 text-slate-400'"
+                        :style="{ '--theme-color': themeStore.themeColor }"
+                    >
+                        <Icon v-if="Number(i) < cur" icon="ix:success" class="size-16px" />
+                        <template v-else>{{ Number(i) + 1 }}</template>
+                    </span>
+                    <span class="min-w-0 flex-1">
+                    <span class="flex flex-wrap items-center gap-x-2 gap-y-1">
+                        <span class="flex items-center gap-1 text-xs text-slate-500">
+                            <Icon icon="lucide:user-round" class="size-14px" />
+                            {{ s.actor }}{{ s.role ? `（${s.role}）` : "" }}
+                        </span>
+                        <span class="rounded bg-slate-100 px-1.5 text-[10px] text-slate-400">{{ s.stage }}</span>
+                        <span class="text-sm font-medium" :class="i === cur ? 'text-[#17407F]' : 'text-slate-700'">{{ s.title }}</span>
+                        <NTag v-if="s.branch" class="border-violet-200 bg-violet-50 text-violet-600">{{ s.branch }}</NTag>
+                        <span class="ml-auto shrink-0 font-mono text-[11px] text-slate-400">{{ s.time }}</span>
+                        <NButton ghost type="primary" size="tiny" v-if="jumpFor(s) && s.actor !== '系统'"
+                            class="text-[10px] font-medium"
+                            :title="`切换到${ROLES_NAME[jumpFor(s)!.role]}的「${VIEW_NAME[jumpFor(s)!.view] ?? jumpFor(s)!.view}」界面`"
+                            @click.stop="jumpTo"
+                        >
+                            进入界面 →
+                        </NButton>
+                    </span>
+                    <span v-if="i === cur && (s.detail || s.system)" class="mt-2 block space-y-1.5 border-t border-[#ACC6E5]/40 pt-2">
+                        <span v-if="s.detail" class="block text-xs leading-relaxed text-slate-600"><b class="text-slate-500">内容：</b>{{ s.detail }}</span>
+                        <span 
+                            v-if="s.system" 
+                            class="flex items-start gap-1.5 text-xs leading-relaxed"
+                            :style="{ color: themeStore.themeColor }"
+                        >
+                            <Icon icon="lucide:sparkles" class="mt-0.8 size-12px" />{{ s.system }}
+                        </span>
+                    </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped>
+
+</style>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 185px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/my/pssr/index.vue b/src/views/my/pssr/index.vue
index 9f5d005..9c90688 100644
--- a/src/views/my/pssr/index.vue
+++ b/src/views/my/pssr/index.vue
@@ -1,265 +1,265 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-
-const loading = ref<boolean>(false);
-const keyword = ref<string>("");
-const openCount = ref<number>(4);
-const closedCount = ref<number>(2);
-const currentTab = ref<string>("open");
-const range = ref<string>("全部时间");
-const list = ref<any[]>([]);
-const openList = [
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-];
-const closedList = [
-    {
-        id: "MOC-2026-R03-0027",statusDetail: "关闭确认完成，已归档",
-        dept: "质量部", planUse: "2026-06-25", applicant: "陈静",
-        title: '化验室通风橱整体更换', status: '已关闭',
-        pssr: "PSSR 检查确认表-归档版.pdf"
-    },
-    {
-        id: "MOC-2026-R01-0024",statusDetail: "关闭确认完成，已归档",
-        dept: "一车间", planUse: "2026-06-20", applicant: "孙丽",
-        title: '氮气管网压力分级调整', status: '已关闭',
-        pssr: "PSSR 检查确认表-归档版.pdf"
-    },
-];
-
-// 切换tab
-const tabChange = (k: string) => {
-    list.value = []
-    currentTab.value = k;
-    loading.value = true;
-    if(k === 'open'){
-        setTimeout(() => {
-            list.value = openList;
-            loading.value = false;
-        }, 1000);
-    }
-    if(k === 'closed'){
-        setTimeout(() => {
-            list.value = closedList;
-            loading.value = false;
-        }, 1000);
-    }
-}
-
-// 查看
-const viewFile = (record: any) => {
-    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
-};
-// 下载
-const downloadFile = (record: any) => {
-    window.$message?.success(`下载「${record.pssr}」`)
-};
-// 下载模板
-const downloadTemplate = (record: any) => {
-    window.$message?.success(`下载 PSSR 确认表空白模板（打印后线下签署）`)
-};
-// 打开变更单
-const openChange = (record: any) => {
-    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
-};
-
-onMounted(() => {
-    tabChange('open');
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- PSSR监督 -->
-    <NSpin :show="loading" size="small">
-        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <div 
-                class="flex flex-wrap items-center gap-2 mb-3"
-                :style="{ '--theme-color': themeStore.themeColor}"
-            >
-                <div class="flex overflow-hidden rounded-full border">
-                    <div @click="tabChange('open')" class="px-3.5 py-1.5 text-xs cursor-pointer select-none"
-                    :class="currentTab === 'open' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
-                    未关闭的变更 <b>{{ openCount }}</b>
-                    </div>
-                    <div @click="tabChange('closed')" class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none"
-                    :class="currentTab === 'closed' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
-                    已关闭的变更 <b>{{ closedCount }}</b>
-                    </div>
-                </div>
-                <NInput v-model:value="keyword" size="small" class="text-xs !w-160px" placeholder="搜索变更名称 / 编号">
-                    <template #suffix>
-                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-                    </template>
-                </NInput>
-                <div class="flex items-center gap-1.5">
-                    <NButton 
-                        size="tiny" 
-                        round 
-                        v-for="t in ['全部时间', '近 7 天', '近 30 天', '近 90 天']" 
-                        :key="t" 
-                        class="text-[11px]"
-                        :type="range === t ? 'primary' : 'default'"
-                        @click="range = t"
-                    >
-                        {{ t }}
-                    </NButton>
-                </div>
-                <span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
-            </div>
-            <div class="text-[11px] leading-4 text-slate-400 pb-2">
-                培训 / PSSR 为线下组织并签字，拍照或扫描上传即视为完成确认并随单归档；系统不做内容识别，本页为 PSSR 检查表的查看 / 下载入口。
-            </div>
-            <!-- 未关闭的变更 -->
-            <div v-if="currentTab === 'open'" class="scroll">
-                <div 
-                    class="space-y-3 h-100%"
-                    :style="{ 
-                        '--theme-color': themeStore.themeColor,
-                        '--warning-color': themeStore.otherColor.warning,
-                    }"
-                >
-                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
-                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
-                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
-                        <div class="min-w-0 flex-1">
-                            <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
-                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
-                        </div>
-                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
-                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
-                            <span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
-                            <template v-if="s.pssr">
-                                <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
-                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
-                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
-                            </template>
-                            <template v-else>
-                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
-                                <NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(s)">下载模板</NButton>
-                            </template>
-                        </div>
-                        <NButton v-if="s.hasChange" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
-                    </div>
-                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
-                        <NEmpty description="暂无数据"></NEmpty>
-                    </div>
-                </div>
-            </div>
-            <!-- 已关闭的变更 -->
-            <div v-if="currentTab === 'closed'" class="scroll">
-                <div 
-                    class="space-y-3 h-100%"
-                    :style="{ 
-                        '--theme-color': themeStore.themeColor,
-                        '--warning-color': themeStore.otherColor.warning,
-                    }"
-                >
-                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
-                        <NTag v-if="s.status==='已关闭'" type="success" size="small">{{ s.status }}</NTag>
-                        <div class="min-w-0 flex-1">
-                            <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
-                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
-                        </div>
-                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
-                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
-                            <span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
-                            <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
-                            <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
-                            <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
-                        </div>
-                    </div>
-                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
-                        <NEmpty description="暂无数据"></NEmpty>
-                    </div>
-                </div>
-            </div>
-        </NCard>
-    </NSpin>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 212px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const themeStore = useThemeStore();
+const { routerPushByKey } = useRouterPush();
+
+const loading = ref<boolean>(false);
+const keyword = ref<string>("");
+const openCount = ref<number>(4);
+const closedCount = ref<number>(2);
+const currentTab = ref<string>("open");
+const range = ref<string>("全部时间");
+const list = ref<any[]>([]);
+const openList = [
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
+        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
+        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
+        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
+        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
+        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
+        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
+    },
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
+        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
+        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
+        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
+        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
+        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
+        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
+    },
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
+        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
+        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
+        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
+        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
+        pssr: "",hasChange: true,
+    },
+    {
+        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
+        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
+        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
+        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
+    },
+];
+const closedList = [
+    {
+        id: "MOC-2026-R03-0027",statusDetail: "关闭确认完成，已归档",
+        dept: "质量部", planUse: "2026-06-25", applicant: "陈静",
+        title: '化验室通风橱整体更换', status: '已关闭',
+        pssr: "PSSR 检查确认表-归档版.pdf"
+    },
+    {
+        id: "MOC-2026-R01-0024",statusDetail: "关闭确认完成，已归档",
+        dept: "一车间", planUse: "2026-06-20", applicant: "孙丽",
+        title: '氮气管网压力分级调整', status: '已关闭',
+        pssr: "PSSR 检查确认表-归档版.pdf"
+    },
+];
+
+// 切换tab
+const tabChange = (k: string) => {
+    list.value = []
+    currentTab.value = k;
+    loading.value = true;
+    if(k === 'open'){
+        setTimeout(() => {
+            list.value = openList;
+            loading.value = false;
+        }, 1000);
+    }
+    if(k === 'closed'){
+        setTimeout(() => {
+            list.value = closedList;
+            loading.value = false;
+        }, 1000);
+    }
+}
+
+// 查看
+const viewFile = (record: any) => {
+    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
+};
+// 下载
+const downloadFile = (record: any) => {
+    window.$message?.success(`下载「${record.pssr}」`)
+};
+// 下载模板
+const downloadTemplate = (record: any) => {
+    window.$message?.success(`下载 PSSR 确认表空白模板（打印后线下签署）`)
+};
+// 打开变更单
+const openChange = (record: any) => {
+    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
+};
+
+onMounted(() => {
+    tabChange('open');
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- PSSR监督 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div 
+                class="flex flex-wrap items-center gap-2 mb-3"
+                :style="{ '--theme-color': themeStore.themeColor}"
+            >
+                <div class="flex overflow-hidden rounded-full border">
+                    <div @click="tabChange('open')" class="px-3.5 py-1.5 text-xs cursor-pointer select-none"
+                    :class="currentTab === 'open' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
+                    未关闭的变更 <b>{{ openCount }}</b>
+                    </div>
+                    <div @click="tabChange('closed')" class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none"
+                    :class="currentTab === 'closed' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
+                    已关闭的变更 <b>{{ closedCount }}</b>
+                    </div>
+                </div>
+                <NInput v-model:value="keyword" size="small" class="text-xs !w-160px" placeholder="搜索变更名称 / 编号">
+                    <template #suffix>
+                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+                    </template>
+                </NInput>
+                <div class="flex items-center gap-1.5">
+                    <NButton 
+                        size="tiny" 
+                        round 
+                        v-for="t in ['全部时间', '近 7 天', '近 30 天', '近 90 天']" 
+                        :key="t" 
+                        class="text-[11px]"
+                        :type="range === t ? 'primary' : 'default'"
+                        @click="range = t"
+                    >
+                        {{ t }}
+                    </NButton>
+                </div>
+                <span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
+            </div>
+            <div class="text-[11px] leading-4 text-slate-400 pb-2">
+                培训 / PSSR 为线下组织并签字，拍照或扫描上传即视为完成确认并随单归档；系统不做内容识别，本页为 PSSR 检查表的查看 / 下载入口。
+            </div>
+            <!-- 未关闭的变更 -->
+            <div v-if="currentTab === 'open'" class="scroll">
+                <div 
+                    class="space-y-3 h-100%"
+                    :style="{ 
+                        '--theme-color': themeStore.themeColor,
+                        '--warning-color': themeStore.otherColor.warning,
+                    }"
+                >
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
+                        <div class="min-w-0 flex-1">
+                            <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
+                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
+                        </div>
+                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
+                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
+                            <span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
+                            <template v-if="s.pssr">
+                                <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
+                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
+                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
+                            </template>
+                            <template v-else>
+                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
+                                <NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(s)">下载模板</NButton>
+                            </template>
+                        </div>
+                        <NButton v-if="s.hasChange" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
+                    </div>
+                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
+                        <NEmpty description="暂无数据"></NEmpty>
+                    </div>
+                </div>
+            </div>
+            <!-- 已关闭的变更 -->
+            <div v-if="currentTab === 'closed'" class="scroll">
+                <div 
+                    class="space-y-3 h-100%"
+                    :style="{ 
+                        '--theme-color': themeStore.themeColor,
+                        '--warning-color': themeStore.otherColor.warning,
+                    }"
+                >
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                        <NTag v-if="s.status==='已关闭'" type="success" size="small">{{ s.status }}</NTag>
+                        <div class="min-w-0 flex-1">
+                            <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
+                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
+                        </div>
+                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
+                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
+                            <span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
+                            <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
+                            <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
+                            <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
+                        </div>
+                    </div>
+                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
+                        <NEmpty description="暂无数据"></NEmpty>
+                    </div>
+                </div>
+            </div>
+        </NCard>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 212px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/report/index.vue b/src/views/report/index.vue
index 85f29b1..5dd4c92 100644
--- a/src/views/report/index.vue
+++ b/src/views/report/index.vue
@@ -1,599 +1,599 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from '@/utils/common';
-import RingChart from './modules/ringChart.vue';
-import ColumnChart from './modules/columnChart.vue';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const P_PERIODS = ["近一个月", "近三个月", "近半年", "近一年"];
-const period = ref<(typeof P_PERIODS)[number]>("近一年");
-
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 52 },
-  { name: "设备", value: 49 },
-  { name: "管理", value: 25 },
-];
-const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
-
-const changeData = ref([
-  {
-    name: '一车间',
-    value: 42,
-  },
-  {
-    name: '二车间',
-    value: 35,
-  },
-  {
-    name: '三车间',
-    value: 28,
-  },
-  {
-    name: '供应部',
-    value: 12,
-  },
-  {
-    name: '质量部',
-    value: 9,
-  },
-]);
-const ADM_ACCEPT_DETAIL = [
-    { id: "MOC-2026-R01-0028", title: "成品包装规格调整", dept: "一车间", applyDate: "2026-02-20", useTime: "2026-03-15", acceptDate: "2026-04-10", cost: 3.2, result: "完全达到" },
-    { id: "MOC-2026-R01-0019", title: "R-201 搅拌密封改造", dept: "一车间", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
-    { id: "MOC-2026-R01-0022", title: "循环水加药泵冲程临时调整", dept: "一车间", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
-    { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", dept: "二车间", applyDate: "2026-06-30", useTime: "2026-07-24", acceptDate: "2026-08-02", cost: 4.6, result: "基本达到" },
-    { id: "MOC-2026-R03-0040", title: "原料环己烷供应商变更", dept: "供应部", applyDate: "2026-07-10", useTime: "2026-08-01", acceptDate: "2026-08-04", cost: 2.1, result: "完全达到" },
-];
-const admOpenStages = ref<{ name: string, n: number }[]>([
-    { name: "审批中（含会签）", n: 5 },
-    { name: "已批准待投用", n: 2 },
-    { name: "待验收", n: 0 },
-    { name: "待关闭", n: 1 },
-]);
-
-const EFFICIENCY_DATA = [
-  { d: "一车间", days: 6.2 }, { d: "二车间", days: 7.8 }, { d: "三车间", days: 9.4 }, { d: "供应部", days: 5.1 },
-];
-const ADM_PERSON_EFF = [
-  { p: "李主任", node: "部门审核", avg: 1.2, max: 2.5, onTime: 96 },
-  { p: "王仪表", node: "专业会签（仪表）", avg: 1.8, max: 3.0, onTime: 92 },
-  { p: "周设备", node: "专业会签（设备）", avg: 2.6, max: 4.1, onTime: 85 },
-  { p: "陈质量", node: "质量会签", avg: 1.6, max: 2.4, onTime: 95 },
-  { p: "王海燕", node: "安全审查", avg: 2.1, max: 3.5, onTime: 90 },
-  { p: "刘副总", node: "最终批准", avg: 1.5, max: 2.8, onTime: 94 },
-];
-const ADM_TEMP_DISP = [
-  { name: "到期恢复", value: 8, c: "#1D4E9C", note: "恢复原状并验收关闭" },
-  { name: "办理延期", value: 5, c: "#F5A623", note: "均符合「至多延期 1 次」" },
-  { name: "转为永久", value: 2, c: "#7CC242", note: "补办永久变更审批" },
-  { name: "超期未处理", value: 3, c: "#E15555", note: "系统已推送超期提醒至申请人" },
-];
-const ADM_REJECT_REASONS = [
-  { reason: "变更前后对比描述不完整 / 缺少核算数据", n: 4 },
-  { reason: "风险分析覆盖不足（情景缺失）", n: 3 },
-  { reason: "连带变更识别遗漏", n: 3 },
-  { reason: "所需材料不齐全", n: 2 },
-  { reason: "变更等级判定偏低", n: 2 },
-];
-const ADM_ARCHIVE_GAP = [
-  { item: "培训签到表", n: 3 }, { item: "PSSR 确认表", n: 2 }, { item: "变更验收单", n: 1 },
-];
-const ADM_ARCHIVE_TAGS = [
-  { k: "资料齐全", n: 76, c: "border-emerald-200 bg-emerald-50 text-emerald-700" },
-  { k: "缺培训签到", n: 3, c: "border-amber-200 bg-amber-50 text-amber-700" },
-  { k: "缺PSSR表", n: 2, c: "border-amber-200 bg-amber-50 text-amber-700" },
-  { k: "缺验收单", n: 1, c: "border-red-200 bg-red-50 text-red-700" },
-];
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 统计报表 -->
-    <NCard :bordered="false" size="small" :style="{borderRadius: themeStore.themeRadius + 'px'}">
-      <div class="flex flex-wrap items-center justify-between">
-        <div class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-            <span>统计中心</span>   
-            <span class="text-xs font-normal text-slate-400">变更归口管理视角 · 全厂口径</span>
-        </div>
-        <div class="flex flex-wrap items-center gap-1.5 min-h-28px">
-            <NButton size="tiny" round v-for="p in P_PERIODS" :key="p" @click="period = p"
-                :ghost="period === p ? false : true"
-                :type="period === p ? 'primary' : 'default'"
-            >{{ p }}</NButton>
-            <NButton size="small" class="text-xs ml-1">
-                <Icon icon="material-symbols:download" class="size-14px mr-1" />导出
-            </NButton>
-        </div>
-      </div>
-    </NCard>
-    <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor}">
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">变更总数</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="126"
-              class="text-24px font-600 text-[var(--theme-color)]"
-            />
-          </div>
-          <p class="text-12px">{{period}} · 全厂</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">重要变更</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="18"
-              class="text-26px font-600 text-[var(--theme-color)]"
-            />
-          </div>
-          <p class="text-12px">占比 14%</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">变更费用合计</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="86.4"
-              :decimals="1"
-              class="text-26px font-600 text-[var(--theme-color)]"
-            /><p class="text-26px font-600 text-[var(--theme-color)]">万</p>
-          </div>
-          <p class="text-12px">验收填报口径</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <p class="text-12px font-600">平均审批通过时长</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="58"
-              class="text-26px font-600 text-[var(--theme-color)]"
-            /><p class="text-26px font-600 text-[var(--theme-color)]">%</p>
-          </div>
-          <p class="text-12px">验收结论口径</p>
-        </div>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:14">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">各车间变更数量（{{period}}）</p>
-            <div class="py-3 px-4">
-                <ColumnChart :data="changeData" style="height: 220px" />
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:10">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布（{{period}}）</p>
-            <div class="py-3 px-4">
-                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
-            </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--theme-color': themeStore.themeColor,
-            '--error-color': themeStore.otherColor.error,
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">各审批人审批时长（天 · {{period}} · 系统自动采集）</p>
-          <div class="py-3 px-4">
-            <table class="w-full text-xs">
-              <thead>
-                <tr class="border-b text-left text-slate-500">
-                  <th class="py-2 font-semibold">审批人 / 节点</th>
-                  <th class="w-[50px] py-2 text-right font-semibold">平均时长</th>
-                  <th class="w-[60px] py-2 text-right font-semibold">最长时长</th>
-                  <th class="w-[130px] py-2 font-semibold">及时率（≤2天）</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="r in ADM_PERSON_EFF" :key="r.p" class="border-b last:border-0">
-                  <td class="py-2">
-                    <p class="text-xs font-medium text-slate-800">{{ r.p }}</p>
-                    <p class="text-[11px] text-slate-400">{{ r.node }}</p>
-                  </td>
-                  <td class="py-2 text-right text-xs font-bold text-slate-800">{{ r.avg.toFixed(1) }}</td>
-                  <td class="py-2 text-right text-xs text-slate-500">{{ r.max.toFixed(1) }}</td>
-                  <td class="py-2">
-                    <div class="flex items-center gap-2">
-                      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
-                        <div class="h-full rounded-full" :class="r.onTime >= 90 ? 'bg-[var(--success-color)]' : 'bg-[var(--warning-color)]'" :style="{ width: `${r.onTime}%` }" />
-                      </div>
-                      <span class="text-[11px] text-slate-500">{{ r.onTime }}%</span>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </NCard>
-        
-      </NGi>
-      <NGi span="24 s:24 m:24 l:16">
-        <NCard 
-            :bordered="true" 
-            size="small" 
-            :content-style="{padding: 0}" 
-            :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--theme-color': themeStore.themeColor,
-                '--error-color': themeStore.otherColor.error,
-                '--warning-color': themeStore.otherColor.warning,
-                '--success-color': themeStore.otherColor.success,
-                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            }"
-        >
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更是否达到预期效果及费用（{{period}}）</p>
-            <div class="py-3 px-4">
-                <div class="space-y-2.5">
-                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
-                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
-                            <span class="h-2 w-2 rounded-full bg-[var(--theme-color)]"></span>
-                            完全达到 73
-                        </div>
-                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
-                            <span class="h-2 w-2 rounded-full bg-[var(--success-color)]"></span>
-                            基本达到 44
-                        </div>
-                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
-                            <span class="h-2 w-2 rounded-full bg-[var(--error-color)]"></span>
-                            未达到 9
-                        </div>
-                        <span class="ml-auto text-[11px] text-slate-500">费用合计 <b class="text-[var(--theme-color)]">86.4 万元</b></span>
-                    </div>
-                    <div class="overflow-x-auto rounded-lg border">
-                    <div class="min-w-[680px]">
-                        <div class="flex items-center gap-3 border-b bg-slate-50 px-3 py-1.5 text-[11px] font-semibold text-slate-500">
-                        <span class="min-w-0 flex-1">验收明细 · 变更名称 / 编号 / 部门</span>
-                        <span class="w-[84px] shrink-0">申请日期</span>
-                        <span class="w-[84px] shrink-0">投用日期</span>
-                        <span class="w-[84px] shrink-0">验收日期</span>
-                        <span class="w-[68px] shrink-0 text-right">费用（万元）</span>
-                        <span class="w-[76px] shrink-0 text-center">验收结论</span>
-                        <span class="w-[52px] shrink-0 text-right">操作</span>
-                        </div>
-                        <div class="divide-y">
-                        <div v-for="r in ADM_ACCEPT_DETAIL" :key="r.id" class="flex items-center gap-3 px-3 py-2 transition hover:bg-[#EAF0F9]/40">
-                            <span class="min-w-0 flex-1">
-                                <span class="block truncate text-xs font-medium text-slate-800">{{ r.title }}</span>
-                                <span class="block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.dept }}</span>
-                            </span>
-                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
-                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
-                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
-                            <span class="w-[68px] shrink-0 text-right text-xs font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
-                            <span class="w-[76px] shrink-0 text-center">
-                                <NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
-                                <NTag v-if="r.result==='基本达到'" size="small" type="info">{{ r.result }}</NTag>
-                                <NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
-                            </span>
-                            <span class="w-[52px] shrink-0 text-right">
-                                <NButton size="small" class="text-[11px]" @click="message.info(`演示：打开 ${r.id} 验收详情（含费用明细与运行数据）`)">查看</NButton>
-                            </span>
-                        </div>
-                        </div>
-                    </div>
-                    </div>
-                    <div class="text-[11px] text-slate-400">明细为部分演示数据 · 全量见变更台账筛选「已关闭」</div>
-                </div>
-            </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard 
-            :bordered="true" 
-            size="small" 
-            :content-style="{padding: 0}" 
-            :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--error-color': themeStore.otherColor.error,
-                '--warning-color': themeStore.otherColor.warning,
-                '--success-color': themeStore.otherColor.success,
-                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            }"
-        >
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更带来的风险增量及管控（{{period}}）</p>
-            <div class="py-3 px-4">
-                <div class="space-y-3">
-                    <div class="grid grid-cols-2 gap-3">
-                    <div class="rounded-lg border border-[var(--error-color)] bg-[var(--error-bg)] px-3 py-2.5">
-                        <div class="text-[11px] text-slate-500">新增固有风险项</div>
-                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">7</b> · 中 <b class="text-[var(--warning-color)]">21</b></div>
-                    </div>
-                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2.5">
-                        <div class="text-[11px] text-slate-500">剩余风险项（管控中）</div>
-                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">2</b> · 中 <b class="text-[var(--warning-color)]">9</b></div>
-                    </div>
-                    </div>
-                    <div>
-                    <div class="flex items-center justify-between text-xs text-slate-500">
-                        <span>管控措施落实率</span><b class="text-[var(--success-color)]">92%</b>
-                    </div>
-                    <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-                        <div class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `92%` }"></div>
-                    </div>
-                    </div>
-                    <div class="text-[11px] text-slate-400">口径：风险分析记录表识别的新增固有高/中风险项，与验收时剩余风险项对比；剩余高风险项均挂接管控措施并跟踪落实</div>
-                </div>
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-            :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--theme-color': themeStore.themeColor,
-                '--error-color': themeStore.otherColor.error,
-                '--warning-color': themeStore.otherColor.warning,
-                '--success-color': themeStore.otherColor.success,
-                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-                '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-            }"
-        >
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">当前未关闭变更（{{period}}）</p>
-            <div class="py-3 px-4">
-                <div class="space-y-3">
-                    <div class="flex items-end gap-2">
-                    <span class="text-3xl font-extrabold leading-none text-[var(--theme-color)]">8</span>
-                    <span class="pb-0.5 text-[11px] text-slate-400">起 · 实时台账口径</span>
-                    </div>
-                    <div class="flex flex-wrap gap-1.5">
-                        <span v-for="s in admOpenStages" :key="s.name" class="rounded-md border border-[var(--theme-color)] bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] text-[var(--theme-color)]">{{ s.name }} <b>{{ s.n }}</b></span>
-                    </div>
-                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]">
-                    临时变更临期 <b>1</b> 起 · 已到期未处置 <b class="text-[var(--error-color)]">1</b> 起（临期提醒天数可在通知设置调整）
-                    </div>
-                    <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
-                      进入变更台账<Icon icon="formkit:right" class="size-12px" />
-                    </NButton>
-                </div>
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--theme-color': themeStore.themeColor,
-            '--error-color': themeStore.otherColor.error,
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">驳回的变更申请（{{period}}）</p>
-          <div class="py-3 px-4">
-            <div class="space-y-3">
-              <div class="flex items-end gap-2">
-                <span class="text-3xl font-extrabold leading-none text-[var(--error-color)]">14</span>
-                <span class="pb-0.5 text-[11px] text-slate-400">起 · 驳回率 11.1%</span>
-              </div>
-              <div class="rounded-lg border px-3 py-2.5 text-[11px] text-slate-500">
-                驳回后修改重报通过率 <b class="text-[var(--success-color)]">78.6%</b>
-                <div class="mt-0.5 text-slate-400">驳回均留痕并附带理由，申请人可「修改重报」</div>
-              </div>
-              <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
-                查看驳回单<Icon icon="formkit:right" class="size-12px" />
-              </NButton>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">各部门审批时长（天 · {{period}}）</p>
-            <div class="py-3 px-4">
-              <div class="space-y-3">
-                <div v-for="e in EFFICIENCY_DATA" :key="e.d" class="flex items-center gap-3">
-                  <span class="w-14 shrink-0 text-xs text-slate-600">{{ e.d }}</span>
-                  <NProgress
-                    type="line"
-                    :percentage="(e.days / 10) * 100"
-                    :height="15"
-                    :border-radius="4"
-                    :fill-border-radius="4"
-                  >
-                    <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ e.days }} 天</span>
-                  </NProgress>
-                </div>
-              </div>
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--theme-color': themeStore.themeColor,
-            '--error-color': themeStore.otherColor.error,
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">临时变更后续处置方式（{{period}}）</p>
-          <div class="py-3 px-4">
-            <div class="space-y-2.5">
-              <div v-for="t in ADM_TEMP_DISP" :key="t.name" class="rounded-lg border px-3 py-2.5">
-                <div class="flex items-center gap-1">
-                  <div class="flex items-center gap-1">
-                    <span v-if="t.name==='到期恢复'" class="h-2.5 w-2.5 rounded-sm bg-[var(--theme-color)]"></span>
-                    <span v-if="t.name==='办理延期'" class="h-2.5 w-2.5 rounded-sm bg-[var(--warning-color)]"></span>
-                    <span v-if="t.name==='转为永久'" class="h-2.5 w-2.5 rounded-sm bg-[var(--success-color)]"></span>
-                    <span v-if="t.name==='超期未处理'" class="h-2.5 w-2.5 rounded-sm bg-[var(--error-color)]"></span>
-                    <span class="text-xs font-medium text-slate-800">{{ t.name }}</span>
-                    <p class="mt-[1px] pl-1 text-[11px] text-slate-400">{{ t.note }}</p>
-                  </div>
-                  <span v-if="t.name==='到期恢复'" class="ml-auto text-sm font-extrabold text-[var(--theme-color)]">{{ t.value }}</span>
-                  <span v-if="t.name==='办理延期'" class="ml-auto text-sm font-extrabold text-[var(--warning-color)]">{{ t.value }}</span>
-                  <span v-if="t.name==='转为永久'" class="ml-auto text-sm font-extrabold text-[var(--success-color)]">{{ t.value }}</span>
-                  <span v-if="t.name==='超期未处理'" class="ml-auto text-sm font-extrabold text-[var(--error-color)]">{{ t.value }}</span>
-                </div>
-              </div>
-              <div class="text-[11px] text-slate-400">处置子单（延期 / 转永久 / 恢复）均走简化审批并留痕，与本统计同源</div>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--theme-color': themeStore.themeColor,
-            '--error-color': themeStore.otherColor.error,
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">主要驳回理由汇总（{{period}} · 按驳回单数）</p>
-          <div class="py-3 px-4">
-            <div class="space-y-2.5">
-              <div v-for="r in ADM_REJECT_REASONS" :key="r.reason">
-                <div class="flex items-center justify-between text-xs">
-                  <span class="text-slate-600">{{ r.reason }}</span>
-                </div>
-                <NProgress
-                  type="line"
-                  :percentage="(r.n / 10) * 100"
-                >
-                  <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ r.n }} 起</span>
-                </NProgress>
-              </div>
-              <div class="text-[11px] text-slate-400">可用于申请端填报质量改进：TOP2 理由已纳入 AI 预识别检查项</div>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:24">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--error-color': themeStore.otherColor.error,
-            '--success-color': themeStore.otherColor.success,
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更归档资料情况（{{period}}）</p>
-          <div class="py-3 px-4">
-            <div class="grid gap-4 grid-cols-12">
-              <div class="flex items-center gap-4 col-span-4">
-                <NProgress type="circle" :percentage="93.8" :offset-degree="180">
-                  <div class="flex flex-col items-center mt-2">
-                    <p class="flex text-xl font-bold leading-none text-[#1D2129]">
-                      93.8<span class="text-sm font-semibold">%</span>
-                    </p>
-                    <p class="mt-1 text-[11px] text-slate-400">Good</p>
-                  </div>
-                </NProgress>
-                <div class="space-y-1 text-xs text-slate-500">
-                  <div>应归档 <b class="text-slate-800">81</b> 起 · 已归档 <b class="text-[var(--success-color)]">76</b> 起</div>
-                  <div>待补齐资料 <b class="text-[var(--error-color)]">5</b> 起（已推送申请人补齐提醒）</div>
-                  <div class="text-[11px] text-slate-400">归档包确认关闭后只读锁定，不可修改删除</div>
-                </div>
-              </div>
-              <div class="col-span-4">
-                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">资料缺项 TOP</p>
-                <div class="mt-2 space-y-2">
-                  <div v-for="g in ADM_ARCHIVE_GAP" :key="g.item" class="flex items-center gap-2 text-xs">
-                    <span class="min-w-0 flex-1 text-slate-600">{{ g.item }}缺失</span>
-                    <div class="w-44">
-                      <NProgress
-                        type="line"
-                        status="warning"
-                        :percentage="(g.n / 5) * 100"
-                      >
-                        <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ g.n }}</span>
-                      </NProgress>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-span-4">
-                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">归档构成（已关闭 81 起）</p>
-                <div class="mt-2 flex flex-wrap gap-1.5">
-                  <template v-for="x in ADM_ARCHIVE_TAGS" :key="x.k">
-                    <NTag v-if="x.k==='资料齐全'" size="small" type="success">{{ x.k }} {{ x.n }}</NTag>
-                    <NTag v-if="x.k==='缺培训签到' || x.k==='缺PSSR表'" size="small" type="warning">{{ x.k }} {{ x.n }}</NTag>
-                    <NTag v-if="x.k==='缺验收单'" size="small" type="error">{{ x.k }} {{ x.n }}</NTag>
-                  </template>
-                </div>
-                <NButton size="small" type="primary" ghost block class="mt-3 text-xs" @click="emit('go', 'knowledge')">
-                  进入资料库 / 归档<Icon icon="formkit:right" class="size-12px" />
-                </NButton>
-              </div>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-
-</NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+import RingChart from './modules/ringChart.vue';
+import ColumnChart from './modules/columnChart.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const P_PERIODS = ["近一个月", "近三个月", "近半年", "近一年"];
+const period = ref<(typeof P_PERIODS)[number]>("近一年");
+
+const DEPT_ACCEPT = [
+  { name: "工艺", value: 52 },
+  { name: "设备", value: 49 },
+  { name: "管理", value: 25 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+
+const changeData = ref([
+  {
+    name: '一车间',
+    value: 42,
+  },
+  {
+    name: '二车间',
+    value: 35,
+  },
+  {
+    name: '三车间',
+    value: 28,
+  },
+  {
+    name: '供应部',
+    value: 12,
+  },
+  {
+    name: '质量部',
+    value: 9,
+  },
+]);
+const ADM_ACCEPT_DETAIL = [
+    { id: "MOC-2026-R01-0028", title: "成品包装规格调整", dept: "一车间", applyDate: "2026-02-20", useTime: "2026-03-15", acceptDate: "2026-04-10", cost: 3.2, result: "完全达到" },
+    { id: "MOC-2026-R01-0019", title: "R-201 搅拌密封改造", dept: "一车间", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
+    { id: "MOC-2026-R01-0022", title: "循环水加药泵冲程临时调整", dept: "一车间", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
+    { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", dept: "二车间", applyDate: "2026-06-30", useTime: "2026-07-24", acceptDate: "2026-08-02", cost: 4.6, result: "基本达到" },
+    { id: "MOC-2026-R03-0040", title: "原料环己烷供应商变更", dept: "供应部", applyDate: "2026-07-10", useTime: "2026-08-01", acceptDate: "2026-08-04", cost: 2.1, result: "完全达到" },
+];
+const admOpenStages = ref<{ name: string, n: number }[]>([
+    { name: "审批中（含会签）", n: 5 },
+    { name: "已批准待投用", n: 2 },
+    { name: "待验收", n: 0 },
+    { name: "待关闭", n: 1 },
+]);
+
+const EFFICIENCY_DATA = [
+  { d: "一车间", days: 6.2 }, { d: "二车间", days: 7.8 }, { d: "三车间", days: 9.4 }, { d: "供应部", days: 5.1 },
+];
+const ADM_PERSON_EFF = [
+  { p: "李主任", node: "部门审核", avg: 1.2, max: 2.5, onTime: 96 },
+  { p: "王仪表", node: "专业会签（仪表）", avg: 1.8, max: 3.0, onTime: 92 },
+  { p: "周设备", node: "专业会签（设备）", avg: 2.6, max: 4.1, onTime: 85 },
+  { p: "陈质量", node: "质量会签", avg: 1.6, max: 2.4, onTime: 95 },
+  { p: "王海燕", node: "安全审查", avg: 2.1, max: 3.5, onTime: 90 },
+  { p: "刘副总", node: "最终批准", avg: 1.5, max: 2.8, onTime: 94 },
+];
+const ADM_TEMP_DISP = [
+  { name: "到期恢复", value: 8, c: "#1D4E9C", note: "恢复原状并验收关闭" },
+  { name: "办理延期", value: 5, c: "#F5A623", note: "均符合「至多延期 1 次」" },
+  { name: "转为永久", value: 2, c: "#7CC242", note: "补办永久变更审批" },
+  { name: "超期未处理", value: 3, c: "#E15555", note: "系统已推送超期提醒至申请人" },
+];
+const ADM_REJECT_REASONS = [
+  { reason: "变更前后对比描述不完整 / 缺少核算数据", n: 4 },
+  { reason: "风险分析覆盖不足（情景缺失）", n: 3 },
+  { reason: "连带变更识别遗漏", n: 3 },
+  { reason: "所需材料不齐全", n: 2 },
+  { reason: "变更等级判定偏低", n: 2 },
+];
+const ADM_ARCHIVE_GAP = [
+  { item: "培训签到表", n: 3 }, { item: "PSSR 确认表", n: 2 }, { item: "变更验收单", n: 1 },
+];
+const ADM_ARCHIVE_TAGS = [
+  { k: "资料齐全", n: 76, c: "border-emerald-200 bg-emerald-50 text-emerald-700" },
+  { k: "缺培训签到", n: 3, c: "border-amber-200 bg-amber-50 text-amber-700" },
+  { k: "缺PSSR表", n: 2, c: "border-amber-200 bg-amber-50 text-amber-700" },
+  { k: "缺验收单", n: 1, c: "border-red-200 bg-red-50 text-red-700" },
+];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 统计报表 -->
+    <NCard :bordered="false" size="small" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+      <div class="flex flex-wrap items-center justify-between">
+        <div class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+            <span>统计中心</span>   
+            <span class="text-xs font-normal text-slate-400">变更归口管理视角 · 全厂口径</span>
+        </div>
+        <div class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <NButton size="tiny" round v-for="p in P_PERIODS" :key="p" @click="period = p"
+                :ghost="period === p ? false : true"
+                :type="period === p ? 'primary' : 'default'"
+            >{{ p }}</NButton>
+            <NButton size="small" class="text-xs ml-1">
+                <Icon icon="material-symbols:download" class="size-14px mr-1" />导出
+            </NButton>
+        </div>
+      </div>
+    </NCard>
+    <!-- 卡片数据 -->
+    <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor}">
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">变更总数</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="126"
+              class="text-24px font-600 text-[var(--theme-color)]"
+            />
+          </div>
+          <p class="text-12px">{{period}} · 全厂</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">重要变更</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="18"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            />
+          </div>
+          <p class="text-12px">占比 14%</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">变更费用合计</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="86.4"
+              :decimals="1"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            /><p class="text-26px font-600 text-[var(--theme-color)]">万</p>
+          </div>
+          <p class="text-12px">验收填报口径</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">平均审批通过时长</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="58"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            /><p class="text-26px font-600 text-[var(--theme-color)]">%</p>
+          </div>
+          <p class="text-12px">验收结论口径</p>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:14">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">各车间变更数量（{{period}}）</p>
+            <div class="py-3 px-4">
+                <ColumnChart :data="changeData" style="height: 220px" />
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:10">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布（{{period}}）</p>
+            <div class="py-3 px-4">
+                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+            </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">各审批人审批时长（天 · {{period}} · 系统自动采集）</p>
+          <div class="py-3 px-4">
+            <table class="w-full text-xs">
+              <thead>
+                <tr class="border-b text-left text-slate-500">
+                  <th class="py-2 font-semibold">审批人 / 节点</th>
+                  <th class="w-[50px] py-2 text-right font-semibold">平均时长</th>
+                  <th class="w-[60px] py-2 text-right font-semibold">最长时长</th>
+                  <th class="w-[130px] py-2 font-semibold">及时率（≤2天）</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="r in ADM_PERSON_EFF" :key="r.p" class="border-b last:border-0">
+                  <td class="py-2">
+                    <p class="text-xs font-medium text-slate-800">{{ r.p }}</p>
+                    <p class="text-[11px] text-slate-400">{{ r.node }}</p>
+                  </td>
+                  <td class="py-2 text-right text-xs font-bold text-slate-800">{{ r.avg.toFixed(1) }}</td>
+                  <td class="py-2 text-right text-xs text-slate-500">{{ r.max.toFixed(1) }}</td>
+                  <td class="py-2">
+                    <div class="flex items-center gap-2">
+                      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full" :class="r.onTime >= 90 ? 'bg-[var(--success-color)]' : 'bg-[var(--warning-color)]'" :style="{ width: `${r.onTime}%` }" />
+                      </div>
+                      <span class="text-[11px] text-slate-500">{{ r.onTime }}%</span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </NCard>
+        
+      </NGi>
+      <NGi span="24 s:24 m:24 l:16">
+        <NCard 
+            :bordered="true" 
+            size="small" 
+            :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更是否达到预期效果及费用（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-2.5">
+                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--theme-color)]"></span>
+                            完全达到 73
+                        </div>
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--success-color)]"></span>
+                            基本达到 44
+                        </div>
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--error-color)]"></span>
+                            未达到 9
+                        </div>
+                        <span class="ml-auto text-[11px] text-slate-500">费用合计 <b class="text-[var(--theme-color)]">86.4 万元</b></span>
+                    </div>
+                    <div class="overflow-x-auto rounded-lg border">
+                    <div class="min-w-[680px]">
+                        <div class="flex items-center gap-3 border-b bg-slate-50 px-3 py-1.5 text-[11px] font-semibold text-slate-500">
+                        <span class="min-w-0 flex-1">验收明细 · 变更名称 / 编号 / 部门</span>
+                        <span class="w-[84px] shrink-0">申请日期</span>
+                        <span class="w-[84px] shrink-0">投用日期</span>
+                        <span class="w-[84px] shrink-0">验收日期</span>
+                        <span class="w-[68px] shrink-0 text-right">费用（万元）</span>
+                        <span class="w-[76px] shrink-0 text-center">验收结论</span>
+                        <span class="w-[52px] shrink-0 text-right">操作</span>
+                        </div>
+                        <div class="divide-y">
+                        <div v-for="r in ADM_ACCEPT_DETAIL" :key="r.id" class="flex items-center gap-3 px-3 py-2 transition hover:bg-[#EAF0F9]/40">
+                            <span class="min-w-0 flex-1">
+                                <span class="block truncate text-xs font-medium text-slate-800">{{ r.title }}</span>
+                                <span class="block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.dept }}</span>
+                            </span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
+                            <span class="w-[68px] shrink-0 text-right text-xs font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
+                            <span class="w-[76px] shrink-0 text-center">
+                                <NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
+                                <NTag v-if="r.result==='基本达到'" size="small" type="info">{{ r.result }}</NTag>
+                                <NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
+                            </span>
+                            <span class="w-[52px] shrink-0 text-right">
+                                <NButton size="small" class="text-[11px]" @click="message.info(`演示：打开 ${r.id} 验收详情（含费用明细与运行数据）`)">查看</NButton>
+                            </span>
+                        </div>
+                        </div>
+                    </div>
+                    </div>
+                    <div class="text-[11px] text-slate-400">明细为部分演示数据 · 全量见变更台账筛选「已关闭」</div>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard 
+            :bordered="true" 
+            size="small" 
+            :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更带来的风险增量及管控（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-3">
+                    <div class="grid grid-cols-2 gap-3">
+                    <div class="rounded-lg border border-[var(--error-color)] bg-[var(--error-bg)] px-3 py-2.5">
+                        <div class="text-[11px] text-slate-500">新增固有风险项</div>
+                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">7</b> · 中 <b class="text-[var(--warning-color)]">21</b></div>
+                    </div>
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2.5">
+                        <div class="text-[11px] text-slate-500">剩余风险项（管控中）</div>
+                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">2</b> · 中 <b class="text-[var(--warning-color)]">9</b></div>
+                    </div>
+                    </div>
+                    <div>
+                    <div class="flex items-center justify-between text-xs text-slate-500">
+                        <span>管控措施落实率</span><b class="text-[var(--success-color)]">92%</b>
+                    </div>
+                    <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `92%` }"></div>
+                    </div>
+                    </div>
+                    <div class="text-[11px] text-slate-400">口径：风险分析记录表识别的新增固有高/中风险项，与验收时剩余风险项对比；剩余高风险项均挂接管控措施并跟踪落实</div>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+                '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">当前未关闭变更（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-3">
+                    <div class="flex items-end gap-2">
+                    <span class="text-3xl font-extrabold leading-none text-[var(--theme-color)]">8</span>
+                    <span class="pb-0.5 text-[11px] text-slate-400">起 · 实时台账口径</span>
+                    </div>
+                    <div class="flex flex-wrap gap-1.5">
+                        <span v-for="s in admOpenStages" :key="s.name" class="rounded-md border border-[var(--theme-color)] bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] text-[var(--theme-color)]">{{ s.name }} <b>{{ s.n }}</b></span>
+                    </div>
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]">
+                    临时变更临期 <b>1</b> 起 · 已到期未处置 <b class="text-[var(--error-color)]">1</b> 起（临期提醒天数可在通知设置调整）
+                    </div>
+                    <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
+                      进入变更台账<Icon icon="formkit:right" class="size-12px" />
+                    </NButton>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">驳回的变更申请（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-3">
+              <div class="flex items-end gap-2">
+                <span class="text-3xl font-extrabold leading-none text-[var(--error-color)]">14</span>
+                <span class="pb-0.5 text-[11px] text-slate-400">起 · 驳回率 11.1%</span>
+              </div>
+              <div class="rounded-lg border px-3 py-2.5 text-[11px] text-slate-500">
+                驳回后修改重报通过率 <b class="text-[var(--success-color)]">78.6%</b>
+                <div class="mt-0.5 text-slate-400">驳回均留痕并附带理由，申请人可「修改重报」</div>
+              </div>
+              <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
+                查看驳回单<Icon icon="formkit:right" class="size-12px" />
+              </NButton>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">各部门审批时长（天 · {{period}}）</p>
+            <div class="py-3 px-4">
+              <div class="space-y-3">
+                <div v-for="e in EFFICIENCY_DATA" :key="e.d" class="flex items-center gap-3">
+                  <span class="w-14 shrink-0 text-xs text-slate-600">{{ e.d }}</span>
+                  <NProgress
+                    type="line"
+                    :percentage="(e.days / 10) * 100"
+                    :height="15"
+                    :border-radius="4"
+                    :fill-border-radius="4"
+                  >
+                    <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ e.days }} 天</span>
+                  </NProgress>
+                </div>
+              </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">临时变更后续处置方式（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-2.5">
+              <div v-for="t in ADM_TEMP_DISP" :key="t.name" class="rounded-lg border px-3 py-2.5">
+                <div class="flex items-center gap-1">
+                  <div class="flex items-center gap-1">
+                    <span v-if="t.name==='到期恢复'" class="h-2.5 w-2.5 rounded-sm bg-[var(--theme-color)]"></span>
+                    <span v-if="t.name==='办理延期'" class="h-2.5 w-2.5 rounded-sm bg-[var(--warning-color)]"></span>
+                    <span v-if="t.name==='转为永久'" class="h-2.5 w-2.5 rounded-sm bg-[var(--success-color)]"></span>
+                    <span v-if="t.name==='超期未处理'" class="h-2.5 w-2.5 rounded-sm bg-[var(--error-color)]"></span>
+                    <span class="text-xs font-medium text-slate-800">{{ t.name }}</span>
+                    <p class="mt-[1px] pl-1 text-[11px] text-slate-400">{{ t.note }}</p>
+                  </div>
+                  <span v-if="t.name==='到期恢复'" class="ml-auto text-sm font-extrabold text-[var(--theme-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='办理延期'" class="ml-auto text-sm font-extrabold text-[var(--warning-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='转为永久'" class="ml-auto text-sm font-extrabold text-[var(--success-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='超期未处理'" class="ml-auto text-sm font-extrabold text-[var(--error-color)]">{{ t.value }}</span>
+                </div>
+              </div>
+              <div class="text-[11px] text-slate-400">处置子单（延期 / 转永久 / 恢复）均走简化审批并留痕，与本统计同源</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">主要驳回理由汇总（{{period}} · 按驳回单数）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-2.5">
+              <div v-for="r in ADM_REJECT_REASONS" :key="r.reason">
+                <div class="flex items-center justify-between text-xs">
+                  <span class="text-slate-600">{{ r.reason }}</span>
+                </div>
+                <NProgress
+                  type="line"
+                  :percentage="(r.n / 10) * 100"
+                >
+                  <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ r.n }} 起</span>
+                </NProgress>
+              </div>
+              <div class="text-[11px] text-slate-400">可用于申请端填报质量改进：TOP2 理由已纳入 AI 预识别检查项</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:24">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--error-color': themeStore.otherColor.error,
+            '--success-color': themeStore.otherColor.success,
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更归档资料情况（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="grid gap-4 grid-cols-12">
+              <div class="flex items-center gap-4 col-span-4">
+                <NProgress type="circle" :percentage="93.8" :offset-degree="180">
+                  <div class="flex flex-col items-center mt-2">
+                    <p class="flex text-xl font-bold leading-none text-[#1D2129]">
+                      93.8<span class="text-sm font-semibold">%</span>
+                    </p>
+                    <p class="mt-1 text-[11px] text-slate-400">Good</p>
+                  </div>
+                </NProgress>
+                <div class="space-y-1 text-xs text-slate-500">
+                  <div>应归档 <b class="text-slate-800">81</b> 起 · 已归档 <b class="text-[var(--success-color)]">76</b> 起</div>
+                  <div>待补齐资料 <b class="text-[var(--error-color)]">5</b> 起（已推送申请人补齐提醒）</div>
+                  <div class="text-[11px] text-slate-400">归档包确认关闭后只读锁定，不可修改删除</div>
+                </div>
+              </div>
+              <div class="col-span-4">
+                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">资料缺项 TOP</p>
+                <div class="mt-2 space-y-2">
+                  <div v-for="g in ADM_ARCHIVE_GAP" :key="g.item" class="flex items-center gap-2 text-xs">
+                    <span class="min-w-0 flex-1 text-slate-600">{{ g.item }}缺失</span>
+                    <div class="w-44">
+                      <NProgress
+                        type="line"
+                        status="warning"
+                        :percentage="(g.n / 5) * 100"
+                      >
+                        <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ g.n }}</span>
+                      </NProgress>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-4">
+                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">归档构成（已关闭 81 起）</p>
+                <div class="mt-2 flex flex-wrap gap-1.5">
+                  <template v-for="x in ADM_ARCHIVE_TAGS" :key="x.k">
+                    <NTag v-if="x.k==='资料齐全'" size="small" type="success">{{ x.k }} {{ x.n }}</NTag>
+                    <NTag v-if="x.k==='缺培训签到' || x.k==='缺PSSR表'" size="small" type="warning">{{ x.k }} {{ x.n }}</NTag>
+                    <NTag v-if="x.k==='缺验收单'" size="small" type="error">{{ x.k }} {{ x.n }}</NTag>
+                  </template>
+                </div>
+                <NButton size="small" type="primary" ghost block class="mt-3 text-xs" @click="emit('go', 'knowledge')">
+                  进入资料库 / 归档<Icon icon="formkit:right" class="size-12px" />
+                </NButton>
+              </div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+</NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/report/modules/columnChart.vue b/src/views/report/modules/columnChart.vue
index b112e22..0e5f285 100644
--- a/src/views/report/modules/columnChart.vue
+++ b/src/views/report/modules/columnChart.vue
@@ -1,90 +1,90 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'RingChart'
-});
-
-const props = defineProps<{ data: { name: string; value: number; }[]; }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            textStyle: {
-                color: "#fff",
-            },
-        },
-   },
-    legend: {
-        show:false,
-        bottom: '20%',
-        left: 'center',
-        icon: 'circle',
-        itemWidth: 10,
-        itemHeight: 10,
-        itemStyle: {
-            borderWidth: 0
-        },
-    },
-    grid: {
-        top: "5%",
-        left: "5%",
-        right: "5%",
-        bottom: "11%",
-    },
-    calculable: true,
-    xAxis: [
-        {
-            type: "category",
-            boundaryGap: true, // 新增，固定柱子位置
-            axisLine: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            splitArea: { show: false },
-            data: [] as string[],
-        },
-    ],
-    yAxis: [
-        {
-            type: "value",
-            show: false,
-        },
-    ],
-    series: [
-        {
-            type: "bar",
-            barWidth: 45,
-            barGap: "10%",
-            color: "#2080f0",
-            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
-            data: [] as number[],
-        },
-    ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    let allMonth = props.data.map((item:any) => item.name);
-    let values = props.data.map((item:any) => item.value);
-    opts.xAxis[0].data = allMonth;
-    opts.series[0].data = values;
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; value: number; }[]; }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        show:false,
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "5%",
+        left: "5%",
+        right: "5%",
+        bottom: "11%",
+    },
+    calculable: true,
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: true, // 新增，固定柱子位置
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+            },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            splitArea: { show: false },
+            data: [] as string[],
+        },
+    ],
+    yAxis: [
+        {
+            type: "value",
+            show: false,
+        },
+    ],
+    series: [
+        {
+            type: "bar",
+            barWidth: 45,
+            barGap: "10%",
+            color: "#2080f0",
+            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let values = props.data.map((item:any) => item.value);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = values;
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/riskStatistics/index.vue b/src/views/riskStatistics/index.vue
index e545be3..b88109b 100644
--- a/src/views/riskStatistics/index.vue
+++ b/src/views/riskStatistics/index.vue
@@ -1,271 +1,271 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { TEMP_WATCH } from "@/typings/model";
-import RingChart from './modules/ringChart.vue';
-import ColumnChart from './modules/columnChart.vue';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const addRisk = ref([
-  {
-    name: '2月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-  {
-    name: '3月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-  {
-    name: '4月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-  {
-    name: '5月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-  {
-    name: '6月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-  {
-    name: '7月',
-    highRisk: 28,
-    middleRisk: 27,
-  },
-]);
-const RISK_COLORS = ["#f5222d", "#faad14"];
-
-const DEPT_ACCEPT = [
-  { name: "高风险项", value: 1 },
-  { name: "中风险项", value: 6 },
-  { name: "低风险项", value: 12 },
-];
-const ACCEPT_COLORS = ["#f5222d", "#faad14", "#b2bcca"];
-const PSSR_EXEC = [
-  { pct: 94, label: "投用前完成率", detail: "29/31 变更 · 投用时培训 / PSSR 资料已齐", status: "finish" },
-  { pct: 88, label: "行动项按期关闭率", detail: "15/17 项 · 2 项跟进中（风险分析建议措施转入）", status: "close" },
-  { pct: 100, label: "投用后补传率", detail: "0 起 · 投用前未完成而先行投用", status: "fix" },
-];
-const OVERDUE_LIST = [
-  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
-  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
-];
-const SAFETY_EXPORTS = ["高风险变更清单", "新增固有风险项月度表", "剩余风险与措施落实表", "PSSR 执行统计", "超期未关闭清单", "验收一次通过率分析"];
-// 催办
-const handleReminder = (id: string) => {
-  window.$message?.success(`已催办 ${id} 当前节点负责人（系统消息 + 企业微信）`)
-}
-// 导出报表
-const handleExport = (name: string) => {
-  window.$message?.success(`${name}已导出 Excel`)
-}
-
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <!-- 卡片数据 -->
-    <NGrid 
-      cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16"
-      :style="{
-        '--error-color':themeStore.otherColor.error,
-        '--warning-color':themeStore.otherColor.warning
-      }"
-    >
-      <NGi>
-        <div 
-          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <div class="flex items-center">
-            <CountTo
-            :start-value="0"
-            :end-value="4"
-            class="text-28px font-600 text-[var(--error-color)]"
-            /><p class="mt-10px ml-5px">起</p>
-          </div>
-          <div>
-            <p class="text-xs font-semibold text-slate-600">高风险变更在办</p>
-            <p class="text-[11px] text-slate-400">重要等级 · 未关闭 · 实时推导</p>
-          </div>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <div class="flex items-center">
-            <CountTo
-            :start-value="0"
-            :end-value="1"
-            class="text-28px font-600 text-[var(--error-color)]"
-            /><p class="mt-10px ml-5px">项</p>
-          </div>
-          <div>
-            <p class="text-xs font-semibold text-slate-600">剩余高风险项</p>
-            <p class="text-[11px] text-slate-400">目标 0 · 管控措施须 100% 落实</p>
-          </div>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <div class="flex items-center">
-            <CountTo
-            :start-value="0"
-            :end-value="6"
-            class="text-28px font-600 text-[var(--warning-color)]"
-            /><p class="mt-10px ml-5px">项</p>
-          </div>
-          <div>
-            <p class="text-xs font-semibold text-slate-600">剩余中风险项</p>
-            <p class="text-[11px] text-slate-400">措施落实率 86% · 逐项跟踪</p>
-          </div>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
-        >
-          <div class="flex items-center">
-            <CountTo
-            :start-value="0"
-            :end-value="3"
-            class="text-28px font-600 text-[var(--error-color)]"
-            /><p class="mt-10px ml-5px">起</p>
-          </div>
-          <div>
-            <p class="text-xs font-semibold text-slate-600">超期未关闭</p>
-            <p class="text-[11px] text-slate-400">含临时变更到期 1 起</p>
-          </div>
-        </div>
-      </NGi>
-    </NGrid>
-
-    <NGrid 
-      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
-      :style="{
-        '--error-color':themeStore.otherColor.error,
-        '--warning-color':themeStore.otherColor.warning,
-        '--success-color':themeStore.otherColor.success,
-        '--theme-color':themeStore.themeColor
-      }"
-    >
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">月度新增固有风险项（管控前）</p>
-          <ColumnChart :data="addRisk" :colors="RISK_COLORS" style="height: 100%;" />
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">验收达标 · 变更类型 · 变更时限分布</p>
-          <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
-          <div class="px-3 pt-2 pb-3">
-            <div class="border-t pt-2.5">
-              <div class="flex items-baseline justify-between">
-                <span class="text-xs text-slate-500">管控措施落实率</span>
-                <span class="text-sm font-bold text-[#1D2129]">86%<span class="ml-1 text-[11px] font-normal text-slate-400">19/22 项</span></span>
-              </div>
-              <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-                <div class="h-full rounded-full bg-[var(--theme-color)]" style="width: 86%"></div>
-              </div>
-              <div class="mt-1 text-[11px] text-slate-400">剩余高风险项 1 项：措施已落实 · 复核中（聚合反应温度上限调整 · 联锁传动试验）</div>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">PSSR 执行情况</p>
-          <div class="space-y-5 px-3 pt-5 pb-3">
-            <div v-for="r in PSSR_EXEC" :key="r.label">
-              <div class="flex items-baseline gap-2">
-                <span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
-                <span class="text-xs font-semibold text-slate-500">{{ r.label }}</span>
-              </div>
-              <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
-                <div v-if="r.status==='finish'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%`}"></div>
-                <div v-if="r.status==='close'" class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `${r.pct}%`}"></div>
-                <div v-if="r.status==='fix'" class="h-full rounded-full bg-[#b2bcca]" :style="{ width: `${r.pct}%`}"></div>
-              </div>
-              <div class="mt-1 text-[11px] text-slate-400">{{ r.detail }}</div>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive :style="{'--theme-color':themeStore.themeColor}">
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">验收与投用质量</p>
-          <div class="flex pt-5 pb-3">
-            <div class="w-50% flex flex-col items-center gap-1.5">
-              <NProgress type="circle" :percentage="88" :color="themeStore.otherColor.warning" :offset-degree="180">
-                <div class="flex flex-col items-center">
-                  <p class="text-2xl font-bold leading-none text-[#1D2129]">88<span class="text-sm font-semibold">%</span></p>
-                  <p class="mt-1 text-[11px] text-slate-400">Fair</p>
-                </div>
-              </NProgress>
-              <span class="text-xs font-semibold text-slate-600">验收一次通过率</span>
-              <span class="text-[11px] text-slate-400">近一年 · 全厂</span>
-            </div>
-            <div class="w-50% flex flex-col items-center gap-1.5">
-              <NProgress type="circle" :percentage="85" :offset-degree="180">
-                <div class="flex flex-col items-center">
-                  <p class="text-2xl font-bold leading-none text-[#1D2129]">85<span class="text-sm font-semibold">%</span></p>
-                  <p class="mt-1 text-[11px] text-slate-400">Good</p>
-                </div>
-              </NProgress>
-              <span class="text-xs font-semibold text-slate-600">按期投用率</span>
-              <span class="text-[11px] text-slate-400">计划投用 vs 实际投用</span>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">超期未关闭清单</p>
-          <div class="space-y-2 p-3">
-            <div v-for="o in OVERDUE_LIST" :key="o.id" class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50/40 px-3 py-2">
-              <span class="min-w-0 flex-1">
-                <span class="block truncate text-xs font-medium text-slate-800">{{ o.title }}</span>
-                <span class="text-[11px] text-slate-400">{{ o.id }} · 卡在 {{ o.stage }}</span>
-              </span>
-              <NTag size="small" type="error">超期 {{ o.days }} 天</NTag>
-              <NButton size="small" ghost class="text-xs" @click="handleReminder(o.id)">催办</NButton>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
-          <div class="grid grid-cols-2 gap-3 p-3">
-            <div v-for="r in SAFETY_EXPORTS" :key="r" @click="handleExport(r)"
-              class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-xs hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]">
-              <Icon icon="akar-icons:file" class="size-14px" /> {{ r }}
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-  </NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { TEMP_WATCH } from "@/typings/model";
+import RingChart from './modules/ringChart.vue';
+import ColumnChart from './modules/columnChart.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const addRisk = ref([
+  {
+    name: '2月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '3月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '4月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '5月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '6月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '7月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+]);
+const RISK_COLORS = ["#f5222d", "#faad14"];
+
+const DEPT_ACCEPT = [
+  { name: "高风险项", value: 1 },
+  { name: "中风险项", value: 6 },
+  { name: "低风险项", value: 12 },
+];
+const ACCEPT_COLORS = ["#f5222d", "#faad14", "#b2bcca"];
+const PSSR_EXEC = [
+  { pct: 94, label: "投用前完成率", detail: "29/31 变更 · 投用时培训 / PSSR 资料已齐", status: "finish" },
+  { pct: 88, label: "行动项按期关闭率", detail: "15/17 项 · 2 项跟进中（风险分析建议措施转入）", status: "close" },
+  { pct: 100, label: "投用后补传率", detail: "0 起 · 投用前未完成而先行投用", status: "fix" },
+];
+const OVERDUE_LIST = [
+  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
+];
+const SAFETY_EXPORTS = ["高风险变更清单", "新增固有风险项月度表", "剩余风险与措施落实表", "PSSR 执行统计", "超期未关闭清单", "验收一次通过率分析"];
+// 催办
+const handleReminder = (id: string) => {
+  window.$message?.success(`已催办 ${id} 当前节点负责人（系统消息 + 企业微信）`)
+}
+// 导出报表
+const handleExport = (name: string) => {
+  window.$message?.success(`${name}已导出 Excel`)
+}
+
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 卡片数据 -->
+    <NGrid 
+      cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16"
+      :style="{
+        '--error-color':themeStore.otherColor.error,
+        '--warning-color':themeStore.otherColor.warning
+      }"
+    >
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="4"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">起</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">高风险变更在办</p>
+            <p class="text-[11px] text-slate-400">重要等级 · 未关闭 · 实时推导</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="1"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">剩余高风险项</p>
+            <p class="text-[11px] text-slate-400">目标 0 · 管控措施须 100% 落实</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="6"
+            class="text-28px font-600 text-[var(--warning-color)]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">剩余中风险项</p>
+            <p class="text-[11px] text-slate-400">措施落实率 86% · 逐项跟踪</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="3"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">起</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">超期未关闭</p>
+            <p class="text-[11px] text-slate-400">含临时变更到期 1 起</p>
+          </div>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid 
+      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+      :style="{
+        '--error-color':themeStore.otherColor.error,
+        '--warning-color':themeStore.otherColor.warning,
+        '--success-color':themeStore.otherColor.success,
+        '--theme-color':themeStore.themeColor
+      }"
+    >
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">月度新增固有风险项（管控前）</p>
+          <ColumnChart :data="addRisk" :colors="RISK_COLORS" style="height: 100%;" />
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">验收达标 · 变更类型 · 变更时限分布</p>
+          <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+          <div class="px-3 pt-2 pb-3">
+            <div class="border-t pt-2.5">
+              <div class="flex items-baseline justify-between">
+                <span class="text-xs text-slate-500">管控措施落实率</span>
+                <span class="text-sm font-bold text-[#1D2129]">86%<span class="ml-1 text-[11px] font-normal text-slate-400">19/22 项</span></span>
+              </div>
+              <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                <div class="h-full rounded-full bg-[var(--theme-color)]" style="width: 86%"></div>
+              </div>
+              <div class="mt-1 text-[11px] text-slate-400">剩余高风险项 1 项：措施已落实 · 复核中（聚合反应温度上限调整 · 联锁传动试验）</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">PSSR 执行情况</p>
+          <div class="space-y-5 px-3 pt-5 pb-3">
+            <div v-for="r in PSSR_EXEC" :key="r.label">
+              <div class="flex items-baseline gap-2">
+                <span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
+                <span class="text-xs font-semibold text-slate-500">{{ r.label }}</span>
+              </div>
+              <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
+                <div v-if="r.status==='finish'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%`}"></div>
+                <div v-if="r.status==='close'" class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `${r.pct}%`}"></div>
+                <div v-if="r.status==='fix'" class="h-full rounded-full bg-[#b2bcca]" :style="{ width: `${r.pct}%`}"></div>
+              </div>
+              <div class="mt-1 text-[11px] text-slate-400">{{ r.detail }}</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive :style="{'--theme-color':themeStore.themeColor}">
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">验收与投用质量</p>
+          <div class="flex pt-5 pb-3">
+            <div class="w-50% flex flex-col items-center gap-1.5">
+              <NProgress type="circle" :percentage="88" :color="themeStore.otherColor.warning" :offset-degree="180">
+                <div class="flex flex-col items-center">
+                  <p class="text-2xl font-bold leading-none text-[#1D2129]">88<span class="text-sm font-semibold">%</span></p>
+                  <p class="mt-1 text-[11px] text-slate-400">Fair</p>
+                </div>
+              </NProgress>
+              <span class="text-xs font-semibold text-slate-600">验收一次通过率</span>
+              <span class="text-[11px] text-slate-400">近一年 · 全厂</span>
+            </div>
+            <div class="w-50% flex flex-col items-center gap-1.5">
+              <NProgress type="circle" :percentage="85" :offset-degree="180">
+                <div class="flex flex-col items-center">
+                  <p class="text-2xl font-bold leading-none text-[#1D2129]">85<span class="text-sm font-semibold">%</span></p>
+                  <p class="mt-1 text-[11px] text-slate-400">Good</p>
+                </div>
+              </NProgress>
+              <span class="text-xs font-semibold text-slate-600">按期投用率</span>
+              <span class="text-[11px] text-slate-400">计划投用 vs 实际投用</span>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">超期未关闭清单</p>
+          <div class="space-y-2 p-3">
+            <div v-for="o in OVERDUE_LIST" :key="o.id" class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50/40 px-3 py-2">
+              <span class="min-w-0 flex-1">
+                <span class="block truncate text-xs font-medium text-slate-800">{{ o.title }}</span>
+                <span class="text-[11px] text-slate-400">{{ o.id }} · 卡在 {{ o.stage }}</span>
+              </span>
+              <NTag size="small" type="error">超期 {{ o.days }} 天</NTag>
+              <NButton size="small" ghost class="text-xs" @click="handleReminder(o.id)">催办</NButton>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{ padding: '0' }" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
+          <div class="grid grid-cols-2 gap-3 p-3">
+            <div v-for="r in SAFETY_EXPORTS" :key="r" @click="handleExport(r)"
+              class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-xs hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]">
+              <Icon icon="akar-icons:file" class="size-14px" /> {{ r }}
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+  </NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/riskStatistics/modules/columnChart.vue b/src/views/riskStatistics/modules/columnChart.vue
index 51065cb..7589e68 100644
--- a/src/views/riskStatistics/modules/columnChart.vue
+++ b/src/views/riskStatistics/modules/columnChart.vue
@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useEcharts } from '@/hooks/common/echarts';
-
-defineOptions({
-  name: 'RingChart'
-});
-
-const props = defineProps<{ data: { name: string; highRisk: number; middleRisk: number }[]; colors: string[] }>();
-
-const { domRef, updateOptions } = useEcharts(() => ({
-    tooltip: {
-        trigger: "axis",
-        axisPointer: {
-            type: "shadow",
-            textStyle: {
-                color: "#fff",
-            },
-        },
-   },
-    legend: {
-        bottom: '20%',
-        left: 'center',
-        icon: 'circle',
-        itemWidth: 10,
-        itemHeight: 10,
-        itemStyle: {
-            borderWidth: 0
-        },
-    },
-    grid: {
-        top: "10%",
-        left: "5%",
-        right: "5%",
-        bottom: "35%",
-    },
-    calculable: true,
-    xAxis: [
-        {
-            type: "category",
-            boundaryGap: true, // 新增，固定柱子位置
-            axisLine: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-            },
-            splitLine: { show: false },
-            axisTick: { show: false },
-            splitArea: { show: false },
-            data: [] as string[],
-        },
-    ],
-    yAxis: [
-        {
-            type: "value",
-            show: false,
-        },
-    ],
-    series: [
-        {
-            name: "高风险项",
-            stack: "总数",
-            type: "bar",
-            barWidth: 30,
-            barGap: "10%",
-            color: "#00B42A",
-            data: [] as number[],
-        },
-        // 中风险项 - 橙色
-        {
-            name: "中风险项",
-            stack: "总数",
-            type: "bar",
-            barWidth: 30,
-            color: "#FF7D00",
-            data: [] as number[],
-        },
-    ]
-}));
-
-function init() {
-  updateOptions(opts => {
-    let allMonth = props.data.map((item:any) => item.name);
-    let highRis = props.data.map((item:any) => item.highRisk);
-    let middleRisk = props.data.map((item:any) => item.middleRisk);
-    opts.xAxis[0].data = allMonth;
-    opts.series[0].data = highRis;
-    opts.series[1].data = middleRisk;
-    opts.series[0].color = props.colors[0];
-    opts.series[1].color = props.colors[1];
-    return opts;
-  });
-}
-
-init();
-</script>
-
-<template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; highRisk: number; middleRisk: number }[]; colors: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "10%",
+        left: "5%",
+        right: "5%",
+        bottom: "35%",
+    },
+    calculable: true,
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: true, // 新增，固定柱子位置
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+            },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            splitArea: { show: false },
+            data: [] as string[],
+        },
+    ],
+    yAxis: [
+        {
+            type: "value",
+            show: false,
+        },
+    ],
+    series: [
+        {
+            name: "高风险项",
+            stack: "总数",
+            type: "bar",
+            barWidth: 30,
+            barGap: "10%",
+            color: "#00B42A",
+            data: [] as number[],
+        },
+        // 中风险项 - 橙色
+        {
+            name: "中风险项",
+            stack: "总数",
+            type: "bar",
+            barWidth: 30,
+            color: "#FF7D00",
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let highRis = props.data.map((item:any) => item.highRisk);
+    let middleRisk = props.data.map((item:any) => item.middleRisk);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = highRis;
+    opts.series[1].data = middleRisk;
+    opts.series[0].color = props.colors[0];
+    opts.series[1].color = props.colors[1];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/signStatistics/index.vue b/src/views/signStatistics/index.vue
index 0618249..e4bbcbf 100644
--- a/src/views/signStatistics/index.vue
+++ b/src/views/signStatistics/index.vue
@@ -1,189 +1,189 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from '@/utils/common';
-import RingChart from './modules/ringChart.vue';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const profEff = ref<{d: string, days: number, me?: boolean, target?: boolean}[]>([
-  { d: `陈质量（本人）`, days: 1.8, me: true },
-  { d: "仪表专业均值", days: 2.1, me: false },
-  { d: "设备专业均值", days: 2.2, me: false },
-  { d: "工艺专业均值", days: 2.6, me: false },
-  { d: "考核目标", days: 2.5, me: false, target: true },
-]);
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 52 },
-  { name: "设备", value: 49 },
-  { name: "管理", value: 25 },
-];
-const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
-
-const profHighRisk = [
-  { id: "MOC-2026-R01-0035", status: '审批中', title: 'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）' },
-  { id: "MOC-2026-R01-0036", status: '审批中', title: '聚合反应温度控制上限调整（78℃→82℃）' },
-  { id: "MOC-2026-R01-0037", status: '实施中', title: '原料环己烷供应商变更（新增 B 供应商）' },
-];
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16" 
-        :style="{
-            '--theme-color': themeStore.themeColor,
-            '--success-color': themeStore.otherColor.success,
-            '--warning-color': themeStore.otherColor.warning,
-        }"
-    >
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-        >
-          <p class="text-12px font-600">本月会签 / 审批</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="6"
-              class="text-24px font-600 text-[#333]"
-            />
-          </div>
-          <p class="text-12px">口径：节点签出记录</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-        >
-          <p class="text-12px font-600">我的会签平均耗时</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="1.8"
-              :decimals="1"
-              class="text-26px font-600 text-[var(--success-color)]"
-            /><p class="text-26px font-600 text-[var(--success-color)]">天</p>
-          </div>
-          <p class="text-12px">口径：签收→签出时长 · 目标 ≤2.5 天</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-        >
-          <p class="text-12px font-600">按时完成率</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="95"
-              class="text-26px font-600 text-[var(--success-color)]"
-            /><p class="text-26px font-600 text-[var(--success-color)]">%</p>
-          </div>
-          <p class="text-12px">考核：目标 ≥90%</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-        >
-          <p class="text-12px font-600">参与风险分析</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="2"
-              class="text-26px font-600 text-[var(--theme-color)]"
-            /><p class="text-26px font-600 text-[var(--theme-color)]">次</p>
-          </div>
-          <p class="text-12px">口径：HAZOP / JSA 分析组成员（选择式）记录</p>
-        </div>
-      </NGi>
-      <NGi>
-        <div 
-          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
-          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
-        >
-          <p class="text-12px font-600">当前待我审批</p>
-          <div class="flex items-center">
-            <CountTo
-              :start-value="0"
-              :end-value="1"
-              class="text-26px font-600 text-[var(--warning-color)]"
-            />
-          </div>
-          <p class="text-12px">实时 · 与工作台同源</p>
-        </div>
-      </NGi>
-    </NGrid>
-
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-          :style="{ 
-            borderRadius: themeStore.themeRadius + 'px', 
-            height: '100%',
-            '--theme-color': themeStore.themeColor,
-            '--error-color': themeStore.otherColor.error,
-            '--warning-color': themeStore.otherColor.warning,
-            '--success-color': themeStore.otherColor.success,
-            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
-            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
-            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
-          }"
-        >
-          <p class=" text-base font-semibold border-b border-slate-100 p-3">会签效率对比（考核 · 汇报）</p>
-          <div class="py-3 px-4">
-            <div class="space-y-3">
-                <div v-for="e in profEff" :key="e.d">
-                    <div class="mb-1 flex items-center justify-between text-xs">
-                        <span :class="e.me ? 'font-semibold text-[var(--theme-color)]' : 'text-slate-600'">{{ e.d }}</span>
-                        <span :class="e.target ? 'text-slate-400' : e.days > 2.5 ? 'font-medium text-[var(--error-color)]' : 'text-slate-500'">{{ e.days }} 天{{ e.target ? "（标线）" : "" }}</span>
-                    </div>
-                    <div class="h-2 overflow-hidden rounded-full bg-slate-100">
-                        <div class="h-full rounded-full" :class="e.target ? 'bg-slate-300' : e.me ? 'bg-[var(--theme-color)]' : e.days > 2.5 ? 'bg-[var(--error-color)]' : 'bg-[#6E93C6]'" :style="{ width: `${Math.min(100, (e.days / 4) * 100)}%` }" />
-                    </div>
-                </div>
-                <p class="text-[11px] text-slate-400">考核数据来源：节点签收 → 签出时长自动统计；连续两月超标将纳入绩效面谈</p>
-            </div>
-          </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">本专业变更类型分布（近一年）</p>
-            <div class="py-3 px-4">
-                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
-            </div>
-        </NCard>
-      </NGi>
-      <NGi span="24 s:24 m:24 l:8">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-            <p class=" text-base font-semibold border-b border-slate-100 p-3">本专业高风险在办（直达风险分析）</p>
-            <div class="py-3 px-4">
-                <div class="space-y-2 pt-1">
-                    <div v-for="c in profHighRisk" :key="c.id" @click="emit('go', 'risk')" class="cursor-pointer flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left hover:border-red-300 hover:bg-red-50/30">
-                        <span class="min-w-0 flex-1">
-                        <span class="block truncate text-sm font-medium text-slate-800">{{ c.title }}</span>
-                        <span class="text-[11px] text-slate-400">{{ c.id }} · {{ c.status }}</span>
-                        </span>
-                        <ChevronRight class="h-3.5 w-3.5 shrink-0 text-slate-300" />
-                    </div>
-                    <p class="text-[11px] text-slate-400">更多高风险场景与分析记录见「本专业高风险」页</p>
-                </div>
-            </div>
-        </NCard>
-      </NGi>
-    </NGrid>
-</NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+import RingChart from './modules/ringChart.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const profEff = ref<{d: string, days: number, me?: boolean, target?: boolean}[]>([
+  { d: `陈质量（本人）`, days: 1.8, me: true },
+  { d: "仪表专业均值", days: 2.1, me: false },
+  { d: "设备专业均值", days: 2.2, me: false },
+  { d: "工艺专业均值", days: 2.6, me: false },
+  { d: "考核目标", days: 2.5, me: false, target: true },
+]);
+const DEPT_ACCEPT = [
+  { name: "工艺", value: 52 },
+  { name: "设备", value: 49 },
+  { name: "管理", value: 25 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+
+const profHighRisk = [
+  { id: "MOC-2026-R01-0035", status: '审批中', title: 'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）' },
+  { id: "MOC-2026-R01-0036", status: '审批中', title: '聚合反应温度控制上限调整（78℃→82℃）' },
+  { id: "MOC-2026-R01-0037", status: '实施中', title: '原料环己烷供应商变更（新增 B 供应商）' },
+];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 卡片数据 -->
+    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16" 
+        :style="{
+            '--theme-color': themeStore.themeColor,
+            '--success-color': themeStore.otherColor.success,
+            '--warning-color': themeStore.otherColor.warning,
+        }"
+    >
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+        >
+          <p class="text-12px font-600">本月会签 / 审批</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="6"
+              class="text-24px font-600 text-[#333]"
+            />
+          </div>
+          <p class="text-12px">口径：节点签出记录</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+        >
+          <p class="text-12px font-600">我的会签平均耗时</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="1.8"
+              :decimals="1"
+              class="text-26px font-600 text-[var(--success-color)]"
+            /><p class="text-26px font-600 text-[var(--success-color)]">天</p>
+          </div>
+          <p class="text-12px">口径：签收→签出时长 · 目标 ≤2.5 天</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+        >
+          <p class="text-12px font-600">按时完成率</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="95"
+              class="text-26px font-600 text-[var(--success-color)]"
+            /><p class="text-26px font-600 text-[var(--success-color)]">%</p>
+          </div>
+          <p class="text-12px">考核：目标 ≥90%</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+        >
+          <p class="text-12px font-600">参与风险分析</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="2"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            /><p class="text-26px font-600 text-[var(--theme-color)]">次</p>
+          </div>
+          <p class="text-12px">口径：HAZOP / JSA 分析组成员（选择式）记录</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+        >
+          <p class="text-12px font-600">当前待我审批</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="1"
+              class="text-26px font-600 text-[var(--warning-color)]"
+            />
+          </div>
+          <p class="text-12px">实时 · 与工作台同源</p>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">会签效率对比（考核 · 汇报）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-3">
+                <div v-for="e in profEff" :key="e.d">
+                    <div class="mb-1 flex items-center justify-between text-xs">
+                        <span :class="e.me ? 'font-semibold text-[var(--theme-color)]' : 'text-slate-600'">{{ e.d }}</span>
+                        <span :class="e.target ? 'text-slate-400' : e.days > 2.5 ? 'font-medium text-[var(--error-color)]' : 'text-slate-500'">{{ e.days }} 天{{ e.target ? "（标线）" : "" }}</span>
+                    </div>
+                    <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full" :class="e.target ? 'bg-slate-300' : e.me ? 'bg-[var(--theme-color)]' : e.days > 2.5 ? 'bg-[var(--error-color)]' : 'bg-[#6E93C6]'" :style="{ width: `${Math.min(100, (e.days / 4) * 100)}%` }" />
+                    </div>
+                </div>
+                <p class="text-[11px] text-slate-400">考核数据来源：节点签收 → 签出时长自动统计；连续两月超标将纳入绩效面谈</p>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">本专业变更类型分布（近一年）</p>
+            <div class="py-3 px-4">
+                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">本专业高风险在办（直达风险分析）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-2 pt-1">
+                    <div v-for="c in profHighRisk" :key="c.id" @click="emit('go', 'risk')" class="cursor-pointer flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left hover:border-red-300 hover:bg-red-50/30">
+                        <span class="min-w-0 flex-1">
+                        <span class="block truncate text-sm font-medium text-slate-800">{{ c.title }}</span>
+                        <span class="text-[11px] text-slate-400">{{ c.id }} · {{ c.status }}</span>
+                        </span>
+                        <ChevronRight class="h-3.5 w-3.5 shrink-0 text-slate-300" />
+                    </div>
+                    <p class="text-[11px] text-slate-400">更多高风险场景与分析记录见「本专业高风险」页</p>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+</NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/systemManage/role/index.vue b/src/views/systemManage/role/index.vue
index 76c2f0c..fc3ce1a 100644
--- a/src/views/systemManage/role/index.vue
+++ b/src/views/systemManage/role/index.vue
@@ -1,256 +1,256 @@
-<script setup lang="ts">
-import { ref, computed, h, onMounted } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouter } from 'vue-router';
-import { NButton, NPopconfirm } from 'naive-ui';
-import { roleListApi } from '@/service/api/role';
-
-const router = useRouter();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const loading = ref<boolean>(false);
-const btnLoading = ref<boolean>(false);
-const currentType = ref<string>('add');
-const formRef = ref<any>(null);
-const currentRole = ref<{ id: number, name: string }>({
-  id: 0,
-  name: '',
-});
-const rules = ref({
-  name: { required: true, message: '角色名称不能为空', trigger: ['blur'] }
-})
-const roleModal = ref<boolean>(false);
-const permissionModal = ref<boolean>(false);
-const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
-    page: 1,
-    pageSize: 20,
-    pageCount: 0,
-})
-const columns = ref([
-  {
-    title: '序号',
-    key: 'index',
-    width: 5,
-    align: 'center',
-    render: (_row: any, index: number) => {
-      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
-    }
-  },
-  {
-    title: '角色名称',
-    key: 'name',
-    width: 44,
-    align: 'center',
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 8,
-    align: 'center',
-    render: (row: any) => {
-      return h('div', { class: 'flex items-center justify-center gap-3' }, {
-        default: () => [
-          h(NButton, {
-            text: true,
-            size: 'tiny',
-            type: 'primary',
-            onClick: () => handleSetPermission(row)
-          }, {
-            // 渲染按钮文本
-            default: () => '设置权限'
-          }),
-          h(NButton, {
-            text: true,
-            size: 'tiny',
-            type: 'primary',
-            onClick: () => handleEdit(row)
-          }, {
-            // 渲染按钮文本
-            default: () => '编辑'
-          }),
-          h(NPopconfirm, {
-            // 组件 Props
-            positiveText: '确定',
-            negativeText: '取消',
-            onPositiveClick: () => {
-              handleDelete(row)
-            },
-            // 可选：自定义确认/取消按钮的样式
-            positiveButtonProps: { size: 'tiny', type: 'primary' },
-            negativeButtonProps: { size: 'tiny' }
-          }, {
-            // 插槽 (Slots)
-            trigger: () => h(NButton,
-              {
-                text: true,
-                size: 'tiny',
-                type: 'error',
-              },
-              {
-                default: () => '删除' // 按钮文字
-              }
-            ),
-            default: () => '确定要删除吗？' // 弹出框的提示内容
-          }),
-        ]
-      })
-    }
-  },
-])
-const list = ref<{ id: number, name: string, intro: string, perms: string[] }[]>([])
-
-// 获取列表
-const getList = async () => {
-  loading.value = true;
-  try {
-    const res = await roleListApi();
-    list.value = res.data;
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 打开添加角色弹框
-const addRole = () => {
-  currentType.value = 'add';
-  currentRole.value = {
-    id: 0,
-    name: '',
-  };
-  roleModal.value = true;
-}
-// 设置权限
-const handleSetPermission = (row: any) => {
-  currentRole.value = {
-    id: row.id,
-    name: row.name,
-  };
-  permissionModal.value = true;
-}
-// 编辑角色
-const handleEdit = (row: any) => {
-  currentType.value = 'edit';
-  currentRole.value = {
-    id: row.id,
-    name: row.name,
-  };
-  roleModal.value = true;
-}
-// 删除角色
-const handleDelete = (row: any) => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-    list.value = list.value.filter((item: any) => item.id !== row.id);
-    window.$message?.success('删除成功')
-  }, 1000)
-}
-// 保存角色
-const saveRole = async (e: MouseEvent) => {
-  e.preventDefault()
-  formRef.value?.validate((errors: any) => {
-    if (!errors) {
-      btnLoading.value = true;
-      setTimeout(() => {
-        // 新增
-        if(currentType.value === 'add'){
-          list.value.push({id:list.value.length+1,name:currentRole.value?.name})
-        }
-        // 编辑
-        if(currentType.value === 'edit'){
-          const target = list.value.find((item:any) => item.id === currentRole.value.id);
-          if (target) {
-            target.name = currentRole.value?.name;
-          }
-        }
-        window.$message?.success('操作成功')
-        btnLoading.value = false;
-        roleModal.value = false;
-      }, 1000)
-    }
-  })
-}
-
-onMounted(() => {
-  const allRoutes = router.getRoutes();
-  getList()
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 角色管理 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-            <NGi span="24 s:12 m:12">
-                <div class="h-100% flex items-center gap-2">
-                    <Icon icon="lucide:user" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                    <p class="text-[16px] font-600">角色管理</p>
-                </div>
-            </NGi>
-            <NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
-                <NButton type="primary" size="small" @click="addRole">
-                <Icon icon="ic:round-plus" class="size-16px" />
-                添加角色
-                </NButton>
-            </NGi>
-            </NGrid>
-        </div>
-        <div class="scroll">
-            <NDataTable
-                size="small"
-                :loading="loading"
-                :single-line="false"
-                :columns="columns"
-                :data="list"
-                :pagination="pagination"
-                max-height="calc(100vh - 290px)"
-            />
-        </div>
-        <!-- 新增或编辑弹框 -->
-        <NModal
-              v-model:show="roleModal"
-              preset="card"
-              :title="currentType === 'add' ? '新增角色' : '编辑角色'"
-              :auto-focus="false"
-              :style="{ width: '450px', height: 'auto' }"
-              :segmented="{ content: true, footer: true }"
-          >
-              <template #default>
-                <NForm ref="formRef" :model="currentRole" :rules="rules" label-placement="left" label-width="auto">
-                  <NFormItem label="角色名称" path="name">
-                    <NInput
-                        v-model:value="currentRole.name"
-                        placeholder="请输入角色名称"
-                    />
-                  </NFormItem>
-                </NForm>
-              </template>
-              <template #footer>
-                  <div class="flex justify-end gap-[10px]">
-                      <NButton @click="roleModal = false">取消</NButton>
-                      <NButton type="primary" :loading="btnLoading" @click="saveRole">确定</NButton>
-                  </div>
-              </template>
-          </NModal>
-          <!-- 设置权限抽屉 -->
-          <NDrawer v-model:show="permissionModal" :width="502" placement="right">
-            <NDrawerContent :title="`设置权限-${currentRole.name}`" closable>
-                
-            </NDrawerContent>
-          </NDrawer>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 205px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, h, onMounted } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouter } from 'vue-router';
+import { NButton, NPopconfirm } from 'naive-ui';
+import { roleListApi } from '@/service/api/role';
+
+const router = useRouter();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
+const currentType = ref<string>('add');
+const formRef = ref<any>(null);
+const currentRole = ref<{ id: number, name: string }>({
+  id: 0,
+  name: '',
+});
+const rules = ref({
+  name: { required: true, message: '角色名称不能为空', trigger: ['blur'] }
+})
+const roleModal = ref<boolean>(false);
+const permissionModal = ref<boolean>(false);
+const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
+    page: 1,
+    pageSize: 20,
+    pageCount: 0,
+})
+const columns = ref([
+  {
+    title: '序号',
+    key: 'index',
+    width: 5,
+    align: 'center',
+    render: (_row: any, index: number) => {
+      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
+    }
+  },
+  {
+    title: '角色名称',
+    key: 'name',
+    width: 44,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 8,
+    align: 'center',
+    render: (row: any) => {
+      return h('div', { class: 'flex items-center justify-center gap-3' }, {
+        default: () => [
+          h(NButton, {
+            text: true,
+            size: 'tiny',
+            type: 'primary',
+            onClick: () => handleSetPermission(row)
+          }, {
+            // 渲染按钮文本
+            default: () => '设置权限'
+          }),
+          h(NButton, {
+            text: true,
+            size: 'tiny',
+            type: 'primary',
+            onClick: () => handleEdit(row)
+          }, {
+            // 渲染按钮文本
+            default: () => '编辑'
+          }),
+          h(NPopconfirm, {
+            // 组件 Props
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              handleDelete(row)
+            },
+            // 可选：自定义确认/取消按钮的样式
+            positiveButtonProps: { size: 'tiny', type: 'primary' },
+            negativeButtonProps: { size: 'tiny' }
+          }, {
+            // 插槽 (Slots)
+            trigger: () => h(NButton,
+              {
+                text: true,
+                size: 'tiny',
+                type: 'error',
+              },
+              {
+                default: () => '删除' // 按钮文字
+              }
+            ),
+            default: () => '确定要删除吗？' // 弹出框的提示内容
+          }),
+        ]
+      })
+    }
+  },
+])
+const list = ref<{ id: number, name: string, intro: string, perms: string[] }[]>([])
+
+// 获取列表
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await roleListApi();
+    list.value = res.data;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 打开添加角色弹框
+const addRole = () => {
+  currentType.value = 'add';
+  currentRole.value = {
+    id: 0,
+    name: '',
+  };
+  roleModal.value = true;
+}
+// 设置权限
+const handleSetPermission = (row: any) => {
+  currentRole.value = {
+    id: row.id,
+    name: row.name,
+  };
+  permissionModal.value = true;
+}
+// 编辑角色
+const handleEdit = (row: any) => {
+  currentType.value = 'edit';
+  currentRole.value = {
+    id: row.id,
+    name: row.name,
+  };
+  roleModal.value = true;
+}
+// 删除角色
+const handleDelete = (row: any) => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    list.value = list.value.filter((item: any) => item.id !== row.id);
+    window.$message?.success('删除成功')
+  }, 1000)
+}
+// 保存角色
+const saveRole = async (e: MouseEvent) => {
+  e.preventDefault()
+  formRef.value?.validate((errors: any) => {
+    if (!errors) {
+      btnLoading.value = true;
+      setTimeout(() => {
+        // 新增
+        if(currentType.value === 'add'){
+          list.value.push({id:list.value.length+1,name:currentRole.value?.name})
+        }
+        // 编辑
+        if(currentType.value === 'edit'){
+          const target = list.value.find((item:any) => item.id === currentRole.value.id);
+          if (target) {
+            target.name = currentRole.value?.name;
+          }
+        }
+        window.$message?.success('操作成功')
+        btnLoading.value = false;
+        roleModal.value = false;
+      }, 1000)
+    }
+  })
+}
+
+onMounted(() => {
+  const allRoutes = router.getRoutes();
+  getList()
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 角色管理 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+            <NGi span="24 s:12 m:12">
+                <div class="h-100% flex items-center gap-2">
+                    <Icon icon="lucide:user" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                    <p class="text-[16px] font-600">角色管理</p>
+                </div>
+            </NGi>
+            <NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
+                <NButton type="primary" size="small" @click="addRole">
+                <Icon icon="ic:round-plus" class="size-16px" />
+                添加角色
+                </NButton>
+            </NGi>
+            </NGrid>
+        </div>
+        <div class="scroll">
+            <NDataTable
+                size="small"
+                :loading="loading"
+                :single-line="false"
+                :columns="columns"
+                :data="list"
+                :pagination="pagination"
+                max-height="calc(100vh - 290px)"
+            />
+        </div>
+        <!-- 新增或编辑弹框 -->
+        <NModal
+              v-model:show="roleModal"
+              preset="card"
+              :title="currentType === 'add' ? '新增角色' : '编辑角色'"
+              :auto-focus="false"
+              :style="{ width: '450px', height: 'auto' }"
+              :segmented="{ content: true, footer: true }"
+          >
+              <template #default>
+                <NForm ref="formRef" :model="currentRole" :rules="rules" label-placement="left" label-width="auto">
+                  <NFormItem label="角色名称" path="name">
+                    <NInput
+                        v-model:value="currentRole.name"
+                        placeholder="请输入角色名称"
+                    />
+                  </NFormItem>
+                </NForm>
+              </template>
+              <template #footer>
+                  <div class="flex justify-end gap-[10px]">
+                      <NButton @click="roleModal = false">取消</NButton>
+                      <NButton type="primary" :loading="btnLoading" @click="saveRole">确定</NButton>
+                  </div>
+              </template>
+          </NModal>
+          <!-- 设置权限抽屉 -->
+          <NDrawer v-model:show="permissionModal" :width="502" placement="right">
+            <NDrawerContent :title="`设置权限-${currentRole.name}`" closable>
+                
+            </NDrawerContent>
+          </NDrawer>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 205px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/systemManage/setting/index.vue b/src/views/systemManage/setting/index.vue
index 6c2e900..520ceea 100644
--- a/src/views/systemManage/setting/index.vue
+++ b/src/views/systemManage/setting/index.vue
@@ -1,332 +1,332 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { getColorWithOpacity } from '@/utils/common';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const aiEnabled = ref<boolean>(true);
-// AI 辅助功能配置
-const aiConfig = ref<{address:string, mode:number|null, key:string,timeout:null|number}>({
-    address:'',
-    mode:null,
-    key:'',
-    timeout:null,
-})
-const modeOptions = ref<{label:string, value:number}[]>([
-    {label:'kimi-k2(企业私有化部署)',value:1}
-])
-
-// 变更类型
-const typeList = ref<{id:number, name:string, desc?:string}[]>([
-    {id:1,name:'工艺', desc:'工艺参数、配方、操作条件、操作规程等工艺技术类变更'},
-    {id:2,name:'设备', desc:'设备本体、附件、材质、规格、备件等硬件类变更'},
-    {id:3,name:'管理', desc:'制度、职责、程序、组织与人员等管理类变更'},
-])
-// 变更等级
-const levelList = ref<{id:number, name:string, way:string,tools:{id:number, name:string}[]}[]>([
-    {id:1,name:'一般', way:'等级评分< 20 分',tools:[{id:1,name:'AI预分析'},{id:2,name:'检查表法'}]},
-    {id:2,name:'重要', way:'等级评分 > 20 分',tools:[{id:1,name:'AI预分析'},{id:2,name:'HAZOP'},{id:3,name:'JSA'},{id:4,name:'SCL'}]},
-])
-// 变更编号规则
-const ruleInfo = ref<{prefix:string, year:null|string, code:number|null, digit:number|null, rule:number|null}>({
-    prefix:'MOC',
-    year:null,
-    code: null,
-    digit: null,
-    rule: null,
-})
-const yearOptions = ref<{label:string, value:string}[]>([
-    {label:'四位年份（yyyy）',value:'yyyy'}
-])
-const codeOptions = ref<{label:string, value:number}[]>([
-    {label:'申请部门装置代码',value:1}
-])
-const ruleOptions = ref<{label:string, value:number}[]>([
-    {label:'按年度+装置代码重置',value:1}
-])
-
-
-
-
-
-const toggle = (v: boolean) => {
-  window.$message?.success(v ? "AI 辅助功能已启用" : "AI 辅助功能已关闭");
-  aiEnabled.value = v;
-}
-
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-        <!-- AI 辅助功能 -->
-        <NGi span="24 s:24 m:24 l:12">
-        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-            :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--success-color': themeStore.otherColor.success,
-                '--warning-color': themeStore.otherColor.warning,
-                '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
-                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
-            }"
-        >
-                <p class=" text-base font-semibold border-b border-slate-100 p-3 flex items-center">
-                    <Icon icon="lucide:sparkles" class="size-14px text-violet-500 mr-1" />AI 辅助功能
-                </p>
-                <div class="py-3 px-4">
-                    <div class="rounded-lg border p-4">
-                        <div class="flex items-center justify-between">
-                            <div class="text-sm font-medium">启用 AI 辅助</div>
-                            <NSwitch size="small" :value="aiEnabled" @update:value="toggle" />
-                        </div>
-                        <div class="mt-1 text-xs text-slate-500">
-                            开启后，变更申请界面显示「变更识别」按钮：AI 自动完成变更前后比较、生成变更申请表（均支持手动修改）；关闭后全部内容手动填写。
-                        </div>
-                    </div>
-                    <div class="mt-3 flex items-center gap-2 rounded-lg px-3 py-2 text-xs"
-                        :class="aiEnabled ? 'bg-[var(--success-bg)] text-[var(--success-color)]' : 'bg-[var(--warning-bg)] text-[var(--warning-color)]'">   
-                        <Icon v-if="aiEnabled" icon="material-symbols:check-circle-outline" class="size-16px" />
-                        <Icon v-else icon="proicons:alert-triangle" class="size-16px" />
-                        当前状态：{{ aiEnabled ? "已启用 —— 变更申请界面提供 AI 变更识别与申请表生成" : "已关闭 —— 变更申请界面为纯手动模式" }}
-                    </div>
-                    <div class="space-y-2 border rounded-md p-3 mt-3">
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">接口地址</p>
-                            <div class="flex-1">
-                                <NInput v-model:value="aiConfig.address" placeholder="请输入接口地址" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">模型</p>
-                            <div class="flex-1">
-                                <NSelect v-model:value="aiConfig.mode" :options="modeOptions"  placeholder="请选择模型" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">API Key</p>
-                            <div class="flex-1">
-                                <NInput v-model:value="aiConfig.key" placeholder="请输入API Key" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">超时（秒）</p>
-                            <div class="flex-1">
-                                <NInputNumber v-model:value="aiConfig.timeout" :min="1" :show-button="false" :precision="0" placeholder="请输入超时时间" />
-                            </div>
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <NButton size="small" type="primary" class="text-xs">测试连接</NButton>
-                            <NButton size="small" class="text-xs">保存配置</NButton>
-                            <NButton size="small" class="text-xs">
-                                <Icon icon="akar-icons:file" class="size-14px mr-1" />
-                                调用记录查询
-                            </NButton>
-                        </div>
-                    </div>
-                </div>
-        </NCard>
-        </NGi>
-        <!-- 变更类型设置（支持自定义） -->
-        <NGi span="24 s:24 m:24 l:12">
-            <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
-                    <div class="flex items-center">
-                        <Icon icon="ep:setting" class="size-16px mr-1" />
-                        变更类型设置（支持自定义）
-                    </div>
-                    <NButton size="small" type="primary" class="text-xs">
-                        <Icon icon="ic:round-plus" class="size-16px" />新增类型
-                    </NButton>
-                </div>
-                <div class="py-3 px-4">
-                    <div v-if="typeList.length" class="border rounded-md">
-                        <template v-for="(item,index) in typeList" :key="item.id">
-                            <div class="p-3 flex items-center gap-2" :class="{'border-t':index !== 0}">
-                                <div class="flex-1 flex gap-2">
-                                    <NTag size="small" type="success">{{item.name}}</NTag>
-                                    <p class="flex-1">{{item.desc}}</p>
-                                </div>
-                                <div class="flex items-center gap-2">
-                                    <NButton text type="primary" class="text-xs">
-                                        <Icon icon="akar-icons:edit" class="size-14px" />编辑
-                                    </NButton>
-                                    <NButton text type="error" class="text-xs">
-                                        <Icon icon="ep:delete" class="size-12px" />删除
-                                    </NButton>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                    <div v-else>
-                        <NEmpty description="暂无变更类型"></NEmpty>
-                    </div>
-                    <p class="mt-3 text-xs text-slate-400">每个类型可关联默认审批流程模板、材料清单模板和 PSSR 检查模板;历史变更单保留原类型快照，不受修改/删除影响。</p>
-                </div>
-            </NCard>
-        </NGi>
-    </NGrid>
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-        <!-- 变更等级设定（支持自定义） -->
-        <NGi span="24 s:24 m:24 l:12">
-            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-                :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--theme-color': themeStore.themeColor,
-                '--warning-color': themeStore.otherColor.warning,
-                '--error-color': themeStore.otherColor.error,
-                }"
-            >
-                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
-                    <div class="flex items-center">
-                        <Icon icon="ep:setting" class="size-16px mr-1" />
-                        变更等级设定（支持自定义）
-                    </div>
-                    <NButton size="small" type="primary" class="text-xs">
-                        <Icon icon="ic:round-plus" class="size-16px" />新增等级
-                    </NButton>
-                </div>
-                <div class="py-3 px-4">
-                    <div v-if="levelList.length" class="space-y-2">
-                        <div v-for="item in levelList" :key="item.id" class="border rounded-md p-3">
-                            <div class="flex items-center">
-                                <div class="flex-1 flex items-center gap-2">
-                                    <NTag v-if="item.name==='一般'" size="small">{{item.name}}</NTag>
-                                    <NTag v-else-if="item.name==='重要'" size="small" type="error">{{item.name}}</NTag>
-                                    <p class="flex-1">判定方式：<b>{{item.way}}</b></p>
-                                </div>
-                                <div class="flex items-center gap-2">
-                                    <NButton text type="primary" class="text-xs">
-                                        <Icon icon="akar-icons:edit" class="size-14px" />编辑
-                                    </NButton>
-                                    <NButton text type="error" class="text-xs">
-                                        <Icon icon="ep:delete" class="size-12px" />删除
-                                    </NButton>
-                                </div>
-                            </div>
-                            <div class="flex flex-wrap mt-2">
-                                <p>对应分析工具：</p>
-                                <div class="flex items-center flex-wrap gap-2">
-                                    <NTag v-for="tool in item.tools" :key="tool.id" size="small" type="info">{{tool.name}}</NTag>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div v-else>
-                        <NEmpty description="暂无变更等级"></NEmpty>
-                    </div>
-                    <p class="mt-3 text-xs text-slate-400">等级决定审批流程、风险分析深度与会签范围;申请时系统按判定方式自动定级并推荐对应分析工具，支持人工改判留痕。勾选 HAZOP/JSA/SCL的风险定级规则见下方「风险矩阵设置」。</p>
-                </div>
-            </NCard>
-        </NGi>
-        <!-- 变更编号规则 -->
-        <NGi span="24 s:24 m:24 l:12">
-            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-                :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--theme-color': themeStore.themeColor,
-                '--warning-color': themeStore.otherColor.warning,
-                '--error-color': themeStore.otherColor.error,
-                }"
-            >
-                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
-                    <div class="flex items-center">
-                        <Icon icon="ep:setting" class="size-16px mr-1" />
-                        变更编号规则
-                    </div>
-                </div>
-                <div class="py-3 px-4">
-                    <div class="space-y-2">
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">编号前缀</p>
-                            <div class="flex-1">
-                                <NInput v-model:value="ruleInfo.prefix" placeholder="请输入编号前缀" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">年份格式</p>
-                            <div class="flex-1">
-                                <NSelect v-model:value="ruleInfo.year" :options="yearOptions"  placeholder="请选择年份格式" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">装置代码段</p>
-                            <div class="flex-1">
-                                <NSelect v-model:value="ruleInfo.code" :options="codeOptions"  placeholder="请选择装置代码段" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">流水号位数</p>
-                            <div class="flex-1">
-                                <NInputNumber v-model:value="ruleInfo.digit" :min="1" :show-button="false" :precision="0" placeholder="请输入流水号位数" />
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <p class="w-100px text-left">流水重置规则</p>
-                            <div class="flex-1">
-                                <NSelect v-model:value="ruleInfo.rule" :options="ruleOptions"  placeholder="请选择流水重置规则" />
-                            </div>
-                        </div>
-                        <div class="flex items-center p-3 bg-[#f8fafc] rounded-md">
-                            <span>编号示例预览：</span>
-                            <span class="text-[var(--theme-color)]">MOC-2026-R01-0001</span>
-                            <NButton size="small" type="primary" class="text-xs ml-auto">保存规则</NButton>
-                        </div>
-                    </div>
-                    <p class="mt-3 text-xs text-slate-400">保存草稿即预占编号，提交后正式生效;规则修改不影响历史单据编号。</p>
-                </div>
-            </NCard>
-        </NGi>
-    </NGrid>
-    <!-- 风险矩阵设置（按分析方法） -->
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-        <NGi span="24 s:24 m:24 l:24">
-            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
-                :style="{ 
-                borderRadius: themeStore.themeRadius + 'px', 
-                height: '100%',
-                '--theme-color': themeStore.themeColor,
-                '--warning-color': themeStore.otherColor.warning,
-                '--error-color': themeStore.otherColor.error,
-                }"
-            >
-                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
-                    <div class="flex items-center">
-                        <Icon icon="icon-park-outline:all-application" class="size-16px mr-1" />
-                        风险矩阵设置（按分析方法）
-                    </div>
-                    <NButton size="small" class="text-xs">
-                        <Icon icon="akar-icons:edit" class="size-14px mr-1" />
-                        维度分级定义
-                    </NButton>
-                    <NButton size="small" type="primary" class="text-xs">
-                        保存矩阵
-                    </NButton>
-                </div>
-                <div class="py-3 px-4">
-                    <NTabs type="segment" animated>
-                        <NTabPane name="chap1" tab="HAZOP分析矩阵">
-                        HAZOP分析矩阵
-                        </NTabPane>
-                        <NTabPane name="chap2" tab="JSA分析矩阵">
-                        JSA分析矩阵
-                        </NTabPane>
-                        <NTabPane name="chap3" tab="SCL分析矩阵">
-                        SCL分析矩阵
-                        </NTabPane>
-                    </NTabs>
-                </div>
-            </NCard>
-        </NGi>
-    </NGrid>
-</NSpace>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const aiEnabled = ref<boolean>(true);
+// AI 辅助功能配置
+const aiConfig = ref<{address:string, mode:number|null, key:string,timeout:null|number}>({
+    address:'',
+    mode:null,
+    key:'',
+    timeout:null,
+})
+const modeOptions = ref<{label:string, value:number}[]>([
+    {label:'kimi-k2(企业私有化部署)',value:1}
+])
+
+// 变更类型
+const typeList = ref<{id:number, name:string, desc?:string}[]>([
+    {id:1,name:'工艺', desc:'工艺参数、配方、操作条件、操作规程等工艺技术类变更'},
+    {id:2,name:'设备', desc:'设备本体、附件、材质、规格、备件等硬件类变更'},
+    {id:3,name:'管理', desc:'制度、职责、程序、组织与人员等管理类变更'},
+])
+// 变更等级
+const levelList = ref<{id:number, name:string, way:string,tools:{id:number, name:string}[]}[]>([
+    {id:1,name:'一般', way:'等级评分< 20 分',tools:[{id:1,name:'AI预分析'},{id:2,name:'检查表法'}]},
+    {id:2,name:'重要', way:'等级评分 > 20 分',tools:[{id:1,name:'AI预分析'},{id:2,name:'HAZOP'},{id:3,name:'JSA'},{id:4,name:'SCL'}]},
+])
+// 变更编号规则
+const ruleInfo = ref<{prefix:string, year:null|string, code:number|null, digit:number|null, rule:number|null}>({
+    prefix:'MOC',
+    year:null,
+    code: null,
+    digit: null,
+    rule: null,
+})
+const yearOptions = ref<{label:string, value:string}[]>([
+    {label:'四位年份（yyyy）',value:'yyyy'}
+])
+const codeOptions = ref<{label:string, value:number}[]>([
+    {label:'申请部门装置代码',value:1}
+])
+const ruleOptions = ref<{label:string, value:number}[]>([
+    {label:'按年度+装置代码重置',value:1}
+])
+
+
+
+
+
+const toggle = (v: boolean) => {
+  window.$message?.success(v ? "AI 辅助功能已启用" : "AI 辅助功能已关闭");
+  aiEnabled.value = v;
+}
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+        <!-- AI 辅助功能 -->
+        <NGi span="24 s:24 m:24 l:12">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--success-color': themeStore.otherColor.success,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+            }"
+        >
+                <p class=" text-base font-semibold border-b border-slate-100 p-3 flex items-center">
+                    <Icon icon="lucide:sparkles" class="size-14px text-violet-500 mr-1" />AI 辅助功能
+                </p>
+                <div class="py-3 px-4">
+                    <div class="rounded-lg border p-4">
+                        <div class="flex items-center justify-between">
+                            <div class="text-sm font-medium">启用 AI 辅助</div>
+                            <NSwitch size="small" :value="aiEnabled" @update:value="toggle" />
+                        </div>
+                        <div class="mt-1 text-xs text-slate-500">
+                            开启后，变更申请界面显示「变更识别」按钮：AI 自动完成变更前后比较、生成变更申请表（均支持手动修改）；关闭后全部内容手动填写。
+                        </div>
+                    </div>
+                    <div class="mt-3 flex items-center gap-2 rounded-lg px-3 py-2 text-xs"
+                        :class="aiEnabled ? 'bg-[var(--success-bg)] text-[var(--success-color)]' : 'bg-[var(--warning-bg)] text-[var(--warning-color)]'">   
+                        <Icon v-if="aiEnabled" icon="material-symbols:check-circle-outline" class="size-16px" />
+                        <Icon v-else icon="proicons:alert-triangle" class="size-16px" />
+                        当前状态：{{ aiEnabled ? "已启用 —— 变更申请界面提供 AI 变更识别与申请表生成" : "已关闭 —— 变更申请界面为纯手动模式" }}
+                    </div>
+                    <div class="space-y-2 border rounded-md p-3 mt-3">
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">接口地址</p>
+                            <div class="flex-1">
+                                <NInput v-model:value="aiConfig.address" placeholder="请输入接口地址" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">模型</p>
+                            <div class="flex-1">
+                                <NSelect v-model:value="aiConfig.mode" :options="modeOptions"  placeholder="请选择模型" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">API Key</p>
+                            <div class="flex-1">
+                                <NInput v-model:value="aiConfig.key" placeholder="请输入API Key" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">超时（秒）</p>
+                            <div class="flex-1">
+                                <NInputNumber v-model:value="aiConfig.timeout" :min="1" :show-button="false" :precision="0" placeholder="请输入超时时间" />
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <NButton size="small" type="primary" class="text-xs">测试连接</NButton>
+                            <NButton size="small" class="text-xs">保存配置</NButton>
+                            <NButton size="small" class="text-xs">
+                                <Icon icon="akar-icons:file" class="size-14px mr-1" />
+                                调用记录查询
+                            </NButton>
+                        </div>
+                    </div>
+                </div>
+        </NCard>
+        </NGi>
+        <!-- 变更类型设置（支持自定义） -->
+        <NGi span="24 s:24 m:24 l:12">
+            <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
+                    <div class="flex items-center">
+                        <Icon icon="ep:setting" class="size-16px mr-1" />
+                        变更类型设置（支持自定义）
+                    </div>
+                    <NButton size="small" type="primary" class="text-xs">
+                        <Icon icon="ic:round-plus" class="size-16px" />新增类型
+                    </NButton>
+                </div>
+                <div class="py-3 px-4">
+                    <div v-if="typeList.length" class="border rounded-md">
+                        <template v-for="(item,index) in typeList" :key="item.id">
+                            <div class="p-3 flex items-center gap-2" :class="{'border-t':index !== 0}">
+                                <div class="flex-1 flex gap-2">
+                                    <NTag size="small" type="success">{{item.name}}</NTag>
+                                    <p class="flex-1">{{item.desc}}</p>
+                                </div>
+                                <div class="flex items-center gap-2">
+                                    <NButton text type="primary" class="text-xs">
+                                        <Icon icon="akar-icons:edit" class="size-14px" />编辑
+                                    </NButton>
+                                    <NButton text type="error" class="text-xs">
+                                        <Icon icon="ep:delete" class="size-12px" />删除
+                                    </NButton>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                    <div v-else>
+                        <NEmpty description="暂无变更类型"></NEmpty>
+                    </div>
+                    <p class="mt-3 text-xs text-slate-400">每个类型可关联默认审批流程模板、材料清单模板和 PSSR 检查模板;历史变更单保留原类型快照，不受修改/删除影响。</p>
+                </div>
+            </NCard>
+        </NGi>
+    </NGrid>
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+        <!-- 变更等级设定（支持自定义） -->
+        <NGi span="24 s:24 m:24 l:12">
+            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+                :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--warning-color': themeStore.otherColor.warning,
+                '--error-color': themeStore.otherColor.error,
+                }"
+            >
+                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
+                    <div class="flex items-center">
+                        <Icon icon="ep:setting" class="size-16px mr-1" />
+                        变更等级设定（支持自定义）
+                    </div>
+                    <NButton size="small" type="primary" class="text-xs">
+                        <Icon icon="ic:round-plus" class="size-16px" />新增等级
+                    </NButton>
+                </div>
+                <div class="py-3 px-4">
+                    <div v-if="levelList.length" class="space-y-2">
+                        <div v-for="item in levelList" :key="item.id" class="border rounded-md p-3">
+                            <div class="flex items-center">
+                                <div class="flex-1 flex items-center gap-2">
+                                    <NTag v-if="item.name==='一般'" size="small">{{item.name}}</NTag>
+                                    <NTag v-else-if="item.name==='重要'" size="small" type="error">{{item.name}}</NTag>
+                                    <p class="flex-1">判定方式：<b>{{item.way}}</b></p>
+                                </div>
+                                <div class="flex items-center gap-2">
+                                    <NButton text type="primary" class="text-xs">
+                                        <Icon icon="akar-icons:edit" class="size-14px" />编辑
+                                    </NButton>
+                                    <NButton text type="error" class="text-xs">
+                                        <Icon icon="ep:delete" class="size-12px" />删除
+                                    </NButton>
+                                </div>
+                            </div>
+                            <div class="flex flex-wrap mt-2">
+                                <p>对应分析工具：</p>
+                                <div class="flex items-center flex-wrap gap-2">
+                                    <NTag v-for="tool in item.tools" :key="tool.id" size="small" type="info">{{tool.name}}</NTag>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <NEmpty description="暂无变更等级"></NEmpty>
+                    </div>
+                    <p class="mt-3 text-xs text-slate-400">等级决定审批流程、风险分析深度与会签范围;申请时系统按判定方式自动定级并推荐对应分析工具，支持人工改判留痕。勾选 HAZOP/JSA/SCL的风险定级规则见下方「风险矩阵设置」。</p>
+                </div>
+            </NCard>
+        </NGi>
+        <!-- 变更编号规则 -->
+        <NGi span="24 s:24 m:24 l:12">
+            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+                :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--warning-color': themeStore.otherColor.warning,
+                '--error-color': themeStore.otherColor.error,
+                }"
+            >
+                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
+                    <div class="flex items-center">
+                        <Icon icon="ep:setting" class="size-16px mr-1" />
+                        变更编号规则
+                    </div>
+                </div>
+                <div class="py-3 px-4">
+                    <div class="space-y-2">
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">编号前缀</p>
+                            <div class="flex-1">
+                                <NInput v-model:value="ruleInfo.prefix" placeholder="请输入编号前缀" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">年份格式</p>
+                            <div class="flex-1">
+                                <NSelect v-model:value="ruleInfo.year" :options="yearOptions"  placeholder="请选择年份格式" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">装置代码段</p>
+                            <div class="flex-1">
+                                <NSelect v-model:value="ruleInfo.code" :options="codeOptions"  placeholder="请选择装置代码段" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">流水号位数</p>
+                            <div class="flex-1">
+                                <NInputNumber v-model:value="ruleInfo.digit" :min="1" :show-button="false" :precision="0" placeholder="请输入流水号位数" />
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <p class="w-100px text-left">流水重置规则</p>
+                            <div class="flex-1">
+                                <NSelect v-model:value="ruleInfo.rule" :options="ruleOptions"  placeholder="请选择流水重置规则" />
+                            </div>
+                        </div>
+                        <div class="flex items-center p-3 bg-[#f8fafc] rounded-md">
+                            <span>编号示例预览：</span>
+                            <span class="text-[var(--theme-color)]">MOC-2026-R01-0001</span>
+                            <NButton size="small" type="primary" class="text-xs ml-auto">保存规则</NButton>
+                        </div>
+                    </div>
+                    <p class="mt-3 text-xs text-slate-400">保存草稿即预占编号，提交后正式生效;规则修改不影响历史单据编号。</p>
+                </div>
+            </NCard>
+        </NGi>
+    </NGrid>
+    <!-- 风险矩阵设置（按分析方法） -->
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+        <NGi span="24 s:24 m:24 l:24">
+            <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+                :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--warning-color': themeStore.otherColor.warning,
+                '--error-color': themeStore.otherColor.error,
+                }"
+            >
+                <div class="flex items-center justify-between text-base font-semibold border-b border-slate-100 p-3">
+                    <div class="flex items-center">
+                        <Icon icon="icon-park-outline:all-application" class="size-16px mr-1" />
+                        风险矩阵设置（按分析方法）
+                    </div>
+                    <NButton size="small" class="text-xs">
+                        <Icon icon="akar-icons:edit" class="size-14px mr-1" />
+                        维度分级定义
+                    </NButton>
+                    <NButton size="small" type="primary" class="text-xs">
+                        保存矩阵
+                    </NButton>
+                </div>
+                <div class="py-3 px-4">
+                    <NTabs type="segment" animated>
+                        <NTabPane name="chap1" tab="HAZOP分析矩阵">
+                        HAZOP分析矩阵
+                        </NTabPane>
+                        <NTabPane name="chap2" tab="JSA分析矩阵">
+                        JSA分析矩阵
+                        </NTabPane>
+                        <NTabPane name="chap3" tab="SCL分析矩阵">
+                        SCL分析矩阵
+                        </NTabPane>
+                    </NTabs>
+                </div>
+            </NCard>
+        </NGi>
+    </NGrid>
+</NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/systemManage/template/index.vue b/src/views/systemManage/template/index.vue
index b30d8a5..30bf47d 100644
--- a/src/views/systemManage/template/index.vue
+++ b/src/views/systemManage/template/index.vue
@@ -1,547 +1,547 @@
-<script setup lang="ts">
-import { ref, computed, h, onMounted } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouter } from 'vue-router';
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-
-const router = useRouter();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const loading = ref<boolean>(false);
-const btnLoading = ref<boolean>(false);
-const currentType = ref<string>('add');
-const readonly = computed(() => currentType.value === "view");
-const formRef = ref<any>(null);
-const currentTemplate = ref<{ id: number, category: string | null, level: string | null, timeLimit: string | null, steps: any[] }>({
-  id: 0,
-  category: null,
-  level: null,
-  timeLimit: null,
-  steps: [],
-});
-const rules = ref({
-  category: { required: true, message: '变更类别不能为空', trigger: ['blur'] },
-  level: { required: true, message: '变更等级不能为空', trigger: ['blur'] },
-  timeLimit: { required: true, message: '变更时效不能为空', trigger: ['blur'] },
-  step: { required: true, message: '审批步骤不能为空', trigger: ['blur'] }
-})
-const templateModal = ref<boolean>(false);
-
-const categoryOptions = ref([
-  {
-    label: '工艺',
-    value: '工艺'
-  },
-  {
-    label: '设备',
-    value: '设备'
-  },
-  {
-    label: '管理',
-    value: '管理'
-  }
-])
-
-const levelOptions = ref([
-  {
-    label: '一般',
-    value: '一般'
-  },
-  {
-    label: '重要',
-    value: '重要'
-  },
-])
-
-const timeLimitOptions = ref([
-  {
-    label: '永久',
-    value: '永久'
-  },
-  {
-    label: '临时',
-    value: '临时'
-  },
-])
-const SPECIALTIES = ref<{ label: string, value: string }[]>([
-  { label: '工艺', value: 'process' },
-  { label: '设备', value: 'equipment' },
-  { label: '仪表', value: 'instrument' },
-  { label: '电气', value: 'electrical' },
-  { label: '安全', value: 'safety' },
-  { label: '质量', value: 'quality' }
-]);
-
-const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
-    page: 1,
-    pageSize: 20,
-    pageCount: 0,
-})
-const columns = ref([
-  {
-    title: '序号',
-    key: 'index',
-    width: 6,
-    align: 'center',
-    render: (row: any, index: number) => {
-      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
-    }
-  },
-  {
-    title: '变更类别',
-    key: 'category',
-    width: 8,
-    align: 'center',
-    render: (row: any, index: number) => {
-      return h(NTag, {
-        size: 'small',
-        type: 'default'
-      }, { default: () => `${row.category}` })
-    }
-  },
-  {
-    title: '变更等级',
-    key: 'level',
-    width: 8,
-    align: 'center',
-    render: (row: any, index: number) => {
-      return h(NTag, {
-        size: 'small',
-        type: `${row.level==='重要'?'error':'default'}`
-      }, { default: () => `${row.level}` })
-    }
-  },
-  {
-    title: '变更时效',
-    key: 'timeLimit',
-    width: 8,
-    align: 'center',
-    render: (row: any, index: number) => {
-      return h(NTag, {
-        size: 'small',
-        type: `${row.timeLimit==='临时'?'warning':'info'}`
-      }, { default: () => `${row.timeLimit}` })
-    }
-  },
-  {
-    title: '审批步骤',
-    key: 'step',
-    width: 44,
-    align: 'center',
-    render: (row: any) => {
-      const stepNames = row.steps?.map((step: any) => step.name) || [];
-      const text = stepNames.join(' → ');
-      return h('p', { class: 'text-left text-xs' }, text || '');
-    }
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 12,
-    align: 'center',
-    fixed: 'right',
-    render: (row: any) => {
-      return h('div', { class: 'flex items-center justify-center gap-3' }, {
-        default: () => [
-          h(NButton, {
-            text: true,
-            size: 'tiny',
-            type: 'primary',
-            onClick: () => handleView(row)
-          }, {
-            // 渲染按钮文本
-            default: () => '查看'
-          }),
-          h(NButton, {
-            text: true,
-            size: 'tiny',
-            type: 'primary',
-            onClick: () => handleEdit(row)
-          }, {
-            // 渲染按钮文本
-            default: () => '编辑'
-          }),
-          h(NPopconfirm, {
-            // 组件 Props
-            positiveText: '确定',
-            negativeText: '取消',
-            onPositiveClick: () => {
-              handleDelete(row)
-            },
-            // 可选：自定义确认/取消按钮的样式
-            positiveButtonProps: { size: 'tiny', type: 'primary' },
-            negativeButtonProps: { size: 'tiny' }
-          }, {
-            // 插槽 (Slots)
-            trigger: () => h(NButton,
-              {
-                text: true,
-                size: 'tiny',
-                type: 'error',
-              },
-              {
-                default: () => '删除' // 按钮文字
-              }
-            ),
-            default: () => '确定要删除吗？' // 弹出框的提示内容
-          }),
-        ]
-      })
-    }
-  },
-])
-const list = ref<{ id: number, category: string, level: string, timeLimit: string, steps: any[] }[]>([])
-
-// 获取列表
-const getList = async () => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-    list.value = [
-      {id:1,category:'工艺',level:'重要',timeLimit:'临时',steps: [
-        {
-          id:101,
-          name:'部门审核',
-          countersign: false,
-          members: [{person:'测试人员01',specialty:'',countersign:false}]
-        },
-        {
-          id:102,
-          name:'专业审批',
-          countersign: false,
-          members: [{person:'测试人员02',specialty:'',countersign:false}]
-        },
-        {id: 103, 
-          name: "部门负责人批准", 
-          countersign: false, 
-          members: [ {person:'测试人员03',specialty:'',countersign:false}] 
-        } 
-      ]},
-      {id:2,category:'设备',level:'一般',timeLimit:'临时',steps:[
-
-      ]},
-      {id:3,category:'管理',level:'重要',timeLimit:'永久',steps:[
-
-      ]},
-      {id:4,category:'工艺',level:'重要',timeLimit:'临时',steps:[
-
-      ]},
-      
-    ]
-  }, 1000)
-}
-
-// 打开添加模板弹框
-const addTemplate = () => {
-  currentType.value = 'add';
-  currentTemplate.value = {
-    id: 0,
-    category: null,
-    level: null,
-    timeLimit: null,
-    steps: [],
-  };
-  templateModal.value = true;
-}
-// 查看模板
-const handleView = (row: any) => {
-  currentType.value = 'view';
-  currentTemplate.value = {
-    id: row.id,
-    category: row.category,
-    level: row.level,
-    timeLimit: row.timeLimit,
-    steps: row.steps,
-  };
-  templateModal.value = true;
-}
-// 编辑角色
-const handleEdit = (row: any) => {
-  currentType.value = 'edit';
-  currentTemplate.value = {
-    id: row.id,
-    category: row.category,
-    level: row.level,
-    timeLimit: row.timeLimit,
-    steps: row.steps,
-  };
-  templateModal.value = true;
-}
-// 删除角色
-const handleDelete = (row: any) => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-    list.value = list.value.filter((item: any) => item.id !== row.id);
-    window.$message?.success('删除成功')
-  }, 1000)
-}
-// 保存角色
-const saveRole = async (e: MouseEvent) => {
-  e.preventDefault()
-  formRef.value?.validate((errors: any) => {
-    if (!errors) {
-      btnLoading.value = true;
-      setTimeout(() => {
-        // 新增
-        if(currentType.value === 'add'){
-          list.value.push({
-            id:list.value.length+1,
-            category:currentTemplate.value?.category as string,
-            level:currentTemplate.value?.level as string,
-            timeLimit:currentTemplate.value?.timeLimit as string,
-            steps:currentTemplate.value?.steps as any[]
-          })
-        }
-        // 编辑
-        if(currentType.value === 'edit'){
-          const target = list.value.find((item:any) => item.id === currentTemplate.value.id);
-          if (target) {
-            target.category = currentTemplate.value?.category as string;
-            target.level = currentTemplate.value?.level as string;
-            target.timeLimit = currentTemplate.value?.timeLimit as string;
-            target.steps = currentTemplate.value?.steps as any[];
-          }
-        }
-        window.$message?.success('操作成功')
-        btnLoading.value = false;
-        templateModal.value = false;
-      }, 1000)
-    }
-  })
-}
-// 会签步骤：一个模板最多一步；只有会签步骤能选专业。
-// 勾选/取消后，所有非会签步骤的人员专业与「必须会签」标记一并清空
-const setStepCountersign = (target: any, v: boolean) => {
-  currentTemplate.value.steps.forEach((s:any) => {
-    s.countersign = s === target ? v : false;
-    if (!s.countersign) s.members.forEach((m:any) => { m.specialty = ""; m.countersign = false; });
-  });
-}
-// 当前打开人员选择器的步骤（步骤行「＋」按钮切换）
-const pickerStepId = ref<number | null>(null);
-const pick = ref<string | null>(null);
-const togglePicker = (s: any) => {
-  pickerStepId.value = pickerStepId.value === s.id ? null : s.id;
-  pick.value = null;
-}
-const addMember = (s: any, v: string | null) => {
-  if (v && !s.members.some((m:any) => m.person === v)) s.members.push({ person: v, specialty: "", countersign: false });
-  pick.value = null;
-  pickerStepId.value = null;
-}
-const delMember = (s: any, p: string) => {
-  s.members = s.members.filter((m:any) => m.person !== p);
-}
-const removeStep = (idx: number) => {
-  currentTemplate.value.steps.splice(idx, 1);
-}
-let sid = 100;
-const mkStep = (name: string, extra: Partial<any> = {}): any => ({ id: ++sid, name, countersign: false, members: [], ...extra });
-const addStepAfter = (idx: number) => {
-  currentTemplate.value.steps.splice(idx + 1, 0, mkStep(""));
-}
-const ORG_TREE = [
-  {
-    id: "factory", name: "演示工厂", short: "YS", leaf: false, sort: 0,
-    children: [
-      {
-        id: "scb", name: "生产部", short: "SCB", leaf: false, sort: 0,
-        children: [
-          { id: "cj1", name: "测试车间一", short: "CJ1", leaf: true, sort: 0 },
-          { id: "cj2", name: "测试车间二", short: "CJ2", leaf: true, sort: 1 },
-          { id: "cj3", name: "测试车间三", short: "CJ3", leaf: true, sort: 2 },
-        ],
-      },
-      {
-        id: "ahb", name: "安环部", short: "AHB", leaf: false, sort: 1,
-        children: [
-          { id: "aqk", name: "安全科", short: "AQK", leaf: true, sort: 0 },
-          { id: "hbk", name: "环保科", short: "HBK", leaf: true, sort: 1 },
-        ],
-      },
-      {
-        id: "sbb", name: "设备部", short: "SBB", leaf: false, sort: 2,
-        children: [
-          { id: "sbk", name: "设备科", short: "SBK", leaf: true, sort: 0 },
-        ],
-      },
-      {
-        id: "zlb", name: "质量部", short: "ZLB", leaf: false, sort: 3,
-        children: [
-          { id: "zjk", name: "质检科", short: "ZJK", leaf: true, sort: 0 },
-        ],
-      },
-    ],
-  },
-];
-const LEVEL2_ORGS = ORG_TREE[0]?.children ?? [];
-const ORG_MEMBERS = [
-  { id: 1, name: "测试人员01", dept: "测试车间一", gender: "男", phone: "13800000001", email: "test01@demo.com", account: "TEST001", role: "操作人员", scope: ["factory"], enabled: true },
-  { id: 2, name: "测试人员02", dept: "测试车间二", gender: "女", phone: "13800000002", email: "test02@demo.com", account: "TEST002", role: "班长", scope: ["factory"], enabled: true },
-  { id: 3, name: "测试人员03", dept: "测试车间三", gender: "男", phone: "13800000003", email: "test03@demo.com", account: "TEST003", role: "车间主任", scope: ["factory"], enabled: true },
-  { id: 4, name: "测试人员04", dept: "安全科", gender: "女", phone: "13800000004", email: "test04@demo.com", account: "TEST004", role: "安全工程师", scope: ["factory"], enabled: true },
-  { id: 5, name: "测试人员05", dept: "环保科", gender: "男", phone: "13800000005", email: "test05@demo.com", account: "TEST005", role: "环保专员", scope: ["factory"], enabled: true },
-  { id: 6, name: "测试人员06", dept: "设备科", gender: "男", phone: "13800000006", email: "test06@demo.com", account: "TEST006", role: "设备工程师", scope: ["factory"], enabled: true },
-  { id: 7, name: "测试人员07", dept: "质检科", gender: "女", phone: "13800000007", email: "test07@demo.com", account: "TEST007", role: "质量工程师", scope: ["factory"], enabled: true },
-];
-function orgSubtreeNames(n: any): string[] {
-  return [n.name, ...(n.children ?? []).flatMap(orgSubtreeNames)];
-}
-// 预设人员：级联选项（第二层组织 → 组织下可选成员，已选成员不再出现，空组织不展示）
-const peopleOpts = (s: any) =>
-  LEVEL2_ORGS.map((o) => ({
-    label: o.name,
-    value: o.id,
-    children: ORG_MEMBERS
-      .filter((m) => m.enabled && orgSubtreeNames(o).includes(m.dept) && !s.members.some((x) => x.person === m.name))
-      .map((m) => ({ label: m.name, value: m.name })),
-  })).filter((o) => o.children.length > 0);
-
-onMounted(() => {
-  getList()
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-    <!-- 角色管理 -->
-    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-            <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-            <NGi span="24 s:12 m:12">
-                <div class="h-100% flex items-center gap-2">
-                    <Icon icon="carbon:flow-connection" class="size-18px" :style="{ color: themeStore.themeColor }" />
-                    <p class="text-[16px] font-600">审批模板管理</p>
-                </div>
-            </NGi>
-            <NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
-                <NButton type="primary" size="small" @click="addTemplate">
-                <Icon icon="ic:round-plus" class="size-16px" />
-                添加模板
-                </NButton>
-            </NGi>
-            </NGrid>
-        </div>
-        <div class="scroll">
-            <NDataTable
-                size="small"
-                :loading="loading"
-                :single-line="false"
-                :columns="columns"
-                :data="list"
-                :pagination="pagination"
-                max-height="calc(100vh - 290px)"
-                :scroll-x="820"
-            />
-        </div>
-        <!-- 新增/编辑/查看弹框 -->
-        <NModal
-              v-model:show="templateModal"
-              preset="card"
-              :title="currentType === 'add' ? '新增模板' : currentType === 'edit' ? '编辑模板':'查看模板'"
-              :auto-focus="false"
-              :style="{ width: '800px', height: 'auto' }"
-              :segmented="{ content: true, footer: true }"
-          >
-              <template #default>
-                <NForm class="w-full" ref="formRef" :model="currentTemplate" :rules="rules" label-placement="left" label-width="auto">
-                  <NGrid :cols="24" :x-gap="24">
-                    <NFormItemGi :span="8" label="变更类别" path="category">
-                      <NSelect
-                          v-model:value="currentTemplate.category"
-                          :options="categoryOptions"
-                          :disabled="readonly"
-                          placeholder="请选择"
-                      />
-                    </NFormItemGi>
-                    <NFormItemGi :span="8" label="变更等级" path="level">
-                      <NSelect
-                          v-model:value="currentTemplate.level"
-                          :options="levelOptions"
-                          :disabled="readonly"
-                          placeholder="请选择"
-                      />
-                    </NFormItemGi>
-                    <NFormItemGi :span="8" label="变更时效" path="timeLimit">
-                      <NSelect
-                          v-model:value="currentTemplate.timeLimit"
-                          :options="timeLimitOptions"
-                          :disabled="readonly"
-                          placeholder="请选择"
-                      />
-                    </NFormItemGi>
-                  </NGrid>
-                  <!-- 审批步骤 -->
-                  <div class="flex flex-col gap-3 mb-3">
-                    <div v-for="(s, idx) in currentTemplate.steps" :key="s.id" class="rounded-lg border border-slate-100 bg-slate-50/40 p-3">
-                      <div class="flex flex-wrap items-center gap-2">
-                        <span class="w-7 shrink-0 text-center text-xs text-slate-400">{{ idx + 1 }}</span>
-                        <NInput v-model:value="s.name" maxlength="12" :disabled="readonly" placeholder="步骤名称（如：部门审核）" class="!w-48 text-sm" />
-                        <NCheckbox :checked="s.countersign" :disabled="readonly" size="small" @update:checked="(v) => setStepCountersign(s, v)">
-                          <span class="text-xs text-slate-500">专业会签步骤</span>
-                        </NCheckbox>
-                        <NButton v-if="!readonly" ghost type="primary" size="tiny" @click="togglePicker(s)" title="添加预设人员" class="ml-auto">
-                          <Icon icon="ic:round-plus" class="size-16px" />
-                        </NButton>
-                        <NButton v-if="!readonly" text type="error" @click="removeStep(idx)" title="删除该步骤">
-                          <Icon icon="iconamoon:trash" class="size-16px" />
-                        </NButton>
-                      </div>
-                      <!-- 预设人员：人员必选；仅会签步骤可选择专业（必选），且人员可勾选「必须进行专业会签」 -->
-                      <div class="mt-2 flex gap-2 pl-10">
-                        <span class="shrink-0 text-xs leading-7 text-slate-400">预设人员:</span>
-                        <div class="min-w-0 flex-1 space-y-1.5">
-                          <div v-for="m in s.members" :key="m.person" class="flex min-h-7 flex-wrap items-center gap-2">
-                            <span class="w-20 shrink-0 truncate text-xs font-medium text-slate-700">{{ m.person }}</span>
-                            <template v-if="s.countersign">
-                              <span class="text-xs text-slate-400"><span class="mr-0.5 text-red-500">*</span>专业:</span>
-                              <NSelect :value="m.specialty || null" clearable size="small" placeholder="请选择专业" class="w-28"
-                                :options="SPECIALTIES"
-                                @update:value="(v) => m.specialty = v ?? ''"
-                              />
-                              <NCheckbox :checked="m.countersign" size="small"
-                                @update:checked="(v) => m.countersign = v"
-                              >
-                                <span class="text-xs text-slate-500">必须参与会签</span>
-                              </NCheckbox>
-                            </template>
-                            <NButton v-if="!readonly" text type="error" @click="delMember(s, m.person)" title="删除该人员">
-                              <Icon icon="iconamoon:trash" class="size-16px" />
-                            </NButton>
-                          </div>
-                          <p v-if="s.countersign && s.members.length" class="text-[11px] leading-5 text-slate-400">
-                            必须参与会签：勾选的人员必须参与专业会签，未勾选的人员为可选会签（按需参加）
-                          </p>
-                          <NCascader v-if="!readonly && pickerStepId === s.id" :value="pick" :options="peopleOpts(s)"
-                            placeholder="请选择人员" size="small" check-strategy="child" :show-path="false" expand-trigger="click"
-                            class="w-56" @update:value="(v) => addMember(s, v == null ? null : String(v))" />
-                          <span v-if="readonly && s.members.length === 0" class="text-xs leading-7 text-slate-300">未预设</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <NButton v-if="!readonly" size="small" ghost dashed class="text-xs" @click="addStepAfter(currentTemplate.steps.length - 1)"><Icon icon="ic:round-plus" class="size-14px" />添加审批步骤</NButton>
-                </NForm>
-              </template>
-              <template #footer>
-                  <div v-if="!readonly" class="flex justify-end gap-[10px]">
-                    <NButton @click="templateModal = false">取消</NButton>
-                    <NButton type="primary" :loading="btnLoading" @click="saveRole">确定</NButton>
-                  </div>
-              </template>
-          </NModal>
-    </NCard>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 205px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, h, onMounted } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouter } from 'vue-router';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+
+const router = useRouter();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
+const currentType = ref<string>('add');
+const readonly = computed(() => currentType.value === "view");
+const formRef = ref<any>(null);
+const currentTemplate = ref<{ id: number, category: string | null, level: string | null, timeLimit: string | null, steps: any[] }>({
+  id: 0,
+  category: null,
+  level: null,
+  timeLimit: null,
+  steps: [],
+});
+const rules = ref({
+  category: { required: true, message: '变更类别不能为空', trigger: ['blur'] },
+  level: { required: true, message: '变更等级不能为空', trigger: ['blur'] },
+  timeLimit: { required: true, message: '变更时效不能为空', trigger: ['blur'] },
+  step: { required: true, message: '审批步骤不能为空', trigger: ['blur'] }
+})
+const templateModal = ref<boolean>(false);
+
+const categoryOptions = ref([
+  {
+    label: '工艺',
+    value: '工艺'
+  },
+  {
+    label: '设备',
+    value: '设备'
+  },
+  {
+    label: '管理',
+    value: '管理'
+  }
+])
+
+const levelOptions = ref([
+  {
+    label: '一般',
+    value: '一般'
+  },
+  {
+    label: '重要',
+    value: '重要'
+  },
+])
+
+const timeLimitOptions = ref([
+  {
+    label: '永久',
+    value: '永久'
+  },
+  {
+    label: '临时',
+    value: '临时'
+  },
+])
+const SPECIALTIES = ref<{ label: string, value: string }[]>([
+  { label: '工艺', value: 'process' },
+  { label: '设备', value: 'equipment' },
+  { label: '仪表', value: 'instrument' },
+  { label: '电气', value: 'electrical' },
+  { label: '安全', value: 'safety' },
+  { label: '质量', value: 'quality' }
+]);
+
+const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
+    page: 1,
+    pageSize: 20,
+    pageCount: 0,
+})
+const columns = ref([
+  {
+    title: '序号',
+    key: 'index',
+    width: 6,
+    align: 'center',
+    render: (row: any, index: number) => {
+      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
+    }
+  },
+  {
+    title: '变更类别',
+    key: 'category',
+    width: 8,
+    align: 'center',
+    render: (row: any, index: number) => {
+      return h(NTag, {
+        size: 'small',
+        type: 'default'
+      }, { default: () => `${row.category}` })
+    }
+  },
+  {
+    title: '变更等级',
+    key: 'level',
+    width: 8,
+    align: 'center',
+    render: (row: any, index: number) => {
+      return h(NTag, {
+        size: 'small',
+        type: `${row.level==='重要'?'error':'default'}`
+      }, { default: () => `${row.level}` })
+    }
+  },
+  {
+    title: '变更时效',
+    key: 'timeLimit',
+    width: 8,
+    align: 'center',
+    render: (row: any, index: number) => {
+      return h(NTag, {
+        size: 'small',
+        type: `${row.timeLimit==='临时'?'warning':'info'}`
+      }, { default: () => `${row.timeLimit}` })
+    }
+  },
+  {
+    title: '审批步骤',
+    key: 'step',
+    width: 44,
+    align: 'center',
+    render: (row: any) => {
+      const stepNames = row.steps?.map((step: any) => step.name) || [];
+      const text = stepNames.join(' → ');
+      return h('p', { class: 'text-left text-xs' }, text || '');
+    }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 12,
+    align: 'center',
+    fixed: 'right',
+    render: (row: any) => {
+      return h('div', { class: 'flex items-center justify-center gap-3' }, {
+        default: () => [
+          h(NButton, {
+            text: true,
+            size: 'tiny',
+            type: 'primary',
+            onClick: () => handleView(row)
+          }, {
+            // 渲染按钮文本
+            default: () => '查看'
+          }),
+          h(NButton, {
+            text: true,
+            size: 'tiny',
+            type: 'primary',
+            onClick: () => handleEdit(row)
+          }, {
+            // 渲染按钮文本
+            default: () => '编辑'
+          }),
+          h(NPopconfirm, {
+            // 组件 Props
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              handleDelete(row)
+            },
+            // 可选：自定义确认/取消按钮的样式
+            positiveButtonProps: { size: 'tiny', type: 'primary' },
+            negativeButtonProps: { size: 'tiny' }
+          }, {
+            // 插槽 (Slots)
+            trigger: () => h(NButton,
+              {
+                text: true,
+                size: 'tiny',
+                type: 'error',
+              },
+              {
+                default: () => '删除' // 按钮文字
+              }
+            ),
+            default: () => '确定要删除吗？' // 弹出框的提示内容
+          }),
+        ]
+      })
+    }
+  },
+])
+const list = ref<{ id: number, category: string, level: string, timeLimit: string, steps: any[] }[]>([])
+
+// 获取列表
+const getList = async () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    list.value = [
+      {id:1,category:'工艺',level:'重要',timeLimit:'临时',steps: [
+        {
+          id:101,
+          name:'部门审核',
+          countersign: false,
+          members: [{person:'测试人员01',specialty:'',countersign:false}]
+        },
+        {
+          id:102,
+          name:'专业审批',
+          countersign: false,
+          members: [{person:'测试人员02',specialty:'',countersign:false}]
+        },
+        {id: 103, 
+          name: "部门负责人批准", 
+          countersign: false, 
+          members: [ {person:'测试人员03',specialty:'',countersign:false}] 
+        } 
+      ]},
+      {id:2,category:'设备',level:'一般',timeLimit:'临时',steps:[
+
+      ]},
+      {id:3,category:'管理',level:'重要',timeLimit:'永久',steps:[
+
+      ]},
+      {id:4,category:'工艺',level:'重要',timeLimit:'临时',steps:[
+
+      ]},
+      
+    ]
+  }, 1000)
+}
+
+// 打开添加模板弹框
+const addTemplate = () => {
+  currentType.value = 'add';
+  currentTemplate.value = {
+    id: 0,
+    category: null,
+    level: null,
+    timeLimit: null,
+    steps: [],
+  };
+  templateModal.value = true;
+}
+// 查看模板
+const handleView = (row: any) => {
+  currentType.value = 'view';
+  currentTemplate.value = {
+    id: row.id,
+    category: row.category,
+    level: row.level,
+    timeLimit: row.timeLimit,
+    steps: row.steps,
+  };
+  templateModal.value = true;
+}
+// 编辑角色
+const handleEdit = (row: any) => {
+  currentType.value = 'edit';
+  currentTemplate.value = {
+    id: row.id,
+    category: row.category,
+    level: row.level,
+    timeLimit: row.timeLimit,
+    steps: row.steps,
+  };
+  templateModal.value = true;
+}
+// 删除角色
+const handleDelete = (row: any) => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    list.value = list.value.filter((item: any) => item.id !== row.id);
+    window.$message?.success('删除成功')
+  }, 1000)
+}
+// 保存角色
+const saveRole = async (e: MouseEvent) => {
+  e.preventDefault()
+  formRef.value?.validate((errors: any) => {
+    if (!errors) {
+      btnLoading.value = true;
+      setTimeout(() => {
+        // 新增
+        if(currentType.value === 'add'){
+          list.value.push({
+            id:list.value.length+1,
+            category:currentTemplate.value?.category as string,
+            level:currentTemplate.value?.level as string,
+            timeLimit:currentTemplate.value?.timeLimit as string,
+            steps:currentTemplate.value?.steps as any[]
+          })
+        }
+        // 编辑
+        if(currentType.value === 'edit'){
+          const target = list.value.find((item:any) => item.id === currentTemplate.value.id);
+          if (target) {
+            target.category = currentTemplate.value?.category as string;
+            target.level = currentTemplate.value?.level as string;
+            target.timeLimit = currentTemplate.value?.timeLimit as string;
+            target.steps = currentTemplate.value?.steps as any[];
+          }
+        }
+        window.$message?.success('操作成功')
+        btnLoading.value = false;
+        templateModal.value = false;
+      }, 1000)
+    }
+  })
+}
+// 会签步骤：一个模板最多一步；只有会签步骤能选专业。
+// 勾选/取消后，所有非会签步骤的人员专业与「必须会签」标记一并清空
+const setStepCountersign = (target: any, v: boolean) => {
+  currentTemplate.value.steps.forEach((s:any) => {
+    s.countersign = s === target ? v : false;
+    if (!s.countersign) s.members.forEach((m:any) => { m.specialty = ""; m.countersign = false; });
+  });
+}
+// 当前打开人员选择器的步骤（步骤行「＋」按钮切换）
+const pickerStepId = ref<number | null>(null);
+const pick = ref<string | null>(null);
+const togglePicker = (s: any) => {
+  pickerStepId.value = pickerStepId.value === s.id ? null : s.id;
+  pick.value = null;
+}
+const addMember = (s: any, v: string | null) => {
+  if (v && !s.members.some((m:any) => m.person === v)) s.members.push({ person: v, specialty: "", countersign: false });
+  pick.value = null;
+  pickerStepId.value = null;
+}
+const delMember = (s: any, p: string) => {
+  s.members = s.members.filter((m:any) => m.person !== p);
+}
+const removeStep = (idx: number) => {
+  currentTemplate.value.steps.splice(idx, 1);
+}
+let sid = 100;
+const mkStep = (name: string, extra: Partial<any> = {}): any => ({ id: ++sid, name, countersign: false, members: [], ...extra });
+const addStepAfter = (idx: number) => {
+  currentTemplate.value.steps.splice(idx + 1, 0, mkStep(""));
+}
+const ORG_TREE = [
+  {
+    id: "factory", name: "演示工厂", short: "YS", leaf: false, sort: 0,
+    children: [
+      {
+        id: "scb", name: "生产部", short: "SCB", leaf: false, sort: 0,
+        children: [
+          { id: "cj1", name: "测试车间一", short: "CJ1", leaf: true, sort: 0 },
+          { id: "cj2", name: "测试车间二", short: "CJ2", leaf: true, sort: 1 },
+          { id: "cj3", name: "测试车间三", short: "CJ3", leaf: true, sort: 2 },
+        ],
+      },
+      {
+        id: "ahb", name: "安环部", short: "AHB", leaf: false, sort: 1,
+        children: [
+          { id: "aqk", name: "安全科", short: "AQK", leaf: true, sort: 0 },
+          { id: "hbk", name: "环保科", short: "HBK", leaf: true, sort: 1 },
+        ],
+      },
+      {
+        id: "sbb", name: "设备部", short: "SBB", leaf: false, sort: 2,
+        children: [
+          { id: "sbk", name: "设备科", short: "SBK", leaf: true, sort: 0 },
+        ],
+      },
+      {
+        id: "zlb", name: "质量部", short: "ZLB", leaf: false, sort: 3,
+        children: [
+          { id: "zjk", name: "质检科", short: "ZJK", leaf: true, sort: 0 },
+        ],
+      },
+    ],
+  },
+];
+const LEVEL2_ORGS = ORG_TREE[0]?.children ?? [];
+const ORG_MEMBERS = [
+  { id: 1, name: "测试人员01", dept: "测试车间一", gender: "男", phone: "13800000001", email: "test01@demo.com", account: "TEST001", role: "操作人员", scope: ["factory"], enabled: true },
+  { id: 2, name: "测试人员02", dept: "测试车间二", gender: "女", phone: "13800000002", email: "test02@demo.com", account: "TEST002", role: "班长", scope: ["factory"], enabled: true },
+  { id: 3, name: "测试人员03", dept: "测试车间三", gender: "男", phone: "13800000003", email: "test03@demo.com", account: "TEST003", role: "车间主任", scope: ["factory"], enabled: true },
+  { id: 4, name: "测试人员04", dept: "安全科", gender: "女", phone: "13800000004", email: "test04@demo.com", account: "TEST004", role: "安全工程师", scope: ["factory"], enabled: true },
+  { id: 5, name: "测试人员05", dept: "环保科", gender: "男", phone: "13800000005", email: "test05@demo.com", account: "TEST005", role: "环保专员", scope: ["factory"], enabled: true },
+  { id: 6, name: "测试人员06", dept: "设备科", gender: "男", phone: "13800000006", email: "test06@demo.com", account: "TEST006", role: "设备工程师", scope: ["factory"], enabled: true },
+  { id: 7, name: "测试人员07", dept: "质检科", gender: "女", phone: "13800000007", email: "test07@demo.com", account: "TEST007", role: "质量工程师", scope: ["factory"], enabled: true },
+];
+function orgSubtreeNames(n: any): string[] {
+  return [n.name, ...(n.children ?? []).flatMap(orgSubtreeNames)];
+}
+// 预设人员：级联选项（第二层组织 → 组织下可选成员，已选成员不再出现，空组织不展示）
+const peopleOpts = (s: any) =>
+  LEVEL2_ORGS.map((o) => ({
+    label: o.name,
+    value: o.id,
+    children: ORG_MEMBERS
+      .filter((m) => m.enabled && orgSubtreeNames(o).includes(m.dept) && !s.members.some((x) => x.person === m.name))
+      .map((m) => ({ label: m.name, value: m.name })),
+  })).filter((o) => o.children.length > 0);
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 角色管理 -->
+    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+            <NGi span="24 s:12 m:12">
+                <div class="h-100% flex items-center gap-2">
+                    <Icon icon="carbon:flow-connection" class="size-18px" :style="{ color: themeStore.themeColor }" />
+                    <p class="text-[16px] font-600">审批模板管理</p>
+                </div>
+            </NGi>
+            <NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
+                <NButton type="primary" size="small" @click="addTemplate">
+                <Icon icon="ic:round-plus" class="size-16px" />
+                添加模板
+                </NButton>
+            </NGi>
+            </NGrid>
+        </div>
+        <div class="scroll">
+            <NDataTable
+                size="small"
+                :loading="loading"
+                :single-line="false"
+                :columns="columns"
+                :data="list"
+                :pagination="pagination"
+                max-height="calc(100vh - 290px)"
+                :scroll-x="820"
+            />
+        </div>
+        <!-- 新增/编辑/查看弹框 -->
+        <NModal
+              v-model:show="templateModal"
+              preset="card"
+              :title="currentType === 'add' ? '新增模板' : currentType === 'edit' ? '编辑模板':'查看模板'"
+              :auto-focus="false"
+              :style="{ width: '800px', height: 'auto' }"
+              :segmented="{ content: true, footer: true }"
+          >
+              <template #default>
+                <NForm class="w-full" ref="formRef" :model="currentTemplate" :rules="rules" label-placement="left" label-width="auto">
+                  <NGrid :cols="24" :x-gap="24">
+                    <NFormItemGi :span="8" label="变更类别" path="category">
+                      <NSelect
+                          v-model:value="currentTemplate.category"
+                          :options="categoryOptions"
+                          :disabled="readonly"
+                          placeholder="请选择"
+                      />
+                    </NFormItemGi>
+                    <NFormItemGi :span="8" label="变更等级" path="level">
+                      <NSelect
+                          v-model:value="currentTemplate.level"
+                          :options="levelOptions"
+                          :disabled="readonly"
+                          placeholder="请选择"
+                      />
+                    </NFormItemGi>
+                    <NFormItemGi :span="8" label="变更时效" path="timeLimit">
+                      <NSelect
+                          v-model:value="currentTemplate.timeLimit"
+                          :options="timeLimitOptions"
+                          :disabled="readonly"
+                          placeholder="请选择"
+                      />
+                    </NFormItemGi>
+                  </NGrid>
+                  <!-- 审批步骤 -->
+                  <div class="flex flex-col gap-3 mb-3">
+                    <div v-for="(s, idx) in currentTemplate.steps" :key="s.id" class="rounded-lg border border-slate-100 bg-slate-50/40 p-3">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <span class="w-7 shrink-0 text-center text-xs text-slate-400">{{ idx + 1 }}</span>
+                        <NInput v-model:value="s.name" maxlength="12" :disabled="readonly" placeholder="步骤名称（如：部门审核）" class="!w-48 text-sm" />
+                        <NCheckbox :checked="s.countersign" :disabled="readonly" size="small" @update:checked="(v) => setStepCountersign(s, v)">
+                          <span class="text-xs text-slate-500">专业会签步骤</span>
+                        </NCheckbox>
+                        <NButton v-if="!readonly" ghost type="primary" size="tiny" @click="togglePicker(s)" title="添加预设人员" class="ml-auto">
+                          <Icon icon="ic:round-plus" class="size-16px" />
+                        </NButton>
+                        <NButton v-if="!readonly" text type="error" @click="removeStep(idx)" title="删除该步骤">
+                          <Icon icon="iconamoon:trash" class="size-16px" />
+                        </NButton>
+                      </div>
+                      <!-- 预设人员：人员必选；仅会签步骤可选择专业（必选），且人员可勾选「必须进行专业会签」 -->
+                      <div class="mt-2 flex gap-2 pl-10">
+                        <span class="shrink-0 text-xs leading-7 text-slate-400">预设人员:</span>
+                        <div class="min-w-0 flex-1 space-y-1.5">
+                          <div v-for="m in s.members" :key="m.person" class="flex min-h-7 flex-wrap items-center gap-2">
+                            <span class="w-20 shrink-0 truncate text-xs font-medium text-slate-700">{{ m.person }}</span>
+                            <template v-if="s.countersign">
+                              <span class="text-xs text-slate-400"><span class="mr-0.5 text-red-500">*</span>专业:</span>
+                              <NSelect :value="m.specialty || null" clearable size="small" placeholder="请选择专业" class="w-28"
+                                :options="SPECIALTIES"
+                                @update:value="(v) => m.specialty = v ?? ''"
+                              />
+                              <NCheckbox :checked="m.countersign" size="small"
+                                @update:checked="(v) => m.countersign = v"
+                              >
+                                <span class="text-xs text-slate-500">必须参与会签</span>
+                              </NCheckbox>
+                            </template>
+                            <NButton v-if="!readonly" text type="error" @click="delMember(s, m.person)" title="删除该人员">
+                              <Icon icon="iconamoon:trash" class="size-16px" />
+                            </NButton>
+                          </div>
+                          <p v-if="s.countersign && s.members.length" class="text-[11px] leading-5 text-slate-400">
+                            必须参与会签：勾选的人员必须参与专业会签，未勾选的人员为可选会签（按需参加）
+                          </p>
+                          <NCascader v-if="!readonly && pickerStepId === s.id" :value="pick" :options="peopleOpts(s)"
+                            placeholder="请选择人员" size="small" check-strategy="child" :show-path="false" expand-trigger="click"
+                            class="w-56" @update:value="(v) => addMember(s, v == null ? null : String(v))" />
+                          <span v-if="readonly && s.members.length === 0" class="text-xs leading-7 text-slate-300">未预设</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <NButton v-if="!readonly" size="small" ghost dashed class="text-xs" @click="addStepAfter(currentTemplate.steps.length - 1)"><Icon icon="ic:round-plus" class="size-14px" />添加审批步骤</NButton>
+                </NForm>
+              </template>
+              <template #footer>
+                  <div v-if="!readonly" class="flex justify-end gap-[10px]">
+                    <NButton @click="templateModal = false">取消</NButton>
+                    <NButton type="primary" :loading="btnLoading" @click="saveRole">确定</NButton>
+                  </div>
+              </template>
+          </NModal>
+    </NCard>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 205px);
+  overflow-y: auto;
+}
+</style>
diff --git a/src/views/systemManage/user/index.vue b/src/views/systemManage/user/index.vue
index b8244cc..a245b58 100644
--- a/src/views/systemManage/user/index.vue
+++ b/src/views/systemManage/user/index.vue
@@ -1,705 +1,705 @@
-<script setup lang="ts">
-import { ref, computed, h, onMounted, defineComponent } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import { Icon } from '@iconify/vue'
-import { useThemeStore } from '@/store/modules/theme';
-import { NButton, NPopconfirm, NTag, NDropdown, useDialog } from 'naive-ui';
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-const dialog = useDialog()
-
-const loading = ref<boolean>(false);
-const btnLoading = ref<boolean>(false);
-const currentType = ref<string>('add');
-const formRef = ref<any>(null);
-const keyword = ref<string>('');
-// 当前用户
-const currentUser = ref<{ id: number, name: string, dept: string[], mobile: string, email: string, account: string, role: string | null, dataPermission: string[], status: number, gender: number }>({
-  id: 0,
-  name: '',
-  dept: [],
-  mobile: '',
-  email: '',
-  account: '',
-  role: null,
-  dataPermission: [],
-  status: 1,
-  gender: 1,
-});
-// 校验规则
-const rules = ref({
-  name: { required: true, message: '角色名称不能为空', trigger: ['blur'] },
-  dept: {
-    type: 'array',
-    required: true,
-    trigger: ['blur', 'change'],
-    message: '请选择所属部门'
-  },
-  account: { required: true, message: '账号不能为空', trigger: ['blur'] },
-  role: { required: true, message: '请选择账号角色', trigger: ['blur', 'change'] },
-  dataPermission: {
-    type: 'array',
-    required: true,
-    trigger: ['blur', 'change'],
-    message: '请选择数据权限'
-  },
-  status: { required: true, message: '请选择状态', trigger: ['blur', 'change'] },
-  gender: { required: true, message: '请选择性别', trigger: ['blur', 'change'] },
-})
-const userModal = ref<boolean>(false);
-const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
-    page: 1,
-    pageSize: 20,
-    pageCount: 0,
-})
-const columns = ref([
-  {
-    title: '序号',
-    key: 'index',
-    width: 5,
-    align: 'center',
-    render: (_row: any, index: number) => {
-      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
-    }
-  },
-  {
-    title: '姓名',
-    key: 'name',
-    width: 8,
-    align: 'center',
-  },
-  {
-    title: '部门',
-    key: 'dept',
-    width: 10,
-    align: 'center',
-  },
-  {
-    title: '手机号码',
-    key: 'mobile',
-    width: 12,
-    align: 'center',
-  },
-  {
-    title: '账号',
-    key: 'account',
-    width: 10,
-    align: 'center',
-  },
-  {
-    title: '账号角色',
-    key: 'role',
-    width: 10,
-    align: 'center',
-  },
-  {
-    title: '状态',
-    key: 'status',
-    width: 8,
-    align: 'center',
-    render: (row: any) => {
-      return h(NTag, {
-        size: 'small',
-        type: `${row.status===1?'success':'error'}`
-      }, { default: () => `${row.status===1?'启用':'禁用'}` })
-    }
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 14,
-    align: 'center',
-    render: (row: any) => {
-      return h('div', { class: 'flex items-center justify-center gap-3' }, {
-        default: () => [
-          h(NButton, {
-            text: true,
-            size: 'tiny',
-            type: 'primary',
-            onClick: () => handleEdit(row)
-          }, {
-            // 渲染按钮文本
-            default: () => '编辑'
-          }),
-          h(NPopconfirm, {
-            // 组件 Props
-            positiveText: '确定',
-            negativeText: '取消',
-            onPositiveClick: () => {
-              handleDelete(row)
-            },
-            // 可选：自定义确认/取消按钮的样式
-            positiveButtonProps: { size: 'tiny', type: 'primary' },
-            negativeButtonProps: { size: 'tiny' }
-          }, {
-            // 插槽 (Slots)
-            trigger: () => h(NButton,
-              {
-                text: true,
-                size: 'tiny',
-                type: 'error',
-              },
-              {
-                default: () => '删除' // 按钮文字
-              }
-            ),
-            default: () => '确定要删除吗？' // 弹出框的提示内容
-          }),
-          h(NPopconfirm, {
-            // 组件 Props
-            positiveText: '确定',
-            negativeText: '取消',
-            onPositiveClick: () => {
-              resetPassword(row)
-            },
-            // 可选：自定义确认/取消按钮的样式
-            positiveButtonProps: { size: 'tiny', type: 'primary' },
-            negativeButtonProps: { size: 'tiny' }
-          }, {
-            // 插槽 (Slots)
-            trigger: () => h(NButton,
-              {
-                text: true,
-                size: 'tiny',
-                type: 'primary',
-              },
-              {
-                default: () => '重置密码' // 按钮文字
-              }
-            ),
-            default: () => '是否重置该用户密码为)cVLO%M(c08)' // 弹出框的提示内容
-          }),
-        ]
-      })
-    }
-  },
-])
-const list = ref<{ id: number, name: string, dept: string[], mobile: string, email: string, account: string, role: string | null, dataPermission: string[], status: number, gender: number }[]>([])
-// 账号角色选项
-const roleOptions = ref([
-  { label: '管理员', value: 'admin' },
-  { label: '普通用户', value: 'user' },
-])
-
-const formNodeRef = ref<any>(null);
-const treeModal = ref<boolean>(false);
-const currentNode = ref<{ id: string, label: string, key: string, children: any[], shortLabel: string, parent: string, isLeaf: number, sort: number }>({
-  id: '',
-  label: '',
-  key: '',
-  children: [],
-  shortLabel: '',
-  parent: '',
-  isLeaf: 1,
-  sort: 0,
-})
-const formNode = ref<{ id: string, label: string, key: string, children: any[], shortLabel: string, parent: string, isLeaf: number, sort: number }>({
-  id: '',
-  label: '',
-  key: '',
-  children: [],
-  shortLabel: '',
-  parent: '',
-  isLeaf: 1,
-  sort: 0,
-})
-const currentNodeType = ref<string>('edit')
-// 树节点规则
-const treeRules = ref({
-  label: [{ required: true, message: '请输入层级名称', trigger: ['blur'] }],
-})
-// 左侧组织树
-const orgTree = ref([
-  {
-    id: "factory", label: "演示工厂", key: "YS", shortLabel: 'YS', parent: '', isLeaf: 0, sort: 0,
-    children: [
-      {
-        id: "scb", label: "生产部", key: "SCB", shortLabel: 'SCB', parent: '演示工厂', isLeaf: 0, sort: 0,
-        children: [
-          { id: "cj1", label: "测试车间一", key: "CJ1", shortLabel: 'CJ1', parent: '生产部', isLeaf: 1, sort: 0 },
-          { id: "cj2", label: "测试车间二", key: "CJ2", shortLabel: 'CJ2', parent: '生产部', isLeaf: 1, sort: 0 },
-          { id: "cj3", label: "测试车间三", key: "CJ3", shortLabel: 'CJ3', parent: '生产部', isLeaf: 1, sort: 0 },
-        ],
-      },
-      {
-        id: "ahb", label: "安环部", key: "AHB", shortLabel: 'AHB', parent: '演示工厂', isLeaf: 0, sort: 0,
-        children: [
-          { id: "aqk", label: "安全科", key: "AQK", shortLabel: 'AQK', parent: '安环部', isLeaf: 1, sort: 0 },
-          { id: "hbk", label: "环保科", key: "HBK", shortLabel: 'HBK', parent: '安环部', isLeaf: 1, sort: 0 },
-        ],
-      },
-      {
-        id: "sbb", label: "设备部", key: "SBB", shortLabel: 'SBB', parent: '演示工厂', isLeaf: 0, sort: 0,
-        children: [
-          { id: "sbk", label: "设备科", key: "SBK", shortLabel: 'SBK', parent: '设备部', isLeaf: 1, sort: 0 },
-        ],
-      },
-      {
-        id: "zlb", label: "质量部", key: "ZLB", shortLabel: 'ZLB', parent: '演示工厂', isLeaf: 0, sort: 0,
-        children: [
-          { id: "zjk", label: "质检科", key: "ZJK", shortLabel: 'ZJK', parent: '质量部', isLeaf: 1, sort: 0 },
-        ],
-      },
-    ],
-  },
-]);
-const defaultExpandedKeys = ref<string[]>(['YS'])
-const defaultSelectedKeys = ref<string[]>(['YS'])
-// 右键菜单相关
-const menuVisible = ref(false)
-const menuX = ref(0)
-const menuY = ref(0)
-// 菜单选项
-const menuOptions = [
-  { label: '编辑', key: 'edit' },
-  { label: '添加子级', key: 'add' },
-  { label: '删除', key: 'delete' },
-]
-const handleSelectKeys = (keys: string[]) => {
-  defaultSelectedKeys.value = keys
-}
-// 处理右键点击树节点
-const treeProps = ({ option }: { option: any }) => {
-  return {
-    onContextmenu(e: MouseEvent) {
-      e.preventDefault()
-      currentNode.value = option
-      menuX.value = e.clientX
-      menuY.value = e.clientY
-      menuVisible.value = true
-    },
-  }
-}
-// 点击菜单项
-const handleMenuSelect = (key: string) => {
-  currentNodeType.value = key
-  switch (key) {
-    case 'edit':
-      formNode.value = currentNode.value
-      treeModal.value = true
-      break
-    case 'add':
-      formNode.value = {
-        id: '',
-        label: '',
-        key: '',
-        children: [],
-        shortLabel: '',
-        parent: currentNode.value.label,
-        isLeaf: 0,
-        sort: 0,
-      }
-      treeModal.value = true
-      break
-    case 'delete':
-      const d = dialog.info({
-        title: '删除',
-        content: `确定删除层级「${currentNode.value.label}」吗？ 该操作不可恢复`,
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          d.loading = true
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              d.loading = false
-              resolve(true)
-            }, 1000)
-          })
-        },
-        onNegativeClick: () => {
-          d.loading = false
-        }
-      })
-      break
-  }
-  closeMenu()
-}
-// 关闭菜单
-const closeMenu = () => {
-  menuVisible.value = false
-}
-const renderSwitcherIcon = () => {
-  return h(Icon, { icon: 'formkit:right',class:'size-14px'  }, {})
-}
-const renderSuffix = ({ option }: { option: any }) => {
-  return h(
-    NButton,
-    {
-      text: true,
-      type: 'primary',
-      onClick: (e: MouseEvent) => {
-        e.stopPropagation();
-        currentNode.value = option
-        menuX.value = e.clientX
-        menuY.value = e.clientY
-        menuVisible.value = true
-      },
-    },
-    {
-      icon: () =>
-        h(Icon, { icon: 'lucide:more-horizontal', class: 'size-14px' }),
-    }
-  )
-};
-// 处理部门选择变化
-const handleUpdateDept = (value: any) => {
-  currentUser.value.dept = value
-}
-
-// 获取列表
-const getList = async () => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-    list.value = [
-      {id:1,name:'姓名1',dept:['YS'],mobile:'13800000000',email:'user1@example.com',account:'user1',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:2,name:'姓名2',dept:[],mobile:'13800000001',email:'user1@example.com',account:'user2',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:2,name:'姓名2',dept:[],mobile:'13800000001',email:'user1@example.com',account:'user2',role:'普通用户',dataPermission:[],gender:1,status:2},
-      {id:3,name:'姓名3',dept:[],mobile:'13800000002',email:'user1@example.com',account:'user3',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:4,name:'姓名4',dept:[],mobile:'13800000003',email:'user1@example.com',account:'user3',role:'普通用户',dataPermission:[],gender:1,status:2},
-      {id:4,name:'姓名4',dept:['YS'],mobile:'13800000003',email:'user1@example.com',account:'user4',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:5,name:'姓名5',dept:[],mobile:'13800000004',email:'user1@example.com',account:'user5',role:'普通用户',dataPermission:[],gender:1,status:2},
-      {id:6,name:'姓名6',dept:['YS'],mobile:'13800000005',email:'user1@example.com',account:'user6',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:7,name:'姓名7',dept:[],mobile:'13800000006',email:'user1@example.com',account:'user7',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:8,name:'姓名8',dept:[],mobile:'13800000007',email:'user1@example.com',account:'user8',role:'普通用户',dataPermission:[],gender:1,status:2},
-      {id:9,name:'姓名9',dept:['YS'],mobile:'13800000008',email:'user1@example.com',account:'user9',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:10,name:'姓名10',dept:[],mobile:'13800000009',email:'user1@example.com',account:'user10',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:11,name:'姓名11',dept:['YS'],mobile:'13800000010',email:'user1@example.com',account:'user11',role:'普通用户',dataPermission:[],gender:1,status:1},
-      {id:12,name:'姓名12',dept:[],mobile:'13800000011',email:'user1@example.com',account:'user12',role:'普通用户',dataPermission:[],gender:1,status:1},
-    ]
-  }, 1000)
-}
-// 处理数据权限选择变化
-const handleUpdateChecked = (keys: string[]) => {
-  currentUser.value.dataPermission = keys
-}
-
-// 打开添加用户弹框
-const addUser = () => {
-  currentType.value = 'add';
-  currentUser.value = {
-    id: 0,
-    name: '',
-    dept: [],
-    mobile: '',
-    email: '',
-    account: '',
-    role: null,
-    dataPermission: [],
-    status: 1,
-    gender: 1,
-  };
-  userModal.value = true;
-}
-// 重置密码
-const resetPassword = (row: any) => {
-  currentUser.value = {
-    id: row.id,
-    name: row.name,
-    dept: row.dept,
-    mobile: row.mobile,
-    email: row.email,
-    account: row.account,
-    role: row.role,
-    dataPermission: row.dataPermission,
-    status: row.status,
-    gender: row.gender,
-  };
-}
-// 编辑用户
-const handleEdit = (row: any) => {
-  currentType.value = 'edit';
-  currentUser.value = {
-    id: row.id,
-    name: row.name,
-    dept: row.dept,
-    mobile: row.mobile,
-    email: row.email,
-    account: row.account,
-    role: row.role,
-    dataPermission: row.dataPermission,
-    status: row.status,
-    gender: row.gender,
-  };
-  userModal.value = true;
-}
-// 删除用户
-const handleDelete = (row: any) => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-    list.value = list.value.filter((item: any) => item.id !== row.id);
-    window.$message?.success('删除成功')
-  }, 1000)
-}
-// 导入用户
-const importUser = () => {
-  
-}
-// 刷新数据
-const refreshData = () => {
-  
-}
-// 保存用户
-const saveUser = async (e: MouseEvent) => {
-  e.preventDefault()
-  formRef.value?.validate((errors: any) => {
-    if (!errors) {
-      btnLoading.value = true;
-      setTimeout(() => {
-        // 新增
-        if(currentType.value === 'add'){
-          list.value.push({id:list.value.length+1,name:currentUser.value?.name,dept:currentUser.value?.dept,mobile:currentUser.value?.mobile,email:currentUser.value?.email,account:currentUser.value?.account,role:currentUser.value?.role,dataPermission:currentUser.value?.dataPermission,status:currentUser.value?.status,gender:currentUser.value?.gender})
-        }
-        // 编辑
-        if(currentType.value === 'edit'){
-          const target = list.value.find((item:any) => item.id === currentUser.value.id);
-          if (target) {
-            target.name = currentUser.value?.name;
-          }
-        }
-        window.$message?.success('保存成功')
-        btnLoading.value = false;
-        userModal.value = false;
-      }, 1000)
-    }
-  })
-}
-// 保存节点
-const saveNode = async (e: MouseEvent) => {
-  e.preventDefault()
-  formNodeRef.value?.validate((errors: any) => {
-    if (!errors) {
-      btnLoading.value = true;
-      setTimeout(() => {
-        window.$message?.success(`${currentNodeType.value === 'edit' ? '编辑' : '添加'}成功`)
-        btnLoading.value = false;
-        treeModal.value = false;
-      }, 1000)
-    }
-  })
-}
-
-onMounted(() => {
-  getList()
-})
-</script>
-
-<template>
-<NSpace vertical :size="16">
-  <!-- 用户管理 -->
-  <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-    <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-      <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-        <NGi span="24 s:24 m:16">
-            <div class="h-100% flex items-center gap-2">
-                <Icon icon="lucide:users-round" class="size-16px" :style="{ color: themeStore.themeColor }" />
-                <p class="text-[16px] font-600">架构及用户管理</p>
-            </div>
-        </NGi>
-        <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
-            <NButton type="primary" size="small" @click="addUser">
-              <Icon icon="ic:round-plus" class="size-16px" />添加成员
-            </NButton>
-            <NButton type="warning" size="small" @click="importUser">
-              <Icon icon="material-symbols:download" class="size-16px" />导入用户
-            </NButton>
-            <NButton text @click="refreshData">
-              <Icon icon="tdesign:refresh" class="size-14px" />
-            </NButton>
-        </NGi>
-      </NGrid>
-    </div>
-    <div class="flex gap-3">
-      <div class="border p-3 w-300px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
-        <NInput v-model:value="keyword" placeholder="请输入人员">
-          <template #suffix>
-            <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
-          </template>
-        </NInput>
-        <!-- 树 -->
-        <div class="mt-2 scroll">
-          <NTree
-            block-line
-            :data="orgTree"
-            :default-expanded-keys="defaultExpandedKeys"
-            :default-selected-keys="defaultSelectedKeys"
-            :render-switcher-icon="renderSwitcherIcon"
-            :render-suffix="renderSuffix"
-            selectable
-            :cancelable="false"
-            :on-update:selected-keys="handleSelectKeys"
-            :node-props="treeProps"
-          />
-          <NDropdown
-            :show="menuVisible"
-            :options="menuOptions"
-            size="small"
-            :x="menuX"
-            :y="menuY"
-            placement="bottom-start"
-            trigger="manual"
-            @clickoutside="closeMenu"
-            @select="handleMenuSelect"
-          />
-        </div>
-        <p class="mt-2 border-t pt-2 text-[11px] leading-4 text-slate-400">
-          点击层级查看该层级全员名录；右键（或悬停点 ···）可编辑、添加子级、删除。
-        </p>
-      </div>
-      <div class="flex-1">
-        <NDataTable
-          size="small"
-          :loading="loading"
-          :single-line="false"
-          :columns="columns"
-          :data="list"
-          :pagination="pagination"
-          max-height="calc(100vh - 285px)"
-        />
-      </div>
-    </div>
-    <!-- 新增或编辑抽屉 -->
-    <NDrawer v-model:show="userModal" :width="400" placement="right">
-      <NDrawerContent :title="currentType === 'add' ? '新增成员' : '编辑成员'" closable>
-          <NForm ref="formRef" :model="currentUser" :rules="rules" label-placement="left" label-width="auto">
-            <NFormItem label="姓名" path="name">
-              <NInput
-                v-model:value="currentUser.name"
-                placeholder="请输入姓名"
-              />
-            </NFormItem>
-            <NFormItem label="所属部门" path="dept">
-              <NTreeSelect
-                :value="currentUser.dept"
-                multiple
-                :options="orgTree"
-                @update:value="handleUpdateDept"
-              />
-            </NFormItem>
-            <NFormItem label="性别">
-              <NRadioGroup v-model:value="currentUser.gender" name="gender">
-                <n-radio :value="1">男</n-radio>
-                <n-radio :value="2">女</n-radio>
-              </NRadioGroup>
-            </NFormItem>
-            <NFormItem label="账号" path="account">
-              <NInput
-                v-model:value="currentUser.account"
-                placeholder="请输入账号"
-              />
-            </NFormItem>
-            <NFormItem label="手机号码">
-              <NInput
-                v-model:value="currentUser.mobile"
-                placeholder="请输入11位手机号码"
-              />
-            </NFormItem>
-            <NFormItem label="电子邮箱">
-              <NInput
-                v-model:value="currentUser.email"
-                placeholder="请输入电子邮箱"
-              />
-            </NFormItem>
-            <NFormItem label="账号角色" path="role">
-              <NSelect
-                v-model:value="currentUser.role"
-                :options="roleOptions"
-                placeholder="请选择账号角色"
-              />
-            </NFormItem>
-            <NFormItem label="数据权限" path="dataPermission">
-              <n-tree
-                :data="orgTree"
-                block-line
-                checkable
-                cascade
-                :checked-keys="currentUser.dataPermission"
-                :on-update:checked-keys="handleUpdateChecked"
-              />
-            </NFormItem>
-            <NFormItem label="状态">
-              <NRadioGroup v-model:value="currentUser.status" name="status">
-                <n-radio :value="1">启用</n-radio>
-                <n-radio :value="2">禁用</n-radio>
-              </NRadioGroup>
-            </NFormItem>
-          </NForm>
-          <template #footer>
-            <div class="flex justify-end gap-[10px]">
-              <NButton @click="userModal = false">取消</NButton>
-              <NButton type="primary" :loading="btnLoading" @click="saveUser">保存</NButton>
-            </div>
-          </template>
-      </NDrawerContent>
-    </NDrawer>
-    <!-- 左侧树添加/编辑弹框 -->
-    <NModal
-      v-model:show="treeModal"
-      preset="card"
-      :title="currentNodeType === 'edit' ? '编辑层级' : '添加子级'"
-      :auto-focus="false"
-      :style="{ width: '450px', height: 'auto' }"
-      :segmented="{ content: true, footer: true }"
-    >
-      <template #default>
-        <NForm ref="formNodeRef" :model="formNode" :rules="treeRules" label-placement="left" label-width="auto">
-          <NFormItem label="层级名称" path="label">
-            <NInput
-              v-model:value="formNode.label"
-              maxlength="10" 
-              show-count
-              placeholder="请输入层级名称"
-            />
-          </NFormItem>
-          <NFormItem label="层级简称">
-            <NInput
-              v-model:value="formNode.shortLabel"
-              maxlength="10" 
-              show-count
-              placeholder="请输入层级简称"
-            />
-          </NFormItem>
-          <NFormItem label="所属层级">
-            <NInput
-              v-model:value="formNode.parent"
-              :disabled="true"
-              placeholder=""
-            />
-          </NFormItem>
-          <NFormItem label="末端层级">
-            <NRadioGroup v-model:value="formNode.isLeaf" name="isLeaf">
-              <n-radio :value="1">是</n-radio>
-              <n-radio :value="0">否</n-radio>
-            </NRadioGroup>
-          </NFormItem>
-          <NFormItem label="排序">
-            <NInputNumber
-              class="w-full"
-              v-model:value="formNode.sort"
-              :min="0"
-              :show-button="false"
-              placeholder="请输入排序"
-            />
-          </NFormItem>
-        </NForm>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-[10px]">
-          <NButton @click="treeModal = false">取消</NButton>
-          <NButton type="primary" :loading="btnLoading" @click="saveNode">确定</NButton>
-        </div>
-      </template>
-    </NModal>
-  </NCard>
-</NSpace>
-</template>
-
-<style scoped lang="scss">
-.scroll {
-  height: calc(100vh - 322px);
-  overflow-y: auto;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, h, onMounted, defineComponent } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { NButton, NPopconfirm, NTag, NDropdown, useDialog } from 'naive-ui';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+const dialog = useDialog()
+
+const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
+const currentType = ref<string>('add');
+const formRef = ref<any>(null);
+const keyword = ref<string>('');
+// 当前用户
+const currentUser = ref<{ id: number, name: string, dept: string[], mobile: string, email: string, account: string, role: string | null, dataPermission: string[], status: number, gender: number }>({
+  id: 0,
+  name: '',
+  dept: [],
+  mobile: '',
+  email: '',
+  account: '',
+  role: null,
+  dataPermission: [],
+  status: 1,
+  gender: 1,
+});
+// 校验规则
+const rules = ref({
+  name: { required: true, message: '角色名称不能为空', trigger: ['blur'] },
+  dept: {
+    type: 'array',
+    required: true,
+    trigger: ['blur', 'change'],
+    message: '请选择所属部门'
+  },
+  account: { required: true, message: '账号不能为空', trigger: ['blur'] },
+  role: { required: true, message: '请选择账号角色', trigger: ['blur', 'change'] },
+  dataPermission: {
+    type: 'array',
+    required: true,
+    trigger: ['blur', 'change'],
+    message: '请选择数据权限'
+  },
+  status: { required: true, message: '请选择状态', trigger: ['blur', 'change'] },
+  gender: { required: true, message: '请选择性别', trigger: ['blur', 'change'] },
+})
+const userModal = ref<boolean>(false);
+const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
+    page: 1,
+    pageSize: 20,
+    pageCount: 0,
+})
+const columns = ref([
+  {
+    title: '序号',
+    key: 'index',
+    width: 5,
+    align: 'center',
+    render: (_row: any, index: number) => {
+      return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
+    }
+  },
+  {
+    title: '姓名',
+    key: 'name',
+    width: 8,
+    align: 'center',
+  },
+  {
+    title: '部门',
+    key: 'dept',
+    width: 10,
+    align: 'center',
+  },
+  {
+    title: '手机号码',
+    key: 'mobile',
+    width: 12,
+    align: 'center',
+  },
+  {
+    title: '账号',
+    key: 'account',
+    width: 10,
+    align: 'center',
+  },
+  {
+    title: '账号角色',
+    key: 'role',
+    width: 10,
+    align: 'center',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 8,
+    align: 'center',
+    render: (row: any) => {
+      return h(NTag, {
+        size: 'small',
+        type: `${row.status===1?'success':'error'}`
+      }, { default: () => `${row.status===1?'启用':'禁用'}` })
+    }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 14,
+    align: 'center',
+    render: (row: any) => {
+      return h('div', { class: 'flex items-center justify-center gap-3' }, {
+        default: () => [
+          h(NButton, {
+            text: true,
+            size: 'tiny',
+            type: 'primary',
+            onClick: () => handleEdit(row)
+          }, {
+            // 渲染按钮文本
+            default: () => '编辑'
+          }),
+          h(NPopconfirm, {
+            // 组件 Props
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              handleDelete(row)
+            },
+            // 可选：自定义确认/取消按钮的样式
+            positiveButtonProps: { size: 'tiny', type: 'primary' },
+            negativeButtonProps: { size: 'tiny' }
+          }, {
+            // 插槽 (Slots)
+            trigger: () => h(NButton,
+              {
+                text: true,
+                size: 'tiny',
+                type: 'error',
+              },
+              {
+                default: () => '删除' // 按钮文字
+              }
+            ),
+            default: () => '确定要删除吗？' // 弹出框的提示内容
+          }),
+          h(NPopconfirm, {
+            // 组件 Props
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              resetPassword(row)
+            },
+            // 可选：自定义确认/取消按钮的样式
+            positiveButtonProps: { size: 'tiny', type: 'primary' },
+            negativeButtonProps: { size: 'tiny' }
+          }, {
+            // 插槽 (Slots)
+            trigger: () => h(NButton,
+              {
+                text: true,
+                size: 'tiny',
+                type: 'primary',
+              },
+              {
+                default: () => '重置密码' // 按钮文字
+              }
+            ),
+            default: () => '是否重置该用户密码为)cVLO%M(c08)' // 弹出框的提示内容
+          }),
+        ]
+      })
+    }
+  },
+])
+const list = ref<{ id: number, name: string, dept: string[], mobile: string, email: string, account: string, role: string | null, dataPermission: string[], status: number, gender: number }[]>([])
+// 账号角色选项
+const roleOptions = ref([
+  { label: '管理员', value: 'admin' },
+  { label: '普通用户', value: 'user' },
+])
+
+const formNodeRef = ref<any>(null);
+const treeModal = ref<boolean>(false);
+const currentNode = ref<{ id: string, label: string, key: string, children: any[], shortLabel: string, parent: string, isLeaf: number, sort: number }>({
+  id: '',
+  label: '',
+  key: '',
+  children: [],
+  shortLabel: '',
+  parent: '',
+  isLeaf: 1,
+  sort: 0,
+})
+const formNode = ref<{ id: string, label: string, key: string, children: any[], shortLabel: string, parent: string, isLeaf: number, sort: number }>({
+  id: '',
+  label: '',
+  key: '',
+  children: [],
+  shortLabel: '',
+  parent: '',
+  isLeaf: 1,
+  sort: 0,
+})
+const currentNodeType = ref<string>('edit')
+// 树节点规则
+const treeRules = ref({
+  label: [{ required: true, message: '请输入层级名称', trigger: ['blur'] }],
+})
+// 左侧组织树
+const orgTree = ref([
+  {
+    id: "factory", label: "演示工厂", key: "YS", shortLabel: 'YS', parent: '', isLeaf: 0, sort: 0,
+    children: [
+      {
+        id: "scb", label: "生产部", key: "SCB", shortLabel: 'SCB', parent: '演示工厂', isLeaf: 0, sort: 0,
+        children: [
+          { id: "cj1", label: "测试车间一", key: "CJ1", shortLabel: 'CJ1', parent: '生产部', isLeaf: 1, sort: 0 },
+          { id: "cj2", label: "测试车间二", key: "CJ2", shortLabel: 'CJ2', parent: '生产部', isLeaf: 1, sort: 0 },
+          { id: "cj3", label: "测试车间三", key: "CJ3", shortLabel: 'CJ3', parent: '生产部', isLeaf: 1, sort: 0 },
+        ],
+      },
+      {
+        id: "ahb", label: "安环部", key: "AHB", shortLabel: 'AHB', parent: '演示工厂', isLeaf: 0, sort: 0,
+        children: [
+          { id: "aqk", label: "安全科", key: "AQK", shortLabel: 'AQK', parent: '安环部', isLeaf: 1, sort: 0 },
+          { id: "hbk", label: "环保科", key: "HBK", shortLabel: 'HBK', parent: '安环部', isLeaf: 1, sort: 0 },
+        ],
+      },
+      {
+        id: "sbb", label: "设备部", key: "SBB", shortLabel: 'SBB', parent: '演示工厂', isLeaf: 0, sort: 0,
+        children: [
+          { id: "sbk", label: "设备科", key: "SBK", shortLabel: 'SBK', parent: '设备部', isLeaf: 1, sort: 0 },
+        ],
+      },
+      {
+        id: "zlb", label: "质量部", key: "ZLB", shortLabel: 'ZLB', parent: '演示工厂', isLeaf: 0, sort: 0,
+        children: [
+          { id: "zjk", label: "质检科", key: "ZJK", shortLabel: 'ZJK', parent: '质量部', isLeaf: 1, sort: 0 },
+        ],
+      },
+    ],
+  },
+]);
+const defaultExpandedKeys = ref<string[]>(['YS'])
+const defaultSelectedKeys = ref<string[]>(['YS'])
+// 右键菜单相关
+const menuVisible = ref(false)
+const menuX = ref(0)
+const menuY = ref(0)
+// 菜单选项
+const menuOptions = [
+  { label: '编辑', key: 'edit' },
+  { label: '添加子级', key: 'add' },
+  { label: '删除', key: 'delete' },
+]
+const handleSelectKeys = (keys: string[]) => {
+  defaultSelectedKeys.value = keys
+}
+// 处理右键点击树节点
+const treeProps = ({ option }: { option: any }) => {
+  return {
+    onContextmenu(e: MouseEvent) {
+      e.preventDefault()
+      currentNode.value = option
+      menuX.value = e.clientX
+      menuY.value = e.clientY
+      menuVisible.value = true
+    },
+  }
+}
+// 点击菜单项
+const handleMenuSelect = (key: string) => {
+  currentNodeType.value = key
+  switch (key) {
+    case 'edit':
+      formNode.value = currentNode.value
+      treeModal.value = true
+      break
+    case 'add':
+      formNode.value = {
+        id: '',
+        label: '',
+        key: '',
+        children: [],
+        shortLabel: '',
+        parent: currentNode.value.label,
+        isLeaf: 0,
+        sort: 0,
+      }
+      treeModal.value = true
+      break
+    case 'delete':
+      const d = dialog.info({
+        title: '删除',
+        content: `确定删除层级「${currentNode.value.label}」吗？ 该操作不可恢复`,
+        positiveText: '确定',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          d.loading = true
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              d.loading = false
+              resolve(true)
+            }, 1000)
+          })
+        },
+        onNegativeClick: () => {
+          d.loading = false
+        }
+      })
+      break
+  }
+  closeMenu()
+}
+// 关闭菜单
+const closeMenu = () => {
+  menuVisible.value = false
+}
+const renderSwitcherIcon = () => {
+  return h(Icon, { icon: 'formkit:right',class:'size-14px'  }, {})
+}
+const renderSuffix = ({ option }: { option: any }) => {
+  return h(
+    NButton,
+    {
+      text: true,
+      type: 'primary',
+      onClick: (e: MouseEvent) => {
+        e.stopPropagation();
+        currentNode.value = option
+        menuX.value = e.clientX
+        menuY.value = e.clientY
+        menuVisible.value = true
+      },
+    },
+    {
+      icon: () =>
+        h(Icon, { icon: 'lucide:more-horizontal', class: 'size-14px' }),
+    }
+  )
+};
+// 处理部门选择变化
+const handleUpdateDept = (value: any) => {
+  currentUser.value.dept = value
+}
+
+// 获取列表
+const getList = async () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    list.value = [
+      {id:1,name:'姓名1',dept:['YS'],mobile:'13800000000',email:'user1@example.com',account:'user1',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:2,name:'姓名2',dept:[],mobile:'13800000001',email:'user1@example.com',account:'user2',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:2,name:'姓名2',dept:[],mobile:'13800000001',email:'user1@example.com',account:'user2',role:'普通用户',dataPermission:[],gender:1,status:2},
+      {id:3,name:'姓名3',dept:[],mobile:'13800000002',email:'user1@example.com',account:'user3',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:4,name:'姓名4',dept:[],mobile:'13800000003',email:'user1@example.com',account:'user3',role:'普通用户',dataPermission:[],gender:1,status:2},
+      {id:4,name:'姓名4',dept:['YS'],mobile:'13800000003',email:'user1@example.com',account:'user4',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:5,name:'姓名5',dept:[],mobile:'13800000004',email:'user1@example.com',account:'user5',role:'普通用户',dataPermission:[],gender:1,status:2},
+      {id:6,name:'姓名6',dept:['YS'],mobile:'13800000005',email:'user1@example.com',account:'user6',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:7,name:'姓名7',dept:[],mobile:'13800000006',email:'user1@example.com',account:'user7',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:8,name:'姓名8',dept:[],mobile:'13800000007',email:'user1@example.com',account:'user8',role:'普通用户',dataPermission:[],gender:1,status:2},
+      {id:9,name:'姓名9',dept:['YS'],mobile:'13800000008',email:'user1@example.com',account:'user9',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:10,name:'姓名10',dept:[],mobile:'13800000009',email:'user1@example.com',account:'user10',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:11,name:'姓名11',dept:['YS'],mobile:'13800000010',email:'user1@example.com',account:'user11',role:'普通用户',dataPermission:[],gender:1,status:1},
+      {id:12,name:'姓名12',dept:[],mobile:'13800000011',email:'user1@example.com',account:'user12',role:'普通用户',dataPermission:[],gender:1,status:1},
+    ]
+  }, 1000)
+}
+// 处理数据权限选择变化
+const handleUpdateChecked = (keys: string[]) => {
+  currentUser.value.dataPermission = keys
+}
+
+// 打开添加用户弹框
+const addUser = () => {
+  currentType.value = 'add';
+  currentUser.value = {
+    id: 0,
+    name: '',
+    dept: [],
+    mobile: '',
+    email: '',
+    account: '',
+    role: null,
+    dataPermission: [],
+    status: 1,
+    gender: 1,
+  };
+  userModal.value = true;
+}
+// 重置密码
+const resetPassword = (row: any) => {
+  currentUser.value = {
+    id: row.id,
+    name: row.name,
+    dept: row.dept,
+    mobile: row.mobile,
+    email: row.email,
+    account: row.account,
+    role: row.role,
+    dataPermission: row.dataPermission,
+    status: row.status,
+    gender: row.gender,
+  };
+}
+// 编辑用户
+const handleEdit = (row: any) => {
+  currentType.value = 'edit';
+  currentUser.value = {
+    id: row.id,
+    name: row.name,
+    dept: row.dept,
+    mobile: row.mobile,
+    email: row.email,
+    account: row.account,
+    role: row.role,
+    dataPermission: row.dataPermission,
+    status: row.status,
+    gender: row.gender,
+  };
+  userModal.value = true;
+}
+// 删除用户
+const handleDelete = (row: any) => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    list.value = list.value.filter((item: any) => item.id !== row.id);
+    window.$message?.success('删除成功')
+  }, 1000)
+}
+// 导入用户
+const importUser = () => {
+  
+}
+// 刷新数据
+const refreshData = () => {
+  
+}
+// 保存用户
+const saveUser = async (e: MouseEvent) => {
+  e.preventDefault()
+  formRef.value?.validate((errors: any) => {
+    if (!errors) {
+      btnLoading.value = true;
+      setTimeout(() => {
+        // 新增
+        if(currentType.value === 'add'){
+          list.value.push({id:list.value.length+1,name:currentUser.value?.name,dept:currentUser.value?.dept,mobile:currentUser.value?.mobile,email:currentUser.value?.email,account:currentUser.value?.account,role:currentUser.value?.role,dataPermission:currentUser.value?.dataPermission,status:currentUser.value?.status,gender:currentUser.value?.gender})
+        }
+        // 编辑
+        if(currentType.value === 'edit'){
+          const target = list.value.find((item:any) => item.id === currentUser.value.id);
+          if (target) {
+            target.name = currentUser.value?.name;
+          }
+        }
+        window.$message?.success('保存成功')
+        btnLoading.value = false;
+        userModal.value = false;
+      }, 1000)
+    }
+  })
+}
+// 保存节点
+const saveNode = async (e: MouseEvent) => {
+  e.preventDefault()
+  formNodeRef.value?.validate((errors: any) => {
+    if (!errors) {
+      btnLoading.value = true;
+      setTimeout(() => {
+        window.$message?.success(`${currentNodeType.value === 'edit' ? '编辑' : '添加'}成功`)
+        btnLoading.value = false;
+        treeModal.value = false;
+      }, 1000)
+    }
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 用户管理 -->
+  <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+    <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+        <NGi span="24 s:24 m:16">
+            <div class="h-100% flex items-center gap-2">
+                <Icon icon="lucide:users-round" class="size-16px" :style="{ color: themeStore.themeColor }" />
+                <p class="text-[16px] font-600">架构及用户管理</p>
+            </div>
+        </NGi>
+        <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
+            <NButton type="primary" size="small" @click="addUser">
+              <Icon icon="ic:round-plus" class="size-16px" />添加成员
+            </NButton>
+            <NButton type="warning" size="small" @click="importUser">
+              <Icon icon="material-symbols:download" class="size-16px" />导入用户
+            </NButton>
+            <NButton text @click="refreshData">
+              <Icon icon="tdesign:refresh" class="size-14px" />
+            </NButton>
+        </NGi>
+      </NGrid>
+    </div>
+    <div class="flex gap-3">
+      <div class="border p-3 w-300px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+        <NInput v-model:value="keyword" placeholder="请输入人员">
+          <template #suffix>
+            <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+          </template>
+        </NInput>
+        <!-- 树 -->
+        <div class="mt-2 scroll">
+          <NTree
+            block-line
+            :data="orgTree"
+            :default-expanded-keys="defaultExpandedKeys"
+            :default-selected-keys="defaultSelectedKeys"
+            :render-switcher-icon="renderSwitcherIcon"
+            :render-suffix="renderSuffix"
+            selectable
+            :cancelable="false"
+            :on-update:selected-keys="handleSelectKeys"
+            :node-props="treeProps"
+          />
+          <NDropdown
+            :show="menuVisible"
+            :options="menuOptions"
+            size="small"
+            :x="menuX"
+            :y="menuY"
+            placement="bottom-start"
+            trigger="manual"
+            @clickoutside="closeMenu"
+            @select="handleMenuSelect"
+          />
+        </div>
+        <p class="mt-2 border-t pt-2 text-[11px] leading-4 text-slate-400">
+          点击层级查看该层级全员名录；右键（或悬停点 ···）可编辑、添加子级、删除。
+        </p>
+      </div>
+      <div class="flex-1">
+        <NDataTable
+          size="small"
+          :loading="loading"
+          :single-line="false"
+          :columns="columns"
+          :data="list"
+          :pagination="pagination"
+          max-height="calc(100vh - 285px)"
+        />
+      </div>
+    </div>
+    <!-- 新增或编辑抽屉 -->
+    <NDrawer v-model:show="userModal" :width="400" placement="right">
+      <NDrawerContent :title="currentType === 'add' ? '新增成员' : '编辑成员'" closable>
+          <NForm ref="formRef" :model="currentUser" :rules="rules" label-placement="left" label-width="auto">
+            <NFormItem label="姓名" path="name">
+              <NInput
+                v-model:value="currentUser.name"
+                placeholder="请输入姓名"
+              />
+            </NFormItem>
+            <NFormItem label="所属部门" path="dept">
+              <NTreeSelect
+                :value="currentUser.dept"
+                multiple
+                :options="orgTree"
+                @update:value="handleUpdateDept"
+              />
+            </NFormItem>
+            <NFormItem label="性别">
+              <NRadioGroup v-model:value="currentUser.gender" name="gender">
+                <n-radio :value="1">男</n-radio>
+                <n-radio :value="2">女</n-radio>
+              </NRadioGroup>
+            </NFormItem>
+            <NFormItem label="账号" path="account">
+              <NInput
+                v-model:value="currentUser.account"
+                placeholder="请输入账号"
+              />
+            </NFormItem>
+            <NFormItem label="手机号码">
+              <NInput
+                v-model:value="currentUser.mobile"
+                placeholder="请输入11位手机号码"
+              />
+            </NFormItem>
+            <NFormItem label="电子邮箱">
+              <NInput
+                v-model:value="currentUser.email"
+                placeholder="请输入电子邮箱"
+              />
+            </NFormItem>
+            <NFormItem label="账号角色" path="role">
+              <NSelect
+                v-model:value="currentUser.role"
+                :options="roleOptions"
+                placeholder="请选择账号角色"
+              />
+            </NFormItem>
+            <NFormItem label="数据权限" path="dataPermission">
+              <n-tree
+                :data="orgTree"
+                block-line
+                checkable
+                cascade
+                :checked-keys="currentUser.dataPermission"
+                :on-update:checked-keys="handleUpdateChecked"
+              />
+            </NFormItem>
+            <NFormItem label="状态">
+              <NRadioGroup v-model:value="currentUser.status" name="status">
+                <n-radio :value="1">启用</n-radio>
+                <n-radio :value="2">禁用</n-radio>
+              </NRadioGroup>
+            </NFormItem>
+          </NForm>
+          <template #footer>
+            <div class="flex justify-end gap-[10px]">
+              <NButton @click="userModal = false">取消</NButton>
+              <NButton type="primary" :loading="btnLoading" @click="saveUser">保存</NButton>
+            </div>
+          </template>
+      </NDrawerContent>
+    </NDrawer>
+    <!-- 左侧树添加/编辑弹框 -->
+    <NModal
+      v-model:show="treeModal"
+      preset="card"
+      :title="currentNodeType === 'edit' ? '编辑层级' : '添加子级'"
+      :auto-focus="false"
+      :style="{ width: '450px', height: 'auto' }"
+      :segmented="{ content: true, footer: true }"
+    >
+      <template #default>
+        <NForm ref="formNodeRef" :model="formNode" :rules="treeRules" label-placement="left" label-width="auto">
+          <NFormItem label="层级名称" path="label">
+            <NInput
+              v-model:value="formNode.label"
+              maxlength="10" 
+              show-count
+              placeholder="请输入层级名称"
+            />
+          </NFormItem>
+          <NFormItem label="层级简称">
+            <NInput
+              v-model:value="formNode.shortLabel"
+              maxlength="10" 
+              show-count
+              placeholder="请输入层级简称"
+            />
+          </NFormItem>
+          <NFormItem label="所属层级">
+            <NInput
+              v-model:value="formNode.parent"
+              :disabled="true"
+              placeholder=""
+            />
+          </NFormItem>
+          <NFormItem label="末端层级">
+            <NRadioGroup v-model:value="formNode.isLeaf" name="isLeaf">
+              <n-radio :value="1">是</n-radio>
+              <n-radio :value="0">否</n-radio>
+            </NRadioGroup>
+          </NFormItem>
+          <NFormItem label="排序">
+            <NInputNumber
+              class="w-full"
+              v-model:value="formNode.sort"
+              :min="0"
+              :show-button="false"
+              placeholder="请输入排序"
+            />
+          </NFormItem>
+        </NForm>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-[10px]">
+          <NButton @click="treeModal = false">取消</NButton>
+          <NButton type="primary" :loading="btnLoading" @click="saveNode">确定</NButton>
+        </div>
+      </template>
+    </NModal>
+  </NCard>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 322px);
+  overflow-y: auto;
+}
+</style>