编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetStore 网络设备平台 - 管理后台</title>
<style>
  :root{
    --primary:#1a73e8; --primary-dark:#185abc; --sidebar:#1f2a3d; --dark:#1f2937;
    --gray:#6b7280; --light:#f3f5f8; --border:#e5e7eb; --success:#16a34a; --warn:#d97706;
    --danger:#dc2626; --radius:10px;
  }
  *{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",-apple-system,"Segoe UI",Arial,sans-serif;}
  body{background:var(--light);color:var(--dark);}
  .hidden{display:none!important;}

  /* ============ 登录页 ============ */
  #loginPage{min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1a73e8,#0f3d91);}
  .login-card{background:#fff;border-radius:16px;padding:40px 36px;width:400px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
  .login-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
  .login-logo .mark{width:44px;height:44px;border-radius:10px;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;}
  .login-title{font-size:22px;font-weight:700;}
  .login-sub{color:var(--gray);font-size:13px;margin:6px 0 24px;}
  .form-row{margin-bottom:14px;}
  .form-row label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#374151;}
  .form-row input,.form-row select{width:100%;padding:10px 14px;border:1px solid var(--border);
    border-radius:10px;font-size:14px;outline:none;font-family:inherit;background:#fff;}
  .form-row input:focus,.form-row select:focus{border-color:var(--primary);}
  .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
  .role-opt{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;transition:.15s;background:#fff;}
  .role-opt:hover{border-color:var(--primary);}
  .role-opt.selected{border-color:var(--primary);background:#e8f0fe;color:var(--primary);font-weight:600;}
  .role-opt .t{font-size:14px;font-weight:600;margin-top:4px;}
  .btn{display:inline-block;padding:9px 20px;border-radius:10px;background:var(--primary);color:#fff;
    border:none;cursor:pointer;font-size:14px;font-weight:600;transition:.2s;font-family:inherit;text-decoration:none;}
  .btn:hover{background:var(--primary-dark);}
  .btn-block{width:100%;padding:12px;font-size:15px;}
  .btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary);}
  .btn-outline:hover{background:#e8f0fe;}
  .btn-sm{padding:5px 12px;font-size:13px;border-radius:8px;}
  .btn-gray{background:#e5e7eb;color:#374151;}
  .btn-gray:hover{background:#d1d5db;}
  .btn-success{background:var(--success);}
  .btn-success:hover{background:#15803d;}
  .btn-danger{background:var(--danger);}
  .btn-danger:hover{background:#b91c1c;}
  .login-tip{margin-top:16px;font-size:12px;color:var(--gray);line-height:1.8;
    background:#f8fafc;border:1px dashed var(--border);border-radius:10px;padding:10px 12px;}

  /* ============ 主框架 ============ */
  #appPage{display:none;min-height:100vh;}
  #appPage.show{display:flex;}
  .sidebar{width:220px;background:var(--sidebar);color:#cbd5e1;flex-shrink:0;display:flex;flex-direction:column;}
  .side-logo{display:flex;align-items:center;gap:10px;padding:18px 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);}
  .side-logo .mark{width:34px;height:34px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;}
  .side-logo b{font-size:15px;}
  .menu{flex:1;overflow-y:auto;padding:10px 0;}
  .menu-item{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;font-size:14px;color:#cbd5e1;transition:.15s;border-left:3px solid transparent;}
  .menu-item:hover{background:rgba(255,255,255,.06);color:#fff;}
  .menu-item.active{background:rgba(26,115,232,.18);color:#fff;border-left-color:var(--primary);}
  .menu-item .mi{width:18px;text-align:center;font-size:14px;opacity:.85;}
  .menu-group{font-size:12px;color:#64748b;padding:14px 18px 4px;letter-spacing:1px;}
  .side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#94a3b8;}

  .main{flex:1;display:flex;flex-direction:column;min-width:0;}
  .topbar{background:#fff;border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;}
  .page-title{font-size:18px;font-weight:700;}
  .top-user{display:flex;align-items:center;gap:12px;}
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
  .top-user .info{font-size:13px;line-height:1.3;}
  .top-user .info small{display:block;color:var(--gray);}
  .content{flex:1;padding:24px;overflow-y:auto;}

  /* ============ 卡片 / 表格 ============ */
  .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;}
  .card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .card-head h3{font-size:15px;font-weight:700;}
  .card-body{padding:18px;}
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
  .toolbar input[type=text],.toolbar select,.toolbar input[type=date]{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;outline:none;background:#fff;font-family:inherit;}
  .toolbar input[type=text]:focus,.toolbar select:focus,.toolbar input[type=date]:focus{border-color:var(--primary);}
  .toolbar input[type=text]{width:220px;}
  .toolbar .spacer{flex:1;}

  table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
  table.tbl th{background:#f8fafc;text-align:left;padding:10px 12px;color:#475569;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;}
  table.tbl td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
  table.tbl tr:hover td{background:#fafbfc;}
  .muted{color:var(--gray);}
  .small{font-size:12px;}

  .badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;}
  .b-blue{background:#e8f0fe;color:#1a73e8;}
  .b-green{background:#dcfce7;color:#15803d;}
  .b-orange{background:#fff7ed;color:#c2410c;}
  .b-red{background:#fee2e2;color:#b91c1c;}
  .b-gray{background:#f1f5f9;color:#475569;}
  .b-purple{background:#f3e8ff;color:#7c3aed;}

  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
  .stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
  .stat-card .num{font-size:26px;font-weight:800;color:var(--primary);margin:6px 0 2px;}
  .stat-card .lbl{font-size:13px;color:var(--gray);}
  .stat-card .sub{font-size:12px;color:var(--gray);}

  .tag-chip{display:inline-block;background:#f1f5f9;border-radius:6px;padding:2px 8px;font-size:12px;color:#475569;margin:1px 2px;}

  .link-btn{color:var(--primary);cursor:pointer;font-size:13px;background:none;border:none;padding:2px 4px;text-decoration:underline;}
  .link-btn:hover{color:var(--primary-dark);}
  .link-danger{color:var(--danger);}

  /* ============ 弹窗 ============ */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 16px;}
  .overlay.show{display:flex;}
  .modal{background:#fff;border-radius:14px;max-width:860px;width:100%;padding:24px;position:relative;animation:pop .2s;}
  .modal-sm{max-width:520px;}
  .modal-md{max-width:680px;}
  @keyframes pop{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
  .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .modal-head h3{font-size:17px;font-weight:700;}
  .modal-close{width:32px;height:32px;border-radius:50%;background:var(--light);border:none;font-size:16px;cursor:pointer;color:var(--gray);}
  .modal-close:hover{background:var(--border);}
  .modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;border-top:1px solid var(--border);padding-top:16px;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:13px;}
  .detail-grid .it{padding:7px 0;border-bottom:1px dashed var(--border);}
  .detail-grid .it b{color:var(--gray);font-weight:600;margin-right:8px;}

  .kv{display:flex;gap:8px;margin:3px 0;}
  .kv b{color:var(--gray);font-weight:600;min-width:80px;}

  /* ============ diff 对比 ============ */
  .diff-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;}
  .diff-table th{background:#f8fafc;padding:8px 10px;border:1px solid var(--border);text-align:left;color:#475569;}
  .diff-table td{padding:8px 10px;border:1px solid var(--border);}
  .diff-old{background:#fef2f2;color:#b91c1c;}
  .diff-new{background:#f0fdf4;color:#15803d;}
  .diff-same{color:#475569;}

  .notice{background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px;}
  .notice-blue{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;}

  .toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:11px 22px;border-radius:10px;z-index:300;opacity:0;transition:.3s;font-size:14px;pointer-events:none;}
  .toast.show{opacity:1;}

  .empty{text-align:center;color:var(--gray);padding:34px;font-size:14px;}
  .pager{display:flex;justify-content:flex-end;gap:6px;margin-top:12px;align-items:center;font-size:13px;color:var(--gray);}
  .pager button{background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:13px;}
  .pager button:hover{border-color:var(--primary);color:var(--primary);}
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;}
  .tabs .tab{padding:8px 16px;cursor:pointer;font-size:14px;color:var(--gray);border-bottom:2px solid transparent;}
  .tabs .tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
</style>
</head>
<body>

<!-- ===================== 登录页 ===================== -->
<div id="loginPage">
  <div class="login-card">
    <div class="login-logo">
      <div class="mark">NS</div>
      <div>
        <div class="login-title">NetStore 管理后台</div>
        <div class="login-sub">网络设备销售与设备溯源管理系统</div>
      </div>
    </div>
    <div class="form-row">
      <label>选择登录角色</label>
      <div class="role-grid" id="roleGrid"></div>
    </div>
    <div class="form-row">
      <label>账号</label>
      <input id="loginUser" value="王总" placeholder="请输入账号">
    </div>
    <div class="form-row">
      <label>密码</label>
      <input id="loginPwd" type="password" value="123456" placeholder="请输入密码">
    </div>
    <button class="btn btn-block" onclick="doLogin()">登 录</button>
    <div class="login-tip">
      Demo 说明：选择任意角色 + 任意账号密码即可登录体验。<br>
      老板 / 财务 / 销售 / 技术 四种角色可切换，权限不同，老板为默认管理员。
    </div>
  </div>
</div>

<!-- ===================== 主框架 ===================== -->
<div id="appPage">
  <div class="sidebar">
    <div class="side-logo"><div class="mark">NS</div><b>NetStore 管理后台</b></div>
    <div class="menu" id="menu"></div>
    <div class="side-foot">
      <div id="sideUser"></div>
    </div>
  </div>
  <div class="main">
    <div class="topbar">
      <div class="page-title" id="pageTitle">工作台</div>
      <div class="top-user">
        <span class="muted small" id="topRole"></span>
        <div class="info" id="topUserInfo"></div>
        <div class="avatar" id="topAvatar">王</div>
        <button class="btn btn-gray btn-sm" onclick="doLogout()">退出</button>
      </div>
    </div>
    <div class="content" id="content"></div>
  </div>
</div>

<div class="toast" id="toast"></div>

<script>
/* ================= 角色与权限 ================= */
const ROLES = {
  boss:   {name:'老板',   perms:['*']},
  finance:{name:'财务',   perms:['contract','inventory.view','log']},
  sales:  {name:'销售',   perms:['contract','contract.edit']},
  tech:   {name:'技术',   perms:['device.view','trace','trace.edit']}
};

let ROLE = 'boss';
let USER = '王总';
let currentModule = 'dashboard';

/* ================= 模拟数据 ================= */
const MODELS = [
  {id:1, cat:'交换机', brand:'华为',   model:'S5735-L48T4XE-A', price:6800, spec:'48GE + 4×10GE SFP+'},
  {id:2, cat:'服务器', brand:'戴尔',   model:'PowerEdge R740',  price:42000,spec:'双路 Xeon Gold / 512G'},
  {id:3, cat:'服务器', brand:'浪潮',   model:'NF5280M5',        price:58500,spec:'双路 EPYC / 256G'},
  {id:4, cat:'路由器', brand:'华为',   model:'AR6280',          price:13500,spec:'4×GE WAN + 24×GE LAN'},
  {id:5, cat:'网关',   brand:'深信服', model:'SG5500',          price:29800,spec:'下一代防火墙一体化'},
  {id:6, cat:'交换机', brand:'锐捷',   model:'S1520-10P',       price:380,  spec:'5口千兆非网管'}
];

let contracts = [
  {code:'HT-2026-0001', customer:'深圳市云启信息技术有限公司', contact:'王建国', phone:'13826888899',
   date:'2026-08-05', status:'已确认', tax:0.13, items:[
     {model:'S5735-L48T4XE-A', brand:'华为', spec:'48GE+4万兆;双电源', qty:6, price:7800},
     {model:'AR6280', brand:'华为', spec:'4×GE WAN;含防火墙模块', qty:2, price:16700}
   ]},
  {code:'HT-2026-0002', customer:'北京华辰网络科技有限公司', contact:'李娜', phone:'13901234567',
   date:'2026-08-08', status:'已出库', tax:0.13, items:[
     {model:'PowerEdge R740', brand:'戴尔', spec:'512G内存;8×1.2T SAS;RAID5', qty:4, price:45500}
   ]},
  {code:'HT-2026-0003', customer:'广州星河数据服务有限公司', contact:'张伟', phone:'13766554433',
   date:'2026-08-10', status:'草稿', tax:0.13, items:[
     {model:'NF5280M5', brand:'浪潮', spec:'256G内存;6×4T SATA', qty:8, price:62000},
     {model:'SG5500', brand:'深信服', spec:'含上网行为管理授权', qty:1, price:34300}
   ]},
  {code:'HT-2026-0004', customer:'上海智联智造有限公司', contact:'陈静', phone:'13688776655',
   date:'2026-08-11', status:'履行中', tax:0.13, items:[
     {model:'S1520-10P', brand:'锐捷', spec:'5口千兆;PoE款', qty:50, price:640}
   ]}
];

let devices = [
  {sn:'S5735-20260801-001', model:'S5735-L48T4XE-A', brand:'华为', cat:'交换机', loc:'A-1-02', inDate:'2026-08-01', status:'已出库', contract:'HT-2026-0001'},
  {sn:'S5735-20260801-002', model:'S5735-L48T4XE-A', brand:'华为', cat:'交换机', loc:'A-1-02', inDate:'2026-08-01', status:'在库', contract:''},
  {sn:'S5735-20260801-003', model:'S5735-L48T4XE-A', brand:'华为', cat:'交换机', loc:'A-1-03', inDate:'2026-08-01', status:'在库', contract:''},
  {sn:'AR6280-20260802-001', model:'AR6280', brand:'华为', cat:'路由器', loc:'B-2-01', inDate:'2026-08-02', status:'已出库', contract:'HT-2026-0001'},
  {sn:'R740-20260803-001', model:'PowerEdge R740', brand:'戴尔', cat:'服务器', loc:'C-1-05', inDate:'2026-08-03', status:'在库', contract:''},
  {sn:'R740-20260803-002', model:'PowerEdge R740', brand:'戴尔', cat:'服务器', loc:'C-1-05', inDate:'2026-08-03', status:'已出库', contract:'HT-2026-0002'},
  {sn:'R740-20260803-003', model:'PowerEdge R740', brand:'戴尔', cat:'服务器', loc:'C-1-06', inDate:'2026-08-03', status:'在库', contract:''},
  {sn:'NF5280-20260804-001', model:'NF5280M5', brand:'浪潮', cat:'服务器', loc:'C-2-01', inDate:'2026-08-04', status:'在库', contract:''},
  {sn:'SG5500-20260805-001', model:'SG5500', brand:'深信服', cat:'网关', loc:'D-1-01', inDate:'2026-08-05', status:'在库', contract:''},
  {sn:'S1520-20260806-001', model:'S1520-10P', brand:'锐捷', cat:'交换机', loc:'A-3-01', inDate:'2026-08-06', status:'在库', contract:''}
];

/* 配置溯源数据：每台设备含配置快照(versions) + 变更日志(changes) */
let configStore = {
  'S5735-20260801-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-02 10:21', operator:'王工(tech)', reason:'设备初始化配置',
       cfg:{hostname:'HQ-SW01', mgmtIP:'192.168.1.10/24', vlan:'VLAN10 办公', trunk:'GE0/0/24', snmp:'v2c public', ntp:'ntp.huawei.com', sysVersion:'VRP V200R019C10'}},
      {ver:'V1.1', time:'2026-08-03 14:05', operator:'李工(tech)', reason:'按客户要求调整办公VLAN',
       cfg:{hostname:'HQ-SW01', mgmtIP:'192.168.1.10/24', vlan:'VLAN10 办公 + VLAN20 财务', trunk:'GE0/0/24', snmp:'v2c public', ntp:'ntp.huawei.com', sysVersion:'VRP V200R019C10'}},
      {ver:'V1.2', time:'2026-08-05 09:30', operator:'李工(tech)', reason:'交付前安全加固，修改SNMP口令',
       cfg:{hostname:'HQ-SW01', mgmtIP:'192.168.1.10/24', vlan:'VLAN10 办公 + VLAN20 财务', trunk:'GE0/0/24', snmp:'v3 ****', ntp:'ntp.huawei.com', sysVersion:'VRP V200R019C10'}}
    ],
    changes:[
      {field:'vlan', from:'VLAN10 办公', to:'VLAN10 办公 + VLAN20 财务', by:'李工(tech)', time:'2026-08-03 14:05', reason:'按客户要求调整办公VLAN'},
      {field:'snmp', from:'v2c public', to:'v3 ****', by:'李工(tech)', time:'2026-08-05 09:30', reason:'交付前安全加固，修改SNMP口令'}
    ]
  },
  'AR6280-20260802-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-02 16:00', operator:'王工(tech)', reason:'设备初始化配置',
       cfg:{hostname:'BR-ROUTER01', wanIP:'203.0.113.1/30', lanIP:'192.168.1.254/24', vpn:'IPSec 隧道未启用', route:'默认路由到运营商', sysVersion:'VRP V200R010'}}
    ],
    changes:[]
  },
  'R740-20260803-002': {
    versions:[
      {ver:'V1.0', time:'2026-08-03 11:00', operator:'赵工(tech)', reason:'上架初始化',
       cfg:{raid:'RAID5 8盘', os:'CentOS 7.9', hostname:'db-01', ip:'10.0.0.11/24', mem:'512G', disk:'8×1.2T SAS', idracIP:'192.168.10.11'}},
      {ver:'V1.1', time:'2026-08-04 15:20', operator:'孙工(tech)', reason:'按客户规范调整主机名与IP',
       cfg:{raid:'RAID5 8盘', os:'CentOS 7.9', hostname:'prod-db-01', ip:'10.20.0.11/24', mem:'512G', disk:'8×1.2T SAS', idracIP:'192.168.10.11'}}
    ],
    changes:[
      {field:'hostname', from:'db-01', to:'prod-db-01', by:'孙工(tech)', time:'2026-08-04 15:20', reason:'按客户规范调整主机名'},
      {field:'ip', from:'10.0.0.11/24', to:'10.20.0.11/24', by:'孙工(tech)', time:'2026-08-04 15:20', reason:'按客户规范调整IP'}
    ]
  },
  'S5735-20260801-002': {
    versions:[
      {ver:'V1.0', time:'2026-08-02 10:40', operator:'王工(tech)', reason:'备机初始化配置',
       cfg:{hostname:'HQ-SW02', mgmtIP:'192.168.1.11/24', vlan:'VLAN1 默认', trunk:'-', snmp:'v2c public', ntp:'ntp.huawei.com', sysVersion:'VRP V200R019C10'}}
    ],
    changes:[]
  },
  'S5735-20260801-003': {
    versions:[
      {ver:'V1.0', time:'2026-08-02 10:55', operator:'王工(tech)', reason:'备机初始化配置',
       cfg:{hostname:'HQ-SW03', mgmtIP:'192.168.1.12/24', vlan:'VLAN1 默认', trunk:'-', snmp:'v2c public', ntp:'ntp.huawei.com', sysVersion:'VRP V200R019C10'}}
    ],
    changes:[]
  },
  'R740-20260803-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-03 11:10', operator:'赵工(tech)', reason:'上架初始化待交付',
       cfg:{raid:'RAID5 8盘', os:'CentOS 7.9', hostname:'vm-host-01', ip:'10.0.0.21/24', mem:'512G', disk:'8×1.2T SAS', idracIP:'192.168.10.21'}}
    ],
    changes:[]
  },
  'R740-20260803-003': {
    versions:[
      {ver:'V1.0', time:'2026-08-03 11:15', operator:'赵工(tech)', reason:'上架初始化待交付',
       cfg:{raid:'RAID5 8盘', os:'CentOS 7.9', hostname:'vm-host-02', ip:'10.0.0.22/24', mem:'512G', disk:'8×1.2T SAS', idracIP:'192.168.10.22'}}
    ],
    changes:[]
  },
  'NF5280-20260804-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-04 09:20', operator:'赵工(tech)', reason:'厂验后初始化',
       cfg:{raid:'RAID5 6盘', os:'银河麒麟 V10', hostname:'kylin-01', ip:'10.10.0.31/24', mem:'256G', disk:'6×4T SATA', bmcIP:'192.168.10.31'}}
    ],
    changes:[]
  },
  'SG5500-20260805-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-05 14:30', operator:'王工(tech)', reason:'设备初始化配置',
       cfg:{hostname:'FW-GW01', wanIP:'203.0.113.5/30', lanIP:'192.168.1.1/24', mode:'路由模式', ips:'启用', av:'病毒库 2026-08-05', urlFilter:'启用'}}
    ],
    changes:[]
  },
  'S1520-20260806-001': {
    versions:[
      {ver:'V1.0', time:'2026-08-06 09:05', operator:'王工(tech)', reason:'设备初始化配置',
       cfg:{hostname:'ACC-SW01', mgmtIP:'192.168.2.10/24', vlan:'VLAN1 默认', sysVersion:'锐捷 RGOS 10.4'}}
    ],
    changes:[]
  }
};

/* 审计日志 */
let auditLogs = [
  {time:'2026-08-11 10:02', user:'王总', role:'老板', action:'登录系统', target:'-', detail:'账号 王总 登录成功'},
  {time:'2026-08-10 16:40', user:'李工', role:'技术', action:'修改设备配置', target:'S5735-20260801-001', detail:'SNMP 口令由 v2c public 改为 v3 加密'},
  {time:'2026-08-08 09:12', user:'王总', role:'老板', action:'设备出库', target:'HT-2026-0002', detail:'出库 R740 ×4，关联合同 HT-2026-0002'},
  {time:'2026-08-06 14:03', user:'王工', role:'技术', action:'新建配置档案', target:'S1520-20260806-001', detail:'建立设备配置基线快照'}
];

/* ================= 工具 ================= */
const $ = id => document.getElementById(id);
function money(n){ return '¥' + Number(n||0).toLocaleString('zh-CN'); }
function toast(msg){ const t=$('toast'); t.textContent=msg; t.classList.add('show'); clearTimeout(t._t); t._t=setTimeout(()=>t.classList.remove('show'),2200); }
function esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
function today(){ const d=new Date(); return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0'); }
function nowStr(){ const d=new Date(); return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0')+' '+String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0'); }
function hasPerm(p){ return ROLES[ROLE].perms.includes('*') || ROLES[ROLE].perms.includes(p); }
function addAudit(action, target, detail){
  auditLogs.unshift({time:nowStr(), user:USER, role:ROLES[ROLE].name, action, target:target||'-', detail});
}
function badge(t){
  const m={'草稿':'b-gray','已生成':'b-blue','已确认':'b-blue','履行中':'b-purple','已出库':'b-green','完成':'b-green','作废':'b-red','在库':'b-green','已出库':'b-gray','维修中':'b-orange','停用':'b-red','正常':'b-green','已启用':'b-green','已停用':'b-gray','锁定':'b-red'};
  return `<span class="badge ${m[t]||'b-gray'}">${esc(t)}</span>`;
}

/* ================= 登录 ================= */
const ROLE_LIST = [
  {v:'boss',   t:'老板',     d:'默认管理员，全部权限'},
  {v:'finance',t:'财务',     d:'合同 / 库存 / 出库单 / 审计日志'},
  {v:'sales',  t:'销售',     d:'合同管理 / 报价'},
  {v:'tech',   t:'技术',     d:'设备配置 / 配置溯源'}
];
function initRoleGrid(){
  $('roleGrid').innerHTML = ROLE_LIST.map(r=>
    `<div class="role-opt ${r.v==='boss'?'selected':''}" data-v="${r.v}" onclick="pickRole(this,'${r.v}')">
      <div style="font-size:18px">${r.t}</div><div class="small muted">${r.d}</div></div>`).join('');
}
function pickRole(el, v){
  document.querySelectorAll('.role-opt').forEach(x=>x.classList.remove('selected'));
  el.classList.add('selected'); ROLE=v;
}
function doLogin(){
  USER = ($('loginUser').value||'王总').trim() || '王总';
  ROLE = ROLE || 'boss';
  $('loginPage').style.display='none';
  $('appPage').classList.add('show');
  buildMenu();
  navTo('dashboard');
  toast('欢迎，'+ROLES[ROLE].name+' '+USER);
}
function doLogout(){
  $('appPage').classList.remove('show');
  $('loginPage').style.display='flex';
}

/* ================= 菜单 / 导航 ================= */
const MENU = [
  {group:'运营'},
  {v:'dashboard', t:'工作台', icon:'◈'},
  {group:'交易'},
  {v:'contract', t:'合同管理', icon:'▤', perm:'contract'},
  {group:'设备'},
  {v:'device', t:'设备档案', icon:'▥', perm:'device.view'},
  {v:'inbound', t:'入库登记', icon:'⇩', perm:'inventory'},
  {v:'outbound', t:'出库登记', icon:'⇧', perm:'inventory'},
  {v:'stock', t:'库存台账', icon:'▦', perm:'inventory.view'},
  {group:'追溯'},
  {v:'trace', t:'配置溯源', icon:'◉', perm:'trace'},
  {group:'系统'},
  {v:'user', t:'用户与权限', icon:'◍', perm:'admin'},
  {v:'log', t:'操作审计', icon:'▤', perm:'log'}
];

function buildMenu(){
  const groups=[];
  MENU.forEach(m=>{
    if(m.group){ groups.push({title:m.group, items:[]}); return; }
    if(m.perm && !hasPerm(m.perm)) return;
    if(groups.length===0) groups.push({title:'', items:[]});
    groups[groups.length-1].items.push(m);
  });
  let html='';
  groups.forEach(g=>{
    if(g.items.length===0) return;
    if(g.title) html += `<div class="menu-group">${g.title}</div>`;
    g.items.forEach(m=>{
      html += `<div class="menu-item ${m.v===currentModule?'active':''}" data-v="${m.v}" onclick="navTo('${m.v}')">
        <span class="mi">${m.icon}</span><span>${m.t}</span></div>`;
    });
  });
  $('menu').innerHTML = html;
  $('sideUser').textContent = ROLES[ROLE].name+' · '+USER;
  $('topUserInfo').innerHTML = `${esc(USER)}<small>${ROLES[ROLE].name}</small>`;
  $('topRole').textContent = ROLES[ROLE].name;
  $('topAvatar').textContent = USER.slice(0,1).toUpperCase();
}

function navTo(v, opt){
  currentModule = v;
  document.querySelectorAll('.menu-item').forEach(x=>x.classList.toggle('active', x.dataset.v===v));
  const defs = {
    dashboard:{t:'工作台', fn:renderDashboard},
    contract:{t:'合同管理', fn:renderContract},
    device:{t:'设备档案', fn:renderDevice},
    inbound:{t:'入库登记', fn:renderInbound},
    outbound:{t:'出库登记', fn:renderOutbound},
    stock:{t:'库存台账', fn:renderStock},
    trace:{t:'配置溯源', fn:renderTrace},
    user:{t:'用户与权限', fn:renderUser},
    log:{t:'操作审计', fn:renderLog}
  };
  const d = defs[v]||defs.dashboard;
  $('pageTitle').textContent = d.t;
  d.fn(opt);
}

/* ================= 工作台 ================= */
function renderDashboard(){
  const inStock = devices.filter(d=>d.status==='在库').length;
  const outCount = devices.filter(d=>d.status!=='在库').length;
  const activeContracts = contracts.filter(c=>!['完成','作废'].includes(c.status)).length;
  const totalAmt = contracts.reduce((s,c)=> s + c.items.reduce((a,i)=>a+i.qty*i.price,0), 0);
  const lowStock = MODELS.filter(m => { const qty=devices.filter(d=>d.model===m.model && d.status==='在库').length; return qty<=2; });
  const latestLogs = auditLogs.slice(0,6);

  $('content').innerHTML = `
    <div class="stat-grid">
      <div class="stat-card"><div class="lbl">在库设备</div><div class="num">${inStock}</div><div class="sub">台</div></div>
      <div class="stat-card"><div class="lbl">已出库设备</div><div class="num">${outCount}</div><div class="sub">台</div></div>
      <div class="stat-card"><div class="lbl">有效合同</div><div class="num">${activeContracts}</div><div class="sub">份（不含完成/作废）</div></div>
      <div class="stat-card"><div class="lbl">合同总额</div><div class="num" style="font-size:20px">${money(totalAmt)}</div><div class="sub">不含税</div></div>
    </div>
    <div class="card">
      <div class="card-head"><h3>库存预警</h3>
        ${hasPerm('inventory.view')?`<button class="btn btn-sm btn-outline" onclick="navTo('stock')">查看库存台账</button>`:''}</div>
      <div class="card-body">
        ${lowStock.length? `<table class="tbl"><tr><th>型号</th><th>品牌</th><th>品类</th><th>在库数量</th><th>建议</th></tr>
          ${lowStock.map(m=>{const qty=devices.filter(d=>d.model===m.model&&d.status==='在库').length;
            return `<tr><td><b>${m.model}</b></td><td>${m.brand}</td><td>${m.cat}</td><td><span class="badge b-orange">${qty}</span></td>
            <td class="muted">库存低于阈值，建议补货</td></tr>`;}).join('')}</table>`
          : `<div class="empty">暂无低库存设备，库存状态良好</div>`}
      </div>
    </div>
    <div class="card">
      <div class="card-head"><h3>最近操作</h3>
        ${hasPerm('log')?`<button class="btn btn-sm btn-outline" onclick="navTo('log')">全部日志</button>`:''}</div>
      <div class="card-body" style="padding-top:8px">
        ${latestLogs.map(l=>`
          <div style="display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13px;align-items:center">
            <span class="badge b-blue">${l.action}</span>
            <span><b>${esc(l.user)}</b> <span class="muted">(${l.role})</span></span>
            <span class="muted">${esc(l.detail)}</span>
            <span class="muted" style="margin-left:auto;white-space:nowrap">${l.time}</span>
          </div>`).join('')}
      </div>
    </div>`;
}

/* ================= 合同管理 ================= */
let contractFilter = {kw:'', status:'全部'};
function renderContract(){
  const list = contracts.filter(c=>{
    const okKw = !contractFilter.kw || (c.customer+c.code+c.contact).includes(contractFilter.kw);
    const okSt = contractFilter.status==='全部' || c.status===contractFilter.status;
    return okKw && okSt;
  });
  const statuses=['全部',...new Set(contracts.map(c=>c.status))];
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>合同列表</h3>
        <div class="toolbar" style="margin-bottom:0">
          <input type="text" id="ckw" value="${esc(contractFilter.kw)}" placeholder="搜索客户 / 合同编号 / 联系人" oninput="contractFilter.kw=this.value;renderContract()">
          <select id="cst" onchange="contractFilter.status=this.value;renderContract()">
            ${statuses.map(s=>`<option ${s===contractFilter.status?'selected':''}>${s}</option>`).join('')}
          </select>
          ${hasPerm('contract.edit')?`<button class="btn btn-sm" onclick="newContract()">+ 新建合同</button>`:''}
        </div>
      </div>
      <div class="card-body" style="padding-top:8px">
        ${list.length? `<table class="tbl">
          <tr><th>合同编号</th><th>客户</th><th>联系人</th><th>签订日期</th><th>设备项</th><th>金额(不含税)</th><th>状态</th><th>操作</th></tr>
          ${list.map((c,i)=>{
            const amt = c.items.reduce((a,x)=>a+x.qty*x.price,0);
            const qty = c.items.reduce((a,x)=>a+x.qty,0);
            return `<tr>
              <td><b>${c.code}</b></td>
              <td>${esc(c.customer)}</td><td>${esc(c.contact)}</td><td>${c.date}</td>
              <td>${qty} 台</td><td>${money(amt)}</td>
              <td>${badge(c.status)}</td>
              <td>
                <button class="link-btn" onclick="viewContract(${i})">明细</button>
                ${hasPerm('contract.edit')? `<button class="link-btn" onclick="flowContract(${i})">流转</button>`:''}
              </td></tr>`;}).join('')}
        </table>` : '<div class="empty">无匹配合同</div>'}
      </div>
    </div>`;
}

function viewContract(i){
  const c = contracts[i];
  const amt = c.items.reduce((a,x)=>a+x.qty*x.price,0);
  const tax = Math.round(amt*c.tax);
  const grand = amt+tax;
  showModal(`<div class="modal-head"><h3>合同详情 · ${c.code}</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="detail-grid">
      <div class="it"><b>客户</b>${esc(c.customer)}</div>
      <div class="it"><b>联系人</b>${esc(c.contact)} / ${esc(c.phone)}</div>
      <div class="it"><b>签订日期</b>${c.date}</div>
      <div class="it"><b>状态</b>${badge(c.status)}</div>
    </div>
    <table class="tbl" style="margin-top:12px">
      <tr><th>型号</th><th>品牌</th><th>规格/配置</th><th>数量</th><th>单价</th><th>金额</th></tr>
      ${c.items.map(x=>`<tr><td><b>${esc(x.model)}</b></td><td>${x.brand}</td><td class="small">${esc(x.spec)}</td>
        <td>${x.qty}</td><td>${money(x.price)}</td><td>${money(x.qty*x.price)}</td></tr>`).join('')}
      <tr><td colspan="5" style="text-align:right"><b>不含税合计</b></td><td>${money(amt)}</td></tr>
      <tr><td colspan="5" style="text-align:right">税额(${Math.round(c.tax*100)}%)</td><td>${money(tax)}</td></tr>
      <tr><td colspan="5" style="text-align:right"><b>价税合计</b></td><td style="font-weight:800;color:var(--primary)">${money(grand)}</td></tr>
    </table>`, 'md');
}

function flowContract(i){
  const c = contracts[i];
  const next = c.status==='草稿'?'已生成': c.status==='已生成'?'已确认': c.status==='已确认'?'履行中': c.status==='履行中'?'已出库': c.status==='已出库'?'完成':'作废';
  showModal(`<div class="modal-head"><h3>合同状态流转</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="notice-blue">当前状态：${badge(c.status)}</div>
    <div class="detail-grid">
      <div class="it"><b>合同编号</b>${c.code}</div>
      <div class="it"><b>客户</b>${esc(c.customer)}</div>
    </div>
    <div class="form-row" style="margin-top:14px"><label>下一状态</label>
      <select id="flowNext">
        ${['草稿','已生成','已确认','履行中','已出库','完成','作废'].map(s=>`<option ${s===next?'selected':''}>${s}</option>`).join('')}
      </select></div>
    <div class="modal-foot">
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
      <button class="btn" onclick="doFlow(${i})">确认流转</button>
    </div>`, 'sm');
}
function doFlow(i){
  const ns = $('flowNext').value;
  const old = contracts[i].status;
  contracts[i].status = ns;
  addAudit('合同状态流转', contracts[i].code, `合同状态由「${old}」流转为「${ns}」`);
  closeModal(); renderContract();
  toast('合同状态已更新');
}

function newContract(){
  const modOpts = MODELS.map(m=>`<option value="${m.model}">${m.brand} ${m.model} (${m.price}元/台)</option>`).join('');
  showModal(`<div class="modal-head"><h3>新建合同</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="notice-blue">演示：手动录入合同，正式系统由前台选型自动生成。</div>
    <div class="two-col">
      <div class="form-row"><label>客户名称</label><input id="nCustomer" placeholder="客户单位"></div>
      <div class="form-row"><label>联系人</label><input id="nContact" placeholder="联系人"></div>
      <div class="form-row"><label>联系电话</label><input id="nPhone" placeholder="电话"></div>
      <div class="form-row"><label>签订日期</label><input id="nDate" type="date" value="${today()}"></div>
    </div>
    <div class="three-col">
      <div class="form-row"><label>设备型号</label><select id="nModel">${modOpts}</select></div>
      <div class="form-row"><label>数量</label><input id="nQty" type="number" value="1" min="1"></div>
      <div class="form-row"><label>税率</label><select id="nTax"><option value="0.13">13%</option><option value="0.06">6%</option></select></div>
    </div>
    <div class="modal-foot">
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
      <button class="btn" onclick="doNewContract()">保存合同</button>
    </div>`, 'md');
}
function doNewContract(){
  const m = MODELS.find(x=>x.model===$('nModel').value);
  const code = 'HT-2026-' + String(contracts.length+1).padStart(4,'0');
  contracts.unshift({
    code, customer:$('nCustomer').value||'新客户', contact:$('nContact').value||'-',
    phone:$('nPhone').value||'-', date:$('nDate').value||today(), status:'草稿',
    tax:parseFloat($('nTax').value), items:[{model:m.model,brand:m.brand,spec:m.spec,qty:+$('nQty').value||1,price:m.price}]
  });
  addAudit('新建合同', code, `新建合同 ${code}，客户：${$('nCustomer').value}`);
  closeModal(); renderContract();
  toast('合同已创建');
}

/* ================= 设备档案 ================= */
let deviceFilter = {kw:'', status:'全部'};
function renderDevice(){
  const list = devices.filter(d=>{
    const okKw = !deviceFilter.kw || (d.sn+d.model+d.brand).includes(deviceFilter.kw);
    const okSt = deviceFilter.status==='全部' || d.status===deviceFilter.status;
    return okKw && okSt;
  });
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>设备档案</h3>
        <div class="toolbar" style="margin-bottom:0">
          <input type="text" id="dkw" value="${esc(deviceFilter.kw)}" placeholder="搜索 SN / 型号 / 品牌" oninput="deviceFilter.kw=this.value;renderDevice()">
          <select onchange="deviceFilter.status=this.value;renderDevice()">
            ${['全部','在库','已出库','维修中'].map(s=>`<option ${s===deviceFilter.status?'selected':''}>${s}</option>`).join('')}
          </select>
          ${hasPerm('inventory')?`<button class="btn btn-sm" onclick="navTo('inbound')">+ 入库登记</button>`:''}
        </div>
      </div>
      <div class="card-body" style="padding-top:8px">
        ${list.length? `<table class="tbl">
          <tr><th>SN 序列号</th><th>型号</th><th>品牌</th><th>品类</th><th>库位</th><th>入库日期</th><th>状态</th><th>关联合同</th><th>操作</th></tr>
          ${list.map((d,i)=>`<tr>
            <td><b>${d.sn}</b></td><td>${d.model}</td><td>${d.brand}</td><td>${d.cat}</td>
            <td>${d.loc}</td><td>${d.inDate}</td><td>${badge(d.status)}</td>
            <td>${d.contract||'<span class="muted">-</span>'}</td>
            <td>${hasPerm('trace')?`<button class="link-btn" onclick="navTo('trace',{sn:'${d.sn}'})">配置</button>`:''}
                ${d.status==='在库'&&hasPerm('inventory')?`<button class="link-btn" onclick="quickOut(${i})">出库</button>`:''}
            </td></tr>`).join('')}
        </table>` : '<div class="empty">无匹配设备</div>'}
      </div>
    </div>`;
}
function quickOut(i){
  const d = devices[i];
  showModal(`<div class="modal-head"><h3>设备出库</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="notice-blue">设备 <b>${d.sn}</b> 将从库存出库，请选择关联合同（可为空）。</div>
    <div class="form-row"><label>关联合同</label>
      <select id="qContract"><option value="">无（散单出库）</option>
      ${contracts.map(c=>`<option value="${c.code}">${c.code} · ${esc(c.customer)}</option>`).join('')}</select></div>
    <div class="form-row"><label>出库说明</label><input id="qRemark" placeholder="可选"></div>
    <div class="modal-foot">
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
      <button class="btn btn-success" onclick="doQuickOut(${i})">确认出库</button>
    </div>`, 'sm');
}
function doQuickOut(i){
  const d = devices[i];
  const c = $('qContract').value;
  d.status='已出库'; d.contract=c; d.outDate=today();
  addAudit('设备出库', d.sn, `设备 ${d.sn} 出库${c?'，关联合同 '+c:''}`);
  closeModal(); renderDevice();
  toast('出库成功');
}

/* ================= 入库登记 ================= */
function renderInbound(){
  const mOpts = MODELS.map(m=>`<option value="${m.model}|${m.price}">${m.brand} ${m.model}（${m.price}元）</option>`).join('');
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>入库登记</h3></div>
      <div class="card-body">
        <div class="notice-blue">录入设备入库信息：选择型号后，系统自动生成 SN 并建立设备档案与配置档案基线。</div>
        <div class="three-col">
          <div class="form-row"><label>设备型号</label><select id="inModel">${mOpts}</select></div>
          <div class="form-row"><label>数量</label><input id="inQty" type="number" value="1" min="1"></div>
          <div class="form-row"><label>存放库位</label><input id="inLoc" placeholder="如 A-1-01"></div>
        </div>
        <div class="two-col">
          <div class="form-row"><label>采购单号（可选）</label><input id="inPo" placeholder="如 PO-2026-008"></div>
          <div class="form-row"><label>生产批次（可选）</label><input id="inBatch" placeholder="如 2026-07"></div>
        </div>
        <div style="display:flex;gap:10px;justify-content:flex-end">
          <button class="btn btn-gray" onclick="renderInbound()">重置</button>
          <button class="btn btn-success" onclick="doInbound()">确认入库</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><h3>最近入库记录</h3></div>
      <div class="card-body" style="padding-top:8px">
        <table class="tbl"><tr><th>入库单号</th><th>型号</th><th>数量</th><th>SN 列表</th><th>库位</th><th>时间</th><th>经办人</th></tr>
        ${inboundHistory.map(h=>`<tr><td><b>${h.no}</b></td><td>${h.model}</td><td>${h.qty}</td>
          <td class="small">${h.sns.map(s=>`<span class="tag-chip">${s}</span>`).join('')}</td>
          <td>${h.loc}</td><td>${h.time}</td><td>${h.user}</td></tr>`).join('')||'<tr><td colspan="7" class="empty">暂无入库记录</td></tr>'}
        </table>
      </div>
    </div>`;
}
let inboundHistory = [];
let seq = 100;
function doInbound(){
  const [model, price] = $('inModel').value.split('|');
  const m = MODELS.find(x=>x.model===model);
  const qty = Math.max(1, +$('inQty').value||1);
  const loc = $('inLoc').value||'A-1-01';
  const no = 'IN-'+today().replace(/-/g,'')+'-'+String(++seq);
  const sns = [];
  for(let i=0;i<qty;i++){
    const sn = model.replace(/[^A-Za-z0-9]/g,'').slice(0,6).toUpperCase()+'-'+today().replace(/-/g,'')+'-'+String(++seq);
    sns.push(sn);
    devices.unshift({sn, model:m.model, brand:m.brand, cat:m.cat, loc, inDate:today(), status:'在库', contract:''});
    if(!configStore[sn]){
      configStore[sn] = {versions:[{ver:'V1.0', time:nowStr(), operator:USER+'('+ROLES[ROLE].name+')', reason:'设备入库自动建立配置基线',
        cfg:{hostname:m.model.replace(/[^A-Za-z0-9]/g,'').slice(0,8)+'-X', mgmtIP:'192.168.0.0/24', vlan:'VLAN1 默认', sysVersion:'出厂默认'}}], changes:[]};
    }
  }
  inboundHistory.unshift({no, model:m.model, qty, sns, loc, time:nowStr(), user:USER});
  addAudit('设备入库', no, `入库 ${m.model} ×${qty}，SN：${sns.join(', ')}`);
  renderInbound();
  toast('入库成功，已生成 '+qty+' 台设备档案与配置基线');
}

/* ================= 出库登记 ================= */
function renderOutbound(){
  const inStockIdx = devices.map((d,i)=>({d,i})).filter(x=>x.d.status==='在库');
  const inStock = inStockIdx.map(x=>x.d);
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>出库登记</h3></div>
      <div class="card-body">
        <div class="notice-blue">从在库设备中选择要出库的设备，可关联合同 / 客户，出库后设备状态变为"已出库"。</div>
        <div class="form-row"><label>关联合同</label>
          <select id="obContract"><option value="">无（散单出库）</option>
          ${contracts.map(c=>`<option value="${c.code}">${c.code} · ${esc(c.customer)}</option>`).join('')}</select></div>
        <div class="form-row"><label>选择设备（当前在库 ${inStock.length} 台）</label>
          <div style="border:1px solid var(--border);border-radius:10px;max-height:220px;overflow-y:auto;padding:6px">
            ${inStock.length? inStockIdx.map(x=>`
              <label style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px">
                <input type="checkbox" class="ob-chk" value="${x.i}">
                <b>${x.d.sn}</b> <span class="muted">${x.d.model} / ${x.d.brand} / 库位 ${x.d.loc}</span>
              </label>`).join('') : '<div class="empty">暂无在库设备</div>'}
          </div></div>
        <div class="form-row"><label>出库说明</label><input id="obRemark" placeholder="可选"></div>
        <div style="display:flex;gap:10px;justify-content:flex-end">
          <button class="btn btn-gray" onclick="renderOutbound()">重置</button>
          <button class="btn btn-success" onclick="doOutbound()">确认出库</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><h3>最近出库记录</h3></div>
      <div class="card-body" style="padding-top:8px">
        <table class="tbl"><tr><th>出库单号</th><th>设备</th><th>关联合同</th><th>时间</th><th>经办人</th></tr>
        ${outboundHistory.map(h=>`<tr><td><b>${h.no}</b></td>
          <td class="small">${h.sns.map(s=>`<span class="tag-chip">${s}</span>`).join('')}</td>
          <td>${h.contract||'<span class="muted">散单</span>'}</td><td>${h.time}</td><td>${h.user}</td></tr>`).join('')||'<tr><td colspan="5" class="empty">暂无出库记录</td></tr>'}
        </table>
      </div>
    </div>`;
}
let outboundHistory = [];
function doOutbound(){
  const chks = [...document.querySelectorAll('.ob-chk:checked')].map(x=>+x.value);
  if(chks.length===0){ toast('请选择要出库的设备'); return; }
  const contract = $('obContract').value;
  const remark = $('obRemark').value;
  const no = 'OUT-'+today().replace(/-/g,'')+'-'+String(++seq);
  const sns = [];
  chks.forEach(i=>{ const d=devices[i]; d.status='已出库'; d.contract=contract; d.outDate=today(); d.outRemark=remark; sns.push(d.sn); });
  outboundHistory.unshift({no, sns, contract, time:nowStr(), user:USER});
  addAudit('设备出库', no, `出库设备 ${sns.length} 台${contract?'，关联合同 '+contract:''}，SN：${sns.join(', ')}`);
  renderOutbound();
  toast('出库完成，共 '+sns.length+' 台');
}

/* ================= 库存台账 ================= */
function renderStock(){
  const rows = MODELS.map(m=>{
    const inStock = devices.filter(d=>d.model===m.model&&d.status==='在库').length;
    const out = devices.filter(d=>d.model===m.model&&d.status!=='在库').length;
    return {m, inStock, out, total:inStock+out};
  });
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>库存台账</h3><span class="muted small">统计基于当前设备档案</span></div>
      <div class="card-body" style="padding-top:8px">
        <table class="tbl">
          <tr><th>型号</th><th>品牌</th><th>品类</th><th>在库</th><th>已出库</th><th>合计</th><th>库存状态</th></tr>
          ${rows.map(r=>`<tr>
            <td><b>${r.m.model}</b></td><td>${r.m.brand}</td><td>${r.m.cat}</td>
            <td><span class="badge ${r.inStock===0?'b-red':'b-green'}">${r.inStock}</span></td>
            <td>${r.out}</td><td>${r.total}</td>
            <td>${r.inStock===0?'<span class="badge b-red">无库存</span>': r.inStock<=2?'<span class="badge b-orange">低库存</span>':'<span class="badge b-green">正常</span>'}</td>
          </tr>`).join('')}
        </table>
      </div>
    </div>`;
}

/* ================= 配置溯源（核心） ================= */
let traceSel = '';
function renderTrace(opt){
  if(opt && opt.sn){ traceSel = opt.sn; }
  if(!traceSel){ traceSel = devices[0] ? devices[0].sn : ''; }
  const allDev = devices.slice().sort((a,b)=> a.sn.localeCompare(b.sn));
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>设备配置溯源</h3>
        <span class="muted small">每台设备保留完整配置快照与修改留痕，可追溯操作人员</span></div>
      <div class="card-body">
        <div class="toolbar">
          <select id="traceDev" onchange="traceSel=this.value;renderTrace()" style="width:320px">
            ${allDev.map(d=>`<option value="${d.sn}" ${d.sn===traceSel?'selected':''}>${d.sn} · ${d.model} / ${d.brand}</option>`).join('')}
          </select>
          ${hasPerm('trace.edit')?`<button class="btn btn-sm" onclick="editConfig()">修改配置</button>`:''}
        </div>
        <div id="traceDetail">${renderTraceDetail()}</div>
      </div>
    </div>`;
}
function renderTraceDetail(){
  const d = devices.find(x=>x.sn===traceSel);
  const store = configStore[traceSel];
  if(!store || !d) return '<div class="empty">该设备暂无配置档案</div>';
  const cur = store.versions[store.versions.length-1];
  const cfg = cur.cfg;
  return `
    <div class="detail-grid" style="grid-template-columns:1fr 1fr 1fr">
      <div class="it"><b>SN</b>${d.sn}</div><div class="it"><b>型号</b>${d.model}</div><div class="it"><b>品牌</b>${d.brand}</div>
      <div class="it"><b>当前版本</b>${cur.ver}</div><div class="it"><b>当前状态</b>${badge(d.status)}</div><div class="it"><b>关联合同</b>${d.contract||'-'}</div>
    </div>
    <div class="notice notice-blue" style="margin-top:14px">当前配置快照（${cur.ver} · 由 ${cur.operator} 于 ${cur.time} 设置，原因：${cur.reason}）</div>
    <table class="tbl">
      <tr><th style="width:180px">配置项</th><th>当前值</th></tr>
      ${Object.entries(cfg).map(([k,v])=>`<tr><td><b>${k}</b></td><td>${esc(v)}</td></tr>`).join('')}
    </table>
    <h4 style="margin:20px 0 10px;font-size:14px">配置变更记录（留痕）</h4>
    ${store.changes.length? `<table class="tbl">
      <tr><th>字段</th><th>修改前</th><th>修改后</th><th>操作人</th><th>时间</th><th>原因</th><th>对比</th></tr>
      ${store.changes.map((c,i)=>`<tr>
        <td><b>${c.field}</b></td>
        <td class="diff-old">${esc(c.from)}</td><td class="diff-new">${esc(c.to)}</td>
        <td>${c.by}</td><td>${c.time}</td><td class="small">${esc(c.reason)}</td>
        <td><button class="link-btn" onclick="compareCfg('${c.field}')">版本对比</button></td></tr>`).join('')}
    </table>` : '<div class="empty">该设备暂无配置修改记录</div>'}
    <h4 style="margin:20px 0 10px;font-size:14px">配置版本历史</h4>
    <table class="tbl">
      <tr><th>版本</th><th>时间</th><th>操作人</th><th>原因</th><th>操作</th></tr>
      ${store.versions.slice().reverse().map((v,i)=>`<tr>
        <td><b>${v.ver}</b></td><td>${v.time}</td><td>${v.operator}</td><td class="small">${esc(v.reason)}</td>
        <td><button class="link-btn" onclick="viewVersion('${v.ver}')">查看</button></td></tr>`).join('')}
    </table>`;
}
function viewVersion(ver){
  const store = configStore[traceSel];
  const v = store.versions.find(x=>x.ver===ver);
  showModal(`<div class="modal-head"><h3>配置快照 · ${v.ver}</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="detail-grid">
      <div class="it"><b>设备</b>${traceSel}</div><div class="it"><b>时间</b>${v.time}</div>
      <div class="it"><b>操作人</b>${v.operator}</div><div class="it"><b>原因</b>${esc(v.reason)}</div>
    </div>
    <table class="tbl" style="margin-top:12px"><tr><th style="width:180px">配置项</th><th>值</th></tr>
      ${Object.entries(v.cfg).map(([k,x])=>`<tr><td><b>${k}</b></td><td>${esc(x)}</td></tr>`).join('')}
    </table>`, 'md');
}
function compareCfg(field){
  const store = configStore[traceSel];
  const change = store.changes.find(c=>c.field===field);
  showModal(`<div class="modal-head"><h3>变更前后对比 · ${field}</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="detail-grid">
      <div class="it"><b>设备</b>${traceSel}</div><div class="it"><b>变更人</b>${change.by}</div>
      <div class="it"><b>时间</b>${change.time}</div><div class="it"><b>原因</b>${esc(change.reason)}</div>
    </div>
    <table class="diff-table">
      <tr><th style="width:120px">对比</th><th>值</th></tr>
      <tr><td><span class="badge b-red">修改前</span></td><td class="diff-old">${esc(change.from)}</td></tr>
      <tr><td><span class="badge b-green">修改后</span></td><td class="diff-new">${esc(change.to)}</td></tr>
    </table>`, 'sm');
}

function editConfig(){
  const store = configStore[traceSel];
  if(!store){ toast('该设备暂无配置档案'); return; }
  const cur = store.versions[store.versions.length-1].cfg;
  const fields = Object.entries(cur);
  showModal(`<div class="modal-head"><h3>修改配置 · ${traceSel}</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="notice">修改后将自动记录：字段、修改前后值、操作人（${USER}）、时间与原因，生成新版本留痕。</div>
    <div class="two-col">
      ${fields.map(([k,v])=>`
        <div class="form-row"><label>${k}</label>
          <input class="cfg-input" data-k="${k}" value="${esc(v)}"></div>`).join('')}
    </div>
    <div class="form-row"><label>修改原因（必填，将写入留痕日志）</label><input id="cfgReason" placeholder="请输入本次修改原因"></div>
    <div class="modal-foot">
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
      <button class="btn" onclick="doEditConfig()">保存并留痕</button>
    </div>`, 'lg');
}
function doEditConfig(){
  const store = configStore[traceSel];
  const reason = $('cfgReason').value.trim();
  if(!reason){ toast('请填写修改原因'); return; }
  const oldCfg = store.versions[store.versions.length-1].cfg;
  const newCfg = {};
  const changed = [];
  document.querySelectorAll('.cfg-input').forEach(inp=>{
    const k = inp.dataset.k; const nv = inp.value;
    newCfg[k] = nv;
    if(oldCfg[k] !== nv){
      changed.push({field:k, from:oldCfg[k], to:nv});
    }
  });
  if(changed.length===0){ toast('未检测到任何修改'); return; }
  const newVer = 'V1.' + store.versions.length;
  const t = nowStr();
  const op = USER+'('+ROLES[ROLE].name+')';
  store.versions.push({ver:newVer, time:t, operator:op, reason, cfg:newCfg});
  changed.forEach(c=>{
    store.changes.unshift({field:c.field, from:c.from, to:c.to, by:op, time:t, reason});
    addAudit('修改设备配置', traceSel, `配置字段 ${c.field} 由「${c.from}」改为「${c.to}」，原因：${reason}`);
  });
  closeModal(); renderTrace();
  toast('配置已更新并留痕，共 '+changed.length+' 处修改，版本 '+newVer);
}

/* ================= 用户与权限 ================= */
let userList = [
  {name:'王总',   role:'boss',    status:'正常', desc:'老板 / 系统管理员'},
  {name:'刘经理', role:'sales',   status:'正常', desc:'大客户销售'},
  {name:'李工',   role:'tech',    status:'正常', desc:'网络工程师'},
  {name:'赵工',   role:'tech',    status:'正常', desc:'服务器工程师'},
  {name:'王工',   role:'tech',    status:'正常', desc:'网络工程师'},
  {name:'陈会计', role:'finance', status:'正常', desc:'财务负责人'},
  {name:'孙出纳', role:'finance', status:'锁定', desc:'出纳'}
];
function renderUser(){
  const groups = {boss:'老板组', finance:'财务组', sales:'销售组', tech:'技术组'};
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>用户与权限（RBAC）</h3>
        ${hasPerm('admin')?`<button class="btn btn-sm" onclick="addUser()">+ 新增用户</button>`:''}</div>
      <div class="card-body" style="padding-top:8px">
        <table class="tbl">
          <tr><th>账号</th><th>角色</th><th>角色组</th><th>说明</th><th>状态</th><th>操作</th></tr>
          ${userList.map((u,i)=>`<tr>
            <td><b>${esc(u.name)}</b></td>
            <td><span class="badge b-blue">${ROLES[u.role]?ROLES[u.role].name:u.role}</span></td>
            <td>${groups[u.role]||u.role}</td><td class="muted">${esc(u.desc)}</td>
            <td>${badge(u.status)}</td>
            <td>${hasPerm('admin')?`<button class="link-btn" onclick="toggleUser(${i})">${u.status==='正常'?'锁定':'解锁'}</button>`:''}
            </td></tr>`).join('')}
        </table>
        <div class="notice" style="margin-top:14px">角色权限说明：老板为默认管理员，全部权限；财务可查看合同、库存台账、出库单与审计日志；销售负责合同管理与报价；技术负责设备配置修改与配置溯源。</div>
      </div>
    </div>`;
}
function toggleUser(i){
  userList[i].status = userList[i].status==='正常'?'锁定':'正常';
  addAudit('用户状态变更', userList[i].name, `用户 ${userList[i].name} 状态变更为「${userList[i].status}」`);
  renderUser(); toast('已更新');
}
function addUser(){
  showModal(`<div class="modal-head"><h3>新增用户</h3><button class="modal-close" onclick="closeModal()">✕</button></div>
    <div class="two-col">
      <div class="form-row"><label>账号</label><input id="uName" placeholder="账号"></div>
      <div class="form-row"><label>角色</label><select id="uRole">${Object.keys(groups()).map(r=>`<option value="${r}">${groups()[r]}</option>`).join('')}</select></div>
    </div>
    <div class="form-row"><label>说明</label><input id="uDesc" placeholder="职务/说明"></div>
    <div class="modal-foot">
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
      <button class="btn" onclick="doAddUser()">保存</button>
    </div>`, 'sm');
}
function groups(){ return {boss:'老板组', finance:'财务组', sales:'销售组', tech:'技术组'}; }
function doAddUser(){
  const name = $('uName').value.trim();
  if(!name){ toast('请输入账号'); return; }
  userList.push({name, role:$('uRole').value, status:'正常', desc:$('uDesc').value||'-'});
  addAudit('新增用户', name, `新增用户 ${name}，角色：${$('uRole').value}`);
  closeModal(); renderUser(); toast('用户已新增');
}

/* ================= 操作审计 ================= */
let logFilter = {kw:''};
function renderLog(){
  const list = auditLogs.filter(l=>!logFilter.kw || (l.user+l.action+l.target+l.detail).includes(logFilter.kw));
  $('content').innerHTML = `
    <div class="card">
      <div class="card-head"><h3>操作审计日志</h3>
        <div class="toolbar" style="margin-bottom:0">
          <input type="text" value="${esc(logFilter.kw)}" placeholder="搜索操作人 / 动作 / 对象" oninput="logFilter.kw=this.value;renderLog()">
          <span class="muted small">共 ${list.length} 条</span>
        </div></div>
      <div class="card-body" style="padding-top:8px">
        ${list.length? `<table class="tbl">
          <tr><th>时间</th><th>操作人</th><th>角色</th><th>动作</th><th>目标对象</th><th>详情</th></tr>
          ${list.map(l=>`<tr>
            <td style="white-space:nowrap">${l.time}</td><td><b>${esc(l.user)}</b></td><td>${l.role}</td>
            <td><span class="badge b-blue">${esc(l.action)}</span></td>
            <td class="small">${esc(l.target)}</td><td class="small">${esc(l.detail)}</td></tr>`).join('')}
        </table>` : '<div class="empty">无匹配日志</div>'}
      </div>
    </div>`;
}

/* ================= 弹窗 ================= */
let modalWrap = null;
function showModal(html, size){
  const overlay = document.createElement('div');
  overlay.className = 'overlay show';
  overlay.id = 'dynamicModal';
  overlay.innerHTML = `<div class="modal ${size==='sm'?'modal-sm':size==='md'?'modal-md':''}" style="${size==='lg'?'max-width:980px':''}">${html}</div>`;
  overlay.addEventListener('click', e=>{ if(e.target===overlay) overlay.remove(); });
  document.body.appendChild(overlay);
  modalWrap = overlay;
}
function closeModal(){
  const m = document.getElementById('dynamicModal');
  if(m) m.remove();
}

/* ================= 初始化 ================= */
initRoleGrid();
</script>
</body>
</html>