juzi/h5/admin.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>巨子测肤 · 后台查看</title>
<link rel="stylesheet" href="css/admin.css">
</head>
<body>
<header class="topbar">
  <div class="brand">巨子测肤<span>后台查看</span></div>
  <nav class="tabs">
    <button type="button" class="tab on" data-tab="records">记录列表</button>
    <button type="button" class="tab" data-tab="fails">失败与异常</button>
    <button type="button" class="tab" data-tab="stats">统计概览</button>
  </nav>
</header>

<main>
  <!-- ─── 记录列表(文档 4.1/4.2) ─── -->
  <section id="tab-records" class="panel on">
    <div class="filters">
      <label>创建时间（北京时间） <input type="date" id="f-from"> ~ <input type="date" id="f-to"></label>
      <label>检测状态
        <select id="f-status">
          <option value="">全部</option>
          <option>待检测</option><option>检测中</option><option>成功</option><option>失败</option>
        </select>
      </label>
      <label>失败原因
        <select id="f-failcode">
          <option value="">全部</option>
          <option>NO_FACE_FOUND</option>
          <option>INVALID_IMAGE_FACE</option>
          <option>INVALID_FACE_SIZE</option>
          <option>INVALID_IMAGE_SIZE</option>
          <option>IMAGE_FILE_TOO_LARGE</option>
          <option>IMAGE_ERROR_UNSUPPORTED_FORMAT</option>
          <option>AUTHENTICATION_ERROR</option>
          <option>AUTHORIZATION_ERROR</option>
          <option>CONCURRENCY_LIMIT_EXCEEDED</option>
          <option>INTERNAL_ERROR</option>
          <option>TIMEOUT</option>
          <option>NETWORK_ERROR</option>
        </select>
      </label>
      <label>实际年龄 <input type="number" id="f-agemin" min="1" max="120" placeholder="最小"> ~ <input type="number" id="f-agemax" min="1" max="120" placeholder="最大"></label>
      <label>产品组别
        <select id="f-group">
          <option value="">全部</option>
          <option>25+组</option><option>35+组</option><option>50+组</option>
        </select>
      </label>
      <label>维度
        <select id="f-dim">
          <option value="">不限</option>
          <option value="firm">紧塑力</option>
          <option value="vita">透亮感</option>
          <option value="stab">稳韧力</option>
        </select>
        <select id="f-dimlevel">
          <option value="">不限档位</option>
          <option value="预警">改善</option><option value="改善">良好</option><option value="良好">优秀</option>
        </select>
      </label>
      <label>记录ID <input type="text" id="f-q" placeholder="精确/前缀匹配"></label>
      <button type="button" class="btn primary" id="btn-search">查询</button>
      <button type="button" class="btn" id="btn-reset">重置</button>
    </div>
    <div class="table-wrap">
      <table id="tbl-records">
        <thead>
          <tr>
            <th>照片</th><th>记录ID</th><th>年龄/性别/地区/肤质</th><th>拍摄状态</th><th>上传状态</th>
            <th>检测状态</th><th title="紧塑力×4＋透亮感×3＋稳韧力×3，四舍五入取整数">综合得分</th><th>肌龄（原始 / 展示）</th><th>三维度评分 / 档位</th><th>推荐精华</th><th>耗时</th><th>创建时间</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="pager">
      <button type="button" class="btn" id="btn-prev">上一页</button>
      <span id="page-info">-</span>
      <button type="button" class="btn" id="btn-next">下一页</button>
    </div>
  </section>

  <!-- ─── 失败与异常(文档 4.4) ─── -->
  <section id="tab-fails" class="panel">
    <div id="fail-dist" class="fail-dist"></div>
    <div class="table-wrap">
      <table id="tbl-fails">
        <thead>
          <tr>
            <th>记录ID</th><th>失败环节</th><th>失败码</th><th>失败信息</th><th>年龄</th><th>拍摄状态</th><th>创建时间</th><th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </section>

  <!-- ─── 统计概览(文档 4.5) ─── -->
  <section id="tab-stats" class="panel">
    <div class="cards" id="stat-cards"></div>
    <div class="block">
      <h3>拍照 → 报告页转化（上线后新流程）</h3>
      <div id="capture-funnel"></div>
      <p class="hint">按每次点击开始拍照的流程去重，不是人数；进入成功仅在本次报告渲染并切屏后上报，历史报告浏览与演示不计入。今日按开始拍照的北京时间归属。客户端埋点可能受断网、关闭页面影响，未完成不等于检测失败。</p>
    </div>
    <div class="grid2">
      <div class="block">
        <h3>三维度档位分布</h3>
        <div id="dim-dist"></div>
      </div>
      <div class="block">
        <h3>产品组别分布</h3>
        <div id="group-dist" class="pie-wrap"></div>
      </div>
    </div>
    <div class="block">
      <h3>近 14 天每日检测量（北京时间）</h3>
      <div id="daily-chart" class="daily-chart"></div>
    </div>
    <div class="block">
      <h3>导出 CSV</h3>
      <div class="export-bar">
        <label>起始日期 <input type="date" id="exp-from"></label>
        <label>结束日期 <input type="date" id="exp-to"></label>
        <button type="button" class="btn primary" id="btn-export">导出 CSV</button>
        <span class="hint">日期及导出时间均为北京时间；UTF-8 BOM，Excel 直接打开；不含接口原始 JSON</span>
      </div>
    </div>
  </section>
</main>

<!-- ─── 记录详情(抽屉) ─── -->
<div id="drawer-mask" class="drawer-mask hidden"></div>
<aside id="drawer" class="drawer hidden">
  <div class="drawer-head">
    <h2 id="d-title">记录详情</h2>
    <div>
      <button type="button" class="btn primary" id="btn-retry">重试</button>
      <button type="button" class="btn" id="btn-close">关闭</button>
    </div>
  </div>
  <div class="drawer-body" id="d-body"></div>
</aside>

<!-- 图片查看 -->
<div id="lightbox" class="lightbox hidden">
  <img id="lightbox-img" alt="">
</div>

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

<script src="js/report-copy.js"></script>
<script src="js/report-ui.js"></script>
<script src="js/beijing-time.js"></script>
<script src="js/admin.js"></script>
</body>
</html>