@vincentbanana/banana-gui 0.3.0 → 0.4.0

package/README.md

@@ -18,6 +18,14 @@ banana-gui-desktop      # 同上，等价的独立命令
 
 electron 是可选依赖（`optionalDependencies`），npm 安装时会自动带上；万一某个平台装不上，`banana-gui` 仍然照常工作，只是 `--desktop` 会提示你用浏览器版。
 
+> **国内网络注意**：electron 的二进制默认从 GitHub 下载，国内经常连不上（连不上时 npm 会静默跳过它，浏览器版不受影响）。想要桌面版就用镜像重装一次：
+>
+> ```bash
+> npm install -g electron --electron_mirror=https://npmmirror.com/mirrors/electron/
+> ```
+>
+> 装完 `banana-gui --desktop` 就能开窗口了。
+
 首次启动会进配置向导（选 provider、贴 API key、选权限、测连接），配置与 CLI 共用 `~/.banana/config.json`。
 
 ## 用法

package/bin/banana-gui-desktop.mjs

@@ -59,7 +59,13 @@ if (!binary) {
 }
 
 const main = join(here, '..', 'desktop', 'main.cjs');
-const child = spawn(binary, [main, ...args], { stdio: 'inherit' });
+const child = spawn(binary, [main, ...args], {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    BANANA_UI_DIR: join(here, '..', 'ui'),
+  },
+});
 child.on('error', (error) => {
   console.error('桌面版启动失败：' + error.message);
   console.error('可以先用浏览器版：banana-gui');

package/bin/banana-gui.mjs

@@ -9,10 +9,10 @@ import { fileURLToPath } from 'node:url';
 
 const require = createRequire(import.meta.url);
 const pkg = require('../package.json');
+const here = dirname(fileURLToPath(import.meta.url));
 
+/** CLI 内核入口。依赖可能被 npm 提升到上层 node_modules，用 require 解析更稳。 */
 function resolveCli() {
-  // 依赖可能被 npm 提升到上层 node_modules，用 require 解析更稳；
-  // 注意只能解析包根（子路径受 exports 限制）
   try {
     return require.resolve('@vincentbanana/bananacli');
   } catch {
@@ -25,6 +25,7 @@ function electronBinary() {
   for (const specifier of ['electron', '@vincentbanana/banana-gui/node_modules/electron']) {
     try {
       const resolved = require.resolve(specifier);
+      // electron 包的主入口导出的是可执行文件路径
       const binary = require(resolved);
       if (typeof binary === 'string') return binary;
     } catch {
@@ -35,7 +36,6 @@ function electronBinary() {
 }
 
 const args = process.argv.slice(2);
-const passthrough = ['--port', '--cwd', '--provider', '--model', '--base-url', '--api-key', '--setup'];
 
 if (args.includes('--version') || args.includes('-v')) {
   console.log(pkg.version);
@@ -51,7 +51,7 @@ if (args.includes('--help') || args.includes('-h')) {
   console.log('  --cwd <目录>     指定工作区');
   console.log('  --provider <名>  指定 provider');
   console.log('  --model <名>     指定模型');
-  console.log('  --open           启动后打开浏览器（默认已开启）');
+  console.log('  --no-open        不自动打开浏览器');
   console.log('  --version        显示版本');
   console.log('  --help           显示帮助');
   console.log('');
@@ -66,54 +66,45 @@ if (!entry) {
   process.exit(1);
 }
 
-// --desktop：交给 electron 开独立窗口，本进程不参与
+// 界面资源用本包自带的那份，保证 GUI 包和它的 ui/ 版本一致
+const uiDir = join(here, '..', 'ui');
+
+/** 用户参数原样转给内核；只摘掉本启动器自己的开关。 */
+function kernelArgs() {
+  const rest = [];
+  for (const arg of args) {
+    if (arg === '--desktop' || arg === '--open') continue;
+    rest.push(arg);
+  }
+  return rest;
+}
+
 if (args.includes('--desktop')) {
+  // --desktop：交给 electron 开独立窗口，本进程只做转发
   const binary = electronBinary();
   if (!binary) {
-    console.error('没装 electron，用不了独立窗口。补装一次即可：npm install -g electron');
-    console.error('（不装也没关系，直接运行 banana-gui 用浏览器版，功能完全一样）');
+    console.error('没装 electron，用不了独立窗口。补装一次即可：');
+    console.error('  npm install -g electron --electron_mirror=https://npmmirror.com/mirrors/electron/');
+    console.error('（国内网络必须加镜像参数，GitHub 连不上会装不了）');
+    console.error('不装也没关系：直接运行 banana-gui 用浏览器版，功能完全一样。');
     process.exit(1);
   }
-  const rest = args.filter((arg) => arg !== '--desktop');
-  const desktop = spawn(binary, [join(dirname(fileURLToPath(import.meta.url)), '..', 'desktop', 'main.cjs'), ...rest], {
-    stdio: 'inherit',
-  });
-  desktop.on('exit', (code) => process.exit(code ?? 0));
-  for (const signal of ['SIGINT', 'SIGTERM']) process.on(signal, () => desktop.kill(signal));
+  launch(binary, [join(here, '..', 'desktop', 'main.cjs'), ...kernelArgs()], {});
 } else {
-  startBrowser(entry);
+  launch(process.execPath, [entry, '--ui', ...kernelArgs()], { BANANA_UI_DIR: uiDir });
 }
 
-function startBrowser(entry) {
-  const cliArgs = ['--ui'];
-  let forwarding = false;
-  for (const arg of args) {
-    if (arg === '--open') {
-      forwarding = false;
-      continue;
-    }
-    forwarding = passthrough.includes(arg) || forwarding;
-    cliArgs.push(arg);
-  }
-
-  const child = spawn(process.execPath, [entry, ...cliArgs], { stdio: 'inherit' });
+function launch(command, commandArgs, extraEnv) {
+  const child = spawn(command, commandArgs, {
+    stdio: 'inherit',
+    env: { ...process.env, ...extraEnv },
+  });
+  child.on('error', (error) => {
+    console.error('启动失败：' + error.message);
+    process.exit(1);
+  });
   child.on('exit', (code) => process.exit(code ?? 0));
   for (const signal of ['SIGINT', 'SIGTERM']) {
     process.on(signal, () => child.kill(signal));
   }
 }
-let forwarding = false;
-for (const arg of args) {
-  if (arg === '--open') {
-    forwarding = false;
-    continue;
-  }
-  forwarding = passthrough.includes(arg) || forwarding;
-  cliArgs.push(arg);
-}
-
-const child = spawn(process.execPath, [entry, ...cliArgs], { stdio: 'inherit' });
-child.on('exit', (code) => process.exit(code ?? 0));
-for (const signal of ['SIGINT', 'SIGTERM']) {
-  process.on(signal, () => child.kill(signal));
-}

package/desktop/main.cjs

@@ -36,7 +36,11 @@ function startServer() {
   }
   child = spawn(process.execPath, [entry, ...serverArgs()], {
     stdio: ['ignore', 'pipe', 'pipe'],
-    env: { ...process.env, ELECTRON_RUN_AS_NODE: '1' },
+    env: {
+      ...process.env,
+      ELECTRON_RUN_AS_NODE: '1',
+      BANANA_UI_DIR: process.env.BANANA_UI_DIR ?? join(__dirname, '..', 'ui'),
+    },
   });
   return new Promise((resolve, reject) => {
     let buffer = '';
@@ -81,6 +85,28 @@ async function createWindow() {
     shell.openExternal(target);
     return { action: 'deny' };
   });
+  if (process.argv.includes('--selftest')) await selfTest(url);
+}
+
+/** --selftest：不靠人眼看，直接在页面里断言界面渲染成功，然后退出。 */
+async function selfTest(url) {
+  try {
+    const probe = await win.webContents.executeJavaScript(`(() => ({
+      title: document.title,
+      composed: Boolean(document.querySelector('#composer')),
+      sidebar: Boolean(document.querySelector('#sidebar')),
+      scriptLoaded: typeof window.fetch === 'function' && Boolean(document.querySelector('#input')),
+      theme: getComputedStyle(document.documentElement).getPropertyValue('--bg').trim(),
+    }))()`);
+    const ok = probe.title === 'Banana' && probe.composed && probe.sidebar && probe.scriptLoaded;
+    console.log('SELFTEST ' + JSON.stringify({ ok, url: url.replace(/\/t\/[a-f0-9]+\//, '/t/<token>/'), ...probe }));
+    child?.kill();
+    app.exit(ok ? 0 : 1);
+  } catch (error) {
+    console.log('SELFTEST ' + JSON.stringify({ ok: false, error: String(error?.message ?? error) }));
+    child?.kill();
+    app.exit(1);
+  }
 }
 
 const menuTemplate = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vincentbanana/banana-gui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Banana 的图形界面：本地服务 + 浏览器。黑白主题，自绘图标，无第三方 UI 依赖",
   "type": "module",
   "engines": {
@@ -65,13 +65,13 @@
     }
   },
   "optionalDependencies": {
-    "electron": "^33.0.0"
+    "electron": "^33.4.11"
   },
   "devDependencies": {
     "electron-builder": "^25.0.0"
   },
   "dependencies": {
-    "@vincentbanana/bananacli": "^0.3.0"
+    "@vincentbanana/bananacli": "^0.4.0"
   },
   "license": "MIT",
   "publishConfig": {

package/ui/app.js

@@ -130,6 +130,11 @@ function relativeTime(iso) {
   return `${Math.round(hours / 24)} 天前`;
 }
 
+/** 窄屏下侧边栏是覆盖层，选完会话必须收起来，否则挡住对话。 */
+function closeSidebarIfOverlay() {
+  if (window.matchMedia('(max-width: 900px)').matches) $('sidebar').classList.remove('open');
+}
+
 function renderSidebar() {
   const list = $('sessionList');
   list.innerHTML = '';
@@ -147,7 +152,10 @@ function renderSidebar() {
 
     node.addEventListener('click', (event) => {
       if (event.target.closest('[data-del], [data-menu]')) return;
-      post('session', { action: 'switch', ref: item.id }).then(() => refresh(true));
+      post('session', { action: 'switch', ref: item.id }).then(() => {
+        refresh(true);
+        closeSidebarIfOverlay();
+      });
     });
 
     node.querySelector('[data-del]').addEventListener('click', (event) => {
@@ -201,6 +209,7 @@ function openSessionMenu(item, anchor) {
     if (action === 'switch') {
       await post('session', { action: 'switch', ref: item.id });
       await refresh(true);
+      closeSidebarIfOverlay();
     } else if (action === 'rename') {
       const title = prompt('新的标题', item.title || '');
       if (title && title.trim()) {
@@ -1210,6 +1219,14 @@ function bind() {
     }
   });
 
+  // 窄屏下点空白处收起侧边栏（点侧边栏内部或开合按钮不算）
+  document.addEventListener('click', (event) => {
+    if (!window.matchMedia('(max-width: 900px)').matches) return;
+    if (!$('sidebar').classList.contains('open')) return;
+    if (event.target.closest('#sidebar, #toggleSidebar')) return;
+    $('sidebar').classList.remove('open');
+  });
+
   $('input').addEventListener('paste', (event) => {
     for (const item of event.clipboardData?.files ?? []) attach(item);
   });