tt-help-cli-ycl 1.4.21 → 1.4.23

package/src/watch/llm-scoring.js

@@ -42,104 +42,144 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
 `;
 
   try {
-    const apiKey = process.env.APIKEY || "";
-    const response = await undiciFetch(
-      "http://82.156.52.214:18000/v1/chat/completions",
-      {
+    const { getLlmUrl, getLlmApiKey, isAutoMode, getAutoPool } =
+      await import("./llm-config.js");
+    const llmUrl = getLlmUrl();
+    const apiKey = getLlmApiKey();
+
+    // auto 模式：依次尝试候选池中的模型
+    const models = isAutoMode() ? getAutoPool() : [null];
+
+    let lastError = "";
+    for (let i = 0; i < models.length; i++) {
+      const llmModel =
+        models[i] !== null
+          ? models[i]
+          : (await import("./llm-config.js")).getLlmModel();
+
+      const response = await undiciFetch(llmUrl, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${apiKey}`,
         },
         body: JSON.stringify({
-          model: "zc-fast",
+          model: llmModel,
           messages: [{ role: "user", content: prompt }],
           max_tokens: 512,
           temperature: 0.1,
+          enable_thinking: false,
         }),
-      },
-    );
+      });
+
+      const result = await response.json().catch(() => null);
+      const content = result?.choices?.[0]?.message?.content || "";
+
+      if (!content) {
+        const errMsg = result?.error?.message || `HTTP ${response.status}`;
+        lastError = errMsg;
+        console.error(
+          `[scoreJobLocation] ${llmModel} 失败: ${errMsg}，尝试下一个`,
+        );
+        continue;
+      }
+
+      if (i > 0) {
+        console.error(`[scoreJobLocation] ✅ auto 切换成功: ${llmModel}`);
+      }
+
+      let parsed = null;
 
