codex-endpoint-switcher 1.0.0

package/src/renderer/renderer.js

@@ -0,0 +1,340 @@
+const state = {
+  current: null,
+  endpoints: [],
+  paths: null,
+};
+
+function createWebBridge() {
+  async function request(url, options = {}) {
+    const response = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      ...options,
+    });
+
+    const payload = await response.json();
+    if (!response.ok || !payload.ok) {
+      throw new Error(payload.error || `请求失败：${response.status}`);
+    }
+
+    return payload.data;
+  }
+
+  return {
+    listEndpoints() {
+      return request("/api/endpoints");
+    },
+    getCurrentConfig() {
+      return request("/api/current");
+    },
+    createEndpoint(payload) {
+      return request("/api/endpoints", {
+        method: "POST",
+        body: JSON.stringify(payload),
+      });
+    },
+    updateEndpoint(payload) {
+      return request(`/api/endpoints/${payload.id}`, {
+        method: "PUT",
+        body: JSON.stringify(payload),
+      });
+    },
+    deleteEndpoint(payload) {
+      return request(`/api/endpoints/${payload.id}`, {
+        method: "DELETE",
+      });
+    },
+    switchEndpoint(payload) {
+      return request("/api/endpoints/switch", {
+        method: "POST",
+        body: JSON.stringify(payload),
+      });
+    },
+    getPaths() {
+      return request("/api/paths");
+    },
+    openPath(targetPath) {
+      return request("/api/open-path", {
+        method: "POST",
+        body: JSON.stringify({ targetPath }),
+      }).then(() => "");
+    },
+  };
+}
+
+const bridge = window.codexDesktop || createWebBridge();
+
+function $(selector) {
+  return document.querySelector(selector);
+}
+
+function formatDateTime(value) {
+  if (!value) {
+    return "-";
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat("zh-CN", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+function setStatus(message, type = "info") {
+  const statusBox = $("#statusBox");
+  statusBox.textContent = message;
+  statusBox.className = `status-box ${type}`;
+}
+
+function resetForm() {
+  $("#endpointId").value = "";
+  $("#endpointNote").value = "";
+  $("#endpointUrl").value = "";
+  $("#endpointKey").value = "";
+  $("#saveEndpointButton").textContent = "新增连接";
+}
+
+function fillForm(endpoint) {
+  $("#endpointId").value = endpoint.id;
+  $("#endpointNote").value = endpoint.note;
+  $("#endpointUrl").value = endpoint.url;
+  $("#endpointKey").value = endpoint.key;
+  $("#saveEndpointButton").textContent = "保存修改";
+  setStatus(`正在编辑：${endpoint.note}`, "info");
+}
+
+function renderCurrent() {
+  const current = state.current;
+  if (!current) {
+    return;
+  }
+
+  $("#activeEndpointTag").textContent = current.currentNote || "未识别";
+  $("#currentNote").textContent = current.currentNote || "未识别";
+  $("#currentProvider").textContent = current.provider || "-";
+  $("#currentBaseUrl").textContent = current.currentUrl || "-";
+  $("#currentKeyMasked").textContent = current.currentKeyMasked || "-";
+  $("#currentModel").textContent = current.model || "-";
+  $("#heroBadge").textContent = current.currentNote
+    ? `当前连接：${current.currentNote}`
+    : "当前未匹配到已保存连接";
+}
+
+function createEndpointCard(endpoint) {
+  const card = document.createElement("article");
+  card.className = `profile-card ${endpoint.isActive ? "active" : ""}`;
+
+  const top = document.createElement("div");
+  top.className = "profile-topline";
+
+  const heading = document.createElement("div");
+  heading.className = "profile-heading";
+
+  const title = document.createElement("h3");
+  title.textContent = endpoint.note;
+
+  const badges = document.createElement("div");
+  badges.className = "profile-badges";
+
+  if (endpoint.isActive) {
+    const activeBadge = document.createElement("span");
+    activeBadge.className = "mini-badge active";
+    activeBadge.textContent = "当前使用中";
+    badges.appendChild(activeBadge);
+  }
+
+  const urlBadge = document.createElement("span");
+  urlBadge.className = "mini-badge";
+  urlBadge.textContent = "URL/Key";
+  badges.appendChild(urlBadge);
+
+  heading.append(title, badges);
+
+  const actions = document.createElement("div");
+  actions.className = "card-actions";
+
+  const switchButton = document.createElement("button");
+  switchButton.className = endpoint.isActive ? "ghost-button" : "primary-button";
+  switchButton.textContent = endpoint.isActive ? "当前连接" : "切换";
+  switchButton.disabled = endpoint.isActive;
+  switchButton.addEventListener("click", async () => {
+    await handleSwitchEndpoint(endpoint.id, endpoint.note);
+  });
+
+  const editButton = document.createElement("button");
+  editButton.className = "ghost-button";
+  editButton.textContent = "编辑";
+  editButton.addEventListener("click", () => {
+    fillForm(endpoint);
+  });
+
+  const deleteButton = document.createElement("button");
+  deleteButton.className = "danger-button";
+  deleteButton.textContent = "删除";
+  deleteButton.addEventListener("click", async () => {
+    await handleDeleteEndpoint(endpoint.id, endpoint.note);
+  });
+
+  actions.append(switchButton, editButton, deleteButton);
+  top.append(heading, actions);
+
+  const meta = document.createElement("div");
+  meta.className = "profile-meta";
+  meta.innerHTML = `
+    <span><strong>URL</strong>${endpoint.url || "-"}</span>
+    <span><strong>Key</strong>${endpoint.maskedKey || "-"}</span>
+    <span><strong>更新时间</strong>${formatDateTime(endpoint.updatedAt)}</span>
+  `;
+
+  card.append(top, meta);
+  return card;
+}
+
+function renderEndpoints() {
+  const list = $("#endpointsList");
+  list.innerHTML = "";
+
+  if (state.endpoints.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "当前还没有连接，先在右侧新增一条。";
+    list.appendChild(empty);
+  } else {
+    state.endpoints.forEach((endpoint) => {
+      list.appendChild(createEndpointCard(endpoint));
+    });
+  }
+
+  $("#endpointCount").textContent = `${state.endpoints.length} 条`;
+}
+
+async function refreshDashboard(showMessage = true) {
+  try {
+    const [current, endpoints, paths] = await Promise.all([
+      bridge.getCurrentConfig(),
+      bridge.listEndpoints(),
+      bridge.getPaths(),
+    ]);
+
+    state.current = current;
+    state.endpoints = endpoints;
+    state.paths = paths;
+
+    renderCurrent();
+    renderEndpoints();
+
+    if (showMessage) {
+      setStatus("已刷新当前连接状态。", "success");
+    }
+  } catch (error) {
+    setStatus(`刷新失败：${error.message}`, "error");
+  }
+}
+
+async function handleSwitchEndpoint(id, note) {
+  try {
+    setStatus(`正在切换到：${note} ...`, "info");
+    const result = await bridge.switchEndpoint({ id });
+    await refreshDashboard(false);
+    setStatus(
+      `已切换到 ${note}。已备份 config.toml 和 auth.json，下一条 codex 命令直接生效。`,
+      "success",
+    );
+    return result;
+  } catch (error) {
+    setStatus(`切换失败：${error.message}`, "error");
+    return null;
+  }
+}
+
+async function handleSubmitEndpoint(event) {
+  event.preventDefault();
+  const id = $("#endpointId").value.trim();
+  const note = $("#endpointNote").value.trim();
+  const url = $("#endpointUrl").value.trim();
+  const key = $("#endpointKey").value.trim();
+
+  if (!note || !url || !key) {
+    setStatus("备注、URL、Key 都必须填写。", "error");
+    return;
+  }
+
+  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);
+  } catch (error) {
+    setStatus(`保存失败：${error.message}`, "error");
+  }
+}
+
+async function handleDeleteEndpoint(id, note) {
+  const confirmed = window.confirm(`确定删除连接“${note}”吗？`);
+  if (!confirmed) {
+    return;
+  }
+
+  try {
+    await bridge.deleteEndpoint({ id });
+    if ($("#endpointId").value.trim() === id) {
+      resetForm();
+    }
+    await refreshDashboard(false);
+    setStatus(`已删除连接：${note}`, "success");
+  } catch (error) {
+    setStatus(`删除失败：${error.message}`, "error");
+  }
+}
+
+async function handleOpenPath(targetPath, label) {
+  try {
+    const errorMessage = await bridge.openPath(targetPath);
+    if (errorMessage) {
+      throw new Error(errorMessage);
+    }
+
+    setStatus(`已打开${label}。`, "success");
+  } catch (error) {
+    setStatus(`打开${label}失败：${error.message}`, "error");
+  }
+}
+
+function bindEvents() {
+  $("#refreshButton").addEventListener("click", () => {
+    refreshDashboard();
+  });
+  $("#endpointForm").addEventListener("submit", handleSubmitEndpoint);
+  $("#clearFormButton").addEventListener("click", () => {
+    resetForm();
+    setStatus("已清空表单。", "info");
+  });
+  $("#openCodexRootButton").addEventListener("click", () => {
+    if (state.paths?.codexRoot) {
+      handleOpenPath(state.paths.codexRoot, " Codex 目录");
+    }
+  });
+  $("#openEndpointStoreButton").addEventListener("click", () => {
+    if (state.paths?.endpointStorePath) {
+      handleOpenPath(state.paths.endpointStorePath, " 连接数据文件");
+    }
+  });
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+  bindEvents();
+  resetForm();
+  await refreshDashboard(false);
+  setStatus("应用已就绪，你可以直接新增 URL / Key / 备注 并切换。", "success");
+});