编辑页面

HTML内容
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>汽车后市场 SaaS 管理系统交互原型</title>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <style>
    :root {
      --bg: #f5f7fb;
      --panel: #ffffff;
      --ink: #1f2937;
      --muted: #667085;
      --line: #dfe4ec;
      --brand: #176b87;
      --brand-strong: #0f5268;
      --brand-soft: #e4f4f7;
      --good: #147d64;
      --warn: #b7791f;
      --danger: #b42318;
      --violet: #7357c9;
      --shadow: 0 10px 24px rgba(22, 34, 51, 0.08);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      font-size: 14px;
    }

    button, input, select, textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
    }

    .sidebar {
      background: #152936;
      color: #dce9ef;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #ecfdf3;
      color: #176b87;
    }

    .brand strong {
      display: block;
      font-size: 15px;
      color: #ffffff;
    }

    .brand span {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      color: #a8bdc8;
    }

    .nav {
      display: grid;
      gap: 4px;
    }

    .nav button {
      width: 100%;
      min-height: 42px;
      color: #c7d8df;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      text-align: left;
    }

    .nav button:hover,
    .nav button.active {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
    }

    .nav .badge {
      margin-left: auto;
      min-width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #f79009;
      color: #ffffff;
      font-size: 12px;
    }

    .side-foot {
      margin-top: auto;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: #bfd1d9;
      font-size: 12px;
      line-height: 1.7;
    }

    .main {
      min-width: 0;
      display: grid;
      grid-template-rows: 64px minmax(0, 1fr);
    }

    .topbar {
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 24px;
    }

    .crumb {
      min-width: 0;
    }

    .crumb b {
      display: block;
      font-size: 17px;
    }

    .crumb span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
    }

    .quick-vin {
      margin-left: auto;
      width: min(440px, 42vw);
      display: grid;
      grid-template-columns: 1fr auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
    }

    .quick-vin input {
      min-width: 0;
      height: 38px;
      border: 0;
      padding: 0 12px;
      outline: 0;
    }

    .quick-vin button {
      width: 42px;
      background: var(--brand);
      color: #ffffff;
      display: grid;
      place-items: center;
    }

    .operator {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ffe8cc;
      color: #8a4b05;
      font-weight: 700;
    }

    .content {
      min-width: 0;
      padding: 20px 24px 28px;
      overflow: auto;
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .toolbar h1 {
      margin: 0;
      font-size: 21px;
    }

    .toolbar p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--ink);
      white-space: nowrap;
    }

    .btn.icon {
      width: 36px;
      padding: 0;
    }

    .btn.primary {
      background: var(--brand);
      border-color: var(--brand);
      color: #ffffff;
    }

    .btn.primary:hover {
      background: var(--brand-strong);
    }

    .btn.danger {
      color: var(--danger);
      border-color: #ffd6d1;
      background: #fff7f5;
    }

    .btn.ghost {
      border-color: transparent;
      background: transparent;
    }

    .filters {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 14px;
      box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
    }

    .field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .field label {
      color: #475467;
      font-size: 12px;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-width: 0;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 10px;
      outline: 0;
      background: #ffffff;
      color: var(--ink);
    }

    .field textarea {
      min-height: 82px;
      padding: 9px 10px;
      resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: #69a8b8;
      box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
    }

    .table-wrap {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 12px 14px;
      text-align: left;
      border-bottom: 1px solid #edf0f5;
      vertical-align: middle;
    }

    th {
      background: #f8fafc;
      color: #475467;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    td {
      color: #344054;
    }

    tr:hover td {
      background: #fbfcfe;
    }

    .mini-actions {
      display: flex;
      gap: 6px;
    }

    .status {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .status.good { color: var(--good); background: #e6f7ef; }
    .status.warn { color: var(--warn); background: #fff4d6; }
    .status.info { color: var(--brand); background: var(--brand-soft); }
    .status.danger { color: var(--danger); background: #ffe9e6; }
    .status.violet { color: var(--violet); background: #f1edff; }

    .thumb {
      width: 64px;
      height: 48px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: #eef2f6;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

    .metric {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .metric .iconbox {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--brand);
      background: var(--brand-soft);
      flex: 0 0 auto;
    }

    .metric b {
      display: block;
      font-size: 22px;
    }

    .metric span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
      gap: 14px;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
    }

    .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .panel-title h2 {
      margin: 0;
      font-size: 16px;
    }

    .bar-list {
      display: grid;
      gap: 12px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr) 44px;
      gap: 10px;
      align-items: center;
    }

    .bar {
      height: 10px;
      border-radius: 999px;
      background: #ecf0f5;
      overflow: hidden;
    }

    .bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--brand);
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .timeline-item .dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--brand-soft);
      color: var(--brand);
      display: grid;
      place-items: center;
    }

    .timeline-item b {
      display: block;
      font-size: 13px;
    }

    .timeline-item span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .vehicle-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
    }

    .vehicle-visual {
      min-height: 128px;
      display: grid;
      grid-template-columns: 1fr 138px;
      gap: 12px;
      padding: 14px;
      background: linear-gradient(135deg, #e8f6f3 0%, #f4f8fb 62%, #fff4df 100%);
    }

    .vehicle-visual h3 {
      margin: 0;
      font-size: 18px;
    }

    .vehicle-visual p {
      margin: 8px 0 0;
      color: #475467;
      line-height: 1.6;
      font-size: 13px;
    }

    .car-img {
      width: 138px;
      height: 92px;
      align-self: center;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 12px 26px rgba(42, 60, 74, 0.12);
    }

    .vehicle-meta {
      padding: 12px 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
      border-top: 1px solid var(--line);
    }

    .kv span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }

    .kv b {
      display: block;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .drawer-mask {
      position: fixed;
      inset: 0;
      z-index: 40;
      background: rgba(15, 23, 42, 0.38);
      display: none;
    }

    .drawer-mask.open {
      display: block;
    }

    .drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: min(720px, 100vw);
      height: 100%;
      background: #ffffff;
      box-shadow: -20px 0 34px rgba(15, 23, 42, 0.16);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .drawer-head,
    .drawer-foot {
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .drawer-foot {
      border-top: 1px solid var(--line);
      border-bottom: 0;
      justify-content: flex-end;
    }

    .drawer-head h2 {
      margin: 0;
      font-size: 18px;
    }

    .drawer-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .drawer-body {
      overflow: auto;
      padding: 18px;
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .form-grid .wide {
      grid-column: 1 / -1;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 10px 12px;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 60;
      background: #101828;
      color: #ffffff;
      border-radius: 8px;
      min-height: 42px;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      box-shadow: 0 18px 40px rgba(16, 24, 40, 0.24);
    }

    .toast.show {
      display: flex;
    }

    .dialog-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    .dialog-overlay.open {
      display: flex;
    }
    .dialog-box {
      background: #fff;
      border-radius: 12px;
      width: 420px;
      max-width: 90vw;
      padding: 24px;
      box-shadow: 0 8px 32px rgba(0,0,0,.15);
    }
    .dialog-box h3 {
      margin: 0 0 8px;
      font-size: 16px;
    }
    .dialog-box p {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 13px;
    }
    .dialog-box textarea {
      width: 100%;
      min-height: 100px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px;
      font-size: 14px;
      resize: vertical;
      box-sizing: border-box;
    }
    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }

    .tabs {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
    }

    .tabs button {
      min-height: 34px;
      padding: 0 12px;
      border-right: 1px solid var(--line);
      background: #ffffff;
      color: #475467;
    }

    .tabs button:last-child {
      border-right: 0;
    }

    .tabs button.active {
      background: var(--brand);
      color: #ffffff;
    }

    .setting-list {
      display: grid;
      gap: 10px;
    }

    .setting-row {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: #ffffff;
    }

    .switch {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      padding: 2px;
      background: #cbd5e1;
      display: flex;
      justify-content: flex-start;
    }

    .switch.on {
      justify-content: flex-end;
      background: var(--brand);
    }

    .switch i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      display: block;
    }

    .empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
    }

    @media (max-width: 1120px) {
      .filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .cards { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
      .grid-2 { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 10px;
      }
      .brand, .side-foot { display: none; }
      .nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
      }
      .nav button {
        min-width: max-content;
      }
      .main { grid-template-rows: auto minmax(0, 1fr); }
      .topbar {
        padding: 12px;
        flex-wrap: wrap;
      }
      .quick-vin {
        order: 3;
        width: 100%;
      }
      .operator { margin-left: auto; }
      .content { padding: 14px; }
      .filters { grid-template-columns: 1fr; }
      .cards { grid-template-columns: 1fr; }
      .table-wrap { overflow-x: auto; }
      table { min-width: 860px; }
      .vehicle-visual {
        grid-template-columns: 1fr;
      }
      .vehicle-meta, .form-grid {
        grid-template-columns: 1fr;
      }
      .drawer {
        width: 100vw;
      }
    }
  </style>
