llm-api-gateway-cli 1.0.2 → 1.0.4

package/public/shell.css

@@ -0,0 +1,242 @@
+/* Tab 外壳（/）：聊天 / 任务 / 手册 在同一个页面里切换
+ *
+ * 只做「外壳」这一层的排版：配色、按钮、主题全部复用 styles.css 的变量与类
+ * （--bg / --border / --text / .btn / .dot / .theme-switch …），
+ * 所以白天 / 黑夜 / 外部底色（?bg=）三种情况下都与三个面板协调。
+ * 新加的变量（--accent-2 / --accent-2-soft）同时写在 styles.css 的深浅两套里，tests/theme.test.mjs 盯着。
+ */
+
+.shell-body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden; /* 滚动条交给面板内部，外壳自己不滚 */
+}
+
+/* ---------- 顶栏（唯一一条） ---------- */
+
+.shell-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow-xs);
+  position: relative;
+  z-index: 3;
+}
+
+/* 顶栏底部一条极细的强调线：让「这一条是外壳、下面是面板」一眼可分 */
+.shell-bar::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
+  opacity: .45;
+  pointer-events: none;
+}
+
+.shell-brand { flex: none; }
+.shell-brand h1 { font-size: 14.5px; }
+
+/* ---------- Tab 组：药丸 + 滑动高亮块 ---------- */
+
+.tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-code);
+  flex: none;
+}
+
+.tab-ink {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 0;
+  width: 0;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-strong);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--t), width var(--t);
+  pointer-events: none;
+}
+
+.tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  background: none;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color var(--t), background-color var(--t);
+  white-space: nowrap;
+}
+
+.tab:hover { color: var(--text); background: var(--accent-2-soft); }
+.tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
+.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
+
+.tab-icon { font-size: 12.5px; line-height: 1; }
+
+/* 后台有任务在跑时的脉冲点：切到别的 Tab 也知道任务没停 */
+.tab-dot {
+  display: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--warn);
+  box-shadow: 0 0 0 3px var(--warn-ring);
+}
+
+.tab.busy .tab-dot {
+  display: block;
+  animation: tab-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes tab-pulse {
+  0%, 100% { opacity: .35; transform: scale(.85); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+/* ---------- 当前面板的操作按钮（外壳代点面板里的按钮） ---------- */
+
+.shell-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  min-width: 0;
+  overflow: hidden; /* 顶栏不允许被长内容顶出屏幕；工作目录那一条自己会省略号截断 */
+}
+
+.shell-actions:empty { display: none; }
+
+.shell-actions .btn.active {
+  color: var(--accent);
+  border-color: var(--border-strong);
+  background: var(--accent-soft);
+}
+
+/* 工作目录：内容来自任务面板（桥消息 workdir），点击转发给面板里的 #workdir-chip */
+.shell-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 320px;
+  border: 1px solid var(--border);
+  background: var(--bg-code);
+  color: var(--text-dim);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color var(--t), color var(--t);
+}
+
+.shell-chip:hover { border-color: var(--border-strong); color: var(--text); }
+.shell-chip .wd-label { color: var(--text-faint); font-size: 11px; flex: none; }
+.shell-chip code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* flex 项的 min-width 默认是 auto：不写这行，长路径会把顶栏顶出屏幕（省略号也不生效） */
+  min-width: 0;
+}
+
+/* ---------- 面板区 ---------- */
+
+.panes {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.pane {
+  position: absolute;
+  inset: 0;
+  /* 切回来时淡入一下（display:none → 显示会让动画重新开始，正是想要的效果） */
+  animation: pane-in 180ms cubic-bezier(.4, 0, .2, 1);
+}
+
+.pane[hidden] { display: none; }
+
+.pane-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  background: var(--bg);
+}
+
+@keyframes pane-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* 首次激活前的骨架：懒加载时给一句「正在加载」而不是白屏。
+   z-index 是必须的 —— iframe 在后面创建，不抬起来会被它盖住（等于没骨架）。
+   [hidden] 这条也是必须的：UA 的 `[hidden]{display:none}` 会被上面那条 `display:flex` 压掉，
+   不加这一条骨架在 iframe 加载完之后仍然盖在上面（表现就是「外壳出来了、面板一直空着」）。 */
+.pane-skeleton {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-faint);
+  font-size: 13px;
+  background: var(--bg);
+}
+
+.pane-skeleton[hidden] { display: none; }
+
+.pane-skeleton .spinner {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  animation: spin .8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- 窄屏 ---------- */
+
+@media (max-width: 860px) {
+  .shell-bar { gap: 8px; padding: 8px 10px; }
+  .shell-chip { max-width: 180px; }
+}
+
+@media (max-width: 700px) {
+  .tab-text { display: none; }
+  .tab { padding: 5px 12px; }
+  .shell-brand h1, .shell-brand .tag { display: none; }
+  .shell-chip { max-width: 120px; }
+  .shell-actions .btn .btn-text { display: none; }
+}

package/public/shell.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LLM API Gateway</title>
+  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/shell.css" />
+  <script>
+    // 防闪白：必须在首次绘制前把主题定下来，所以内联在这里（逻辑与 /theme.js 一致，四个页面都一样）
+    (() => {
+      try {
+        let t = localStorage.getItem('lgw.theme');
+        if (t !== 'dark' && t !== 'light') {
+          t = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        document.documentElement.setAttribute('data-theme', t);
+        document.documentElement.style.colorScheme = t;
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
+  <!-- 外部集成：地址上带 ?bg=<底色> 时按底色推导整套配色，并透传给三个面板（见 shell.js 的 paneSrc）。
+       必须是阻塞脚本（排在 theme.js 之前），否则会先按默认配色画一帧再变色 -->
+  <script src="/tint.js"></script>
+  <script src="/theme.js" defer></script>
+</head>
+<body class="shell-body">
+  <!-- 唯一顶栏：品牌 + Tab + 当前面板操作 + 主题。
+       三个面板自己的顶栏在嵌入时收起（html[data-embed] .topbar），避免两条横栏 -->
+  <header class="shell-bar" id="shell-bar">
+    <div class="brand shell-brand">
+      <span class="dot" id="shell-dot"></span>
+      <h1>LLM API Gateway</h1>
+      <span class="tag" id="shell-tag">Web UI</span>
+    </div>
+
+    <nav class="tabs" id="shell-tabs" role="tablist" aria-label="页面">
+      <button class="tab" type="button" role="tab" data-tab="chat" id="tab-chat"
+              aria-selected="true" title="纯对话：不碰文件系统（Alt+1）">
+        <span class="tab-icon" aria-hidden="true">💬</span><span class="tab-text">聊天</span>
+      </button>
+      <button class="tab" type="button" role="tab" data-tab="task" id="tab-task"
+              aria-selected="false" title="任务模式：选一个目录，模型真读写（Alt+2）">
+        <span class="tab-icon" aria-hidden="true">🗂</span><span class="tab-text">任务</span>
+        <span class="tab-dot" aria-hidden="true"></span>
+      </button>
+      <button class="tab" type="button" role="tab" data-tab="manual" id="tab-manual"
+              aria-selected="false" title="操作手册：流程 + 三端指令对照（Alt+3）">
+        <span class="tab-icon" aria-hidden="true">📖</span><span class="tab-text">手册</span>
+      </button>
+      <span class="tab-ink" id="tab-ink" aria-hidden="true"></span>
+    </nav>
+
+    <div class="shell-actions" id="shell-actions"></div>
+
+    <div class="theme-switch" role="group" aria-label="主题">
+      <button class="theme-btn" type="button" data-theme-option="system" title="跟随系统" aria-label="跟随系统">◐</button>
+      <button class="theme-btn" type="button" data-theme-option="light" title="白天" aria-label="白天">☀</button>
+      <button class="theme-btn" type="button" data-theme-option="dark" title="黑夜" aria-label="黑夜">☾</button>
+    </div>
+
+    <button class="btn ghost icon-only" id="btn-reload-pane" type="button"
+            title="重新加载当前面板（面板里的状态会重置）">⟳</button>
+  </header>
+
+  <!-- 面板区：iframe 首次激活时才创建（懒加载），切走的保留在 DOM 里 —— 状态不丢 -->
+  <main class="panes" id="panes"></main>
+
+  <script src="/shell.js"></script>
+</body>
+</html>