ccnew 0.1.10

package/desktop/renderer/app.js

@@ -0,0 +1,327 @@
+const state = {
+  snapshot: null,
+  activePlatform: "codex",
+  probeResult: null,
+  toastTimer: null
+};
+
+const platformTabs = document.querySelector("#platformTabs");
+const statsGrid = document.querySelector("#statsGrid");
+const providerList = document.querySelector("#providerList");
+const targetFiles = document.querySelector("#targetFiles");
+const probeResults = document.querySelector("#probeResults");
+const modelSelect = document.querySelector("#modelSelect");
+const providerForm = document.querySelector("#providerForm");
+const probeButton = document.querySelector("#probeButton");
+const refreshButton = document.querySelector("#refreshButton");
+const probeCandidateButton = document.querySelector("#probeCandidateButton");
+const candidateProbeStatus = document.querySelector("#candidateProbeStatus");
+const heroTitle = document.querySelector("#heroTitle");
+const heroSubtitle = document.querySelector("#heroSubtitle");
+const toast = document.querySelector("#toast");
+
+function getActivePlatformSnapshot() {
+  return state.snapshot?.platforms?.find((item) => item.id === state.activePlatform) || null;
+}
+
+function setToast(message, isError = false) {
+  toast.textContent = message;
+  toast.style.background = isError ? "rgba(122, 30, 30, 0.96)" : "rgba(18, 37, 49, 0.94)";
+  toast.classList.add("visible");
+
+  if (state.toastTimer) {
+    clearTimeout(state.toastTimer);
+  }
+
+  state.toastTimer = setTimeout(() => {
+    toast.classList.remove("visible");
+  }, 2600);
+}
+
+function renderPlatformTabs() {
+  if (!state.snapshot) {
+    platformTabs.innerHTML = "";
+    return;
+  }
+
+  platformTabs.innerHTML = state.snapshot.platforms
+    .map(
+      (platform) => `
+        <button class="platform-tab ${platform.id === state.activePlatform ? "active" : ""}" data-platform="${platform.id}" type="button">
+          <small>${platform.command}</small>
+          <strong>${platform.label}</strong>
+          <span>${platform.providerCount} saved</span>
+        </button>
+      `
+    )
+    .join("");
+
+  for (const button of platformTabs.querySelectorAll("[data-platform]")) {
+    button.addEventListener("click", () => {
+      state.activePlatform = button.dataset.platform;
+      state.probeResult = null;
+      render();
+    });
+  }
+}
+
+function renderStats(platform) {
+  statsGrid.innerHTML = `
+    <article class="stat">
+      <span>Current Platform</span>
+      <strong>${platform.label}</strong>
+    </article>
+    <article class="stat">
+      <span>Saved Providers</span>
+      <strong>${platform.providerCount}</strong>
+    </article>
+    <article class="stat">
+      <span>Current Provider</span>
+      <strong>${platform.currentProviderName || "None"}</strong>
+    </article>
+    <article class="stat">
+      <span>Target Files</span>
+      <strong>${platform.targetFiles.length}</strong>
+    </article>
+  `;
+}
+
+function renderProviders(platform) {
+  if (platform.providers.length === 0) {
+    providerList.innerHTML = `<div class="empty">当前平台还没有保存任何 Provider。</div>`;
+    return;
+  }
+
+  providerList.innerHTML = platform.providers
+    .map(
+      (provider) => `
+        <article class="provider-card ${provider.isActive ? "active" : ""}">
+          <header>
+            <div>
+              <strong>${provider.name}</strong>
+              <span>${provider.baseUrl}</span>
+              <small>${provider.model} · ${provider.maskedApiKey}</small>
+            </div>
+            ${provider.isActive ? '<span class="badge">Active</span>' : ""}
+          </header>
+          <div>
+            <button type="button" data-activate="${provider.id}">${provider.isActive ? "当前启用" : "切换到此配置"}</button>
+          </div>
+        </article>
+      `
+    )
+    .join("");
+
+  for (const button of providerList.querySelectorAll("[data-activate]")) {
+    button.addEventListener("click", async () => {
+      const providerId = button.dataset.activate;
+      button.disabled = true;
+
+      try {
+        const response = await window.marchDesktop.activateProvider({
+          platform: state.activePlatform,
+          nameOrId: providerId
+        });
+        await refreshSnapshot(response.snapshot);
+        setToast("已切换到所选 Provider。");
+      } catch (error) {
+        setToast(error.message, true);
+      } finally {
+        button.disabled = false;
+      }
+    });
+  }
+}
+
+function renderTargetFiles(platform) {
+  targetFiles.innerHTML = platform.targetFiles
+    .map(
+      (filePath) => `
+        <article class="file-item">
+          <header>
+            <div>
+              <strong>${platform.label}</strong>
+              <code>${filePath}</code>
+            </div>
+            <button type="button" data-open-path="${filePath}">打开</button>
+          </header>
+        </article>
+      `
+    )
+    .join("");
+
+  for (const button of targetFiles.querySelectorAll("[data-open-path]")) {
+    button.addEventListener("click", async () => {
+      await window.marchDesktop.openPath(button.dataset.openPath);
+    });
+  }
+}
+
+function renderProbeResults() {
+  if (!state.probeResult?.results?.length) {
+    probeResults.innerHTML = `<div class="empty">还没有测速结果。</div>`;
+    return;
+  }
+
+  const bestBaseUrl = state.probeResult.best?.baseUrl || "";
+
+  probeResults.innerHTML = state.probeResult.results
+    .map((result) => {
+      const isBest = result.baseUrl === bestBaseUrl;
+      return `
+        <article class="probe-row ${isBest ? "best" : ""}">
+          <header>
+            <div>
+              <strong>${result.baseUrl}</strong>
+              <span>${result.ok ? "可用" : "失败"} · ${result.ok ? `${result.latency} ms` : result.error}</span>
+            </div>
+            ${isBest ? '<span class="badge">Best</span>' : ""}
+          </header>
+        </article>
+      `;
+    })
+    .join("");
+}
+
+function renderModelOptions() {
+  if (!state.snapshot) {
+    return;
+  }
+
+  modelSelect.innerHTML = state.snapshot.models
+    .map((model) => `<option value="${model.id}">${model.id}</option>`)
+    .join("");
+}
+
+function populateForm(platform) {
+  const currentProvider = platform.providers.find((provider) => provider.isActive) || null;
+  document.querySelector("#providerName").value = currentProvider?.name || platform.defaultProviderName;
+  document.querySelector("#baseUrl").value = currentProvider?.baseUrl || platform.defaultBaseUrl;
+  document.querySelector("#apiKey").value = "";
+  modelSelect.value = currentProvider?.model || state.snapshot.models[0]?.id || "gpt-5.4";
+  candidateProbeStatus.textContent = "等待测试";
+}
+
+function renderHeader(platform) {
+  heroTitle.textContent = `ccon / ${platform.label}`;
+  heroSubtitle.textContent = `保存 ${platform.providerCount} 个 Provider，当前启用 ${platform.currentProviderName || "无"}。`;
+}
+
+function render() {
+  const platform = getActivePlatformSnapshot();
+  if (!platform) {
+    return;
+  }
+
+  renderPlatformTabs();
+  renderStats(platform);
+  renderProviders(platform);
+  renderTargetFiles(platform);
+  renderProbeResults();
+  renderHeader(platform);
+  populateForm(platform);
+}
+
+async function refreshSnapshot(preloadedSnapshot = null) {
+  if (!state.snapshot || !preloadedSnapshot) {
+    state.snapshot = await window.marchDesktop.getSnapshot();
+  } else {
+    state.snapshot = {
+      ...state.snapshot,
+      platforms: state.snapshot.platforms.map((item) =>
+        item.id === preloadedSnapshot.id ? preloadedSnapshot : item
+      )
+    };
+  }
+
+  if (!state.snapshot.platforms.some((item) => item.id === state.activePlatform)) {
+    state.activePlatform = state.snapshot.platforms[0]?.id || "codex";
+  }
+
+  renderModelOptions();
+  render();
+}
+
+providerForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  const submitButton = providerForm.querySelector('[type="submit"]');
+  submitButton.disabled = true;
+
+  try {
+    const response = await window.marchDesktop.saveProvider({
+      platform: state.activePlatform,
+      input: {
+        name: document.querySelector("#providerName").value,
+        baseUrl: document.querySelector("#baseUrl").value,
+        apiKey: document.querySelector("#apiKey").value,
+        model: modelSelect.value
+      }
+    });
+    state.probeResult = null;
+    await refreshSnapshot(response.snapshot);
+    setToast("Provider 已保存并启用。");
+  } catch (error) {
+    setToast(error.message, true);
+  } finally {
+    submitButton.disabled = false;
+  }
+});
+
+probeButton.addEventListener("click", async () => {
+  probeButton.disabled = true;
+  probeButton.textContent = "测速中...";
+
+  try {
+    state.probeResult = await window.marchDesktop.probePlatform({
+      platform: state.activePlatform
+    });
+    renderProbeResults();
+    setToast(state.probeResult.best ? `最快地址: ${state.probeResult.best.baseUrl}` : "当前没有可测地址。");
+  } catch (error) {
+    setToast(error.message, true);
+  } finally {
+    probeButton.disabled = false;
+    probeButton.textContent = "测速当前平台";
+  }
+});
+
+probeCandidateButton.addEventListener("click", async () => {
+  probeCandidateButton.disabled = true;
+  candidateProbeStatus.textContent = "正在测试...";
+
+  try {
+    const result = await window.marchDesktop.probeCandidate({
+      platform: state.activePlatform,
+      baseUrl: document.querySelector("#baseUrl").value
+    });
+
+    if (!result.result) {
+      candidateProbeStatus.textContent = "没有返回结果";
+    } else if (result.result.ok) {
+      candidateProbeStatus.textContent = `可用，延迟 ${result.result.latency} ms`;
+    } else {
+      candidateProbeStatus.textContent = `失败: ${result.result.error}`;
+    }
+  } catch (error) {
+    candidateProbeStatus.textContent = error.message;
+  } finally {
+    probeCandidateButton.disabled = false;
+  }
+});
+
+refreshButton.addEventListener("click", async () => {
+  refreshButton.disabled = true;
+
+  try {
+    state.probeResult = null;
+    await refreshSnapshot();
+    setToast("数据已刷新。");
+  } catch (error) {
+    setToast(error.message, true);
+  } finally {
+    refreshButton.disabled = false;
+  }
+});
+
+await refreshSnapshot();

