编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爵士乐售票 · 管理后台 Demo</title>
<style>
  :root {
    --pri: #4a2f86;
    --pri2: #5a3dbb;
    --gold: #d4a12a;
    --wine: #c0392b;
    --ink: #1f1f27;
    --bg: #f4f3f0;
    --card: #ffffff;
    --line: #e8e6e0;
    --muted: #8b8b93;
    --ok: #2e9e6b;
    --warn: #e08a1e;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    display:flex; min-height:100vh; color:#222; background:var(--bg);
  }

  /* ===== 侧边栏 ===== */
  .sidebar {
    width:220px; background:linear-gradient(180deg,#34216a,#4a2f86 60%,#5a3dbb); color:#fff; flex:none;
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  }
  .side-brand { display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
  .side-brand .logo { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:16px; font-weight:700;}
  .side-brand .nm { font-size:14px; font-weight:700; letter-spacing:1px; }
  .side-brand .nm small { display:block; font-weight:400; font-size:10px; color:rgba(255,255,255,.6); letter-spacing:1px; margin-top:2px;}
  .nav { padding:12px 0; flex:1; overflow-y:auto; }
  .nav .grp { font-size:10px; color:rgba(255,255,255,.45); letter-spacing:2px; padding:14px 18px 6px; }
  .nav a {
    display:flex; align-items:center; gap:10px; padding:11px 18px; color:rgba(255,255,255,.8); text-decoration:none; font-size:13px;
    border-left:3px solid transparent; transition:all .15s; cursor:pointer;
  }
  .nav a i { font-style:normal; width:18px; text-align:center; font-size:15px; opacity:.9;}
  .nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav a.active { background:rgba(255,255,255,.12); border-left-color:var(--gold); color:#fff; font-weight:600;}
  .side-foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,.1); font-size:11px; color:rgba(255,255,255,.55); line-height:1.7;}

  /* ===== 主区域 ===== */
  .main { flex:1; display:flex; flex-direction:column; min-width:0; }
  .topbar {
    background:var(--card); border-bottom:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:20;
  }
  .topbar .page-title h1 { font-size:17px; color:var(--ink); font-weight:700; }
  .topbar .page-title span { font-size:12px; color:var(--muted); }
  .topbar .right { display:flex; align-items:center; gap:12px; }
  .topbar .right .role { font-size:12px; color:var(--muted); }
  .topbar .user { display:flex; align-items:center; gap:8px; }
  .topbar .user .av { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--pri2),var(--pri)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
  .topbar .user .nm { font-size:13px; color:var(--ink); font-weight:600; }
  .topbar .user .rg { font-size:10px; color:var(--pri); background:#efeaf9; padding:2px 8px; border-radius:20px; }

  .content { padding:20px 24px; }

  /* ===== 通用组件 ===== */
  .card { background:var(--card); border-radius:12px; border:1px solid var(--line); box-shadow:0 2px 10px rgba(30,20,50,.04); }
  .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
  .stat { padding:16px 18px; }
  .stat .lbl { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}
  .stat .val { font-size:26px; font-weight:800; color:var(--ink); margin-top:8px; }
  .stat .val small { font-size:12px; color:var(--muted); font-weight:400; margin-left:4px; }
  .stat .chg { font-size:11px; margin-top:6px; color:var(--ok); }
  .stat .chg.down { color:var(--wine); }
  .stat .ico { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; }
  .stat .bx { display:flex; justify-content:space-between; align-items:center; }

  .card-hd { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
  .card-hd h3 { font-size:14px; color:var(--ink); font-weight:700; }
  .card-bd { padding:14px 18px; }

  .grid2 { display:grid; grid-template-columns:2fr 1fr; gap:14px; }

  table { width:100%; border-collapse:collapse; font-size:12.5px; }
  th { text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
  td { padding:10px; border-bottom:1px solid #f1efe9; color:#3c3c46; vertical-align:middle; }
  tr:hover td { background:#faf9f6; }
  td .nm { font-weight:600; color:var(--ink); }
  td .sub { font-size:11px; color:var(--muted); margin-top:2px; }

  .tag { display:inline-block; font-size:10.5px; padding:3px 10px; border-radius:20px; font-weight:600; white-space:nowrap;}
  .tag.gray { background:#f0f0f2; color:#666; }
  .tag.blue { background:#e8effb; color:#2f6fd0; }
  .tag.gold { background:#fbf0d4; color:#a5780a; }
  .tag.green { background:#e4f5ec; color:#1f8a5c; }
  .tag.red { background:#fae8e5; color:#c0392b; }
  .tag.purple { background:#ede7fa; color:#4a2f86; }

  .btn { border:1px solid var(--line); background:#fff; color:#333; font-size:12px; padding:7px 14px; border-radius:8px; cursor:pointer; transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:5px;}
  .btn:hover { border-color:#cfcbd6; background:#faf9f6; }
  .btn.pri { background:linear-gradient(135deg,var(--pri2),var(--pri)); color:#fff; border:none; font-weight:600; }
  .btn.pri:hover { opacity:.92; }
  .btn.ghost { background:transparent; }
  .btn.sm { padding:5px 10px; font-size:11.5px; }
  .btn.risk { color:var(--wine); border-color:#eecfcb; }
  .btn.risk:hover { background:#fdf0ee; border-color:var(--wine); }
  .btn.link { border:none; color:var(--pri); background:none; padding:2px 6px; font-size:12px;}
  .btn.link:hover { text-decoration:underline; }
  .tbl-actions { display:inline-flex; gap:6px; align-items:center; flex-wrap:nowrap; }
  .tbl-actions .btn.sm { padding:4px 12px; font-size:11.5px; border-radius:6px; white-space:nowrap; flex-shrink:0; min-width:48px; justify-content:center; }

  .filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); }
  .field { display:flex; flex-direction:column; gap:4px;}
  .field label { font-size:11px; color:var(--muted); }
  select, input[type=text], input[type=date], input[type=number] { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px; background:#fff; color:#333; outline:none;}
  select:focus, input:focus { border-color:var(--pri2); }
  .search { min-width:200px; }

  .mrow { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .pager { display:flex; gap:6px; align-items:center; justify-content:flex-end; padding:12px 18px; }
  .pager .pg { width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:#fff; color:#555; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .pager .pg.active { background:var(--pri); color:#fff; border-color:var(--pri); }

  .bar-row { display:flex; align-items:center; gap:10px; margin:8px 0; font-size:12px; color:#555; }
  .bar-row .bl { width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bar-row .bar { flex:1; height:16px; background:#efeaf2; border-radius:8px; overflow:hidden; }
  .bar-row .bar i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--pri2),var(--pri)); }
  .bar-row .bv { width:64px; text-align:right; color:var(--ink); font-weight:600; }
  .bar-row .bt { width:60px; text-align:right; color:var(--muted); }

  /* 弹窗 */
  .mask { position:fixed; inset:0; background:rgba(15,10,30,.55); display:none; z-index:100; align-items:center; justify-content:center; }
  .mask.show { display:flex; }
  .modal { width:460px; max-height:88vh; overflow-y:auto; background:#fff; border-radius:14px; padding:22px; }
  .modal h3 { font-size:15px; color:var(--ink); margin-bottom:16px; }
  .form-row { display:flex; gap:12px; margin-bottom:12px; }
  .form-row .field { flex:1; }
  .form-row .field.full { flex:1 1 100%; }
  .modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

  .toast { position:fixed; left:50%; top:40px; transform:translateX(-50%); background:rgba(20,15,38,.92); color:#fff; padding:11px 22px; border-radius:30px; font-size:13px; display:none; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.3); }
  .toast.show { display:block; }

  .empty { text-align:center; color:var(--muted); padding:30px 0; font-size:13px; }
  .pn { display:none; }
  .pn.active { display:block; }
</style>
</head>
<body>

<!-- ================= 侧边栏 ================= -->
<aside class="sidebar">
  <div class="side-brand">
    <div class="logo">♪</div>
    <div class="nm">爵士乐现场<small>管理后台</small></div>
  </div>
  <nav class="nav">
    <div class="grp">数据</div>
    <a class="active" data-page="pn-dashboard" onclick="goNav('pn-dashboard',this)">数据看板</a>

    <div class="grp">内容管理</div>
    <a data-page="pn-shows" onclick="goNav('pn-shows',this)">演出管理</a>
    <a data-page="pn-sessions" onclick="goNav('pn-sessions',this)">场次管理</a>
    <a data-page="pn-tiers" onclick="goNav('pn-tiers',this)">票档管理</a>

    <div class="grp">订单</div>
    <a data-page="pn-orders" onclick="goNav('pn-orders',this)">订单管理</a>
    <a data-page="pn-refund" onclick="goNav('pn-refund',this)">退改处理</a>

    <div class="grp">系统</div>
    <a data-page="pn-users" onclick="goNav('pn-users',this)">账号权限</a>
  </nav>
  <div class="side-foot">纯白标 · 无服务商标识<br>微信支付 · 原路退款</div>
</aside>

<!-- ================= 主区域 ================= -->
<div class="main">

  <!-- 顶栏 -->
  <div class="topbar">
    <div class="page-title">
      <h1 id="top-title">数据看板</h1>
      <span id="top-sub">演出售卖 · 库存 · 核销概览</span>
    </div>
    <div class="right">
      <span class="role">本店：上海·爵士馆</span>
      <div class="user">
        <div class="av">管</div>
        <div class="nm">管理员</div>
        <div class="rg">管理员</div>
      </div>
    </div>
  </div>

  <div class="content">

    <!-- ============ 数据看板 ============ -->
    <div class="pn active" id="pn-dashboard">
      <div class="stat-grid">
        <div class="card stat">
          <div class="bx">
            <div class="lbl">今日演出</div><div class="ico" style="background:#efeaf9;color:var(--pri)">♪</div>
          </div>
          <div class="val">2 <small>场</small></div>
          <div class="chg">较上周 +1</div>
        </div>
        <div class="card stat">
          <div class="bx">
            <div class="lbl">本周订单</div><div class="ico" style="background:#e4f5ec;color:var(--ok)">☰</div>
          </div>
          <div class="val">286 <small>单</small></div>
          <div class="chg">销售额 ¥86,420</div>
        </div>
        <div class="card stat">
          <div class="bx">
            <div class="lbl">总库存余量</div><div class="ico" style="background:#fbf0d4;color:var(--gold)">◫</div>
          </div>
          <div class="val">1,240 <small>张</small></div>
          <div class="chg down">已售 58%</div>
        </div>
        <div class="card stat">
          <div class="bx">
            <div class="lbl">今日核销</div><div class="ico" style="background:#e8effb;color:#2f6fd0">✓</div>
          </div>
          <div class="val">136 <small>人</small></div>
          <div class="chg">核销率 92%</div>
        </div>
      </div>

      <div class="grid2">
        <div class="card">
          <div class="card-hd"><h3>场次售卖情况</h3><button class="btn sm" onclick="showToast('已导出售卖报表')">导出报表</button></div>
          <div class="card-bd">
            <div class="bar-row"><span class="bl">午后爵士 · 蓝调专场</span><div class="bar"><i style="width:64%"></i></div><span class="bv">64%</span><span class="bt">已售</span></div>
            <div class="bar-row"><span class="bl">午夜摇摆 · 复古爵士夜</span><div class="bar"><i style="width:82%"></i></div><span class="bv">82%</span><span class="bt">已售</span></div>
            <div class="bar-row"><span class="bl">致敬·大乐队之夜</span><div class="bar"><i style="width:38%"></i></div><span class="bv">38%</span><span class="bt">已售</span></div>
            <div class="bar-row"><span class="bl">周末钢琴三重奏</span><div class="bar"><i style="width:57%"></i></div><span class="bv">57%</span><span class="bt">已售</span></div>
            <div class="bar-row"><span class="bl">周二自由即兴夜</span><div class="bar"><i style="width:25%"></i></div><span class="bv">25%</span><span class="bt">已售</span></div>
          </div>
        </div>
        <div class="card">
          <div class="card-hd"><h3>票版库存余量</h3></div>
          <div class="card-bd">
            <div class="bar-row"><span class="bl">剧院式 · A档</span><div class="bar"><i style="width:44%;background:linear-gradient(90deg,#d4a12a,#8a6a12)"></i></div><span class="bv">46张</span></div>
            <div class="bar-row"><span class="bl">剧院式 · B档</span><div class="bar"><i style="width:58%;background:linear-gradient(90deg,#5a3dbb,#4a2f86)"></i></div><span class="bv">60张</span></div>
            <div class="bar-row"><span class="bl">餐厅式 · A档</span><div class="bar"><i style="width:72%;background:linear-gradient(90deg,#2f6fd0,#1d4f9e)"></i></div><span class="bv">86张</span></div>
            <div class="bar-row"><span class="bl">餐厅式 · B档</span><div class="bar"><i style="width:31%;background:linear-gradient(90deg,#2e9e6b,#1f7a50)"></i></div><span class="bv">40张</span></div>
          </div>
        </div>
      </div>

      <div class="card" style="margin-top:14px">
        <div class="card-hd"><h3>最近订单</h3><button class="btn sm link" onclick="goNav('pn-orders')">查看全部 →</button></div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>订单号</th><th>用户</th><th>场次</th><th>金额</th><th>状态</th><th>时间</th></tr></thead>
            <tbody>
              <tr><td>JZ20260812001</td><td class="nm">王*</td><td>午后爵士·蓝调专场</td><td>¥380</td><td><span class="tag green">已支付</span></td><td>08-12 14:02</td></tr>
              <tr><td>JZ20260812002</td><td class="nm">李**</td><td>午夜摇摆·复古爵士夜</td><td>¥960</td><td><span class="tag blue">已核销</span></td><td>08-12 13:47</td></tr>
              <tr><td>JZ20260812003</td><td class="nm">张*</td><td>致敬·大乐队之夜</td><td>¥580</td><td><span class="tag gold">待支付</span></td><td>08-12 12:30</td></tr>
              <tr><td>JZ20260812004</td><td class="nm">陈*</td><td>午后爵士·蓝调专场</td><td>¥180</td><td><span class="tag red">已退票</span></td><td>08-12 11:12</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ============ 演出管理 ============ -->
    <div class="pn" id="pn-shows">
      <div class="card">
        <div class="filters">
          <div class="search"><input type="text" placeholder="搜索演出名称 / 简介"></div>
          <div class="field"><label>所属门店</label><select><option>全部门店</option><option>上海·爵士馆</option></select></div>
          <div class="mrow" style="margin-left:auto"><button class="btn pri" onclick="openModal('新建演出')">＋ 新建演出</button></div>
        </div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>演出名称</th><th>海报</th><th>场次数</th><th>票价区间</th><th>售出 / 库存</th><th>状态</th><th style="width:90px">操作</th></tr></thead>
            <tbody>
              <tr>
                <td class="nm">午后爵士 · 蓝调专场</td>
                <td><span class="tag gray">有图</span></td>
                <td>3 场</td>
                <td>¥180 - ¥380</td>
                <td>214 / 400</td>
                <td><span class="tag green">售票中</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">午夜摇摆 · 复古爵士夜</td>
                <td><span class="tag gray">有图</span></td>
                <td>2 场</td>
                <td>¥380 - ¥480</td>
                <td>459 / 560</td>
                <td><span class="tag gold">早鸟中</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">致敬·大乐队之夜</td>
                <td><span class="tag gray">有图</span></td>
                <td>1 场</td>
                <td>¥480 - ¥580</td>
                <td>76 / 200</td>
                <td><span class="tag blue">未开售</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">周末钢琴三重奏</td>
                <td><span class="tag red">缺图</span></td>
                <td>2 场</td>
                <td>¥280 - ¥380</td>
                <td>114 / 200</td>
                <td><span class="tag green">售票中</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pager"><span class="pg">‹</span><span class="pg active">1</span><span class="pg">2</span><span class="pg">›</span></div>
      </div>
    </div>

    <!-- ============ 场次管理 ============ -->
    <div class="pn" id="pn-sessions">
      <div class="card">
        <div class="filters">
          <div class="field"><label>所属演出</label><select><option>全部门店</option><option>午后爵士 · 蓝调专场</option><option>午夜摇摆 · 复古爵士夜</option></select></div>
          <div class="field"><label>票版</label><select><option>全部</option><option>剧院式</option><option>餐厅式</option></select></div>
          <div class="field"><label>状态</label><select><option>全部</option><option>未开售</option><option>售票中</option><option>售罄</option><option>已结束</option><option>已取消</option></select></div>
          <div style="margin-left:auto"><button class="btn pri" onclick="openModal('新建场次')">＋ 新建场次</button></div>
        </div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>演出</th><th>场次时间</th><th>票版</th><th>座位数</th><th>已售</th><th>状态</th><th style="width:90px">操作</th></tr></thead>
            <tbody>
              <tr>
                <td class="nm">午后爵士 · 蓝调专场</td>
                <td>08月20日 20:00</td>
                <td><span class="tag purple">剧院式</span></td>
                <td>100</td>
                <td>64 / 100</td>
                <td><span class="tag green">售票中</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">取消</button></div></td>
              </tr>
              <tr>
                <td class="nm">午后爵士 · 蓝调专场</td>
                <td>08月21日 20:00</td>
                <td><span class="tag gold">餐厅式</span></td>
                <td>280</td>
                <td>150 / 280</td>
                <td><span class="tag green">售票中</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">取消</button></div></td>
              </tr>
              <tr>
                <td class="nm">午夜摇摆 · 复古爵士夜</td>
                <td>08月22日 21:30</td>
                <td><span class="tag purple">剧院式</span></td>
                <td>100</td>
                <td>100 / 100</td>
                <td><span class="tag red">售罄</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">取消</button></div></td>
              </tr>
              <tr>
                <td class="nm">致敬·大乐队之夜</td>
                <td>08月29日 20:00</td>
                <td><span class="tag purple">剧院式</span></td>
                <td>200</td>
                <td>0 / 200</td>
                <td><span class="tag blue">未开售</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">取消</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pager"><span class="pg">‹</span><span class="pg active">1</span><span class="pg">2</span><span class="pg">›</span></div>
      </div>
    </div>

    <!-- ============ 票档管理 ============ -->
    <div class="pn" id="pn-tiers">
      <div class="card">
        <div class="filters">
          <div class="field"><label>所属场次</label><select><option>08月20日 20:00 · 午后爵士</option><option>08月22日 21:30 · 午夜摇摆</option></select></div>
          <div class="field"><label>状态</label><select><option>全部</option><option>上架</option><option>下架</option><option>售罄</option></select></div>
          <div style="margin-left:auto"><button class="btn pri" onclick="openModal('新建票档')">＋ 新建票档</button></div>
        </div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>票档</th><th>类型</th><th>价格</th><th>库存</th><th>已售</th><th>早鸟</th><th>状态</th><th style="width:90px">操作</th></tr></thead>
            <tbody>
              <tr>
                <td class="nm">早鸟票</td>
                <td><span class="tag gold">早鸟</span></td>
                <td>¥180</td>
                <td>30</td>
                <td>20 / 30</td>
                <td>开演前7天截止</td>
                <td><span class="tag green">上架</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">A档</td>
                <td><span class="tag gray">正价</span></td>
                <td>¥380</td>
                <td>46</td>
                <td>56 / 70</td>
                <td>—</td>
                <td><span class="tag green">上架</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">B档</td>
                <td><span class="tag gray">正价</span></td>
                <td>¥280</td>
                <td>60</td>
                <td>40 / 100</td>
                <td>—</td>
                <td><span class="tag green">上架</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
              <tr>
                <td class="nm">C档</td>
                <td><span class="tag gray">正价</span></td>
                <td>¥180</td>
                <td>0</td>
                <td>100 / 100</td>
                <td>—</td>
                <td><span class="tag red">售罄</span></td>
                <td><div class="tbl-actions"><button class="btn sm">编辑</button><button class="btn sm risk">下架</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ============ 订单管理 ============ -->
    <div class="pn" id="pn-orders">
      <div class="card">
        <div class="filters">
          <input type="text" placeholder="订单号 / 用户" class="search">
          <div class="field"><label>场次</label><select><option>全部场次</option><option>午后爵士 · 蓝调专场</option></select></div>
          <div class="field"><label>票档</label><select><option>全部票档</option><option>早鸟票</option><option>A档</option><option>B档</option></select></div>
          <div class="field"><label>状态</label><select><option>全部</option><option>待支付</option><option>已支付</option><option>已核销</option><option>已退票</option><option>已改期</option></select></div>
          <div class="field"><label>时间</label><input type="date"></div>
        </div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>订单号</th><th>用户</th><th>场次</th><th>票档 / 数量</th><th>金额</th><th>支付时间</th><th>核销</th><th>状态</th><th style="width:110px">操作</th></tr></thead>
            <tbody>
              <tr>
                <td class="nm">JZ20260812001</td>
                <td>王*</td>
                <td>午后爵士·蓝调专场 08-20</td>
                <td>A档 × 1</td>
                <td>¥380</td>
                <td>08-12 14:02</td>
                <td><span class="tag blue">未核销</span></td>
                <td><span class="tag green">已支付</span></td>
                <td><div class="tbl-actions"><button class="btn sm" onclick="showToast('已发起原路退款')">退票</button><button class="btn sm" onclick="showToast('改期申请已生成')">改期</button></div></td>
              </tr>
              <tr>
                <td class="nm">JZ20260812002</td>
                <td>李**</td>
                <td>午夜摇摆·复古爵士夜 08-22</td>
                <td>A档 × 2</td>
                <td>¥960</td>
                <td>08-12 13:47</td>
                <td><span class="tag green">已核销</span></td>
                <td><span class="tag blue">已核销</span></td>
                <td><div class="tbl-actions"><button class="btn sm" onclick="showToast('已核销订单不可退票')">退票</button><button class="btn sm" onclick="showToast('已核销订单不可改期')">改期</button></div></td>
              </tr>
              <tr>
                <td class="nm">JZ20260812003</td>
                <td>张*</td>
                <td>致敬·大乐队之夜 08-29</td>
                <td>A档 × 1</td>
                <td>¥580</td>
                <td>—</td>
                <td><span class="tag gray">未支付</span></td>
                <td><span class="tag gold">待支付</span></td>
                <td><div class="tbl-actions"><button class="btn sm" onclick="showToast('已关闭未支付订单')">关闭</button></div></td>
              </tr>
              <tr>
                <td class="nm">JZ20260812004</td>
                <td>陈*</td>
                <td>午后爵士·蓝调专场 08-20</td>
                <td>早鸟票 × 1</td>
                <td>¥180</td>
                <td>08-11 20:10</td>
                <td><span class="tag gray">—</span></td>
                <td><span class="tag red">已退票</span></td>
                <td><div class="tbl-actions"><button class="btn sm" onclick="showToast('退款已完成：¥180')">查看</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pager"><span class="pg">‹</span><span class="pg active">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg">›</span></div>
      </div>
    </div>

    <!-- ============ 退改处理 ============ -->
    <div class="pn" id="pn-refund">
      <div class="card">
        <div class="filters">
          <div class="field"><label>类型</label><select><option>全部</option><option>退票申请</option><option>改期申请</option></select></div>
          <div class="field"><label>状态</label><select><option>全部</option><option>待审核</option><option>已通过</option><option>已拒绝</option></select></div>
        </div>
        <div class="card-bd" style="padding:0">
          <table>
            <thead><tr><th>申请号</th><th>类型</th><th>用户</th><th>场次</th><th>票档</th><th>金额</th><th>申请理由</th><th>状态</th><th style="width:140px">操作</th></tr></thead>
            <tbody>
              <tr>
                <td class="nm">RE20260812001</td>
                <td><span class="tag red">退票</span></td>
                <td>陈*</td>
                <td>午后爵士·蓝调专场</td>
                <td>早鸟票 × 1</td>
                <td>¥180</td>
                <td>临时有事</td>
                <td><span class="tag gold">待审核</span></td>
                <td><button class="btn sm pri" onclick="agree(this)" data-t="同意退款 ¥180">同意</button><button class="btn sm risk" onclick="showToast('已拒绝并通知用户')">拒绝</button></td>
              </tr>
              <tr>
                <td class="nm">RE20260812002</td>
                <td><span class="tag blue">改期</span></td>
                <td>王*</td>
                <td>午后爵士·蓝调专场</td>
                <td>A档 × 1</td>
                <td>—</td>
                <td>出差，改到 08-21</td>
                <td><span class="tag gold">待审核</span></td>
                <td><button class="btn sm pri" onclick="agree(this)" data-t="改期到 08-21 20:00">同意</button><button class="btn sm risk" onclick="showToast('已拒绝并通知用户')">拒绝</button></td>
              </tr>
              <tr>
                <td class="nm">RE20260812003</td>
                <td><span class="tag red">退票</span></td>
                <td>李**</td>
                <td>午夜摇摆·复古爵士夜</td>
                <td>B档 × 2</td>
                <td>¥760</td>
                <td>重复购买</td>
                <td><span class="tag green">已通过</span></td>
                <td><button class="btn sm" onclick="showToast('退款已完成')">查看详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ============ 账号权限 ============ -->
    <div class="pn" id="pn-users">
      <div class="grid2">
        <div class="card">
          <div class="card-hd"><h3>后台账号</h3><button class="btn pri sm" onclick="openModal('新增账号')">＋ 新增账号</button></div>
          <div class="card-bd" style="padding:0">
            <table>
              <thead><tr><th>账号</th><th>角色</th><th>状态</th><th style="width:90px">操作</th></tr></thead>
              <tbody>
                <tr><td class="nm">admin</td><td><span class="tag purple">管理员</span></td><td><span class="tag green">启用</span></td><td><div class="tbl-actions"><button class="btn sm">编辑</button></div></td></tr>
                <tr><td class="nm">ticket01</td><td><span class="tag blue">售票员</span></td><td><span class="tag green">启用</span></td><td><div class="tbl-actions"><button class="btn sm">编辑</button></div></td></tr>
                <tr><td class="nm">ticket02</td><td><span class="tag blue">售票员</span></td><td><span class="tag gray">停用</span></td><td><div class="tbl-actions"><button class="btn sm">编辑</button></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="card">
          <div class="card-hd"><h3>角色权限</h3></div>
          <div class="card-bd">
            <div style="font-size:12.5px; line-height:2.2; color:#444">
              <div><span class="tag purple" style="margin-right:8px">管理员</span>全部操作，含退改审核、导出、账号管理</div>
              <div><span class="tag blue" style="margin-right:8px">售票员</span>订单查询、核销、退改查看；不可导出、不可改配置</div>
              <div style="margin-top:10px; color:var(--muted); font-size:11.5px">权限与核销设备账号共用一套角色体系</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- ================= 弹窗 ================= -->
<div class="mask" id="modal-mask">
  <div class="modal">
    <h3 id="modal-title">新建</h3>
    <div id="modal-body"></div>
    <div class="modal-foot">
      <button class="btn" onclick="closeModal()">取消</button>
      <button class="btn pri" onclick="saveModal()">保存</button>
    </div>
  </div>
</div>

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

<script>
  // 页面导航
  var titles = {
    'pn-dashboard':['数据看板','演出售卖 · 库存 · 核销概览'],
    'pn-shows':['演出管理','创建 / 编辑演出，含海报与简介'],
    'pn-sessions':['场次管理','场次增删改 · 票版（剧院 / 餐厅）· 状态'],
    'pn-tiers':['票档管理','名称 · 价格 · 库存 · 上下架 · 早鸟时间窗'],
    'pn-orders':['订单管理','订单查询与退改处理'],
    'pn-refund':['退改处理','退票退款 / 改期换场次审核'],
    'pn-users':['账号权限','管理员 / 售票员角色管理']
  };
  function goNav(page, el) {
    document.querySelectorAll('.pn').forEach(function(p){ p.classList.toggle('active', p.id===page); });
    if (el) {
      document.querySelectorAll('.nav a').forEach(function(a){ a.classList.toggle('active', a===el); });
    } else {
      document.querySelectorAll('.nav a').forEach(function(a){ a.classList.toggle('active', a.dataset.page===page); });
    }
    var t = titles[page] || [];
    document.getElementById('top-title').textContent = t[0] || '';
    document.getElementById('top-sub').textContent = t[1] || '';
  }
  goNav('pn-dashboard');

  // Toast
  var tm;
  function showToast(msg) {
    var t = document.getElementById('toast');
    t.textContent = msg; t.classList.add('show');
    clearTimeout(tm); tm = setTimeout(function(){ t.classList.remove('show'); }, 1800);
  }
  function agree(el) {
    el.parentNode.innerHTML = '<span class="tag green" style="margin-left:6px">已通过 · ' + el.dataset.t.split(' ')[1] + '</span>';
    showToast(el.dataset.t);
  }

  // 弹窗
  var modalModes = {};
  function openModal(title) {
    document.getElementById('modal-title').textContent = title;
    document.getElementById('modal-body').innerHTML =
      '<div class="form-row"><div class="field full"><label>名称</label><input type="text" placeholder="请输入名称"></div></div>' +
      '<div class="form-row"><div class="field"><label>价格（元）</label><input type="number" placeholder="0"></div>' +
      '<div class="field"><label>库存（张）</label><input type="number" placeholder="0"></div></div>' +
      '<div class="form-row"><div class="field"><label>开售时间</label><input type="date"></div>' +
      '<div class="field"><label>结束时间</label><input type="date"></div></div>' +
      '<div class="form-row"><div class="field"><label>备注</label><input type="text" placeholder="选填"></div></div>';
    document.getElementById('modal-mask').classList.add('show');
  }
  function closeModal() { document.getElementById('modal-mask').classList.remove('show'); }
  function saveModal() { closeModal(); showToast('已保存'); }
</script>
</body>
</html>