From a0a98046f7ea4a49e046cbf5643d6f070900a75b Mon Sep 17 00:00:00 2001
From: chengma <chengma2027@gmail.com>
Date: Sun, 23 Aug 2026 23:42:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8C=B9=E9=85=8D=E4=BA=A4=E4=BA=92=E5=8E=9F?=
 =?UTF-8?q?=E5=9E=8B=20(#292)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prototypes/291/v1/index.html | 1056 ++++++++++++++++++++++++++++++++++
 1 file changed, 1056 insertions(+)
 create mode 100644 prototypes/291/v1/index.html
diff --git a/prototypes/291/v1/index.html b/prototypes/291/v1/index.html
new file mode 100644
index 0000000..3d02541
--- /dev/null
+++ b/prototypes/291/v1/index.html
@@ -0,0 +1,1056 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>蝦皮与 PDD 颜色匹配 · Admin 交互原型</title>
+<style>
+  :root {
+    color-scheme: light;
+    --nav: #2b3440;
+    --nav-hover: #3a4552;
+    --primary: #1f6feb;
+    --primary-hover: #195fc9;
+    --border: #e1e4e8;
+    --border-strong: #ccd1d6;
+    --page: #f5f6f8;
+    --text: #222;
+    --muted: #667085;
+    --danger: #b42318;
+    --success: #176b36;
+    --warning: #7a4b00;
+    --info-bg: #eef6ff;
+    --info-border: #b8d4fa;
+  }
+
+  * { box-sizing: border-box; }
+  [hidden] { display: none !important; }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  html,
+  body { height: 100%; }
+
+  body {
+    min-width: 320px;
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
+    font-size: 14px;
+    color: var(--text);
+    background: var(--page);
+  }
+
+  button,
+  input,
+  select { font: inherit; }
+
+  button:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  a:focus-visible,
+  [tabindex]:focus-visible {
+    outline: 3px solid rgba(31, 111, 235, .3);
+    outline-offset: 2px;
+  }
+
+  .nav {
+    flex: 0 0 auto;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0 12px;
+    background: var(--nav);
+    white-space: nowrap;
+  }
+
+  .nav-brand {
+    margin-right: 14px;
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .nav a {
+    padding: 13px 10px;
+    color: #c8cdd4;
+    text-decoration: none;
+    font-size: 13px;
+  }
+
+  .nav a:hover { color: #fff; background: var(--nav-hover); }
+  .nav a.active { color: #fff; background: var(--primary); }
+  .nav-spacer { flex: 1 1 auto; min-width: 8px; }
+  .nav-user { padding: 0 6px; color: #fff; font-size: 13px; }
+
+  .nav-button {
+    min-height: 30px;
+    padding: 4px 8px;
+    border: 1px solid #56616d;
+    border-radius: 3px;
+    color: #c8cdd4;
+    background: transparent;
+  }
+
+  .page {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px 16px 8px;
+  }
+
+  .prototype-notice,
+  .guard-note,
+  .feedback {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 8px 10px;
+    border: 1px solid var(--info-border);
+    border-left: 4px solid var(--primary);
+    border-radius: 4px;
+    color: #174ea6;
+    background: var(--info-bg);
+    line-height: 1.45;
+  }
+
+  .prototype-notice {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .prototype-notice strong { white-space: nowrap; }
+
+  .toolbar {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 10px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  .toolbar-title {
+    margin: 0 8px 0 0;
+    font-size: 18px;
+    line-height: 30px;
+  }
+
+  .toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .toolbar-separator {
+    width: 1px;
+    height: 28px;
+    background: var(--border);
+  }
+
+  .toolbar-actions { margin-left: auto; }
+  label { color: #555; white-space: nowrap; }
+
+  select,
+  input[type="search"] {
+    height: 32px;
+    padding: 4px 8px;
+    border: 1px solid var(--border-strong);
+    border-radius: 3px;
+    color: var(--text);
+    background: #fff;
+  }
+
+  #product-select { width: 245px; }
+  #mapping-filter { min-width: 116px; }
+
+  button,
+  .button-link {
+    min-height: 32px;
+    padding: 5px 12px;
+    border: 1px solid var(--border-strong);
+    border-radius: 3px;
+    color: var(--text);
+    background: #fff;
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
+  button:hover,
+  .button-link:hover { background: #f0f2f4; }
+  button:disabled { opacity: .48; cursor: not-allowed; }
+  button.primary { color: #fff; border-color: var(--primary); background: var(--primary); }
+  button.primary:hover { background: var(--primary-hover); }
+  button.danger { color: var(--danger); border-color: #efb2ac; }
+  button.link-button { min-height: auto; padding: 2px 0; border: 0; color: #1f5f99; background: transparent; }
+
+  .workspace {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .summary-grid {
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px;
+    gap: 10px;
+  }
+
+  .summary-card {
+    min-width: 0;
+    padding: 11px 12px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  .summary-label { color: var(--muted); font-size: 12px; }
+  .summary-title {
+    margin: 5px 0 7px;
+    overflow: hidden;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .summary-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px 14px;
+    color: #555;
+    font-size: 12px;
+  }
+
+  .summary-progress {
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+
+  .summary-progress strong { color: #174ea6; font-size: 23px; font-variant-numeric: tabular-nums; }
+  .summary-progress span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
+
+  .guard-note { color: #5c4400; border-color: #f0d88b; border-left-color: #c58a00; background: #fffbe6; }
+
+  .feedback.error { color: #8f1d14; border-color: #efb2ac; border-left-color: var(--danger); background: #fff5f4; }
+  .feedback.success { color: #115f2e; border-color: #a7d8b7; border-left-color: var(--success); background: #effaf2; }
+  .feedback strong { margin-right: 4px; }
+  .feedback button { margin-left: 8px; }
+
+  .table-wrap {
+    flex: 1 1 auto;
+    min-height: 190px;
+    overflow: auto;
+    scrollbar-gutter: stable;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  table { width: 100%; min-width: 1080px; border-collapse: collapse; }
+
+  th,
+  td {
+    padding: 8px 10px;
+    border-bottom: 1px solid #eef0f2;
+    text-align: left;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    color: #444;
+    background: #fafbfc;
+    font-weight: 600;
+  }
+
+  tbody tr:hover { background: #f7f9fb; }
+  tbody tr.row-invalid { background: #fff5f4; }
+  tbody tr.row-invalid:hover { background: #ffebe9; }
+  tbody tr.row-changed { background: #eef6ff; }
+  tbody tr.row-changed:hover { background: #e2f0ff; }
+
+  .col-color { min-width: 165px; }
+  .col-source { min-width: 135px; }
+  .col-target { min-width: 360px; }
+  .col-status { min-width: 190px; }
+  .col-action { width: 72px; }
+  .arrow { width: 44px; color: #8a94a1; text-align: center; font-size: 18px; }
+
+  .source-value { display: block; font-weight: 600; }
+  .source-key { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
+  .mapping-select { width: 100%; min-width: 330px; }
+
+  .status-pill {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .status-mapped { color: var(--success); background: #dff3e5; }
+  .status-pending { color: #555; background: #eceff2; }
+  .status-invalid { color: var(--danger); background: #fde8e8; }
+  .status-changed { color: #174ea6; background: #e8f1ff; }
+  .status-reason { display: block; max-width: 250px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; }
+
+  .empty-state {
+    flex: 1 1 auto;
+    min-height: 280px;
+    display: grid;
+    place-items: center;
+    padding: 36px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: #fff;
+    text-align: center;
+  }
+
+  .empty-state > div { max-width: 580px; }
+  .empty-mark {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    color: #475467;
+    background: #eef0f2;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .empty-state h2 { margin: 12px 0 6px; font-size: 19px; }
+  .empty-state p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
+
+  .skeleton { width: min(520px, 80vw); }
+  .skeleton i {
+    display: block;
+    height: 15px;
+    margin: 12px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #e8edf3 25%, #f8fafc 45%, #e8edf3 65%);
+    background-size: 220% 100%;
+    animation: shine 1.2s linear infinite;
+  }
+
+  @keyframes shine { to { background-position: -220% 0; } }
+
+  .statusbar {
+    flex: 0 0 auto;
+    min-height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 6px 16px;
+    color: #c8cdd4;
+    background: var(--nav);
+    font-size: 13px;
+  }
+
+  .status-message {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .status-summary { font-variant-numeric: tabular-nums; }
+  .statusbar button { min-height: 30px; }
+  .statusbar button.primary { border-color: #73a9ef; }
+
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background: rgba(28, 36, 46, .48);
+  }
+
+  .modal {
+    width: min(500px, 100%);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
+  }
+
+  .modal-head,
+  .modal-foot {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+  }
+
+  .modal-head { border-bottom: 1px solid var(--border); }
+  .modal-head h2 { margin: 0; font-size: 18px; }
+  .modal-x { margin-left: auto; min-width: 32px; padding: 2px 8px; font-size: 20px; }
+  .modal-body { padding: 16px; color: #444; line-height: 1.65; }
+  .modal-body p { margin: 0; }
+  .modal-foot { justify-content: flex-end; border-top: 1px solid var(--border); background: #fafbfc; }
+
+  .toast {
+    position: fixed;
+    right: 20px;
+    bottom: 56px;
+    z-index: 40;
+    max-width: min(440px, calc(100vw - 40px));
+    padding: 10px 14px;
+    border: 1px solid #9bc2f7;
+    border-radius: 4px;
+    color: #174ea6;
+    background: #eef6ff;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
+  }
+
+  .toast.error { color: #8f1d14; border-color: #efb2ac; background: #fff5f4; }
+
+  @media (max-width: 1100px) {
+    body { overflow: auto; }
+    .nav { flex-wrap: wrap; }
+    .page { min-height: 650px; }
+    .summary-grid { grid-template-columns: 1fr 1fr; }
+    .summary-progress { grid-column: 1 / -1; min-height: 62px; }
+    .toolbar-actions { margin-left: 0; }
+  }
+
+  @media (max-width: 720px) {
+    .prototype-notice { align-items: flex-start; }
+    .summary-grid { grid-template-columns: 1fr; }
+    .summary-progress { grid-column: auto; }
+    .toolbar-separator { display: none; }
+    #product-select { width: min(245px, 68vw); }
+    .statusbar { align-items: flex-end; flex-wrap: wrap; }
+    .status-message { flex-basis: 100%; white-space: normal; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+  }
+</style>
+</head>
+<body>
+  <nav class="nav" aria-label="Admin 主导航">
+    <span class="nav-brand">采集采购管理端</span>
+    <a href="#" class="active" aria-current="page">蝦皮数据</a>
+    <a href="#">PDD 商品</a>
+    <a href="#">顺运宝数据</a>
+    <a href="#">采集采购</a>
+    <a href="#">客户端列表</a>
+    <a href="#">档口入库码</a>
+    <a href="#">店铺管理</a>
+    <a href="#">用户管理</a>
+    <a href="#">AI 配置</a>
+    <span class="nav-spacer"></span>
+    <span class="nav-user">采购员-demo</span>
+    <button type="button" class="nav-button">退出登录</button>
+  </nav>
+
+  <main class="page">
+    <p class="prototype-notice" role="status">
+      <strong>交互原型</strong>
+      <span>仅使用虚构演示数据，不连接 Admin、数据库或第三方服务。正式入口位于“蝦皮数据”模块内，不增加顶部模块。</span>
+    </p>
+
+    <section class="toolbar" aria-label="颜色匹配工具条">
+      <button type="button" id="back-button">返回蝦皮数据</button>
+      <h1 class="toolbar-title">颜色匹配</h1>
+      <div class="toolbar-separator" aria-hidden="true"></div>
+      <div class="toolbar-group">
+        <label for="product-select">蝦皮商品</label>
+        <select id="product-select">
+          <option value="normal">DEMO-99000000001 · 已关联且已采集</option>
+          <option value="unlinked">DEMO-99000000002 · 未关联 PDD</option>
+          <option value="uncollected">DEMO-99000000003 · PDD 待采集</option>
+          <option value="empty">DEMO-99000000004 · 无可购买规格</option>
+        </select>
+      </div>
+      <div class="toolbar-group" id="mapping-filter-group">
+        <label for="mapping-filter">状态</label>
+        <select id="mapping-filter">
+          <option value="all">全部颜色</option>
+          <option value="pending">待处理</option>
+          <option value="invalid">已失效</option>
+          <option value="mapped">已匹配</option>
+        </select>
+      </div>
+      <div class="toolbar-group toolbar-actions">
+        <button type="button" id="refresh-button">刷新 PDD 规格</button>
+      </div>
+    </section>
+
+    <section class="workspace" id="workspace" aria-live="polite"></section>
+  </main>
+
+  <footer class="statusbar">
+    <span class="status-message" id="status-message" role="status" aria-live="polite">颜色映射不会修改两端原始规格。</span>
+    <span class="status-summary" id="status-summary">已匹配 0 / 0</span>
+    <button type="button" id="discard-button" disabled>放弃修改</button>
+    <button type="button" id="save-button" class="primary" disabled>保存修改</button>
+  </footer>
+
+  <div class="modal-backdrop" id="leave-modal" hidden>
+    <section class="modal" role="dialog" aria-modal="true" aria-labelledby="leave-title">
+      <header class="modal-head">
+        <h2 id="leave-title">还有修改没有保存</h2>
+        <button type="button" class="modal-x" data-close-modal aria-label="关闭">×</button>
+      </header>
+      <div class="modal-body">
+        <p id="leave-message">直接离开会丢失本次颜色选择。你可以继续编辑，或放弃修改后离开。</p>
+      </div>
+      <footer class="modal-foot">
+        <button type="button" data-close-modal>继续编辑</button>
+        <button type="button" id="confirm-leave" class="danger">放弃修改并离开</button>
+      </footer>
+    </section>
+  </div>
+
+  <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
+
+<script>
+(() => {
+  "use strict";
+
+  const pddColors = ["曜石黑", "奶油白", "浅咖色", "复古蓝"];
+  const initialRows = () => [
+    {
+      id: "formal-black", raw: "黑色", source: "正式 SKU", sourceDetail: "SKU DEMO-A01",
+      mapped: "曜石黑", savedMapped: "曜石黑", mappedBy: "人工确认", invalidOriginal: ""
+    },
+    {
+      id: "observed-deep-black", raw: "深黑色", source: "SYB 观测", sourceDetail: "3 条货运单观测",
+      mapped: "曜石黑", savedMapped: "曜石黑", mappedBy: "人工确认 · 多对一", invalidOriginal: ""
+    },
+    {
+      id: "formal-apricot", raw: "杏色", source: "正式 SKU", sourceDetail: "SKU DEMO-A02",
+      mapped: "米杏色", savedMapped: "米杏色", mappedBy: "原目标已从 PDD 消失", invalidOriginal: "米杏色"
+    },
+    {
+      id: "observed-milk-white", raw: "奶白", source: "SYB 观测", sourceDetail: "1 条货运单观测",
+      mapped: "", savedMapped: "", mappedBy: "尚未确认", invalidOriginal: ""
+    },
+    {
+      id: "formal-khaki", raw: "卡其", source: "正式 SKU", sourceDetail: "SKU DEMO-A03",
+      mapped: "浅咖色", savedMapped: "浅咖色", mappedBy: "人工确认", invalidOriginal: ""
+    }
+  ];
+
+  const products = {
+    normal: {
+      title: "DEMO 韩版宽松直筒休闲长裤",
+      goodsID: "DEMO-99000000001",
+      shop: "示例女装店",
+      pddID: "DEMO-880000000001",
+      pddTitle: "DEMO 秋冬加绒显瘦直筒裤",
+      collectedAt: "2026-08-23 18:20",
+      dimension: "颜色分类（dimension: color_family）",
+      range: "¥18.90–¥23.50",
+      state: "normal"
+    },
+    unlinked: {
+      title: "DEMO 基础款圆领短袖",
+      goodsID: "DEMO-99000000002",
+      shop: "示例生活馆",
+      state: "unlinked"
+    },
+    uncollected: {
+      title: "DEMO 轻薄防晒外套",
+      goodsID: "DEMO-99000000003",
+      shop: "示例运动店",
+      pddID: "DEMO-880000000003",
+      state: "uncollected"
+    },
+    empty: {
+      title: "DEMO 复古针织开衫",
+      goodsID: "DEMO-99000000004",
+      shop: "示例针织店",
+      pddID: "DEMO-880000000004",
+      state: "empty"
+    }
+  };
+
+  let rows = initialRows();
+  let currentProduct = "normal";
+  let pendingNavigation = null;
+  let refreshHasFailed = false;
+  let saveHasFailed = false;
+  let staleContext = false;
+  let feedback = null;
+  let loading = false;
+
+  const workspace = document.querySelector("#workspace");
+  const productSelect = document.querySelector("#product-select");
+  const mappingFilter = document.querySelector("#mapping-filter");
+  const mappingFilterGroup = document.querySelector("#mapping-filter-group");
+  const refreshButton = document.querySelector("#refresh-button");
+  const saveButton = document.querySelector("#save-button");
+  const discardButton = document.querySelector("#discard-button");
+  const statusMessage = document.querySelector("#status-message");
+  const statusSummary = document.querySelector("#status-summary");
+  const leaveModal = document.querySelector("#leave-modal");
+  const toast = document.querySelector("#toast");
+
+  function escapeHTML(value) {
+    return String(value).replace(/[&<>'"]/g, char => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;"
+    })[char]);
+  }
+
+  function isDirty() {
+    return rows.some(row => row.mapped !== row.savedMapped);
+  }
+
+  function isValidColor(value) {
+    return pddColors.includes(value);
+  }
+
+  function rowState(row) {
+    if (row.mapped !== row.savedMapped) return "changed";
+    if (row.mapped && !isValidColor(row.mapped)) return "invalid";
+    if (row.mapped) return "mapped";
+    return "pending";
+  }
+
+  function stateLabel(state) {
+    return {
+      mapped: "已匹配",
+      pending: "待匹配",
+      invalid: "已失效",
+      changed: "待保存"
+    }[state];
+  }
+
+  function stateReason(row, state) {
+    if (state === "changed") return row.mapped ? "本次修改，保存后生效" : "本次清除，保存后生效";
+    if (state === "invalid") return `原映射“${row.mapped}”已不在当前可购买规格中`;
+    if (state === "mapped") return row.mappedBy;
+    return "请选择当前 PDD 商品的真实颜色";
+  }
+
+  function currentOwners(exceptRowID) {
+    const owners = new Map();
+    rows.forEach(row => {
+      if (row.id === exceptRowID || !isValidColor(row.mapped)) return;
+      const values = owners.get(row.mapped) || [];
+      values.push(row.raw);
+      owners.set(row.mapped, values);
+    });
+    return owners;
+  }
+
+  function option(value, label, selected) {
+    return `<option value="${escapeHTML(value)}"${selected ? " selected" : ""}>${escapeHTML(label)}</option>`;
+  }
+
+  function colorOptions(row) {
+    const owners = currentOwners(row.id);
+    const selected = row.mapped;
+    let html = option("", "请选择 PDD 颜色", selected === "");
+
+    if (selected) {
+      if (isValidColor(selected)) {
+        html += `<optgroup label="当前选择">${option(selected, selected, true)}</optgroup>`;
+      } else {
+        html += `<optgroup label="已失效的原选择">${option(selected, `${selected} · 当前已不可购买`, true)}</optgroup>`;
+      }
+    }
+
+    const unused = pddColors.filter(color => color !== selected && !owners.has(color));
+    if (unused.length) {
+      html += `<optgroup label="未使用的颜色（${unused.length}）">`;
+      html += unused.map(color => option(color, color, false)).join("");
+      html += "</optgroup>";
+    }
+
+    const used = pddColors.filter(color => color !== selected && owners.has(color));
+    if (used.length) {
+      html += '<optgroup label="已经匹配（仍可选择）">';
+      html += used.map(color => option(color, `${color} · 已被“${owners.get(color).join("、")}”使用`, false)).join("");
+      html += "</optgroup>";
+    }
+    return html;
+  }
+
+  function feedbackHTML() {
+    if (!feedback) return "";
+    const retry = feedback.action
+      ? `<button type="button" id="feedback-action">${escapeHTML(feedback.action)}</button>`
+      : "";
+    return `<p class="feedback ${escapeHTML(feedback.type)}" role="alert"><strong>${escapeHTML(feedback.title)}</strong>${escapeHTML(feedback.message)}${retry}</p>`;
+  }
+
+  function renderSummary(product) {
+    return `
+      <section class="summary-grid" aria-label="当前商品摘要">
+        <article class="summary-card">
+          <span class="summary-label">蝦皮商品</span>
+          <div class="summary-title" title="${escapeHTML(product.title)}">${escapeHTML(product.title)}</div>
+          <div class="summary-meta"><span>商品 ID：${escapeHTML(product.goodsID)}</span><span>店铺：${escapeHTML(product.shop)}</span></div>
+        </article>
+        <article class="summary-card">
+          <span class="summary-label">当前关联的 PDD 商品</span>
+          <div class="summary-title" title="${escapeHTML(product.pddTitle)}">${escapeHTML(product.pddID)} · ${escapeHTML(product.pddTitle)}</div>
+          <div class="summary-meta"><span>最新采集：${escapeHTML(product.collectedAt)}</span><span>可购买价格区间：${escapeHTML(product.range)}</span></div>
+        </article>
+        <article class="summary-card summary-progress">
+          <div><strong id="summary-progress-value">0 / 0</strong><span>当前有效颜色映射</span></div>
+        </article>
+      </section>`;
+  }
+
+  function renderRows() {
+    const filter = mappingFilter.value;
+    const visible = rows.filter(row => filter === "all" || rowState(row) === filter);
+    if (!visible.length) {
+      return '<tr><td colspan="7" style="padding:44px 10px;text-align:center;color:#777;white-space:normal">当前筛选条件下没有颜色。请选择其他状态或清除筛选。</td></tr>';
+    }
+
+    return visible.map(row => {
+      const state = rowState(row);
+      return `
+        <tr class="row-${state}">
+          <td class="col-color"><span class="source-value">${escapeHTML(row.raw)}</span><span class="source-key">身份键：${escapeHTML(row.id)}</span></td>
+          <td class="col-source"><span class="source-value">${escapeHTML(row.source)}</span><span class="source-key">${escapeHTML(row.sourceDetail)}</span></td>
+          <td class="arrow" aria-hidden="true">→</td>
+          <td>${escapeHTML(products.normal.dimension)}</td>
+          <td class="col-target">
+            <label class="visually-hidden" for="mapping-${escapeHTML(row.id)}">为蝦皮颜色 ${escapeHTML(row.raw)} 选择 PDD 颜色</label>
+            <select class="mapping-select" id="mapping-${escapeHTML(row.id)}" data-row-id="${escapeHTML(row.id)}">${colorOptions(row)}</select>
+          </td>
+          <td class="col-status"><span class="status-pill status-${state}">${stateLabel(state)}</span><span class="status-reason" title="${escapeHTML(stateReason(row, state))}">${escapeHTML(stateReason(row, state))}</span></td>
+          <td class="col-action"><button type="button" class="link-button" data-clear-id="${escapeHTML(row.id)}"${row.mapped ? "" : " disabled"}>清除</button></td>
+        </tr>`;
+    }).join("");
+  }
+
+  function renderNormal() {
+    const product = products.normal;
+    workspace.innerHTML = `
+      ${renderSummary(product)}
+      <p class="guard-note"><strong>采购门禁：</strong>这里只确定颜色维度，不修改蝦皮或 PDD 原始规格，也不能单独让订单进入采购。系统仍须从当前可购买组合中唯一确定尺码等其他维度。</p>
+      ${feedbackHTML()}
+      <section class="table-wrap" role="region" aria-label="蝦皮与 PDD 商品颜色映射表" tabindex="0">
+        <table>
+          <thead><tr><th>蝦皮颜色</th><th>来源</th><th class="arrow"><span class="visually-hidden">映射到</span></th><th>PDD 颜色维度</th><th>PDD 实际颜色</th><th>状态 / 原因</th><th>操作</th></tr></thead>
+          <tbody id="mapping-body">${renderRows()}</tbody>
+        </table>
+      </section>`;
+
+    const action = document.querySelector("#feedback-action");
+    if (action) action.addEventListener("click", handleFeedbackAction);
+    updateFooter();
+  }
+
+  function renderEmpty(product) {
+    const config = {
+      unlinked: {
+        title: "还没有关联 PDD 商品",
+        message: "请先回到蝦皮商品详情填写 PDD 链接。没有目标商品时，系统不会猜测颜色对应关系。",
+        action: "返回商品详情填写 PDD 链接"
+      },
+      uncollected: {
+        title: "PDD 商品尚未采集",
+        message: "已经有关联商品，但还没有 PDD 规格快照。请先创建采集任务，采集成功后再维护颜色映射。",
+        action: "创建采集任务"
+      },
+      empty: {
+        title: "最新采集结果没有可购买规格",
+        message: "系统不会使用已售罄或不可购买的颜色。请核对 PDD 商品是否有效，必要时重新采集。",
+        action: "查看 PDD 商品并重新采集"
+      }
+    }[product.state];
+
+    const pddSummary = product.pddID
+      ? `<article class="summary-card"><span class="summary-label">当前关联的 PDD 商品</span><div class="summary-title">${escapeHTML(product.pddID)}</div><div class="summary-meta"><span>当前没有可用于颜色映射的规格快照</span></div></article>`
+      : `<article class="summary-card"><span class="summary-label">当前关联的 PDD 商品</span><div class="summary-title">未关联</div><div class="summary-meta"><span>请先填写 PDD 链接或商品 ID</span></div></article>`;
+
+    workspace.innerHTML = `
+      <section class="summary-grid" aria-label="当前商品摘要">
+        <article class="summary-card"><span class="summary-label">蝦皮商品</span><div class="summary-title">${escapeHTML(product.title)}</div><div class="summary-meta"><span>商品 ID：${escapeHTML(product.goodsID)}</span><span>店铺：${escapeHTML(product.shop)}</span></div></article>
+        ${pddSummary}
+        <article class="summary-card summary-progress"><div><strong>0 / 0</strong><span>当前有效颜色映射</span></div></article>
+      </section>
+      <section class="empty-state"><div><div class="empty-mark" aria-hidden="true">!</div><h2>${escapeHTML(config.title)}</h2><p>${escapeHTML(config.message)}</p><button type="button" class="primary" id="empty-action">${escapeHTML(config.action)}</button></div></section>`;
+
+    document.querySelector("#empty-action").addEventListener("click", () => showToast(`原型：${config.action}。正式页面将进入现有业务流程。`));
+    updateFooter();
+  }
+
+  function renderLoading() {
+    workspace.innerHTML = `
+      <section class="empty-state"><div><div class="skeleton" aria-hidden="true"><i></i><i></i><i></i><i></i></div><h2>正在刷新 PDD 规格</h2><p>正在读取最新可购买组合，并重新核对颜色维度和映射上下文。</p></div></section>`;
+    updateFooter();
+  }
+
+  function render() {
+    mappingFilterGroup.hidden = currentProduct !== "normal" || loading;
+    refreshButton.hidden = currentProduct !== "normal";
+    productSelect.value = currentProduct;
+    if (loading) return renderLoading();
+    const product = products[currentProduct];
+    if (product.state === "normal") renderNormal(); else renderEmpty(product);
+  }
+
+  function updateFooter() {
+    const normal = currentProduct === "normal" && !loading;
+    const dirty = normal && isDirty();
+    const mapped = rows.filter(row => rowState(row) === "mapped" || (rowState(row) === "changed" && isValidColor(row.mapped))).length;
+    const invalid = rows.filter(row => rowState(row) === "invalid").length;
+
+    saveButton.disabled = !dirty || loading;
+    discardButton.disabled = !dirty || loading;
+    statusSummary.textContent = normal ? `有效映射 ${mapped} / ${rows.length} · 失效 ${invalid}` : "当前没有可编辑颜色";
+    statusMessage.textContent = loading
+      ? "正在刷新 PDD 规格，请稍候。"
+      : dirty
+        ? `有 ${rows.filter(row => row.mapped !== row.savedMapped).length} 项修改尚未保存；未修改的颜色不会被覆盖。`
+        : "颜色映射不会修改两端原始规格；只有完整规格唯一可购买时才可进入采购。";
+
+    const progress = document.querySelector("#summary-progress-value");
+    if (progress) progress.textContent = `${mapped} / ${rows.length}`;
+  }
+
+  function handleFeedbackAction() {
+    if (!feedback) return;
+    if (feedback.kind === "retry-load") {
+      loading = true;
+      feedback = null;
+      render();
+      window.setTimeout(() => {
+        loading = false;
+        if (isDirty()) {
+          staleContext = true;
+          feedback = {
+            type: "error",
+            title: "PDD 规格已经更新。",
+            message: "页面保留了你的选择，但保存前必须按最新颜色重新核对。",
+            action: "放弃修改并载入最新映射",
+            kind: "reload-latest"
+          };
+        } else {
+          feedback = { type: "success", title: "刷新成功。", message: "已加载最新可购买颜色，当前映射上下文已更新。" };
+        }
+        render();
+      }, 650);
+      return;
+    }
+
+    if (feedback.kind === "reload-latest") {
+      rows = initialRows();
+      staleContext = false;
+      feedback = { type: "success", title: "已载入最新映射。", message: "陈旧修改已放弃，请重新核对后再保存。" };
+      render();
+    }
+  }
+
+  function refreshSpecs() {
+    loading = true;
+    feedback = null;
+    refreshButton.disabled = true;
+    render();
+    window.setTimeout(() => {
+      loading = false;
+      refreshButton.disabled = false;
+      if (!refreshHasFailed) {
+        refreshHasFailed = true;
+        workspace.innerHTML = `
+          <section class="empty-state"><div><div class="empty-mark" aria-hidden="true">!</div><h2>PDD 规格加载失败</h2><p>暂时无法取得最新规格。已保存的颜色映射和当前未保存选择都没有被清除。</p><button type="button" class="primary" id="retry-load">重新加载</button></div></section>`;
+        document.querySelector("#retry-load").addEventListener("click", () => {
+          feedback = { kind: "retry-load" };
+          handleFeedbackAction();
+        });
+        updateFooter();
+      } else {
+        if (isDirty()) staleContext = true;
+        feedback = isDirty()
+          ? { type: "error", title: "PDD 规格已经更新。", message: "页面保留了你的选择，但保存前必须按最新颜色重新核对。", action: "放弃修改并载入最新映射", kind: "reload-latest" }
+          : { type: "success", title: "刷新成功。", message: "已加载最新可购买颜色，当前映射上下文已更新。" };
+        render();
+      }
+    }, 650);
+  }
+
+  function saveMappings() {
+    if (!isDirty() || loading) return;
+    if (staleContext) {
+      feedback = {
+        type: "error",
+        title: "保存被拒绝：页面数据已过期。",
+        message: "PDD 规格在你编辑期间发生变化，请载入最新映射后重新核对。",
+        action: "放弃修改并载入最新映射",
+        kind: "reload-latest"
+      };
+      render();
+      return;
+    }
+
+    saveButton.disabled = true;
+    saveButton.textContent = "保存中…";
+    window.setTimeout(() => {
+      saveButton.textContent = "保存修改";
+      if (!saveHasFailed) {
+        saveHasFailed = true;
+        feedback = { type: "error", title: "保存失败。", message: "服务暂时不可用，你的选择仍保留在页面上；请检查后重试。" };
+        render();
+        showToast("保存失败，未丢失本次选择。", true);
+        return;
+      }
+
+      rows.forEach(row => {
+        if (row.mapped !== row.savedMapped) {
+          row.savedMapped = row.mapped;
+          row.invalidOriginal = "";
+          row.mappedBy = row.mapped ? "刚刚由采购员确认" : "尚未确认";
+        }
+      });
+      feedback = { type: "success", title: "保存成功。", message: "只更新了本次修改的颜色；仍未匹配的颜色可以稍后继续处理。" };
+      render();
+      showToast("颜色映射已保存，未覆盖两端原始规格。第一个失败是原型预设的异常演示。", false);
+    }, 700);
+  }
+
+  function discardChanges() {
+    rows.forEach(row => { row.mapped = row.savedMapped; });
+    staleContext = false;
+    feedback = null;
+    render();
+    showToast("已放弃未保存的颜色修改。");
+  }
+
+  function requestNavigation(message, callback) {
+    if (!isDirty()) {
+      callback();
+      return;
+    }
+    pendingNavigation = callback;
+    document.querySelector("#leave-message").textContent = message;
+    leaveModal.hidden = false;
+    document.querySelector("#confirm-leave").focus();
+  }
+
+  function closeModal() {
+    leaveModal.hidden = true;
+    pendingNavigation = null;
+  }
+
+  function showToast(message, error = false) {
+    toast.textContent = message;
+    toast.className = error ? "toast error" : "toast";
+    toast.hidden = false;
+    window.clearTimeout(showToast.timer);
+    showToast.timer = window.setTimeout(() => { toast.hidden = true; }, 3600);
+  }
+
+  workspace.addEventListener("change", event => {
+    const select = event.target.closest("[data-row-id]");
+    if (!select) return;
+    const row = rows.find(item => item.id === select.dataset.rowId);
+    if (!row) return;
+    row.mapped = select.value;
+    feedback = null;
+    render();
+  });
+
+  workspace.addEventListener("click", event => {
+    const clear = event.target.closest("[data-clear-id]");
+    if (!clear || clear.disabled) return;
+    const row = rows.find(item => item.id === clear.dataset.clearId);
+    if (!row) return;
+    row.mapped = "";
+    feedback = null;
+    render();
+  });
+
+  mappingFilter.addEventListener("change", render);
+
+  productSelect.addEventListener("change", event => {
+    const next = event.target.value;
+    event.target.value = currentProduct;
+    requestNavigation("切换商品会丢失本次尚未保存的颜色选择。你可以继续编辑，或放弃修改后切换。", () => {
+      rows = initialRows();
+      staleContext = false;
+      feedback = null;
+      currentProduct = next;
+      productSelect.value = next;
+      mappingFilter.value = "all";
+      render();
+    });
+  });
+
+  refreshButton.addEventListener("click", refreshSpecs);
+  saveButton.addEventListener("click", saveMappings);
+  discardButton.addEventListener("click", discardChanges);
+
+  document.querySelector("#back-button").addEventListener("click", () => {
+    requestNavigation("返回蝦皮数据会丢失本次尚未保存的颜色选择。你可以继续编辑，或放弃修改后返回。", () => showToast("原型：返回蝦皮数据列表。"));
+  });
+
+  document.querySelectorAll(".nav a, .nav-button").forEach(control => {
+    control.addEventListener("click", event => {
+      event.preventDefault();
+      if (control.classList.contains("active")) return;
+      requestNavigation("离开当前页面会丢失本次尚未保存的颜色选择。", () => showToast("这是独立原型，其他页面没有接入。"));
+    });
+  });
+
+  document.querySelectorAll("[data-close-modal]").forEach(button => button.addEventListener("click", closeModal));
+
+  let backdropPointerStarted = false;
+  leaveModal.addEventListener("pointerdown", event => { backdropPointerStarted = event.target === leaveModal; });
+  leaveModal.addEventListener("click", event => {
+    if (event.target === leaveModal && backdropPointerStarted) closeModal();
+    backdropPointerStarted = false;
+  });
+
+  document.querySelector("#confirm-leave").addEventListener("click", () => {
+    const action = pendingNavigation;
+    rows.forEach(row => { row.mapped = row.savedMapped; });
+    staleContext = false;
+    leaveModal.hidden = true;
+    pendingNavigation = null;
+    if (action) action();
+  });
+
+  document.addEventListener("keydown", event => {
+    if (event.key === "Escape" && !leaveModal.hidden) closeModal();
+  });
+
+  render();
+})();
+</script>
+</body>
+</html>