package/desktop/renderer/index.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ccon</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="sidebar">
+        <div class="brand">
+          <img src="../assets/fml-icon.png" alt="ccon" />
+          <div>
+            <strong>ccon</strong>
+            <span>relay desktop</span>
+          </div>
+        </div>
+
+        <div class="platforms" id="platformTabs"></div>
+
+        <div class="sidebar-card">
+          <span>Default Route</span>
+          <strong>www.fhl.mom</strong>
+          <small>Codex / OpenCode 默认接入主线路，OpenClaw 使用 /v1，并把状态和配置文件集中展示。</small>
+        </div>
+      </aside>
+
+      <main class="workspace">
+        <header class="hero">
+          <div>
+            <span class="eyebrow">Desktop Control Panel</span>
+            <h1 id="heroTitle">ccon</h1>
+            <p id="heroSubtitle">统一管理 Provider、写入本地配置、测速和快速切换。</p>
+          </div>
+
+          <div class="hero-actions">
+            <button id="refreshButton" type="button">刷新数据</button>
+            <button id="probeButton" type="button" class="solid">测速当前平台</button>
+          </div>
+        </header>
+
+        <section class="stats" id="statsGrid"></section>
+
+        <section class="grid">
+          <article class="panel">
+            <div class="panel-head">
+              <div>
+                <span class="eyebrow">Providers</span>
+                <h2>已保存配置</h2>
+              </div>
+            </div>
+            <div class="provider-list" id="providerList"></div>
+          </article>
+
+          <article class="panel">
+            <div class="panel-head">
+              <div>
+                <span class="eyebrow">Quick Add</span>
+                <h2>新增或覆盖 Provider</h2>
+              </div>
+            </div>
+
+            <form id="providerForm" class="form">
+              <label>
+                <span>名称</span>
+                <input id="providerName" name="providerName" type="text" placeholder="fhl" />
+              </label>
+
+              <label>
+                <span>Base URL</span>
+                <input id="baseUrl" name="baseUrl" type="url" placeholder="https://www.fhl.mom" />
+              </label>
+
+              <label>
+                <span>API Key</span>
+                <input id="apiKey" name="apiKey" type="password" placeholder="sk-..." />
+              </label>
+
+              <label>
+                <span>模型</span>
+                <select id="modelSelect" name="model"></select>
+              </label>
+
+              <div class="form-actions">
+                <button id="probeCandidateButton" type="button">测试此地址</button>
+                <button type="submit" class="solid">保存并启用</button>
+              </div>
+            </form>
+
+            <div class="inline-status" id="candidateProbeStatus">等待测试</div>
+          </article>
+
+          <article class="panel">
+            <div class="panel-head">
+              <div>
+                <span class="eyebrow">Config Targets</span>
+                <h2>会写入这些文件</h2>
+              </div>
+            </div>
+
+            <div class="file-list" id="targetFiles"></div>
+          </article>
+
+          <article class="panel">
+            <div class="panel-head">
+              <div>
+                <span class="eyebrow">Latency</span>
+                <h2>线路测速结果</h2>
+              </div>
+            </div>
+
+            <div class="probe-list" id="probeResults">
+              <div class="empty">还没有测速结果。</div>
+            </div>
+          </article>
+        </section>
+      </main>
+    </div>
+
+    <div class="toast" id="toast"></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>