codex-endpoint-switcher 1.1.0 → 1.2.0

package/src/renderer/renderer.js

@@ -16,7 +16,10 @@ function createWebBridge() {
 
     const payload = await response.json();
     if (!response.ok || !payload.ok) {
-      throw new Error(payload.error || `请求失败：${response.status}`);
+      const error = new Error(payload.error || `请求失败：${response.status}`);
+      error.statusCode = response.status;
+      error.payload = payload;
+      throw error;
     }
 
     return payload.data;
@@ -124,10 +127,24 @@ function formatDateTime(value) {
 
 function setStatus(message, type = "info") {
   const statusBox = $("#statusBox");
+  if (!statusBox) {
+    return;
+  }
+
   statusBox.textContent = message;
   statusBox.className = `status-box ${type}`;
 }
 
+function setAuthStatus(message, type = "info") {
+  const statusBox = $("#authStatusBox");
+  if (!statusBox) {
+    return;
+  }
+
+  statusBox.textContent = message;
+  statusBox.className = `status-box ${type} auth-status`;
+}
+
 function syncFieldValue(selector, value) {
   const input = $(selector);
   if (!input) {
@@ -141,12 +158,59 @@ function syncFieldValue(selector, value) {
   input.value = value || "";
 }
 
+function applyAccessState(loggedIn) {
+  const authGate = $("#authGate");
+  const appShell = $("#appShell");
+
+  if (authGate) {
+    authGate.hidden = loggedIn;
+  }
+
+  if (appShell) {
+    appShell.hidden = !loggedIn;
+  }
+
+  if (!loggedIn && $("#endpointModal") && !$("#endpointModal").hidden) {
+    closeEndpointModal();
+  }
+}
+
+function isUnauthorizedError(error) {
+  return Number(error?.statusCode || 0) === 401;
+}
+
+function setEndpointModalContent(mode, note = "") {
+  const isEdit = mode === "edit";
+  $("#endpointModalTitle").textContent = isEdit ? "编辑连接" : "新增连接";
+  $("#endpointModalText").textContent = isEdit
+    ? `正在编辑“${note}”，保存后会直接更新这条连接。`
+    : "填写备注、URL、Key，保存后就能直接加入切换列表。";
+  $("#saveEndpointButton").textContent = isEdit ? "保存修改" : "新增连接";
+}
+
+function openEndpointModal() {
+  const modal = $("#endpointModal");
+  modal.hidden = false;
+  document.body.classList.add("modal-open");
+
+  window.requestAnimationFrame(() => {
+    const input = $("#endpointNote");
+    input?.focus();
+  });
+}
+
+function closeEndpointModal() {
+  const modal = $("#endpointModal");
+  modal.hidden = true;
+  document.body.classList.remove("modal-open");
+}
+
 function resetForm() {
   $("#endpointId").value = "";
   $("#endpointNote").value = "";
   $("#endpointUrl").value = "";
   $("#endpointKey").value = "";
-  $("#saveEndpointButton").textContent = "新增连接";
+  setEndpointModalContent("create");
 }
 
 function fillForm(endpoint) {
@@ -154,7 +218,7 @@ function fillForm(endpoint) {
   $("#endpointNote").value = endpoint.note;
   $("#endpointUrl").value = endpoint.url;
   $("#endpointKey").value = endpoint.key;
-  $("#saveEndpointButton").textContent = "保存修改";
+  setEndpointModalContent("edit", endpoint.note);
   setStatus(`正在编辑：${endpoint.note}`, "info");
 }
 
@@ -191,23 +255,26 @@ function renderCloudStatus() {
     return;
   }
 
-  syncFieldValue("#cloudServerUrl", cloud.serverUrl);
-  syncFieldValue("#cloudUsername", cloud.username);
+  syncFieldValue("#authUsername", cloud.username);
 
-  const authText = !cloud.serverUrl
-    ? "未配置同步服务器"
+  const accountName = cloud.remoteUser || cloud.username || "-";
+  const serverText = !cloud.serverUrl
+    ? "未配置"
+    : cloud.loggedIn
+      ? "已自动连接"
+      : cloud.lastError
+        ? "连接异常"
+        : "等待登录";
+  const sessionText = !cloud.serverUrl
+    ? "未配置服务器"
     : cloud.loggedIn
-      ? `已登录：${cloud.remoteUser || cloud.username}`
+      ? cloud.tokenExpiresAt
+        ? `已登录 · 到期 ${formatDateTime(cloud.tokenExpiresAt)}`
+        : "已登录"
       : cloud.hasToken
-        ? "本地已保存登录态，但远端校验未通过"
+        ? "登录态失效，请重新登录"
         : "未登录";
 
-  const remoteText = cloud.serverUrl
-    ? cloud.lastError
-      ? `${cloud.serverUrl} · ${cloud.lastError}`
-      : cloud.serverUrl
-    : "未设置";
-
   const syncStatusParts = [];
   if (cloud.lastPushAt) {
     syncStatusParts.push(`最近推送：${formatDateTime(cloud.lastPushAt)}`);
@@ -219,9 +286,15 @@ function renderCloudStatus() {
     syncStatusParts.push("还没有推送或拉取记录");
   }
 
-  $("#cloudAuthStatus").textContent = authText;
-  $("#cloudRemoteStatus").textContent = remoteText;
+  $("#authAccessTag").textContent = cloud.loggedIn ? "已登录" : "未登录";
+  $("#cloudAccessTag").textContent = cloud.loggedIn ? "控制台已解锁" : "未登录";
+  $("#cloudAccountName").textContent = accountName;
+  $("#cloudServerStatus").textContent = serverText;
+  $("#cloudSessionStatus").textContent = cloud.lastError
+    ? `${sessionText} · ${cloud.lastError}`
+    : sessionText;
   $("#cloudLastSyncStatus").textContent = syncStatusParts.join(" / ");
+  $("#openSwitchAccountButton").disabled = !cloud.loggedIn;
   $("#cloudLogoutButton").disabled = !cloud.hasToken;
   $("#cloudPushButton").disabled = !cloud.loggedIn;
   $("#cloudPullMergeButton").disabled = !cloud.loggedIn;
@@ -274,6 +347,7 @@ function createEndpointCard(endpoint) {
   editButton.textContent = "编辑";
   editButton.addEventListener("click", () => {
     fillForm(endpoint);
+    openEndpointModal();
   });
 
   const deleteButton = document.createElement("button");
@@ -305,7 +379,7 @@ function renderEndpoints() {
   if (state.endpoints.length === 0) {
     const empty = document.createElement("div");
     empty.className = "empty-state";
-    empty.textContent = "当前还没有连接，先在右侧新增一条。";
+    empty.textContent = "当前还没有连接，点击右上角“新增连接”先建一条。";
     list.appendChild(empty);
   } else {
     state.endpoints.forEach((endpoint) => {
@@ -316,6 +390,43 @@ function renderEndpoints() {
   $("#endpointCount").textContent = `${state.endpoints.length} 条`;
 }
 
+async function handleAccessRevoked(message) {
+  try {
+    state.cloud = await bridge.getCloudSyncStatus();
+    renderCloudStatus();
+  } catch {
+    // 登录态接口异常时，至少先把控制台切回登录页。
+  }
+
+  applyAccessState(false);
+  setAuthStatus(message || "请先登录同步账号后再进入连接控制台。", "error");
+}
+
+async function bootstrapConsoleAccess() {
+  try {
+    const cloud = await bridge.getCloudSyncStatus();
+    state.cloud = cloud;
+    renderCloudStatus();
+
+    if (!cloud.loggedIn) {
+      applyAccessState(false);
+      if (cloud.hasToken && cloud.lastError) {
+        setAuthStatus(`登录校验失败：${cloud.lastError}`, "error");
+      } else {
+        setAuthStatus("请先登录同步账号后再进入连接控制台。", "info");
+      }
+      return;
+    }
+
+    applyAccessState(true);
+    await refreshDashboard(false);
+    setStatus("已通过账号校验，连接控制台已解锁。", "success");
+  } catch (error) {
+    applyAccessState(false);
+    setAuthStatus(`登录校验失败：${error.message}`, "error");
+  }
+}
+
 async function refreshDashboard(showMessage = true) {
   try {
     const [current, endpoints, paths, cloud] = await Promise.all([
@@ -338,6 +449,11 @@ async function refreshDashboard(showMessage = true) {
       setStatus("已刷新当前连接状态。", "success");
     }
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`刷新失败：${error.message}`, "error");
   }
 }
@@ -357,6 +473,11 @@ async function handleSwitchEndpoint(id, note) {
     }
     return result;
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return null;
+    }
+
     setStatus(`切换失败：${error.message}`, "error");
     return null;
   }
@@ -376,41 +497,51 @@ async function handleEnableProxyMode() {
       setStatus("热更新模式已开启。当前会话后续请求可直接热更新到新连接。", "success");
     }
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`开启热更新模式失败：${error.message}`, "error");
   }
 }
 
-function getCloudFormPayload() {
+function getAuthFormPayload() {
   return {
-    serverUrl: $("#cloudServerUrl").value.trim(),
-    username: $("#cloudUsername").value.trim(),
-    password: $("#cloudPassword").value,
+    username: $("#authUsername").value.trim(),
+    password: $("#authPassword").value,
   };
 }
 
 async function handleCloudRegister() {
   try {
-    setStatus("正在注册同步账号 ...", "info");
-    const payload = getCloudFormPayload();
+    setAuthStatus("正在注册同步账号 ...", "info");
+    const payload = getAuthFormPayload();
     const result = await bridge.registerCloudAccount(payload);
-    $("#cloudPassword").value = "";
+    $("#authPassword").value = "";
+    state.cloud = result;
+    renderCloudStatus();
+    applyAccessState(true);
     await refreshDashboard(false);
     setStatus(result.message || "账号注册成功。", "success");
   } catch (error) {
-    setStatus(`注册失败：${error.message}`, "error");
+    setAuthStatus(`注册失败：${error.message}`, "error");
   }
 }
 
 async function handleCloudLogin() {
   try {
-    setStatus("正在登录同步账号 ...", "info");
-    const payload = getCloudFormPayload();
+    setAuthStatus("正在登录同步账号 ...", "info");
+    const payload = getAuthFormPayload();
     const result = await bridge.loginCloudAccount(payload);
-    $("#cloudPassword").value = "";
+    $("#authPassword").value = "";
+    state.cloud = result;
+    renderCloudStatus();
+    applyAccessState(true);
     await refreshDashboard(false);
     setStatus(result.message || "账号登录成功。", "success");
   } catch (error) {
-    setStatus(`登录失败：${error.message}`, "error");
+    setAuthStatus(`登录失败：${error.message}`, "error");
   }
 }
 
@@ -418,10 +549,13 @@ async function handleCloudLogout() {
   try {
     setStatus("正在退出同步账号 ...", "info");
     const result = await bridge.logoutCloudAccount();
-    await refreshDashboard(false);
-    setStatus(result.message || "已退出同步账号。", "success");
+    $("#authPassword").value = "";
+    state.cloud = result;
+    renderCloudStatus();
+    applyAccessState(false);
+    setAuthStatus(result.message || "已退出同步账号。", "success");
   } catch (error) {
-    setStatus(`退出失败：${error.message}`, "error");
+    setAuthStatus(`退出失败：${error.message}`, "error");
   }
 }
 
@@ -435,6 +569,11 @@ async function handleCloudPush() {
       "success",
     );
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`推送失败：${error.message}`, "error");
   }
 }
@@ -461,6 +600,11 @@ async function handleCloudPull(mode) {
       "success",
     );
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`拉取失败：${error.message}`, "error");
   }
 }
@@ -480,15 +624,20 @@ async function handleSubmitEndpoint(event) {
   try {
     if (id) {
       await bridge.updateEndpoint({ id, note, url, key });
-      setStatus(`已更新连接：${note}`, "success");
     } else {
       await bridge.createEndpoint({ note, url, key });
-      setStatus(`已新增连接：${note}`, "success");
     }
 
-    resetForm();
     await refreshDashboard(false);
+    closeEndpointModal();
+    resetForm();
+    setStatus(id ? `已更新连接：${note}` : `已新增连接：${note}`, "success");
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`保存失败：${error.message}`, "error");
   }
 }
@@ -502,11 +651,17 @@ async function handleDeleteEndpoint(id, note) {
   try {
     await bridge.deleteEndpoint({ id });
     if ($("#endpointId").value.trim() === id) {
+      closeEndpointModal();
       resetForm();
     }
     await refreshDashboard(false);
     setStatus(`已删除连接：${note}`, "success");
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`删除失败：${error.message}`, "error");
   }
 }