</head>
<body>
  <div class="app">
    <aside class="sidebar">
      <div class="brand">
        <div class="brand-mark"><i data-lucide="wrench"></i></div>
        <div>
          <strong>车后云管家</strong>
          <span>Aftermarket SaaS</span>
        </div>
      </div>
      <nav class="nav" id="nav">
        <button class="active" data-view="dashboard"><i data-lucide="layout-dashboard"></i>数据统计</button>
        <button data-view="parts"><i data-lucide="package-search"></i>配件管理</button>
        <button data-view="workorders"><i data-lucide="clipboard-list"></i>配件订单管理<span class="badge">6</span></button>
        <button data-view="claims"><i data-lucide="file-warning"></i>索赔订单管理<span class="badge">3</span></button>
        <button data-view="manuals"><i data-lucide="book-open-check"></i>维修保养手册</button>
      </nav>
      <div class="side-foot">
        今日核心流程：输入车架号 VIN 后，自动带出客户、车辆、历史配件订单与索赔记录。
      </div>
    </aside>

    <main class="main">
      <header class="topbar">
        <div class="crumb">
          <b id="pageTitle">数据统计</b>
          <span id="pageSub">配件订单与索赔订单统计分析</span>
        </div>
        <div class="quick-vin">
          <input id="globalVin" value="LGBH52E05NY123456" placeholder="输入车架号快速识别车辆信息">
          <button title="查询车辆信息" id="globalVinBtn"><i data-lucide="search"></i></button>
        </div>
        <div class="operator">
          <div class="avatar">赵</div>
          <span>服务顾问</span>
        </div>
      </header>

      <section class="content">
        <div class="view active" id="dashboard">
          <div class="toolbar">
            <div>
              <h1>订单数据统计</h1>
              <p>聚焦配件订单与索赔订单的数量、金额、状态分布和处理效率。</p>
            </div>
            <div class="actions">
              <div class="tabs">
                <button class="active" data-toast="已切换到今日视图">今日</button>
                <button data-toast="已切换到本周视图">本周</button>
                <button data-toast="已切换到本月视图">本月</button>
              </div>
              <button class="btn" data-export="订单统计报表"><i data-lucide="download"></i>导出</button>
            </div>
          </div>
          <div class="cards">
            <div class="metric"><div class="iconbox"><i data-lucide="clipboard-check"></i></div><div><b>56</b><span>配件订单数</span></div></div>
            <div class="metric"><div class="iconbox"><i data-lucide="badge-dollar-sign"></i></div><div><b>¥128,960</b><span>配件订单金额</span></div></div>
            <div class="metric"><div class="iconbox"><i data-lucide="file-warning"></i></div><div><b>18</b><span>索赔订单数</span></div></div>
            <div class="metric"><div class="iconbox"><i data-lucide="shield-check"></i></div><div><b>82.6%</b><span>索赔通过率</span></div></div>
          </div>
          <div class="grid-2">
            <div class="panel">
              <div class="panel-title"><h2>订单状态分析</h2><span class="status info">实时</span></div>
              <div class="bar-list">
                <div class="bar-row"><span>配件待确认</span><div class="bar"><i style="width:22%"></i></div><b>22%</b></div>
                <div class="bar-row"><span>配件处理中</span><div class="bar"><i style="width:36%;background:#147d64"></i></div><b>36%</b></div>
                <div class="bar-row"><span>配件已完成</span><div class="bar"><i style="width:42%;background:#7357c9"></i></div><b>42%</b></div>
                <div class="bar-row"><span>索赔待审核</span><div class="bar"><i style="width:35%;background:#b7791f"></i></div><b>35%</b></div>
                <div class="bar-row"><span>索赔已通过</span><div class="bar"><i style="width:38%;background:#b42318"></i></div><b>38%</b></div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title"><h2>分析结论</h2><button class="btn icon" title="刷新" data-toast="分析已刷新"><i data-lucide="refresh-cw"></i></button></div>
              <div class="timeline">
                <div class="timeline-item"><div class="dot"><i data-lucide="trending-up"></i></div><div><b>配件订单金额环比提升 12.4%</b><span>高单价订单主要来自变速箱阀体总成和空调压缩机。</span></div></div>
                <div class="timeline-item"><div class="dot"><i data-lucide="file-clock"></i></div><div><b>索赔待审核占比 35%</b><span>建议优先处理金额较高、凭证完整的索赔单，缩短回款周期。</span></div></div>
                <div class="timeline-item"><div class="dot"><i data-lucide="badge-dollar-sign"></i></div><div><b>索赔金额合计 ¥42,380</b><span>当前已通过金额约 ¥28,960，驳回金额需复盘凭证完整性。</span></div></div>
              </div>
            </div>
          </div>
        </div>

        <div class="view" id="parts">
          <div class="toolbar">
            <div>
              <h1>配件管理</h1>
              <p>支持分类、型号、外观、价格、配件类型、库存、图片、所属供货商多条件查询。</p>
            </div>
            <div class="actions">
              <button class="btn primary" data-open-drawer="part"><i data-lucide="plus"></i>新增配件</button>
              <button class="btn" data-export="配件库存"><i data-lucide="download"></i>导出</button>
            </div>
          </div>
          <div class="filters" data-filter-scope="parts">
            <div class="field"><label>分类</label><select data-filter="category"><option value="">全部</option><option>制动系统</option><option>发动机</option><option>电气系统</option><option>车身外观</option></select></div>
            <div class="field"><label>型号</label><input data-filter="model" placeholder="如 BP-4472"></div>
            <div class="field"><label>配件类型</label><select data-filter="type"><option value="">全部</option><option>原厂件</option><option>品牌件</option><option>再制造件</option></select></div>
            <div class="field"><label>所属供货商</label><input data-filter="supplier" placeholder="供货商名称"></div>
            <button class="btn primary" data-search="parts"><i data-lucide="search"></i>查询</button>
          </div>
          <div class="table-wrap"><table>
            <thead><tr><th>图片</th><th>分类</th><th>型号</th><th>外观</th><th>价格</th><th>配件类型</th><th>库存</th><th>所属供货商</th><th>操作</th></tr></thead>
            <tbody id="partRows"></tbody>
          </table></div>
        </div>

        <div class="view" id="workorders">
          <div class="toolbar">
            <div>
              <h1>配件订单管理</h1>
              <p>覆盖订单号、下单人、下单时间、订单状态、车辆信息与配件项目。</p>
            </div>
            <div class="actions">
              <button class="btn primary" data-open-drawer="workorder"><i data-lucide="plus"></i>新增配件订单</button>
              <button class="btn" data-export="配件订单列表"><i data-lucide="download"></i>导出</button>
            </div>
          </div>
          <div class="filters" data-filter-scope="workorders">
            <div class="field"><label>订单号</label><input data-filter="orderNo" placeholder="如 WO20260722001"></div>
            <div class="field"><label>车架号</label><input data-filter="vin" placeholder="输入 VIN"></div>
            <div class="field"><label>订单状态</label><select data-filter="status"><option value="">全部</option><option>待确认</option><option>配货中</option><option>已完成</option></select></div>
            <div class="field"><label>下单人</label><input data-filter="creator" placeholder="服务顾问/客户"></div>
            <button class="btn primary" data-search="workorders"><i data-lucide="search"></i>查询</button>
          </div>
          <div class="table-wrap"><table>
            <thead><tr><th>订单号</th><th>下单人</th><th>下单时间</th><th>订单状态</th><th>商品名称</th><th>订单金额</th><th>操作</th></tr></thead>
            <tbody id="workorderRows"></tbody>
          </table></div>
        </div>

        <div class="view" id="claims">
          <div class="toolbar">
            <div>
              <h1>索赔订单管理</h1>
              <p>集中管理索赔订单、客户车辆信息、索赔商品信息和业务设置。</p>
            </div>
            <div class="actions">
              <button class="btn primary" data-open-drawer="claim"><i data-lucide="plus"></i>新增索赔</button>
              <button class="btn" data-import="索赔订单"><i data-lucide="upload"></i>导入</button>
              <button class="btn" data-export="索赔订单"><i data-lucide="download"></i>导出</button>
              <button class="btn danger" data-batch-delete><i data-lucide="trash-2"></i>删除</button>
              <button class="btn" data-open-drawer="claimSettings"><i data-lucide="settings"></i>索赔设置</button>
            </div>
          </div>
          <div class="filters" data-filter-scope="claims">
            <div class="field"><label>客户/手机号</label><input data-filter="customer" placeholder="客户姓名或手机号"></div>
            <div class="field"><label>车架号</label><input data-filter="vin" placeholder="输入 VIN"></div>
            <div class="field"><label>供货商</label><input data-filter="supplier" placeholder="供货商名称"></div>
            <div class="field"><label>索赔状态</label><select data-filter="status"><option value="">全部</option><option>待提交</option><option>待审核</option><option>已通过</option><option>已驳回</option></select></div>
            <button class="btn primary" data-search="claims"><i data-lucide="search"></i>查询</button>
          </div>
          <div class="table-wrap"><table>
            <thead><tr><th><input type="checkbox" aria-label="全选"></th><th>索赔单号</th><th>客户信息</th><th>车辆信息</th><th>备用件名称</th><th>操作工时</th><th>索赔金额</th><th>状态</th><th>操作</th></tr></thead>
            <tbody id="claimRows"></tbody>
          </table></div>
        </div>

        <div class="view" id="manuals">
          <div class="toolbar">
            <div>
              <h1>维修保养手册</h1>
              <p>覆盖故障诊断、拆装流程、保养周期、适用车型、标准工时和材料清单。</p>
            </div>
            <div class="actions">
              <div class="tabs" id="manualTabs">
                <button class="active" data-manual-tab="all">全部</button>
                <button data-manual-tab="repair">维修手册</button>
                <button data-manual-tab="maintenance">保养手册</button>
              </div>
              <button class="btn primary" data-open-drawer="repairManual"><i data-lucide="plus"></i>新增手册</button>
              <button class="btn" data-import="维修保养手册"><i data-lucide="upload"></i>导入</button>
              <button class="btn" data-export="维修保养手册"><i data-lucide="download"></i>导出</button>
            </div>
          </div>
          <div class="filters" data-filter-scope="manuals">
            <div class="field"><label>手册名称</label><input data-filter="name" placeholder="输入关键字"></div>
            <div class="field"><label>手册类型</label><select data-filter="type"><option value="">全部</option><option>维修手册</option><option>保养手册</option></select></div>
            <div class="field"><label>适用车型</label><input data-filter="model" placeholder="品牌 / 车型"></div>
            <div class="field"><label>状态</label><select data-filter="status"><option value="">全部</option><option>已发布</option><option>待审核</option><option>草稿</option></select></div>
            <button class="btn primary" data-search="manuals"><i data-lucide="search"></i>查询</button>
          </div>
          <div class="table-wrap"><table>
            <thead><tr><th>手册编号</th><th>手册名称</th><th>手册类型</th><th>适用车型</th><th>周期/工时</th><th>版本</th><th>状态</th><th>操作</th></tr></thead>
            <tbody id="manualRows"></tbody>
          </table></div>
        </div>

      </section>
    </main>
  </div>

  <div class="drawer-mask" id="drawerMask" role="dialog" aria-modal="true">
    <aside class="drawer">
      <div class="drawer-head">
        <div>
          <h2 id="drawerTitle">编辑</h2>
          <p id="drawerSub">维护业务信息</p>
        </div>
        <button class="btn icon" title="关闭" data-close-drawer><i data-lucide="x"></i></button>
      </div>
      <div class="drawer-body" id="drawerBody"></div>
      <div class="drawer-foot">
        <button class="btn" data-close-drawer>取消</button>
        <button class="btn primary" id="saveDrawer"><i data-lucide="check"></i>保存</button>
      </div>
    </aside>
  </div>

  <div class="dialog-overlay" id="offsetDialog" role="dialog" aria-modal="true">
    <div class="dialog-box">
      <h3>货款抵扣</h3>
      <p id="offsetDialogClaim">索赔单号：—</p>
      <label>备注</label>
      <textarea id="offsetRemark" placeholder="请输入抵扣备注信息">