tt-help-cli-ycl 1.4.149 → 1.4.151

package/src/watch/public/app.js

@@ -182,7 +182,7 @@ function renderStats() {
   flashEl("statTotal", d.totalUsers);
   flashEl("statProcessing", d.processingUsers || 0);
   flashEl("statDone", d.processedUsers);
-  flashEl("statPending", d.pendingUsers);
+  flashEl("statPending", d.pendingUsers, { full: true });
   flashEl("statError", d.errorUsers);
   flashEl("statTarget", d.targetUsers, { full: true });
   flashEl("statPrecise", d.preciseMerchants, { full: true });
@@ -206,7 +206,8 @@ function renderStats() {
   const pendingTotal = document.getElementById("pendingStatTotal");
   if (pendingTotal) pendingTotal.textContent = formatStatNum(d.totalUsers);
   const pendingCount = document.getElementById("pendingStatPending");
-  if (pendingCount) pendingCount.textContent = formatStatNum(d.pendingUsers);
+  if (pendingCount)
+    pendingCount.textContent = formatStatNum(d.pendingUsers, { full: true });
   const pendingUserUpdate = document.getElementById(
     "pendingStatUserUpdateTasks",
   );
@@ -222,7 +223,9 @@ function renderStats() {
     userUpdateTotal.textContent = formatStatNum(d.totalUsers);
   const userUpdatePending = document.getElementById("userUpdateStatPending");
   if (userUpdatePending)
-    userUpdatePending.textContent = formatStatNum(d.pendingUsers);
+    userUpdatePending.textContent = formatStatNum(d.pendingUsers, {
+      full: true,
+    });
   const userUpdateTasks = document.getElementById(
     "userUpdateStatUserUpdateTasks",
   );
@@ -238,7 +241,9 @@ function renderStats() {
     rawPageRawJobs.textContent = formatStatNum(d.rawJobs || 0);
   const rawPagePending = document.getElementById("rawPageStatPending");
   if (rawPagePending)
-    rawPagePending.textContent = formatStatNum(d.pendingUsers || 0);
+    rawPagePending.textContent = formatStatNum(d.pendingUsers || 0, {
+      full: true,
+    });
   const rawPageUserUpdate = document.getElementById(
     "rawPageStatUserUpdateTasks",
   );
@@ -247,11 +252,11 @@ function renderStats() {
   document.getElementById("lastUpdate").textContent =
     "更新于 " + new Date().toLocaleTimeString();
   document.getElementById("fileMeta").textContent =
-    formatStatNum(d.processingUsers || 0) +
+    formatStatNum(d.processingUsers || 0, { full: true }) +
     " 处理中, " +
-    formatStatNum(d.totalUsers) +
+    formatStatNum(d.totalUsers, { full: true }) +
     " 个用户, 待处理 " +
-    formatStatNum(d.pendingUsers || 0);
+    formatStatNum(d.pendingUsers || 0, { full: true });
 
   renderCountryChart(d.countryStats);
   renderSourceChart(d.sourceStats);
@@ -700,6 +705,8 @@ const DEFAULT_LOCATION_OPTIONS = [
   "PT",
   "TH",
   "US",
+  "MY",
+  "VN",
 ];
 let locationOptions = [...DEFAULT_LOCATION_OPTIONS];
 
@@ -989,7 +996,10 @@ function escapeJsString(str) {
 }
 
 document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape") closeAddModal();
+  if (e.key === "Escape") {
+    closeAddModal();
+    closeSkuModal();
+  }
 });
 
 document.getElementById("userTable").addEventListener("click", (e) => {
@@ -1299,8 +1309,12 @@ function handleRoute() {
     showPrecisePage();
   } else if (hash === "#tags") {
     showTagsPage();
-  } else if (hash === "#settings") {
+  } else if (hash === "#settings" || hash.startsWith("#settings/")) {
     showSettingsPage();
+    const sub = hash.startsWith("#settings/")
+      ? hash.slice("#settings/".length)
+      : "";
+    switchSettingsPanel(sub || "llm", false);
   } else if (hash === "#watchdog") {
     showWatchdogPage();
   } else {
@@ -1437,6 +1451,24 @@ function showSettingsPage() {
   loadTargetLocations();
 }
 
+// 设置页左侧分类切换：panel 对应 settings-nav-item 的 data-panel 与 settingsPanel-<panel> 容器
+function switchSettingsPanel(panel, updateHash = true) {
+  document
+    .querySelectorAll("#settingsNav .settings-nav-item")
+    .forEach((btn) =>
+      btn.classList.toggle("active", btn.dataset.panel === panel),
+    );
+  document
+    .querySelectorAll(".settings-panel")
+    .forEach((el) =>
+      el.classList.toggle("active", el.id === "settingsPanel-" + panel),
+    );
+  if (updateHash) {
+    const target = panel === "llm" ? "#settings" : "#settings/" + panel;
+    if (window.location.hash !== target) window.location.hash = target;
+  }
+}
+
 // ========== 目标国家配置（通用 app-config，落盘 ~/.tt-help-config.json） ==========
 
 const AVAILABLE_COUNTRIES = [
@@ -1455,6 +1487,8 @@ const AVAILABLE_COUNTRIES = [
   "PT",
   "TH",
   "US",
+  "MY",
+  "VN",
   "GB",
   "SE",
   "NO",
@@ -1476,6 +1510,11 @@ const AVAILABLE_COUNTRIES = [
   "CO",
 ];
 
+// ========== 目标国家配置（宫格 + 拖拽排序，位置即领取优先级） ==========
+
+let _targetLocations = []; // 顺序即领取优先级，拖拽/增删后需点保存才落盘
+let _targetLocationsSaved = []; // 最近一次加载/保存的快照，用于脏状态提示
+
 function normalizeCountryInput(str) {
   return [
     ...new Set(
@@ -1487,20 +1526,39 @@ function normalizeCountryInput(str) {
   ];
 }
 
+/** 两位国家代码 → 国旗 emoji */
+function countryFlag(code) {
+  if (!/^[A-Za-z]{2}$/.test(code)) return "🏳️";
+  return String.fromCodePoint(
+    ...[...code.toUpperCase()].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65),
+  );
+}
+
+function targetLocationsDirty() {
+  return _targetLocations.join(",") !== _targetLocationsSaved.join(",");
+}
+
+function updateTargetLocationsStatus() {
+  const status = document.getElementById("targetLocationsStatus");
+  if (!status) return;
+  if (targetLocationsDirty()) {
+    status.textContent = `⛔ 有未保存的修改（当前 ${_targetLocations.length} 国，顺序: ${_targetLocations.join(" → ")}），点“保存目标国家”生效`;
+    status.className = "settings-status warn";
+  } else {
+    status.textContent = `✅ 已生效：${_targetLocations.length} 国，位置即领取优先级（越靠前越先领）`;
+    status.className = "settings-status ok";
+  }
+}
+
 async function loadTargetLocations() {
-  const input = document.getElementById("targetLocationsInput");
   const status = document.getElementById("targetLocationsStatus");
-  if (!input) return;
   try {
     const res = await fetch("/api/settings/target-locations");
     const data = await res.json();
-    const locations = data.locations || [];
-    input.value = locations.join(",");
-    renderTargetCountryGrid(locations);
-    if (status) {
-      status.textContent = `当前 ${locations.length} 个国家: ${locations.join(", ")}`;
-      status.className = "settings-status ok";
-    }
+    _targetLocations = (data.locations || []).map(String);
+    _targetLocationsSaved = [..._targetLocations];
+    renderTargetLocationsGrid();
+    updateTargetLocationsStatus();
   } catch (e) {
     console.error("loadTargetLocations error:", e);
     if (status) {
@@ -1510,47 +1568,151 @@ async function loadTargetLocations() {
   }
 }
 
-function renderTargetCountryGrid(selected) {
-  const grid = document.getElementById("targetCountryGrid");
+function renderTargetLocationsGrid() {
+  const grid = document.getElementById("targetLocationsGrid");
   if (!grid) return;
-  const selectedSet = new Set(selected || []);
-  grid.innerHTML = AVAILABLE_COUNTRIES.map(
-    (loc) =>
-      `<button type="button" class="loc-option ${selectedSet.has(loc) ? "active" : ""}" onclick="toggleTargetCountry('${loc}')">${loc}</button>`,
-  ).join("");
+  const chips = _targetLocations
+    .map(
+      (loc, i) => `
+      <div class="loc-chip" draggable="true" data-loc="${loc}" data-idx="${i}" title="拖动排序（位置即优先级）">
+        <span class="loc-chip-idx">${i + 1}</span>
+        <span class="loc-chip-flag">${countryFlag(loc)}</span>
+        <span class="loc-chip-code">${loc}</span>
+        <button type="button" class="loc-chip-del" onclick="removeTargetLocation('${loc}')" title="移除 ${loc}">×</button>
+      </div>`,
+    )
+    .join("");
+  grid.innerHTML =
+    chips +
+    `<button type="button" class="loc-chip loc-chip-add" onclick="toggleCountryPicker()" title="添加国家">＋</button>`;
+  bindLocChipDrag(grid);
+  renderCountryPicker();
+}
+
+// ---- 拖拽排序（HTML5 DnD） ----
+let _dragLoc = null;
+
+function bindLocChipDrag(grid) {
+  grid.querySelectorAll(".loc-chip[draggable]").forEach((chip) => {
+    chip.addEventListener("dragstart", (e) => {
+      _dragLoc = chip.dataset.loc;
+      chip.classList.add("dragging");
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", _dragLoc);
+    });
+    chip.addEventListener("dragend", () => {
+      _dragLoc = null;
+      chip.classList.remove("dragging");
+      grid
+        .querySelectorAll(".drop-before,.drop-after")
+        .forEach((el) => el.classList.remove("drop-before", "drop-after"));
+    });
+    chip.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (_dragLoc == null || chip.dataset.loc === _dragLoc) return;
+      const rect = chip.getBoundingClientRect();
+      const before = e.clientX < rect.left + rect.width / 2;
+      chip.classList.toggle("drop-before", before);
+      chip.classList.toggle("drop-after", !before);
+    });
+    chip.addEventListener("dragleave", () => {
+      chip.classList.remove("drop-before", "drop-after");
+    });
+    chip.addEventListener("drop", (e) => {
+      e.preventDefault();
+      if (_dragLoc == null || chip.dataset.loc === _dragLoc) return;
+      const rect = chip.getBoundingClientRect();
+      const before = e.clientX < rect.left + rect.width / 2;
+      moveTargetLocation(_dragLoc, Number(chip.dataset.idx) + (before ? 0 : 1));
+    });
+  });
+}
+
+/** 把 fromLoc 移动到目标插入位（insertAt 为移除前语义下的目标下标） */
+function moveTargetLocation(fromLoc, insertAt) {
+  const fromIdx = _targetLocations.indexOf(fromLoc);
+  if (fromIdx === -1) return;
+  _targetLocations.splice(fromIdx, 1);
+  const target = Math.max(0, Math.min(insertAt, _targetLocations.length));
+  _targetLocations.splice(target, 0, fromLoc);
+  renderTargetLocationsGrid();
+  updateTargetLocationsStatus();
+}
+
+// ---- 添加 / 删除 ----
+function removeTargetLocation(loc) {
+  _targetLocations = _targetLocations.filter((l) => l !== loc);
+  renderTargetLocationsGrid();
+  updateTargetLocationsStatus();
+}
+
+function addTargetLocation(locRaw) {
+  const loc = String(locRaw || "")
+    .trim()
+    .toUpperCase();
+  if (!/^[A-Z]{2}$/.test(loc)) return false;
+  if (_targetLocations.includes(loc)) return false;
+  _targetLocations.push(loc); // 新增排最后（优先级最低），可拖动调整
+  renderTargetLocationsGrid();
+  updateTargetLocationsStatus();
+  return true;
+}
+
+// ---- 添加面板（＋展开） ----
+function toggleCountryPicker() {
+  const picker = document.getElementById("countryPicker");
+  if (!picker) return;
+  picker.style.display = picker.style.display === "none" ? "block" : "none";
+  renderCountryPicker();
+}
+
+function renderCountryPicker() {
+  const picker = document.getElementById("countryPicker");
+  if (!picker || picker.style.display === "none") return;
+  const selected = new Set(_targetLocations);
+  const grid = document.getElementById("countryPickerGrid");
+  if (grid) {
+    grid.innerHTML = AVAILABLE_COUNTRIES.filter((loc) => !selected.has(loc))
+      .map(
+        (loc) =>
+          `<button type="button" class="loc-option" onclick="addTargetLocation('${loc}')">${countryFlag(loc)} ${loc}</button>`,
+      )
+      .join("");
+  }
 }
 
-function toggleTargetCountry(loc) {
-  const input = document.getElementById("targetLocationsInput");
+function addCustomCountry() {
+  const input = document.getElementById("customCountryInput");
   if (!input) return;
-  let current = normalizeCountryInput(input.value);
-  if (current.includes(loc)) {
-    current = current.filter((l) => l !== loc);
+  const ok = addTargetLocation(input.value);
+  if (ok) {
+    input.value = "";
+    input.focus();
   } else {
-    current.push(loc);
+    input.placeholder = "无效或已存在（两位大写字母）";
+    setTimeout(() => (input.placeholder = "其他代码，如 GB"), 2000);
   }
-  input.value = current.join(",");
-  renderTargetCountryGrid(current);
+  renderCountryPicker();
 }
 
+// ---- 保存 / 恢复默认 ----
 async function saveTargetLocations() {
-  const input = document.getElementById("targetLocationsInput");
   const status = document.getElementById("targetLocationsStatus");
-  if (!input) return;
-  const locations = normalizeCountryInput(input.value);
+  if (!status) return;
   status.textContent = "保存中...";
   status.className = "settings-status loading";
   try {
     const res = await fetch("/api/settings/target-locations", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ locations }),
+      body: JSON.stringify({ locations: _targetLocations }),
     });
     const data = await res.json();
-    input.value = (data.locations || []).join(",");
-    renderTargetCountryGrid(data.locations || []);
-    status.textContent = `已保存 ${(data.locations || []).length} 个国家`;
-    status.className = "settings-status ok";
+    _targetLocations = (data.locations || []).map(String);
+    _targetLocationsSaved = [..._targetLocations];
+    renderTargetLocationsGrid();
+    updateTargetLocationsStatus();
   } catch (e) {
     console.error("saveTargetLocations error:", e);
     status.textContent = "保存失败";
@@ -1571,13 +1733,10 @@ async function resetTargetLocations() {
       body: JSON.stringify({ locations: [] }),
     });
     const data = await res.json();
-    const input = document.getElementById("targetLocationsInput");
-    if (input) input.value = (data.locations || []).join(",");
-    renderTargetCountryGrid(data.locations || []);
-    if (status) {
-      status.textContent = `已恢复默认 ${(data.locations || []).length} 个国家`;
-      status.className = "settings-status ok";
-    }
+    _targetLocations = (data.locations || []).map(String);
+    _targetLocationsSaved = [..._targetLocations];
+    renderTargetLocationsGrid();
+    updateTargetLocationsStatus();
   } catch (e) {
     console.error("resetTargetLocations error:", e);
     if (status) {
@@ -1994,7 +2153,7 @@ function renderPreciseTable() {
   if (!el) return;
   if (!currentPreciseUsers.length) {
     el.innerHTML =
-      '<tr><td colspan="12" style="text-align:center;color:#666;padding:20px">暂无精准商家</td></tr>';
+      '<tr><td colspan="13" style="text-align:center;color:#666;padding:20px">暂无精准商家</td></tr>';
     return;
   }
   el.innerHTML = currentPreciseUsers
@@ -2003,6 +2162,10 @@ function renderPreciseTable() {
       const ec = u.ecOver1k ?? 0;
       const maxEc = u.maxEcPlay ?? 0;
       const title = (u.productName || "").replace(/</g, "&lt;");
+      const skus = Array.isArray(u.productSkus) ? u.productSkus : [];
+      const skuCell = skus.length
+        ? `<span class="sku-cell" onclick="openSkuModal(${i})" title="点击查看 ${skus.length} 个 SKU 明细">📦 ${skus.length} · 库${formatNum(u.skuTotalStock || 0)}</span>`
+        : '<span style="color:#555">-</span>';
       return `<tr>
         <td style="text-align:right;color:#666">${i + 1}</td>
         <td><a href="https://www.tiktok.com/@${encodeURIComponent(u.uniqueId)}" target="_blank">@${escapeHtml(u.uniqueId)}</a></td>
@@ -2013,6 +2176,7 @@ function renderPreciseTable() {
         <td style="color:#22c55e">${formatNum(sold)}</td>
         <td style="color:#f87171">${u.productReviewCount ?? 0}</td>
         <td>${u.productRating != null ? u.productRating : "-"}</td>
+        <td>${skuCell}</td>
         <td>${ec}</td>
         <td>${formatNum(maxEc)}</td>
         <td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${title}">${title || "-"}</td>
@@ -2021,6 +2185,72 @@ function renderPreciseTable() {
     .join("");
 }
 
+// ── SKU 明细弹窗（精准商家页）──
+function openSkuModal(idx) {
+  const u = currentPreciseUsers[idx];
+  if (!u) return;
+  const skus = Array.isArray(u.productSkus) ? u.productSkus : [];
+  if (!skus.length) return;
+  let overlay = document.getElementById("skuModalOverlay");
+  if (overlay) overlay.remove();
+  overlay = document.createElement("div");
+  overlay.id = "skuModalOverlay";
+  overlay.className = "modal-overlay";
+  const totalStock = skus.reduce((s, x) => s + (x.stock || 0), 0);
+  const rows = skus
+    .map((s) => {
+      const stock = s.stock ?? null;
+      const stockCls =
+        stock === null
+          ? ""
+          : stock === 0 || s.stockStatus === 2
+            ? "sku-oos"
+            : stock <= 20
+              ? "sku-low"
+              : "sku-ok";
+      const stockText =
+        stock === null
+          ? "-"
+          : stock === 0 || s.stockStatus === 2
+            ? "售罄"
+            : formatNum(stock);
+      return `<tr>
+        <td class="sku-spec" title="${escapeAttr(s.specs || "")}">${escapeHtml(s.specs || "-")}</td>
+        <td class="sku-id" title="${escapeAttr(s.skuId || "")}">${escapeHtml(String(s.skuId || "-").slice(-6))}</td>
+        <td class="${stockCls}">${stockText}</td>
+        <td>${s.stockStatus ?? "-"}</td>
+      </tr>`;
+    })
+    .join("");
+  overlay.innerHTML = `
+    <div class="modal sku-modal">
+      <h3>📦 @${escapeHtml(u.uniqueId)} 的 SKU（${skus.length} 个）</h3>
+      <div class="sku-modal-meta">
+        ${escapeHtml(u.productName || "") ? `<div class="sku-modal-name">${escapeHtml(u.productName)}</div>` : ""}
+        <div>总库存 <b>${formatNum(totalStock)}</b> · 销量 <b style="color:#22c55e">${formatNum(u.productSoldCount ?? 0)}</b> · 评分 <b>${u.productRating ?? "-"}</b></div>
+        ${u.topVideoSeoUrl ? `<a href="${escapeAttr(u.topVideoSeoUrl)}" target="_blank" class="sku-modal-link">🛒 打开商品页</a>` : ""}
+      </div>
+      <div class="sku-table-wrap">
+        <table class="sku-table">
+          <thead><tr><th>规格</th><th>SKU尾号</th><th>库存</th><th>状态</th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+      <div class="btn-row" style="margin-top:14px">
+        <button class="btn-cancel" onclick="closeSkuModal()">关闭</button>
+      </div>
+    </div>`;
+  document.body.appendChild(overlay);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeSkuModal();
+  });
+}
+
+function closeSkuModal() {
+  const overlay = document.getElementById("skuModalOverlay");
+  if (overlay) overlay.remove();
+}
+
 function renderPreciseVideos() {
   const wrap = document.getElementById("preciseVideoWrap");
   if (!wrap) return;
@@ -2037,6 +2267,11 @@ function renderPreciseVideos() {
       const review = u.productReviewCount ?? 0;
       const rating = u.productRating != null ? u.productRating : "-";
       const userLink = `https://www.tiktok.com/@${encodeURIComponent(u.uniqueId)}`;
+      const skus = Array.isArray(u.productSkus) ? u.productSkus : [];
+      const idx = currentPreciseUsers.indexOf(u);
+      const skuBadge = skus.length
+        ? ` · <span class="sku-cell" onclick="event.stopPropagation();openSkuModal(${idx})" title="点击查看 ${skus.length} 个 SKU 明细">📦 SKU ${skus.length} · 库${formatNum(u.skuTotalStock || skus.reduce((s, x) => s + (x.stock || 0), 0))}</span>`
+        : "";
       const tiles = vids
         .reduce((acc, v) => {
           const play = v.playCount || 0;
@@ -2062,7 +2297,7 @@ function renderPreciseVideos() {
           <a class="pm-user" href="${userLink}" target="_blank">@${escapeHtml(u.uniqueId)}</a>
           <span class="pm-nick">${escapeHtml(u.nickname || "-")}</span>
           <span class="pm-country">${u.locationCreated || "-"}</span>
-          <span class="pm-stats">粉丝 ${formatNum(u.followerCount || 0)} · 视频 ${u.videoCount || 0} · 销量 ${formatNum(sold)} · 评论 ${review} · 评分 ${rating} · EC视频 ${vids.length}</span>
+          <span class="pm-stats">粉丝 ${formatNum(u.followerCount || 0)} · 视频 ${u.videoCount || 0} · 销量 ${formatNum(sold)} · 评论 ${review} · 评分 ${rating} · EC视频 ${vids.length}${skuBadge}</span>
         </div>
         ${tiles ? `<div class="precise-video-grid">${tiles}</div>` : '<div style="color:#666;font-size:12px;padding:6px 0">该商家暂无 EC 视频数据</div>'}
       </div>`;

package/src/watch/public/index.html

@@ -464,6 +464,7 @@
               <th>销量</th>
               <th>评论</th>
               <th>评分</th>
+              <th>SKU</th>
               <th>EC超1k视频数</th>
               <th>最高EC播放</th>
               <th>商品</th>
@@ -555,54 +556,73 @@
         <div class="label">← 返回主页面</div>
       </div>
     </div>
-    <div class="settings-card">
-      <h3>⚙️ LLM 模型配置</h3>
-      <p class="settings-hint">切换后立即生效，无需重启服务。配置保存在数据库中。</p>
-      <div class="settings-form">
-        <div class="settings-field">
-          <label>服务商</label>
-          <select id="settingsProvider" onchange="onProviderChange()"></select>
-        </div>
-        <div class="settings-field">
-          <label>模型</label>
-          <select id="settingsModel"></select>
-        </div>
-        <div class="settings-field">
-          <label>API 地址</label>
-          <input type="text" id="settingsUrl" placeholder="https://..." readonly>
-          <span class="settings-note">选服务商后自动填入，也可手动修改</span>
-        </div>
-        <div class="settings-field">
-          <label>API Key</label>
-          <div class="settings-key-row">
-            <input type="password" id="settingsApiKey" placeholder="sk-...">
-            <button id="settingsToggleKey" onclick="toggleApiKeyVisibility()" title="显示/隐藏">👁</button>
+    <div class="settings-layout">
+      <div class="settings-nav" id="settingsNav">
+        <button type="button" class="settings-nav-item active" data-panel="llm" onclick="switchSettingsPanel('llm')">⚙️
+          LLM 模型</button>
+        <button type="button" class="settings-nav-item" data-panel="countries"
+          onclick="switchSettingsPanel('countries')">🎯 目标国家</button>
+      </div>
+      <div class="settings-panels">
+        <div class="settings-panel active" id="settingsPanel-llm">
+          <div class="settings-card">
+            <h3>⚙️ LLM 模型配置</h3>
+            <p class="settings-hint">切换后立即生效，无需重启服务。配置保存在数据库中。</p>
+            <div class="settings-form">
+              <div class="settings-field">
+                <label>服务商</label>
+                <select id="settingsProvider" onchange="onProviderChange()"></select>
+              </div>
+              <div class="settings-field">
+                <label>模型</label>
+                <select id="settingsModel"></select>
+              </div>
+              <div class="settings-field">
+                <label>API 地址</label>
+                <input type="text" id="settingsUrl" placeholder="https://..." readonly>
+                <span class="settings-note">选服务商后自动填入，也可手动修改</span>
+              </div>
+              <div class="settings-field">
+                <label>API Key</label>
+                <div class="settings-key-row">
+                  <input type="password" id="settingsApiKey" placeholder="sk-...">
+                  <button id="settingsToggleKey" onclick="toggleApiKeyVisibility()" title="显示/隐藏">👁</button>
+                </div>
+                <span class="settings-note" id="settingsKeyHint"></span>
+              </div>
+              <div class="settings-status" id="settingsStatus"></div>
+              <div class="btn-row">
+                <button class="btn-submit" onclick="saveLlmConfig()">保存配置</button>
+              </div>
+            </div>
           </div>
-          <span class="settings-note" id="settingsKeyHint"></span>
-        </div>
-        <div class="settings-status" id="settingsStatus"></div>
-        <div class="btn-row">
-          <button class="btn-submit" onclick="saveLlmConfig()">保存配置</button>
         </div>
-      </div>
-    </div>
-    <div class="settings-card">
-      <h3>🎯 目标国家</h3>
-      <p class="settings-hint">设置采集的目标国家列表，保存后写入通用配置文件（~/.tt-help-config.json）。当前仅保存配置，后续接入采集流程后生效。</p>
-      <div class="settings-form">
-        <div class="settings-field">
-          <label>目标国家（英文国家代码，逗号分隔，如 CZ,GR,TH）</label>
-          <input type="text" id="targetLocationsInput" placeholder="CZ,GR,HU,PT,ES,PL,NL,BE,DE,FR,IT,IE,AT,TH,US">
-          <span class="settings-note">可手动输入，或点击下方国家快速选择。</span>
-        </div>
-        <div class="settings-field">
-          <label>快速选择</label>
-          <div class="loc-grid" id="targetCountryGrid"></div>
-        </div>
-        <div class="settings-status" id="targetLocationsStatus"></div>
-        <div class="btn-row">
-          <button class="btn-submit" onclick="saveTargetLocations()">保存目标国家</button>
-          <button class="btn-cancel" onclick="resetTargetLocations()">恢复默认</button>
+        <div class="settings-panel" id="settingsPanel-countries">
+          <div class="settings-card">
+            <h3>🎯 目标国家</h3>
+            <p class="settings-hint">设置采集的目标国家列表及领取优先级，保存后写入通用配置文件（~/.tt-help-config.json），立即生效。列表顺序即任务领取优先级：越靠前越先领取。
+            </p>
+            <div class="settings-form">
+              <div class="settings-field">
+                <label>目标国家（拖动卡片排序，位置即领取优先级：越靠前越先领取）</label>
+                <div class="loc-chips" id="targetLocationsGrid"></div>
+                <div class="country-picker" id="countryPicker" style="display:none">
+                  <div class="country-picker-title">选择要添加的国家（新加的排最后，可拖动调整优先级）</div>
+                  <div class="loc-grid" id="countryPickerGrid"></div>
+                  <div class="custom-loc-row">
+                    <input type="text" id="customCountryInput" class="custom-loc-input" placeholder="其他代码，如 GB"
+                      maxlength="2" onkeydown="if(event.key==='Enter')addCustomCountry()">
+                    <button type="button" class="btn-submit" onclick="addCustomCountry()">添加</button>
+                  </div>
+                </div>
+              </div>
+              <div class="settings-status" id="targetLocationsStatus"></div>
+              <div class="btn-row">
+                <button class="btn-submit" onclick="saveTargetLocations()">保存目标国家</button>
+                <button class="btn-cancel" onclick="resetTargetLocations()">恢复默认</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>