@@ -520,23 +675,46 @@ async function handleOpenPath(targetPath, label) {
 
     setStatus(`已打开${label}。`, "success");
   } catch (error) {
+    if (isUnauthorizedError(error)) {
+      await handleAccessRevoked(error.message);
+      return;
+    }
+
     setStatus(`打开${label}失败：${error.message}`, "error");
   }
 }
 
 function bindEvents() {
+  $("#authForm").addEventListener("submit", (event) => {
+    event.preventDefault();
+    handleCloudLogin();
+  });
+  $("#authRegisterButton").addEventListener("click", () => {
+    handleCloudRegister();
+  });
   $("#refreshButton").addEventListener("click", () => {
     refreshDashboard();
   });
+  $("#openCreateEndpointButton").addEventListener("click", () => {
+    resetForm();
+    openEndpointModal();
+  });
+  $("#closeEndpointModalButton").addEventListener("click", () => {
+    closeEndpointModal();
+  });
+  $("#endpointModal").addEventListener("click", (event) => {
+    if (event.target.dataset.modalClose === "true") {
+      closeEndpointModal();
+    }
+  });
   $("#endpointForm").addEventListener("submit", handleSubmitEndpoint);
   $("#clearFormButton").addEventListener("click", () => {
     resetForm();
-    setStatus("已清空表单。", "info");
+    setStatus("已重置表单，可作为新连接保存。", "info");
   });
   $("#enableProxyModeButton").addEventListener("click", handleEnableProxyMode);
-  $("#cloudRegisterButton").addEventListener("click", handleCloudRegister);
-  $("#cloudLoginButton").addEventListener("click", handleCloudLogin);
   $("#cloudLogoutButton").addEventListener("click", handleCloudLogout);
+  $("#openSwitchAccountButton").addEventListener("click", handleCloudLogout);
   $("#cloudPushButton").addEventListener("click", handleCloudPush);
   $("#cloudPullMergeButton").addEventListener("click", () => {
     handleCloudPull("merge");
@@ -554,11 +732,15 @@ function bindEvents() {
       handleOpenPath(state.paths.endpointStorePath, " 连接数据文件");
     }
   });
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !$("#endpointModal").hidden) {
+      closeEndpointModal();
+    }
+  });
 }
 
 window.addEventListener("DOMContentLoaded", async () => {
   bindEvents();
   resetForm();
-  await refreshDashboard(false);
-  setStatus("应用已就绪，你可以直接新增 URL / Key / 备注 并切换。", "success");
+  await bootstrapConsoleAccess();
 });