feat(gateway): 新增接口11和61的鉴权与测试页

static/face_measure_auth_test.css

@@ -0,0 +1,63 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
+.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
+h1 { font-size: 22px; margin-bottom: 8px; }
+.subtitle { color: #888; font-size: 13px; margin-bottom: 24px; }
+
+/* 上传区 */
+.upload-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 24px; }
+.upload-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.file-input { flex: 1; min-width: 200px; }
+.file-input input[type=file] { width: 100%; padding: 8px; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; }
+.btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; transition: .2s; }
+.btn-primary { background: #2563eb; color: #fff; }
+.btn-primary:hover { background: #1d4ed8; }
+.btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
+.btn-sm { padding: 6px 14px; font-size: 13px; }
+.btn-outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
+.btn-outline:hover { background: #f9fafb; }
+.upload-hint { font-size: 12px; color: #9ca3af; margin-top: 8px; }
+
+/* 状态提示 */
+.status { padding: 10px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
+.status.info { background: #dbeafe; color: #1e40af; display: block; }
+.status.error { background: #fee2e2; color: #991b1b; display: block; }
+.status.success { background: #d1fae5; color: #065f46; display: block; }
+
+/* 结果双栏 */
+.results { display: flex; gap: 24px; }
+.results > div { flex: 1; min-width: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; }
+.results .panel-header { font-weight: 700; font-size: 14px; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
+
+/* JSON 面板 */
+.json-panel { max-height: 600px; overflow: auto; }
+.json-content { padding: 16px 18px; font-family: "SF Mono", "Fira Code", monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
+
+/* 图片面板 — 叠加显示 */
+.img-panel { display: flex; align-items: center; justify-content: center; min-height: 300px; background: #222; position: relative; }
+.img-stack:not([hidden]) { max-width: 100%; position: relative; display: inline-block; line-height: 0; }
+.img-stack img:not([hidden]) { display: block; max-width: min(100%, 520px); max-height: 620px; object-fit: contain; }
+.img-stack .layer-anno { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
+.img-stack .layer-base[hidden] + .layer-anno { position: static; width: auto; height: auto; }
+.img-panel .placeholder { color: #9ca3af; font-size: 14px; }
+
+/* 叠加控制 */
+.anno-controls { display: flex; gap: 12px; align-items: center; font-size: 12px; color: #9ca3af; }
+.anno-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
+.anno-controls input[type=range] { width: 60px; }
+
+/* 指标卡片 */
+.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
+.metric { background: #f9fafb; border-radius: 8px; padding: 12px 14px; }
+.metric .label { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }
+.metric .value { font-size: 18px; font-weight: 700; color: #111827; margin-top: 2px; }
+.metric .unit { font-size: 12px; color: #6b7280; font-weight: 400; }
+
+@media (max-width: 768px) { .results { flex-direction: column; } }
+.hidden { display: none !important; }
+.auth-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
+.auth-fields label { display: grid; gap: 4px; font-size: 13px; }
+.auth-fields input { border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; }
+.auth-fields button:disabled { opacity: .5; cursor: not-allowed; }
+.diff-list { color: #6b7280; font-size: 13px; line-height: 1.7; margin: -14px 0 24px 18px; }
+#statusBar { margin: 12px 0 0; }

static/face_measure_auth_test.js

@@ -0,0 +1,156 @@
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const form = $("measure-test");
+  const { endpoint, totalHeightLabel } = form.dataset;
+  const fileInput = $("imageFile");
+  const submitButton = $("submitBtn");
+  const clearButton = $("clearBtn");
+  const copyButton = $("copyBtn");
+  const metrics = $("metricsBar");
+  const results = $("resultsArea");
+  const jsonContent = $("jsonContent");
+  const placeholder = $("imagePlaceholder");
+  const imageStack = $("imageStack");
+  const baseImage = $("baseImage");
+  const annotationImage = $("annotationImage");
+  let originalImageUrl;
+
+  function setStatus(text, type = "") {
+    const status = $("statusBar");
+    status.textContent = text;
+    status.className = type ? "status " + type : "status";
+  }
+
+  function resetResults() {
+    results.classList.add("hidden");
+    metrics.classList.add("hidden");
+    jsonContent.textContent = "";
+    imageStack.hidden = true;
+    placeholder.hidden = false;
+    placeholder.textContent = "提交后显示叠加效果";
+    baseImage.removeAttribute("src");
+    annotationImage.removeAttribute("src");
+    if (originalImageUrl) {
+      URL.revokeObjectURL(originalImageUrl);
+      originalImageUrl = undefined;
+    }
+  }
+
+  function updateOverlay() {
+    baseImage.hidden = !$("showBase").checked;
+    annotationImage.hidden = !$("showAnno").checked;
+    annotationImage.style.opacity = $("annoOpacity").value / 100;
+  }
+
+  function renderMetrics(data) {
+    const courts = data.four_courts || {};
+    const eyes = data.seven_eyes || {};
+    const items = [[totalHeightLabel, data.face_total_height_cm]];
+    if (form.hasAttribute("data-include-top-court")) items.push(["顶庭", courts.top_court_cm]);
+    items.push(
+      ["上庭", courts.upper_court_cm],
+      ["中庭", courts.middle_court_cm],
+      ["下庭", courts.lower_court_cm],
+      ["单眼宽度", eyes.eye_width_cm],
+      ["脸宽", eyes.face_width_cm],
+      ["两眼间距", eyes.inter_eye_distance_cm],
+    );
+
+    metrics.replaceChildren();
+    for (const [label, value] of items) {
+      const card = document.createElement("div");
+      card.className = "metric";
+      card.innerHTML = '<div class="label"></div><div class="value"><span></span> <span class="unit">cm</span></div>';
+      card.querySelector(".label").textContent = label;
+      card.querySelector(".value span").textContent = value ?? "—";
+      metrics.append(card);
+    }
+    metrics.classList.remove("hidden");
+  }
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const selected = fileInput.files[0];
+    if (!selected) {
+      setStatus("请先选择一张图片", "error");
+      return;
+    }
+
+    fileInput.disabled = submitButton.disabled = clearButton.disabled = true;
+    submitButton.textContent = "⏳ 请求中...";
+    resetResults();
+    setStatus("正在请求 " + endpoint, "info");
+
+    try {
+      const file = await window.downscaleImageFile(selected);
+      const body = new FormData();
+      body.append("image_file", file);
+      const start = performance.now();
+      const response = await window.hairClientFetch(endpoint, { method: "POST", body });
+      if (!response.headers.get("Content-Type")?.includes("application/json")) {
+        throw new Error("服务返回 HTTP " + response.status + "，响应格式异常");
+      }
+      const result = await response.json();
+      const elapsed = ((performance.now() - start) / 1000).toFixed(2);
+      jsonContent.textContent = JSON.stringify(result, null, 2);
+      results.classList.remove("hidden");
+
+      if (!response.ok || result.code !== 0) {
+        setStatus(`请求失败 (${elapsed}s) · HTTP ${response.status} · code ${result.code} · ${result.message}`, "error");
+        placeholder.textContent = "请求失败，无标注图";
+        return;
+      }
+
+      const data = result.data;
+      const annotationSrc = window.resolveImgSrc(data.annotated_image_url, data.annotated_image_base64, "image/png");
+      if (annotationSrc) {
+        originalImageUrl = URL.createObjectURL(file);
+        baseImage.src = originalImageUrl;
+        annotationImage.src = annotationSrc;
+        updateOverlay();
+        imageStack.hidden = false;
+        placeholder.hidden = true;
+      } else {
+        placeholder.textContent = "服务未返回标注图";
+      }
+      renderMetrics(data);
+      setStatus(`请求成功 (${elapsed}s) · request_id ${result.request_id}`, "success");
+    } catch (error) {
+      setStatus(error.message, "error");
+    } finally {
+      fileInput.disabled = submitButton.disabled = clearButton.disabled = false;
+      submitButton.textContent = "🚀 提交测试";
+    }
+  });
+
+  $("showBase").addEventListener("change", updateOverlay);
+  $("showAnno").addEventListener("change", updateOverlay);
+  $("annoOpacity").addEventListener("input", updateOverlay);
+  clearButton.addEventListener("click", () => {
+    resetResults();
+    fileInput.value = "";
+    setStatus("");
+  });
+
+  copyButton.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(jsonContent.textContent);
+      copyButton.textContent = "✅ 已复制";
+      setTimeout(() => { copyButton.textContent = "📋 复制"; }, 1500);
+    } catch {
+      setStatus("复制失败，请手动复制 JSON", "error");
+    }
+  });
+
+  fileInput.addEventListener("change", () => {
+    if (fileInput.files.length) setStatus("已选择 " + fileInput.files[0].name, "info");
+  });
+  fileInput.addEventListener("dragover", (event) => event.preventDefault());
+  fileInput.addEventListener("drop", (event) => {
+    event.preventDefault();
+    if (event.dataTransfer.files.length) {
+      fileInput.files = event.dataTransfer.files;
+      fileInput.dispatchEvent(new Event("change"));
+    }
+  });
+})();

static/integration.html

@@ -55,8 +55,9 @@
 
   <div class="toc">
     <a href="#overview">通用约定</a>
-    <a href="#client-auth">22／42／52／72 鉴权</a>
+    <a href="#client-auth">客户端鉴权</a>
     <a href="#if1">接口1</a>
+    <a href="#if11">接口11</a>
     <a href="#if2">接口2</a>
     <a href="#if22">接口22</a>
     <a href="#if3">接口3</a>
@@ -65,6 +66,7 @@
     <a href="#if5">接口5</a>
     <a href="#if52">接口52</a>
     <a href="#if6">接口6</a>
+    <a href="#if61">接口61</a>
     <a href="#if72">接口72</a>
     <a href="#errors">错误码</a>
     <a href="#test">在线测试</a>
@@ -79,7 +81,7 @@
         <tr><td>请求方式</td><td>业务接口使用 POST。验证令牌使用 GET。</td></tr>
         <tr><td>编码</td><td>UTF-8</td></tr>
         <tr><td>Content-Type</td><td>传图使用 <code>multipart/form-data</code>，登录和刷新使用 <code>application/json</code></td></tr>
-        <tr><td>客户端鉴权</td><td>22、42、52、72 使用 <a class="link" href="#client-auth">Bearer 访问令牌</a>。</td></tr>
+        <tr><td>客户端鉴权</td><td>11、22、42、52、61、72 使用 <a class="link" href="#client-auth">Bearer 访问令牌</a>。</td></tr>
         <tr><td>图片参数</td><td>三选一：<code>image_file</code>（文件上传）/ <code>image_url</code>（URL）/ <code>image_base64</code>（base64 + 前缀）</td></tr>
         <tr><td>图片格式</td><td>JPG / PNG，单人正面照</td></tr>
         <tr><td>请求体上限</td><td><strong>2MB</strong>（nginx 层限制）。超限直接返回 HTTP <strong>413</strong>，不会进入业务逻辑。建议图片文件 ≤1MB；<code>image_base64</code> 传图会膨胀约 33%，编码前原图建议 ≤1.4MB。手机直拍照片通常 3~8MB，<strong>上传前务必先压缩</strong>（如最长边缩到 1500px、JPEG 质量 80）。<code>image_url</code> 方式图片在远端，不受此限制</td></tr>
@@ -96,9 +98,10 @@
   </div>
 
   <div class="card" id="client-auth">
-    <h2>22／42／52／72 客户端鉴权</h2>
+    <h2>客户端鉴权</h2>
     <div class="card-body">
-      <p>使用同一个访问令牌调用 <a href="#if22">22</a>、<a href="#if42">42</a>、<a href="#if52">52</a> 和 <a href="#if72">72</a>。账号为 <code>yonghe</code>，密码由对接人员提供。客户端发送 <code>Authorization: Bearer &lt;access_token&gt;</code>。</p>
+      <p>客户端发送 <code>Authorization: Bearer &lt;access_token&gt;</code>。账号为 <code>yonghe</code>，密码由对接人员提供。以下接口共用同一个访问令牌。</p>
+      <p><a href="#if11">接口 11</a>、<a href="#if22">接口 22</a>、<a href="#if42">接口 42</a>、<a href="#if52">接口 52</a>、<a href="#if61">接口 61</a>、<a href="#if72">接口 72</a></p>
 
       <div class="guide-step">
         <h3>1. 登录获取令牌</h3>
@@ -187,6 +190,17 @@ const { code, data } = await res.json();
     </div>
   </div>
 
+  <div class="card" id="if11">
+    <h2>11. 四庭七眼测量（鉴权） &nbsp;<span class="badge post">POST</span> &nbsp;<code>/api/v1/face/measure-11</code></h2>
+    <div class="card-body">
+      <p>请求使用 <a href="#client-auth">Bearer 访问令牌</a>，图片参数和响应字段见<a href="#if1">接口 1</a>。返回四庭七眼测量数据和透明标注图 URL。</p>
+      <pre>curl -sS -X POST "$BASE_URL/api/v1/face/measure-11" \
+  -H "Authorization: Bearer $ACCESS_TOKEN" \
+  -F 'image_file=@photo.jpg'</pre>
+      <p><a href="/static/test_interface11_auth.html" class="link">打开接口 11 测试页</a></p>
+    </div>
+  </div>
+
   <!-- ======== 接口2 ======== -->
   <div class="card" id="if2">
     <h2>2. C端生发 &nbsp;<span class="badge post">POST</span> &nbsp;<code>/api/v1/hair/grow</code></h2>
@@ -455,6 +469,17 @@ console.log(features.gene_style);   // "自然型"</pre>
     </div>
   </div>
 
+  <div class="card" id="if61">
+    <h2>61. 四庭七眼测量 v2（鉴权） &nbsp;<span class="badge post">POST</span> &nbsp;<code>/api/v1/face/measure-61</code></h2>
+    <div class="card-body">
+      <p>请求使用 <a href="#client-auth">Bearer 访问令牌</a>，图片参数和响应字段见<a href="#if6">接口 6</a>。返回去顶庭的测量数据和透明标注图 URL。</p>
+      <pre>curl -sS -X POST "$BASE_URL/api/v1/face/measure-61" \
+  -H "Authorization: Bearer $ACCESS_TOKEN" \
+  -F 'image_file=@photo.jpg'</pre>
+      <p><a href="/static/test_interface61.html" class="link">打开接口 61 测试页</a></p>
+    </div>
+  </div>
+
   <div class="card" id="if72">
     <h2>72. B 端五个关键点 <span class="badge post">POST</span> <code>/api/v1/face/b-end-points</code></h2>
     <div class="card-body">
@@ -487,7 +512,7 @@ console.log(features.gene_style);   // "自然型"</pre>
 
         <tr><td>1007</td><td>图片参数错误 / 后端不可用</td><td>参数传错 / 服务繁忙请稍后重试</td></tr>
         <tr><td>1008</td><td>图片格式不支持</td><td>非 JPG/PNG / base64 解码失败</td></tr>
-        <tr><td>1009</td><td>未授权</td><td>HTTP 401。登录凭据错误，或 42／52／72 所需的令牌缺失、无效或过期。按 <a href="#client-auth">鉴权流程</a> 处理。</td></tr>
+        <tr><td>1009</td><td>未授权</td><td>HTTP 401。登录凭据错误，或所需的访问令牌缺失、无效或过期。按 <a href="#client-auth">鉴权流程</a> 处理。</td></tr>
       </table>
       <p style="font-size:12px;color:#94a3b8;margin-top:8px">注：1004 仍在使用（接口2/5 的 gender 校验）；接口7（grow-v2）已弃用，请改用接口2。</p>
       <p style="font-size:12px;color:#dc2626;margin-top:8px">先检查 HTTP 状态和 <code>Content-Type</code>，再解析 JSON。HTTP 200 仍需检查 <code>code</code>，只有 <code>0</code> 表示成功。HTTP 401 的 JSON 用于鉴权提示与刷新。上传超限可能返回 HTTP 413，网关异常可能返回 502／504，这些响应可能是 HTML。</p>
@@ -501,6 +526,7 @@ console.log(features.gene_style);   // "自然型"</pre>
       <table>
         <tr><th>接口</th><th>测试页</th><th>功能</th></tr>
         <tr><td>1. 四庭七眼</td><td><a href="/static/test_interface1.html" class="link">/static/test_interface1.html</a></td><td>上传照片 → 原图+标注叠加，底图/标注开关，指标卡片</td></tr>
+        <tr><td>11. 四庭七眼（鉴权）</td><td><a href="/static/test_interface11_auth.html" class="link">/static/test_interface11_auth.html</a></td><td>登录、测试鉴权、刷新令牌、四庭七眼测量</td></tr>
         <tr><td>2. C端生发</td><td><a href="/static/test_interface2.html" class="link">/static/test_interface2.html</a></td><td>上传+性别 → 方案一覧（原图/叠加/生发），双图对比</td></tr>
         <tr><td>22. 生发密度与发际线高度</td><td><a href="/static/test_interface22.html" class="link">/static/test_interface22.html</a></td><td>登录后生成，支持密度多选和发际线高度预览</td></tr>
         <tr><td>3. B端生发</td><td><a href="/static/test_interface3.html" class="link">/static/test_interface3.html</a></td><td>划线图上传 → 生发效果图</td></tr>
@@ -510,6 +536,7 @@ console.log(features.gene_style);   // "自然型"</pre>
         <tr><td>52. 发际线新规则</td><td><a href="/static/test_interface52.html" class="link">/static/test_interface52.html</a></td><td>登录、测试鉴权、刷新令牌、发际线预览与生发</td></tr>
         <tr><td>72. B 端五个关键点</td><td><a href="/static/test_interface72.html" class="link">/static/test_interface72.html</a></td><td>登录、测试鉴权、刷新令牌、关键点和虚线标注</td></tr>
         <tr><td>6. 四庭七眼 v2</td><td><a href="/static/test_interface6.html" class="link">/static/test_interface6.html</a></td><td>同接口1，去顶庭 · 竖线发际线→下巴 · 无头部端线</td></tr>
+        <tr><td>61. 四庭七眼 v2（鉴权）</td><td><a href="/static/test_interface61.html" class="link">/static/test_interface61.html</a></td><td>登录、测试鉴权、刷新令牌、三庭测量</td></tr>
         <tr><td>9. 头发遮罩</td><td><a href="/static/test_interface9.html" class="link">/static/test_interface9.html</a></td><td>上传照片 → 头发遮罩 + 分步可视化</td></tr>
         <tr><td>10. 外缘膨胀带</td><td><a href="/static/test_interface10.html" class="link">/static/test_interface10.html</a></td><td>上传照片 → 头部外缘带状遮罩 + 分步可视化</td></tr>
         <tr><td>99. 人脸特殊点</td><td><a href="/static/test_interface99.html" class="link">/static/test_interface99.html</a></td><td>上传照片 → 60 关键点 + 5 发际线点坐标（<strong>测试大图请先压缩到 2MB 内</strong>，见通用约定）</td></tr>

static/test_interface11_auth.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>接口 11 — 四庭七眼测量鉴权测试</title>
+<link rel="stylesheet" href="/static/face_measure_auth_test.css">
+<script src="/static/client_auth.js" defer></script>
+<script src="/static/img_downscale.js" defer></script>
+<script src="/static/face_measure_auth_test.js" defer></script>
+</head>
+<body>
+<div class="container">
+  <h1>接口 11 — 四庭七眼测量鉴权测试</h1>
+  <p class="subtitle">POST /api/v1/face/measure-11 &nbsp;|&nbsp; 上传正面照 → 原图+标注叠加显示</p>
+
+  <form id="client-auth" class="upload-card" method="post" action="/api/v1/auth/login" aria-label="账号登录">
+    <div class="auth-fields">
+      <label>用户名 <input name="username" autocomplete="username" required></label>
+      <label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
+      <button class="btn btn-primary btn-sm" type="submit">登录</button>
+      <button class="btn btn-outline btn-sm" id="client-auth-check" type="button">测试鉴权</button>
+      <button class="btn btn-outline btn-sm" id="client-auth-refresh" type="button" disabled>刷新令牌</button>
+    </div>
+    <p id="client-auth-status" class="upload-hint" role="status">请使用对接账号登录后提交图片。</p>
+  </form>
+
+  <!-- 上传区 -->
+  <form class="upload-card" id="measure-test" data-endpoint="/api/v1/face/measure-11"
+        data-total-height-label="全脸总高" data-include-top-court>
+    <div class="upload-row">
+      <div class="file-input">
+        <input type="file" id="imageFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png">
+      </div>
+      <button class="btn btn-primary" id="submitBtn" type="submit">🚀 提交测试</button>
+      <button class="btn btn-outline btn-sm" id="clearBtn" type="button">清除结果</button>
+    </div>
+    <div class="upload-hint">
+      支持 JPG / PNG 正面照 &nbsp;|&nbsp; 也可拖拽图片到文件选择框
+    </div>
+    <div id="statusBar" class="status" role="status"></div>
+  </form>
+
+  <!-- 指标速览 -->
+  <div id="metricsBar" class="metrics hidden"></div>
+
+  <!-- 结果双栏 -->
+  <div class="results hidden" id="resultsArea">
+    <!-- 左：图片叠加 -->
+    <div>
+      <div class="panel-header">
+        <span>🖼️ 原图 + 标注叠加</span>
+        <div class="anno-controls">
+          <label><input type="checkbox" id="showBase" checked> 底图</label>
+          <label><input type="checkbox" id="showAnno" checked> 标注层</label>
+          <label>透明度 <input type="range" id="annoOpacity" min="0" max="100" value="100"></label>
+        </div>
+      </div>
+      <div class="img-panel" id="imgPanel">
+        <span id="imagePlaceholder" class="placeholder">提交后显示叠加效果</span>
+        <div class="img-stack" id="imageStack" hidden>
+          <img class="layer-base" id="baseImage" alt="原图">
+          <img class="layer-anno" id="annotationImage" alt="标注层">
+        </div>
+      </div>
+    </div>
+    <!-- 右：JSON -->
+    <div>
+      <div class="panel-header">
+        <span>📋 JSON 响应</span>
+        <button class="btn btn-outline btn-sm" id="copyBtn" type="button">📋 复制</button>
+      </div>
+      <div class="json-panel"><pre class="json-content" id="jsonContent"></pre></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

static/test_interface61.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>接口 61 — 四庭七眼测量 v2 鉴权测试</title>
+<link rel="stylesheet" href="/static/face_measure_auth_test.css">
+<script src="/static/client_auth.js" defer></script>
+<script src="/static/img_downscale.js" defer></script>
+<script src="/static/face_measure_auth_test.js" defer></script>
+</head>
+<body>
+<div class="container">
+  <h1>接口 61 — 四庭七眼测量 v2 鉴权测试</h1>
+  <p class="subtitle">POST /api/v1/face/measure-61 &nbsp;|&nbsp; 去顶庭 · 竖线发际线→下巴 · 无头部端线</p>
+  <ul class="diff-list">
+    <li><strong>去顶庭</strong>：不画头顶横线，不返回顶庭数据；<code>face_total_height_cm</code> = 上+中+下庭</li>
+    <li><strong>竖线范围</strong>：发际线→下巴尖（接口1 为头顶→下巴尖）</li>
+    <li><strong>不画头部端线</strong>：仅七眼 6 点 5 段标尺（接口1 为 8 点 7 段）</li>
+  </ul>
+
+  <form id="client-auth" class="upload-card" method="post" action="/api/v1/auth/login" aria-label="账号登录">
+    <div class="auth-fields">
+      <label>用户名 <input name="username" autocomplete="username" required></label>
+      <label>密码 <input name="password" type="password" autocomplete="current-password" required></label>
+      <button class="btn btn-primary btn-sm" type="submit">登录</button>
+      <button class="btn btn-outline btn-sm" id="client-auth-check" type="button">测试鉴权</button>
+      <button class="btn btn-outline btn-sm" id="client-auth-refresh" type="button" disabled>刷新令牌</button>
+    </div>
+    <p id="client-auth-status" class="upload-hint" role="status">请使用对接账号登录后提交图片。</p>
+  </form>
+
+  <!-- 上传区 -->
+  <form class="upload-card" id="measure-test" data-endpoint="/api/v1/face/measure-61"
+        data-total-height-label="面部总高（三庭）">
+    <div class="upload-row">
+      <div class="file-input">
+        <input type="file" id="imageFile" accept="image/jpeg,image/png,.jpg,.jpeg,.png">
+      </div>
+      <button class="btn btn-primary" id="submitBtn" type="submit">🚀 提交测试</button>
+      <button class="btn btn-outline btn-sm" id="clearBtn" type="button">清除结果</button>
+    </div>
+    <div class="upload-hint">
+      支持 JPG / PNG 正面照 &nbsp;|&nbsp; 也可拖拽图片到文件选择框
+    </div>
+    <div id="statusBar" class="status" role="status"></div>
+  </form>
+
+  <!-- 指标速览 -->
+  <div id="metricsBar" class="metrics hidden"></div>
+
+  <!-- 结果双栏 -->
+  <div class="results hidden" id="resultsArea">
+    <!-- 左：图片叠加 -->
+    <div>
+      <div class="panel-header">
+        <span>🖼️ 原图 + 标注叠加</span>
+        <div class="anno-controls">
+          <label><input type="checkbox" id="showBase" checked> 底图</label>
+          <label><input type="checkbox" id="showAnno" checked> 标注层</label>
+          <label>透明度 <input type="range" id="annoOpacity" min="0" max="100" value="100"></label>
+        </div>
+      </div>
+      <div class="img-panel" id="imgPanel">
+        <span id="imagePlaceholder" class="placeholder">提交后显示叠加效果</span>
+        <div class="img-stack" id="imageStack" hidden>
+          <img class="layer-base" id="baseImage" alt="原图">
+          <img class="layer-anno" id="annotationImage" alt="标注层">
+        </div>
+      </div>
+    </div>
+    <!-- 右：JSON -->
+    <div>
+      <div class="panel-header">
+        <span>📋 JSON 响应</span>
+        <button class="btn btn-outline btn-sm" id="copyBtn" type="button">📋 复制</button>
+      </div>
+      <div class="json-panel"><pre class="json-content" id="jsonContent"></pre></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>