-    const result = await response.json();
-    const content = result.choices?.[0]?.message?.content || "";
-
-    let parsed = null;
-
-    // 尝试 1: 直接解析
-    try {
-      parsed = JSON.parse(content);
-    } catch {
-      // 尝试 2: 提取 {} 包裹的内容
-      const match = content.match(/\{[\s\S]*\}/);
-      if (match) {
-        try {
-          parsed = JSON.parse(match[0]);
-        } catch {
-          // 尝试 3: 清理常见问题后解析
-          const cleaned = match[0]
-            .replace(/"/g, '"')
-            .replace(/\s+/g, " ")
-            .trim();
+      // 尝试 1: 直接解析
+      try {
+        parsed = JSON.parse(content);
+      } catch {
+        // 尝试 2: 提取 {} 包裹的内容
+        const match = content.match(/\{[\s\S]*\}/);
+        if (match) {
           try {
-            parsed = JSON.parse(cleaned);
+            parsed = JSON.parse(match[0]);
           } catch {
-            // 尝试 4: 从文本中提取 score 和 reason
-            const scoreMatch = content.match(/"?score"?\s*:\s*(\d+)/i);
-            if (scoreMatch) {
-              let reason = "解析降级";
-              const reasonKeyPos = content.search(/"?reason"?\s*:\s*"/i);
-              if (reasonKeyPos !== -1) {
-                const afterKey = content.substring(reasonKeyPos);
-                const colonPos = afterKey.indexOf(":");
-                const valueStart = afterKey.indexOf('"', colonPos + 1) + 1;
-                const rawValue = afterKey.substring(valueStart);
-                const lastBrace = content.lastIndexOf("}");
-                const reasonEnd = lastBrace - reasonKeyPos - valueStart;
-                if (reasonEnd > 0) {
-                  reason = rawValue.substring(0, reasonEnd).trim();
-                  if (reason.startsWith('"')) reason = reason.substring(1);
-                  if (reason.endsWith('"'))
-                    reason = reason.substring(0, reason.length - 1);
+            // 尝试 3: 清理常见问题后解析
+            const cleaned = match[0]
+              .replace(/"/g, '"')
+              .replace(/\s+/g, " ")
+              .trim();
+            try {
+              parsed = JSON.parse(cleaned);
+            } catch {
+              // 尝试 4: 从文本中提取 score 和 reason
+              const scoreMatch = content.match(/"?score"?\s*:\s*(\d+)/i);
+              if (scoreMatch) {
+                let reason = "解析降级";
+                const reasonKeyPos = content.search(/"?reason"?\s*:\s*"/i);
+                if (reasonKeyPos !== -1) {
+                  const afterKey = content.substring(reasonKeyPos);
+                  const colonPos = afterKey.indexOf(":");
+                  const valueStart = afterKey.indexOf('"', colonPos + 1) + 1;
+                  const rawValue = afterKey.substring(valueStart);
+                  const lastBrace = content.lastIndexOf("}");
+                  const reasonEnd = lastBrace - reasonKeyPos - valueStart;
+                  if (reasonEnd > 0) {
+                    reason = rawValue.substring(0, reasonEnd).trim();
+                    if (reason.startsWith('"')) reason = reason.substring(1);
+                    if (reason.endsWith('"'))
+                      reason = reason.substring(0, reason.length - 1);
+                  }
                 }
+                parsed = { score: parseInt(scoreMatch[1]) || 50, reason };
               }
-              parsed = { score: parseInt(scoreMatch[1]) || 50, reason };
             }
           }
         }
+
+        // 尝试 5: 更宽松的正则提取
+        if (!parsed) {
+          const scoreMatch = content.match(/"score"\s*:\s*(\d+)/);
+          const reasonMatch = content.match(/"reason"\s*:\s*"([^"]*)"/);
+          if (scoreMatch) {
+            parsed = {
+              score: parseInt(scoreMatch[1]) || 50,
+              reason: reasonMatch ? reasonMatch[1] : "解析降级 - 宽松模式",
+            };
+          }
+        }
       }
 
-      // 尝试 5: 更宽松的正则提取
-      if (!parsed) {
-        const scoreMatch = content.match(/"score"\s*:\s*(\d+)/);
-        const reasonMatch = content.match(/"reason"\s*:\s*"([^"]*)"/);
-        if (scoreMatch) {
-          parsed = {
-            score: parseInt(scoreMatch[1]) || 50,
-            reason: reasonMatch ? reasonMatch[1] : "解析降级 - 宽松模式",
-          };
+      if (parsed && typeof parsed.score === "number") {
+        if (isAutoMode()) {
+          const { recordAutoSuccess } = await import("./llm-config.js");
+          recordAutoSuccess(llmModel);
         }
+        return {
+          uniqueId: job.unique_id,
+          score: Math.max(0, Math.min(100, parsed.score)),
+          reason: parsed.reason || "",
+        };
       }
-    }
 
-    if (parsed && typeof parsed.score === "number") {
+      console.error(
+        `[scoreJobLocation] JSON 解析失败 (${job.unique_id}): ${content.substring(0, 100)}`,
+      );
       return {
         uniqueId: job.unique_id,
-        score: Math.max(0, Math.min(100, parsed.score)),
-        reason: parsed.reason || "",
+        score: 50,
+        reason: "LLM 响应解析失败，使用默认分",
       };
-    }
+    } // end for
 
+    // 全部模型均失败
     console.error(
-      `[scoreJobLocation] JSON 解析失败 (${job.unique_id}): ${content.substring(0, 100)}`,
+      `[scoreJobLocation] ❌ ${models.length} 个模型均失败 (${job.unique_id}): ${lastError}`,
     );
     return {
       uniqueId: job.unique_id,
       score: 50,
-      reason: "LLM 响应解析失败，使用默认分",
+      reason: `全部模型失败: ${lastError}`,
     };
   } catch (e) {
     console.error(
-      `[scoreJobLocation] LLM 调用失败 (${job.unique_id}): ${e.message}`,
+      `[scoreJobLocation] LLM 调用异常 (${job.unique_id}): ${e.message}`,
     );
     return {
       uniqueId: job.unique_id,

package/src/watch/public/app.js

@@ -1245,6 +1245,8 @@ function handleRoute() {
     showTargetPage();
   } else if (hash === "#tags") {
     showTagsPage();
+  } else if (hash === "#settings") {
+    showSettingsPage();
   } else {
     showMainPage();
   }
@@ -1273,6 +1275,7 @@ function showPendingPage() {
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.remove("active");
   document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
   fetchPendingByCountry();
   fetchAttachStuckByCountry();
 }
@@ -1284,6 +1287,7 @@ function showUserUpdatePage() {
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.remove("active");
   document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
   fetchUserUpdateByCountry();
   fetchAttachStuckByCountry();
 }
@@ -1302,6 +1306,7 @@ function showRawPage() {
   document.getElementById("rawPage").classList.add("active");
   document.getElementById("targetPage").classList.remove("active");
   document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
   fetchRawByCountry();
   fetchRawJobs();
 }
@@ -1313,6 +1318,7 @@ function showMainPage() {
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.remove("active");
   document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
 }
 
 function navigateToTarget() {
@@ -1323,6 +1329,189 @@ function navigateToTags() {
   window.location.hash = "#tags";
 }
 
+function navigateToSettings() {
+  window.location.hash = "#settings";
+}
+
+// ========== LLM 配置页面 ==========
+
+function hideAllPages() {
+  document.getElementById("mainPage").classList.add("hidden");
+  document.getElementById("pendingPage").classList.remove("active");
+  document.getElementById("userUpdatePage").classList.remove("active");
+  document.getElementById("rawPage").classList.remove("active");
+  document.getElementById("targetPage").classList.remove("active");
+  document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
+}
+
+function showSettingsPage() {
+  hideAllPages();
+  document.getElementById("settingsPage").classList.add("active");
+  fetchLlmConfig();
+}
+
+let _llmProvidersCache = null;
+
+async function fetchLlmConfig() {
+  try {
+    const res = await fetch("/api/llm-config");
+    const data = await res.json();
+    _llmProvidersCache = data.providers || [];
+
+    const providerSel = document.getElementById("settingsProvider");
+    const modelSel = document.getElementById("settingsModel");
+    const urlInput = document.getElementById("settingsUrl");
+    const keyInput = document.getElementById("settingsApiKey");
+    const keyHint = document.getElementById("settingsKeyHint");
+    const status = document.getElementById("settingsStatus");
+
+    // 渲染服务商下拉（只渲染一次）
+    if (providerSel && providerSel.options.length === 0) {
+      providerSel.innerHTML = _llmProvidersCache
+        .map(
+          (p) =>
+            `<option value="${p.id}" ${p.id === data.provider ? "selected" : ""}>${p.name}</option>`,
+        )
+        .join("");
+    } else if (providerSel) {
+      providerSel.value = data.provider;
+    }
+
+    // 根据当前 provider 渲染模型下拉
+    renderModelSelect(data.provider, data.model);
+
+    if (urlInput) urlInput.value = data.url || "";
+    if (keyInput) {
+      keyInput.value = data.hasApiKey ? data.apiKeyHint : "";
+    }
+    if (keyHint) {
+      keyHint.textContent = data.hasApiKey
+        ? "已配置"
+        : "未配置，请输入 API Key";
+      keyHint.style.color = data.hasApiKey ? "#4ade80" : "#f87171";
+    }
+    if (status) {
+      const provider = _llmProvidersCache.find((p) => p.id === data.provider);
+      status.textContent = `当前: ${provider?.name || data.provider} / ${data.model}`;
+      status.className = "settings-status ok";
+    }
+  } catch (e) {
+    console.error("fetchLlmConfig error:", e);
+  }
+}
+
+function renderModelSelect(providerId, selectedModel) {
+  const modelSel = document.getElementById("settingsModel");
+  if (!modelSel) return;
+  const provider = (_llmProvidersCache || []).find((p) => p.id === providerId);
+  const models = provider?.models || [];
+  modelSel.innerHTML = models
+    .map(
+      (m) =>
+        `<option value="${m.id}" ${m.id === selectedModel ? "selected" : ""}>${m.label}</option>`,
+    )
+    .join("");
+}
+
+// Provider 切换 → 更新 Model 列表 + URL
+function onProviderChange() {
+  const providerSel = document.getElementById("settingsProvider");
+  const providerId = providerSel?.value;
+  if (!providerId) return;
+
+  const provider = (_llmProvidersCache || []).find((p) => p.id === providerId);
+  if (!provider) return;
+
+  // 更新 URL
+  const urlInput = document.getElementById("settingsUrl");
+  if (urlInput) urlInput.value = provider.url;
+
+  // 更新模型列表（默认选第一个）
+  renderModelSelect(providerId, provider.models[0]?.id);
+}
+
+// 绑定事件
+(function initSettingsEvents() {
+  const providerSel = document.getElementById("settingsProvider");
+  if (providerSel) {
+    providerSel.addEventListener("change", onProviderChange);
+  }
+})();
+
+function toggleApiKeyVisibility() {
+  const input = document.getElementById("settingsApiKey");
+  const btn = document.getElementById("settingsToggleKey");
+  if (input.type === "password") {
+    input.type = "text";
+    btn.textContent = "🙈";
+  } else {
+    input.type = "password";
+    btn.textContent = "👁";
+  }
+}
+
+async function saveLlmConfig() {
+  const provider = document.getElementById("settingsProvider").value;
+  const model = document.getElementById("settingsModel").value;
+  const url = document.getElementById("settingsUrl").value;
+  const apiKeyInput = document.getElementById("settingsApiKey");
+  const status = document.getElementById("settingsStatus");
+
+  // 防止把提示字符串当 key 保存：若输入值含 "..." 且未被用户修改过，不发送
+  const rawKey = apiKeyInput.value.trim();
+  const isHint = rawKey.includes("...") && rawKey.length < 20;
+  const keyWasEdited = apiKeyInput.dataset.edited === "true";
+  let apiKey = undefined;
+  if (rawKey && !isHint) {
+    apiKey = rawKey;
+  } else if (rawKey && isHint && keyWasEdited) {
+    // 用户手动修改了（可能是输入了新 key），发送
+    apiKey = rawKey;
+  }
+  // 如果 isHint && !keyWasEdited → 不发送，保留服务端已有 key
+
+  status.textContent = "保存中...";
+  status.className = "settings-status loading";
+
+  try {
+    const body = { provider, model, url };
+    if (apiKey !== undefined) body.apiKey = apiKey;
+    const res = await fetch("/api/llm-config", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (data.hasApiKey) {
+      apiKeyInput.value = data.apiKeyHint;
+      apiKeyInput.dataset.edited = "false";
+      const keyHint = document.getElementById("settingsKeyHint");
+      if (keyHint) {
+        keyHint.textContent = "已配置";
+        keyHint.style.color = "#4ade80";
+      }
+    }
+    const p = (_llmProvidersCache || []).find((x) => x.id === data.provider);
+    status.textContent = `✅ 已保存: ${p?.name || data.provider} / ${data.model}`;
+    status.className = "settings-status ok";
+    _llmProvidersCache = data.providers || _llmProvidersCache;
+  } catch (e) {
+    status.textContent = "❌ 保存失败: " + e.message;
+    status.className = "settings-status error";
+  }
+}
+
+// 追踪 API Key 输入框是否被用户编辑过
+(function initKeyEditTracking() {
+  const input = document.getElementById("settingsApiKey");
+  if (input) {
+    input.addEventListener("input", () => {
+      input.dataset.edited = "true";
+    });
+  }
+})();
+
 // ========== 添加关键词弹窗 ==========
 
 function openAddTagModal() {
@@ -1483,6 +1672,7 @@ function showTagsPage() {
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.remove("active");
   document.getElementById("tagsPage").classList.add("active");
+  document.getElementById("settingsPage").classList.remove("active");
   showLoading("正在加载关键词...");
   Promise.all([loadTagStats(), loadTagsPage(), loadRefreshStats()]).finally(
     hideLoading,
@@ -1626,6 +1816,11 @@ async function loadTagsPage(append = false) {
     if (currentTagsFilter !== "all") url += `&status=${currentTagsFilter}`;
     if (country) url += `&country=${encodeURIComponent(country)}`;
 
+    const searchVal =
+      document.getElementById("tagsSearchInput")?.value.trim().toLowerCase() ||
+      "";
+    if (searchVal) url += `&search=${encodeURIComponent(searchVal)}`;
+
     const res = await fetch(url);
     const data = await res.json();
 
@@ -1652,14 +1847,6 @@ function renderTagsTable() {
   const moreHint = document.getElementById("tagsMoreHint");
   let display = [...currentTags];
 
-  // 搜索过滤（本地二次过滤）
-  const searchVal =
-    document.getElementById("tagsSearchInput")?.value.trim().toLowerCase() ||
-    "";
-  if (searchVal) {
-    display = display.filter((t) => t.tag.toLowerCase().includes(searchVal));
-  }
-
   // 本地排序
   if (currentTagsSort.key) {
     display.sort((a, b) => {
@@ -1957,6 +2144,7 @@ function showTargetPage() {
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.add("active");
   document.getElementById("tagsPage").classList.remove("active");
+  document.getElementById("settingsPage").classList.remove("active");
   showLoading("正在加载目标商家数据...");
   fetchTargetByCountry();
   fetchTargetOtherCountries();
@@ -2101,6 +2289,10 @@ async function loadTargetUsersPage(append = false, skipLoading = false) {
     if (currentTargetLocation)
       url += `&country=${encodeURIComponent(currentTargetLocation)}`;
     if (search) url += `&search=${encodeURIComponent(search)}`;
+    if (currentTargetSort.key) {
+      url += `&sort=${encodeURIComponent(currentTargetSort.key)}`;
+      url += `&sortOrder=${currentTargetSort.asc ? "asc" : "desc"}`;
+    }
 
     const res = await fetch(url);
     data = await res.json();
@@ -2141,9 +2333,9 @@ function renderTargetTable() {
   const el = document.getElementById("targetTable");
   const moreHint = document.getElementById("targetMoreHint");
 
-  // 应用本地排序
+  // 应用本地排序（topVideoPlayCount 由服务端排序，此处跳过）
   let displayUsers = currentTargetUsers;
-  if (currentTargetSort.key) {
+  if (currentTargetSort.key && currentTargetSort.key !== "topVideoPlayCount") {
     displayUsers = [...currentTargetUsers].sort((a, b) => {
       let va = a[currentTargetSort.key];
       let vb = b[currentTargetSort.key];
@@ -2190,16 +2382,47 @@ function renderTargetTable() {
         ? formatTime(u.latestVideoTime * 1000)
         : "-";
       const refreshTime = u.refreshTime ? formatTime(u.refreshTime) : "-";
-      const topPlayCount =
-        u.topVideoPlayCount != null && u.topVideoPlayCount >= 1000
-          ? formatNum(u.topVideoPlayCount)
-          : "-";
-      const adTag = u.topVideoIsAd
-        ? ' <span style="color:red">(AD)</span>'
-        : "";
-      const topPlayCountCell = u.topVideoHref
-        ? `<td data-label="最大播放量" style="font-size:11px;color:#888"><a href="${u.topVideoHref}" target="_blank" style="color:#3b82f6;text-decoration:none" title="点击查看视频">${topPlayCount}${adTag}</a></td>`
-        : `<td data-label="最大播放量" style="font-size:11px;color:#888">${topPlayCount}${adTag}</td>`;
+
+      // 解析 recentEcVideos JSON，获取所有高播放 EC 视频
+      let ecVideos = [];
+      try {
+        if (typeof u.recentEcVideos === "string") {
+          ecVideos = JSON.parse(u.recentEcVideos);
+        } else if (Array.isArray(u.recentEcVideos)) {
+          ecVideos = u.recentEcVideos;
+        }
+      } catch (e) {
+        ecVideos = [];
+      }
+
+      // 最大播放量单元格：列出所有 playCount >= 1000 的视频
+      const highPlayVideos = ecVideos.filter((v) => v.playCount >= 1000);
+      let topPlayCountCell;
+      if (highPlayVideos.length > 0) {
+        const videoLinks = highPlayVideos
+          .sort((a, b) => b.playCount - a.playCount)
+          .map((v) => {
+            const adTag = v.isAd ? ' <span style="color:red">(AD)</span>' : "";
+            return `<a href="${v.href}" target="_blank" style="color:#3b82f6;text-decoration:none;display:block;line-height:1.6" title="点击查看视频">${formatNum(v.playCount)}${adTag}</a>`;
+          })
+          .join("");
+        topPlayCountCell = `<td data-label="最大播放量" style="font-size:11px;color:#888">${videoLinks}</td>`;
+      } else {
+        topPlayCountCell = `<td data-label="最大播放量" style="font-size:11px;color:#888">-</td>`;
+      }
+
+      // 最近发布时间：仅当有 playCount >= 1000 的视频时才显示
+      let latestEcTime;
+      if (highPlayVideos.length > 0) {
+        const maxCreateTime = ecVideos.reduce(
+          (max, v) => (v.createTime > max ? v.createTime : max),
+          0,
+        );
+        if (maxCreateTime > 0) {
+          latestEcTime = formatTime(maxCreateTime * 1000);
+        }
+      }
+      const latestVideoCell = latestEcTime || "-";
 
       const editIcon = ' <span style="font-size:10px;opacity:0.5">✏️</span>';
       const locationCell = u.modifiedAt
@@ -2226,7 +2449,7 @@ function renderTargetTable() {
       ${locationCell}
       <td data-label="确认国家" style="font-size:11px">${confirmedLocation}</td>
       ${topPlayCountCell}
-      <td data-label="最近发布" style="font-size:11px;color:#888">${latestVideo}</td>
+      <td data-label="最近发布" style="font-size:11px;color:#888">${latestVideoCell}</td>
       <td data-label="最近刷新" style="font-size:11px;color:#888">${refreshTime}</td>
       <td data-label="操作">
         <button class="btn-pending" onclick="moveToBase('${escapeJsString(u.uniqueId)}')" title="移到 jobs_base 重走流程">待确认</button>
@@ -2970,6 +3193,7 @@ function initTableSorting() {
 }
 
 function initTargetTableSorting() {
+  console.log("[target-sort] 初始化排序监听...");
   document.querySelectorAll("th.sortable-target").forEach((th) => {
     th.addEventListener("click", () => {
       const key = th.dataset.sort;
@@ -2978,7 +3202,7 @@ function initTargetTableSorting() {
         currentTargetSort.asc = !currentTargetSort.asc;
       } else {
         currentTargetSort.key = key;
-        currentTargetSort.asc = true;
+        currentTargetSort.asc = false; // 默认降序（高播放在前）
       }
       // 更新排序指示器
       document.querySelectorAll("th.sortable-target").forEach((h) => {
@@ -2989,7 +3213,8 @@ function initTargetTableSorting() {
       th.classList.add(currentTargetSort.asc ? "sort-asc" : "sort-desc");
       const icon = th.querySelector(".sort-icon");
       if (icon) icon.textContent = currentTargetSort.asc ? "↑" : "↓";
-      renderTargetTable();
+      // 重新从服务端加载（带排序参数）
+      loadTargetUsersPage(false);
     });
   });
 }

package/src/watch/public/index.html

@@ -16,6 +16,7 @@
     <div style="display:flex;gap:8px;align-items:center">
       <a href="/scripts/run-explore.sh" class="script-link" download="run-explore.sh">mac</a>
       <a href="/scripts/run-explore.bat" class="script-link" download="run-explore.bat">windows</a>
+      <a class="script-link" onclick="navigateToSettings()" style="cursor:pointer">⚙️ LLM</a>
       <span class="status" id="lastUpdate">--</span>
     </div>
   </div>
@@ -446,6 +447,44 @@
       </div>
     </div>
   </div>
+  <div id="settingsPage">
+    <div class="stats" style="margin-bottom:16px">
+      <div class="stat-card clickable" onclick="navigateToMain()" style="background:rgba(96,165,250,0.1)">
+        <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>
+          <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>
   <script src="app.js"></script>
 </body>