TakeoutSaaS.Prototypes/Tenant-Admin-UI-Prototype/pages/cpl-inspect.html

<!-- 安全巡检页 -->
<style>
  .cli-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
  .cli-toolbar .g-select{height:34px;font-size:13px;}
  .cli-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
  .cli-stat{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);display:flex;align-items:center;gap:14px;transition:var(--g-transition);}
  .cli-stat:hover{box-shadow:var(--g-shadow-md);}
  .cli-stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
  .cli-stat-icon svg{width:22px;height:22px;}
  .cli-stat-icon.blue{background:var(--primary-light);color:var(--primary);}
  .cli-stat-icon.orange{background:#fff7e6;color:var(--g-warning);}
  .cli-stat-icon.green{background:#f6ffed;color:var(--g-success);}
  .cli-stat-num{font-size:24px;font-weight:700;color:var(--g-text);}
  .cli-stat-label{font-size:13px;color:var(--g-text-secondary);margin-top:2px;}
  .cli-mono{font-family:'Courier New',monospace;font-size:12px;color:var(--g-text-secondary);}
  .cli-issue-zero{color:var(--g-success);font-weight:600;}
  .cli-issue-bad{color:var(--g-danger);font-weight:600;}
</style>

<!-- 工具栏 -->
<div class="cli-toolbar">
  <select class="g-select">
    <option>全部门店</option>
    <option>朝阳店</option>
    <option>海淀店</option>
    <option>望京店</option>
  </select>
  <select class="g-select">
    <option>2026-02</option>
    <option>2026-01</option>
    <option>2025-12</option>
  </select>
  <button class="g-btn g-btn-primary" style="margin-left:auto;"><i data-lucide="plus" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>新建巡检</button>
</div>

<!-- 本月统计 -->
<div class="cli-stats">
  <div class="cli-stat">
    <div class="cli-stat-icon blue"><i data-lucide="clipboard-check"></i></div>
    <div><div class="cli-stat-num">8</div><div class="cli-stat-label">已完成巡检</div></div>
  </div>
  <div class="cli-stat">
    <div class="cli-stat-icon orange"><i data-lucide="alert-triangle"></i></div>
    <div><div class="cli-stat-num" style="color:var(--g-warning)">3</div><div class="cli-stat-label">发现问题</div></div>
  </div>
  <div class="cli-stat">
    <div class="cli-stat-icon green"><i data-lucide="check-circle"></i></div>
    <div><div class="cli-stat-num" style="color:var(--g-success)">2</div><div class="cli-stat-label">整改完成</div></div>
  </div>
</div>

<!-- 巡检记录表格 -->
<div class="g-card">
  <table class="g-table">
    <thead>
      <tr>
        <th>巡检编号</th>
        <th>门店</th>
        <th>巡检日期</th>
        <th>巡检人</th>
        <th>检查项数</th>
        <th>问题数</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="cli-mono">XJ20260213001</td>
        <td>朝阳店</td>
        <td>2026-02-13</td>
        <td>王建国</td>
        <td>25</td>
        <td><span class="cli-issue-zero">0</span></td>
        <td><span class="g-tag g-tag-green">合格</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
      <tr>
        <td class="cli-mono">XJ20260212002</td>
        <td>海淀店</td>
        <td>2026-02-12</td>
        <td>李明</td>
        <td>25</td>
        <td><span class="cli-issue-bad">2</span></td>
        <td><span class="g-tag g-tag-orange">待整改</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
      <tr>
        <td class="cli-mono">XJ20260210003</td>
        <td>望京店</td>
        <td>2026-02-10</td>
        <td>赵丽</td>
        <td>25</td>
        <td><span class="cli-issue-bad">1</span></td>
        <td><span class="g-tag g-tag-blue">已整改</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
      <tr>
        <td class="cli-mono">XJ20260208004</td>
        <td>朝阳店</td>
        <td>2026-02-08</td>
        <td>王建国</td>
        <td>25</td>
        <td><span class="cli-issue-zero">0</span></td>
        <td><span class="g-tag g-tag-green">合格</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
      <tr>
        <td class="cli-mono">XJ20260205005</td>
        <td>海淀店</td>
        <td>2026-02-05</td>
        <td>李明</td>
        <td>25</td>
        <td><span class="cli-issue-bad">1</span></td>
        <td><span class="g-tag g-tag-blue">已整改</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
      <tr>
        <td class="cli-mono">XJ20260203006</td>
        <td>望京店</td>
        <td>2026-02-03</td>
        <td>赵丽</td>
        <td>25</td>
        <td><span class="cli-issue-zero">0</span></td>
        <td><span class="g-tag g-tag-green">合格</span></td>
        <td><a class="g-action" href="javascript:;">查看报告</a></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 分页 -->
<div class="g-pagination" style="margin-top:16px;">
  <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
  <button class="g-page-btn active">1</button>
  <button class="g-page-btn">2</button>
  <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
</div>

<script>
if(typeof lucide!=='undefined'){lucide.createIcons();}
</script>