@jesonliu/lark-claudecode-bridge 1.4.3 → 2.0.0

package/assets/web/js/pages/slash.js

@@ -2,21 +2,24 @@
 import { S, $, esc, toast, api } from '../core.js';
 import { openDrawer, closeDrawer, confirmDialog } from '../ui.js';
 
+const IC_INFO = '<circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M12 12v4"/>';
+const svg = (inner, s = 13) => `<svg viewBox="0 0 24 24" width="${s}" height="${s}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+
 function renderSlash(el) {
   el.innerHTML = `
-  <div class="card">
-    <h3>飞书斜杠命令（远端管理）</h3>
-    <div class="desc">直接读写飞书开放平台已注册的斜杠命令；聊天输入 <code>/</code> 弹出指令面板，选中后可继续输入描述再发送。需给应用开通 <code>application:app_slash_command</code> 读写权限并发布版本；改动约 5 分钟后生效（PC 端 7.70+）。<b>本页操作即时提交飞书，与底部「保存」按钮无关。</b></div>
-    <div class="list-toolbar">
-      <div style="max-width:320px;width:100%"><label>目标应用</label><select id="scApp"></select></div>
-      <span class="spacer"></span>
-      <button class="btn" id="scReload">刷新列表</button>
-      <button class="btn" id="scBuiltins">补齐内置命令</button>
-      <button class="btn primary" id="scAdd">+ 新增命令</button>
+  <div class="panel">
+    <header class="panel-head"><h3>已注册命令</h3>
+      <div class="panel-actions">
+        <select id="scApp" style="width:auto;padding:4px 10px;font-size:12.5px"></select>
+        <button class="btn sm" id="scReload">刷新</button>
+        <button class="btn sm" id="scBuiltins">补齐内置</button>
+      </div></header>
+    <div class="panel-body">
+      <table><thead><tr><th style="width:170px">命令</th><th>描述</th><th style="width:130px">图标</th><th style="width:150px">操作</th></tr></thead>
+      <tbody id="scBody"><tr><td colspan="4" style="padding:36px 0"><div class="br-spin-sm"></div><div class="hint" style="text-align:center">正在从飞书拉取斜杆命令…</div></td></tr></tbody></table>
+      <pre class="report" id="scReport" style="display:none;margin-top:12px"></pre>
     </div>
-    <table style="margin-top:12px"><thead><tr><th style="width:170px">命令</th><th>描述</th><th style="width:150px">图标</th><th style="width:130px">操作</th></tr></thead>
-    <tbody id="scBody"><tr><td colspan="4" style="padding:36px 0"><div class="br-spin-sm"></div><div class="hint" style="text-align:center">正在从飞书拉取斜杆命令…</div></td></tr></tbody></table>
-    <pre class="report" id="scReport" style="display:none;margin-top:12px"></pre>
+    <footer class="panel-foot">${svg(IC_INFO)} 直接读写飞书开放平台（需 application:app_slash_command 权限并发布版本），改动约 5 分钟生效（PC 端 7.70+）；<b>本页操作即时提交飞书，与「保存」按钮无关</b>。聊天输入 <code>/</code> 弹出指令面板。</footer>
   </div>`;
   const appSel = $('#scApp');
   (S.status?.apps || []).forEach((a) => {
@@ -39,11 +42,11 @@ function renderSlash(el) {
           <td><code>/${esc(x.command)}</code></td>
           <td>${esc(x.description?.default_value || '')}</td>
           <td class="hint">${esc(x.description?.icon?.icon_key || '—')}</td>
-          <td>
+          <td class="ops">
             <button class="btn sm" data-op="edit">编辑</button>
             <button class="btn sm danger" data-op="del">删除</button>
           </td>
-        </tr>`).join('') || '<tr><td colspan="4" class="hint">远端暂无命令；点「补齐内置命令」一键注册 bridge 内置指令</td></tr>';
+        </tr>`).join('') || '<tr class="empty"><td colspan="4">远端暂无命令；点「补齐内置」一键注册 bridge 内置指令</td></tr>';
       $('#scBody').querySelectorAll('button[data-op]').forEach((b) => b.onclick = () => {
         const tr = b.closest('tr');
         if (b.dataset.op === 'del') return delRemote(tr.dataset.cid, tr.dataset.cmd);
@@ -55,7 +58,7 @@ function renderSlash(el) {
         });
       });
     } catch (e) {
-      $('#scBody').innerHTML = `<tr><td colspan="4" class="hint">加载失败：${esc(e.message)}（确认已开通斜杠命令权限后点「刷新列表」重试）</td></tr>`;
+      $('#scBody').innerHTML = `<tr><td colspan="4" class="hint">加载失败：${esc(e.message)}（确认已开通斜杠命令权限后点「刷新」重试）</td></tr>`;
     }
   };
   const delRemote = async (cid, cmd) => {
@@ -74,17 +77,19 @@ function renderSlash(el) {
   const openSlashDrawer = ({ commandId, command, description, icon }) => {
     const isCreate = !commandId;
     openDrawer({
-      title: isCreate ? '新增斜杠命令' : `编辑 /${command}`,
+      title: isCreate ? '新增命令' : `编辑 /${command}`,
+      narrow: true,
       bodyHtml: `
-        <label>命令（不带 /）</label>
+        <label class="fld">命令（不带 /${isCreate ? '' : '；飞书侧命令名不可修改，如需改名请删除后重建'}）</label>
         <input type="text" id="dcCmd" ${isCreate ? '' : 'disabled title="飞书侧命令名不可修改（如需改名请删除后重建）"'} value="${esc(command || '')}" placeholder="produce">
-        <label>描述（指令面板展示）</label>
+        <label class="fld">描述（指令面板展示）</label>
         <input type="text" id="dcDesc" value="${esc(description || '')}" placeholder="内容生产流程">
-        <label>图标 icon_key（可空，取值见飞书开放平台图标列表）</label>
+        <label class="fld">图标 icon_key（可空，取值见飞书开放平台图标列表）</label>
         <input type="text" id="dcIcon" value="${esc(icon || '')}" placeholder="skill_outlined">`,
-      footHtml: `<button class="btn primary" id="dcSave">${isCreate ? '创建（即时提交飞书）' : '保存（即时提交飞书）'}</button>`,
-      onMount: () => {
-        document.getElementById('dcSave').onclick = async () => {
+      footHtml: `<span class="sp"></span><button class="btn" id="dcCancel">取消</button><button class="btn primary" id="dcSave">${isCreate ? '创建' : '保存'}</button>`,
+      onMount: ({ foot }) => {
+        foot.querySelector('#dcCancel').onclick = closeDrawer;
+        foot.querySelector('#dcSave').onclick = async () => {
           const cmd = document.getElementById('dcCmd').value.trim();
           const desc = document.getElementById('dcDesc').value.trim();
           const ic = document.getElementById('dcIcon').value.trim();
@@ -96,7 +101,7 @@ function renderSlash(el) {
             } else {
               await api('POST', '/api/slash-commands/action', { op: 'update', app: appSel.value, commandId, description: desc, icon: ic });
             }
-            toast(isCreate ? `已创建 /${cmd}` : '已保存');
+            toast(`${isCreate ? `已创建 /${cmd}` : '已保存'}（即时提交飞书，约 5 分钟生效）`);
             closeDrawer();
             loadRemote();
           } catch (e) { toast(e.message, true); }
@@ -106,6 +111,7 @@ function renderSlash(el) {
   };
   appSel.onchange = loadRemote;
   $('#scReload').onclick = loadRemote;
+  $('#pageActions').innerHTML = '<button class="btn primary" id="scAdd">新增命令</button>';
   $('#scAdd').onclick = () => openSlashDrawer({ command: '', description: '', icon: '' });
   $('#scBuiltins').onclick = async () => {
     if (!appSel.value) return;
@@ -129,6 +135,8 @@ function renderSlash(el) {
 export const page = {
   id: 'slash',
   title: '斜杠命令',
+  desc: '注册到飞书开放平台的指令面板，聊天框输入 / 触发',
+  legend: false,
   icon: '<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>',
   render: renderSlash,
 };

package/assets/web/js/pages/workspaces.js

@@ -1,101 +1,141 @@
-// ============ 工作区（行内编辑 + 卡级保存；改动落盘后热生效） ============
+// ============ 工作区（卡片列表 + 两步选目录弹窗 + 全局默认；卡级保存，热生效） ============
+// 列表行内「设为默认」改 defaults.workspace；添加/修改走弹窗：第一步选文件夹，第二步填名称。
 import { S, $, esc, toast, cardDirty, applyDirty } from '../core.js';
-import { saveBarHtml, dirtyDotHtml, bindSaveBar, pickDirectory, confirmDialog } from '../ui.js';
+import { saveBarHtml, dirtyDotHtml, bindSaveBar, pickDirectory, confirmDialog, openModal, closeModal } from '../ui.js';
+
+const svg = (inner, s = 16) => `<svg viewBox="0 0 24 24" width="${s}" height="${s}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+const IC = {
+  folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  folderOpen: '<path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M12 12v4"/>',
+};
+
+/** 两步式工作区弹窗：选目录（pickDirectory）→ 已选路径卡 + 名称输入 → 确认写回 doc */
+function wsFolderModal(doc, idx, el) {
+  const isNew = idx < 0;
+  const old = isNew ? { name: '', path: '' } : doc.workspaces[idx];
+  const w = { name: old.name || '', path: old.path || '' };
+  const paint = () => {
+    openModal({
+      title: isNew ? '添加工作区' : '修改工作区',
+      width: 'min(460px,92vw)',
+      bodyHtml: `
+        <div class="mut" style="font-size:12.5px;margin:-4px 0 12px">第一步选择文件夹，接着填写名称。</div>
+        ${w.path
+          ? `<div class="picked-path"><span class="ws-ico">${svg(IC.folderOpen)}</span>
+              <div style="min-width:0"><b>${esc(w.path.replace(/[\\/]+$/, '').split(/[\\/]/).pop())}</b><div class="hint mono" style="word-break:break-all">${esc(w.path)}</div></div></div>
+            <button class="btn primary" id="wsPick" style="margin-top:8px">${svg(IC.folder, 14)} 重新选择文件夹</button>`
+          : `<button class="btn primary" id="wsPick" style="width:100%;justify-content:center">${svg(IC.folder, 14)} 选择文件夹</button>`}
+        <label class="fld" style="margin-top:16px">工作区名称</label>
+        <input type="text" id="wsName" value="${esc(w.name)}" placeholder="如 电商项目">
+        <div class="mini-note" style="margin-top:6px">名称用于在工作区列表中识别，可随时修改。</div>
+        ${w.path ? '' : '<div class="mini-note" style="margin-top:10px">如需更换目录，请点击上方按钮重新选择。</div>'}`,
+      footHtml: `<span class="sp"></span><button class="btn" id="wsMCancel">取消</button><button class="btn primary" id="wsMOk">${isNew ? '确认添加' : '保存'}</button>`,
+    });
+    $('#wsPick').onclick = async () => {
+      const picked = await pickDirectory(w.path || '');
+      if (picked == null) return; // 取消选择：留在弹窗，原路径不动
+      w.path = picked;
+      if (!w.name) w.name = picked.replace(/[\\/]+$/, '').split(/[\\/]/).pop() || '';
+      paint();
+      $('#wsName').value = w.name;
+    };
+    $('#wsMCancel').onclick = closeModal;
+    $('#wsMOk').onclick = () => {
+      if (!w.path) return toast('请先选择文件夹', true);
+      w.name = $('#wsName').value.trim();
+      if (!w.name) return toast('请填写工作区名称', true);
+      if (isNew) doc.workspaces.push({ ...w });
+      else doc.workspaces[idx] = { ...w };
+      // 改名联动：全局默认指向旧名时同步，否则保存会因 defaults.workspace 不在工作区列表报错
+      if (!isNew && doc.defaults?.workspace && doc.defaults.workspace === old.name) {
+        doc.defaults = { ...(doc.defaults || {}), workspace: w.name };
+        cardDirty('def', true);
+      }
+      closeModal();
+      cardDirty('ws', true);
+      renderWorkspaces(el);
+    };
+  };
+  paint();
+}
 
 function renderWorkspaces(el) {
   const doc = S.doc;
   doc.workspaces = doc.workspaces || [];
+  const defWs = doc.defaults?.workspace || '';
   el.innerHTML = `
-  <div class="card">
-    <h3>工作区${dirtyDotHtml('ws')}</h3>
-    <div class="desc">Claude 的工作目录白名单。需要「先出方案再执行」时，在飞书会话里发 /plan 按通道切换计划模式；git 仓库工作区任务收尾会自动发汇总 diff 卡片。</div>
-    <div class="list-toolbar">
-      <button class="btn primary" id="wsAdd">+ 添加工作区</button>
-    </div>
-    <table><thead><tr><th style="width:180px">名字</th><th>路径</th><th style="width:50px"></th></tr></thead>
-    <tbody id="wsBody"></tbody></table>
+  <div class="panel">
+    <header class="panel-head"><h3>工作区目录${dirtyDotHtml('ws')}</h3>
+      <span class="panel-sub">选择本机文件夹并设置一个便于识别的名称</span>
+      <div class="panel-actions"><button class="btn primary sm" id="wsAdd">＋ 添加工作区</button></div>
+    </header>
+    <div class="panel-body"><div class="ws-list" id="wsList"></div></div>
     ${saveBarHtml('ws')}
-    <div class="footer-note">运行中的桥接器下一条消息自动生效，无需重启。</div>
+    <footer class="panel-foot">${svg(IC.info, 13)} git 仓库工作区的任务收尾会自动发送汇总 diff 卡片；运行中的桥接器下一条消息自动生效，无需重启。</footer>
   </div>
-  <div class="card">
-    <h3>全局默认${dirtyDotHtml('def')}</h3>
-    <div class="row-2col">
-      <div><label>默认工作区（defaults.workspace）</label><select id="defWs"></select></div>
-      <div><label>全局并发（concurrency）</label><input type="number" id="globalCc" min="1" max="100"></div>
-      <div><label>上下文提醒阈值（session.context_remind_tokens；0=关闭）</label><input type="number" id="defCtxRemind" min="0" max="10000000"></div>
-      <div><label>飞书卡片宽度（card.width）</label>
-        <select id="cardWidth">
-          <option value="default">默认（飞书默认）</option>
-          <option value="fill">撑满聊天窗口</option>
-        </select>
+  <div class="panel">
+    <header class="panel-head"><h3>全局默认${dirtyDotHtml('def')}</h3>
+      <span class="panel-sub">用于新会话的默认行为；默认工作区在上方列表行内「设为默认」</span></header>
+    <div class="panel-body">
+      <div class="grid3">
+        <div><label class="fld">全局并发（concurrency）</label><input type="number" id="globalCc" min="1" max="100"></div>
+        <div><label class="fld">上下文提醒阈值（session.context_remind_tokens；0=关闭）</label><input type="number" id="defCtxRemind" min="0" max="10000000"></div>
+        <div><label class="fld">飞书卡片宽度（card.width）</label>
+          <select id="cardWidth">
+            <option value="default">默认（飞书默认）</option>
+            <option value="fill">撑满聊天窗口</option>
+          </select>
+        </div>
       </div>
     </div>
     ${saveBarHtml('def')}
   </div>`;
   bindSaveBar(el, 'ws');
   bindSaveBar(el, 'def');
-  /** 重建默认工作区下拉选项：保留当前选中；现值不在工作区列表（手工编辑过的脏配置）时注入该值本身，防静默丢数据 */
-  const syncDefWsOptions = () => {
-    const sel = $('#defWs');
-    if (!sel) return;
-    const cur = doc.defaults?.workspace || '';
-    const names = doc.workspaces.map((w) => w.name || '').filter(Boolean);
-    const extra = cur && !names.includes(cur) ? [cur] : [];
-    sel.innerHTML = ['', ...names, ...extra].map((n) =>
-      `<option value="${esc(n)}"${n === cur ? ' selected' : ''}>${n === '' ? '（未设置）' : esc(n)}${extra.includes(n) ? '（配置中不存在）' : ''}</option>`).join('');
-  };
-  const body = $('#wsBody');
-  const renderRow = (ws, idx) => {
-    const tr = document.createElement('tr');
-    tr.innerHTML = `
-      <td><input type="text" data-f="name" value="${esc(ws.name || '')}"></td>
-      <td><div class="input-btn">
-        <input type="text" data-f="path" value="${esc(ws.path || '')}">
-        <button class="btn sm" data-browse="path" title="浏览选择目录">浏览</button>
-      </div></td>
-      <td><button class="btn sm danger">删除</button></td>`;
-    tr.querySelectorAll('[data-f]').forEach((input) => {
-      input.oninput = input.onchange = () => {
-        const f = input.dataset.f;
-        if (f === 'name') {
-          // 改名联动：全局默认指向旧名时同步，否则保存会因 defaults.workspace 不在工作区列表报错
-          if (doc.defaults?.workspace && doc.defaults.workspace === ws.name) {
-            doc.defaults = { ...(doc.defaults || {}), workspace: input.value };
-          }
-          ws.name = input.value;
-          syncDefWsOptions();
-        }
-        else ws[f] = input.value;
-        cardDirty('ws', true);
-      };
+  const drawRows = () => {
+    $('#wsList').innerHTML = doc.workspaces.map((w, i) => `
+      <div class="ws-item">
+        <span class="ws-ico">${svg(IC.folder)}</span>
+        <div class="ws-main">
+          <div class="ws-name">${esc(w.name) || '<span class="mut">（未命名）</span>'} ${defWs === w.name ? '<span class="tag ok">默认</span>' : ''}</div>
+          <div class="ws-path">${esc(w.path) || '（未选择目录）'}</div>
+        </div>
+        <div class="ws-ops">
+          ${defWs === w.name ? '' : `<button class="btn sm" data-wdef="${i}">设为默认</button>`}
+          <button class="btn sm" data-wedit="${i}">修改</button>
+          <button class="btn sm danger" data-wdel="${i}">删除</button>
+        </div>
+      </div>`).join('') || '<div class="empty">暂无工作区，点右上「＋ 添加工作区」开始</div>';
+    $('#wsList').querySelectorAll('[data-wdef]').forEach((b) => b.onclick = () => {
+      doc.defaults = { ...(doc.defaults || {}), workspace: doc.workspaces[Number(b.dataset.wdef)].name };
+      cardDirty('def', true);
+      renderWorkspaces(el);
     });
-    // 「删除」按钮精确选择（class="btn sm danger"）；原 tr.querySelector('.btn') 命中「浏览」并被浏览逻辑覆盖，故点「删除」无反应
-    tr.querySelector('.danger').onclick = async () => {
+    $('#wsList').querySelectorAll('[data-wedit]').forEach((b) => b.onclick = () => wsFolderModal(doc, Number(b.dataset.wedit), el));
+    $('#wsList').querySelectorAll('[data-wdel]').forEach((b) => b.onclick = async () => {
       if (doc.workspaces.length <= 1) return toast('至少保留一个工作区', true);
+      const idx = Number(b.dataset.wdel);
+      const w = doc.workspaces[idx];
       if (!(await confirmDialog({
         title: '删除工作区',
-        message: `确定删除工作区「${esc(ws.name || '未命名')}」？随本卡「保存」生效，保存前可点「还原」撤销。`,
+        message: `确定删除工作区「${esc(w.name || '未命名')}」？随本卡「保存」生效，保存前可点「还原」撤销。`,
         danger: true,
         confirmText: '删除',
       }))) return;
       doc.workspaces.splice(idx, 1);
+      // 删除的是默认工作区：默认顺移到剩余第一个，避免保存时 defaults.workspace 悬空报错
+      if (doc.defaults?.workspace === w.name) {
+        doc.defaults = { ...(doc.defaults || {}), workspace: doc.workspaces[0]?.name || '' };
+        cardDirty('def', true);
+        toast('已同步切换全局默认工作区，请一并保存', true);
+      }
       cardDirty('ws', true);
       renderWorkspaces(el);
-    };
-    // 浏览选目录：回填后手动同步 ws.path（直接改 input.value 不触发 oninput）
-    tr.querySelector('[data-browse]').onclick = async () => {
-      const picked = await pickDirectory(ws.path || '');
-      if (picked == null) return;
-      ws.path = picked;
-      tr.querySelector('input[data-f=path]').value = picked;
-      cardDirty('ws', true);
-    };
-    body.appendChild(tr);
+    });
   };
-  doc.workspaces.forEach(renderRow);
-  $('#wsAdd').onclick = () => { doc.workspaces.push({ name: '', path: '' }); cardDirty('ws', true); renderWorkspaces(el); };
-  syncDefWsOptions();
-  $('#defWs').onchange = () => { doc.defaults = { ...(doc.defaults || {}), workspace: $('#defWs').value }; cardDirty('def', true); };
+  drawRows();
+  $('#wsAdd').onclick = () => wsFolderModal(doc, -1, el);
   $('#globalCc').value = doc.concurrency ?? 3;
   $('#globalCc').oninput = () => { doc.concurrency = Number($('#globalCc').value) || 3; cardDirty('def', true); };
   // 上下文提醒阈值：空值 = 移除 session 段（PUT 跳过 = 磁盘原值未变，等价回滚）；合法数字 = 写 session 段
@@ -117,6 +157,7 @@ function renderWorkspaces(el) {
 export const page = {
   id: 'workspaces',
   title: '工作区',
+  desc: 'Claude 的工作目录白名单与全局默认',
   icon: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
   render: renderWorkspaces,
 };

package/assets/web/js/theme.js

@@ -1,23 +1,26 @@
-// ============ 主题切换：跟随系统 / 亮色 / 暗色（顶栏分段控件，localStorage 持久化） ============
-// data-theme 写在 <html> 上：auto = 不设属性（CSS 媒体查询接管）；light/dark = 手动覆盖
+// ============ 主题切换：亮 / 暗单按钮（原型同款），localStorage 持久化 ============
+import { $ } from './core.js';
+
 const KEY = 'lcb-theme';
-const mq = window.matchMedia('(prefers-color-scheme: dark)');
-let current = 'auto';
 
-const apply = (mode) => {
-  current = mode;
-  try { localStorage.setItem(KEY, mode); } catch { /* 隐私模式等写入失败可容忍 */ }
-  const root = document.documentElement;
-  if (mode === 'auto') delete root.dataset.theme;
-  else root.dataset.theme = mode;
-  document.querySelectorAll('#themeSwitch button').forEach((b) =>
-    b.classList.toggle('active', b.dataset.opt === mode));
-};
+const IC_SUN = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.3 11.3 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4m11.3-11.3 1.4-1.4"/>';
+const IC_MOON = '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>';
+const svg = (inner) => `<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+
+function apply(theme) {
+  document.documentElement.dataset.theme = theme;
+  const btn = $('#themeBtn');
+  if (btn) btn.innerHTML = svg(theme === 'dark' ? IC_SUN : IC_MOON); // 暗色时显示「切回亮色」的太阳
+}
 
-/** main.js 启动时调用一次：恢复上次选择 + 绑定切换 + auto 模式跟随系统变化 */
+/** main.js 启动时调用一次：恢复上次选择 + 绑定切换 */
 export function initTheme() {
-  apply(localStorage.getItem(KEY) || 'auto');
-  mq.addEventListener('change', () => { if (current === 'auto') apply('auto'); }); // 仅为刷新 active 态展示
-  document.querySelectorAll('#themeSwitch button').forEach((b) =>
-    b.onclick = () => apply(b.dataset.opt));
+  let saved = null;
+  try { saved = localStorage.getItem(KEY); } catch { /* 隐私模式等：读失败按默认 */ }
+  apply(saved === 'dark' ? 'dark' : 'light');
+  $('#themeBtn').onclick = () => {
+    const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+    apply(next);
+    try { localStorage.setItem(KEY, next); } catch { /* 写失败可容忍 */ }
+  };
 }

package/assets/web/js/ui.js

@@ -90,7 +90,7 @@ const joinPath = (base, name) => {
   return base.replace(/[\\/]+$/, '') + sepCh + name;
 };
 /**
- * 打开目录浏览弹层：盘符/根层 → 逐级进入 → 「选择此目录」确定。
+ * 打开目录浏览弹层（文件管理器风格）：盘符/根层 → 逐级进入 → 「选择此目录」确定。
  * resolve(选中的绝对路径) / resolve(null)（取消）。手输路径可直接跳转，
  * 路径不存在等错误在弹层内联提示（不关层、可改可回退）。
  */
@@ -99,64 +99,97 @@ export function pickDirectory(initialPath) {
     const mask = document.createElement('div');
     mask.className = 'modal-mask';
     mask.innerHTML = `
-    <div class="modal" role="dialog" aria-modal="true">
-      <h3 style="margin:0 0 10px">选择目录</h3>
-      <div class="row">
-        <input type="text" class="pd-jump" placeholder="输入或粘贴路径，回车前往">
-        <button class="btn pd-go" title="跳转到输入的路径">前往</button>
-        <button class="btn pd-up" title="返回上一级">上级目录</button>
+    <div class="modal dp" role="dialog" aria-modal="true" style = "padding:30px;">
+      <div class="dp-head">
+        <b>选择目录</b>
+        <span class="dp-path mono" title=""></span>
       </div>
-      <div class="hint pd-cur" style="margin:8px 0 0;word-break:break-all"></div>
-      <div class="dir-list"><div class="empty">加载中…</div></div>
-      <div class="savebar">
-        <span class="hint pd-note"></span><span style="flex:1"></span>
-        <button class="btn pd-cancel">取消</button>
-        <button class="btn primary pd-ok">选择此目录</button>
+      <div class="dp-toolbar">
+        <input type="text" class="dp-jump" placeholder="输入或粘贴路径，回车前往">
+        <button class="btn sm dp-go" title="跳转到输入的路径">前往</button>
+        <button class="btn sm dp-up" title="返回上一级">上级</button>
+      </div>
+      <div class="dp-grid"><div class="dp-empty">加载中…</div></div>
+      <div class="dp-foot">
+        <span class="hint dp-note"></span>
+        <span style="flex:1"></span>
+        <button class="btn dp-cancel">取消</button>
+        <button class="btn primary dp-ok">选择此目录</button>
       </div>
     </div>`;
     document.body.appendChild(mask);
-    const list = mask.querySelector('.dir-list');
-    const cur = mask.querySelector('.pd-cur');
-    const upBtn = mask.querySelector('.pd-up');
-    const okBtn = mask.querySelector('.pd-ok');
-    const note = mask.querySelector('.pd-note');
-    const jumpInput = mask.querySelector('.pd-jump');
+    const grid = mask.querySelector('.dp-grid');
+    const pathEl = mask.querySelector('.dp-path');
+    const upBtn = mask.querySelector('.dp-up');
+    const okBtn = mask.querySelector('.dp-ok');
+    const note = mask.querySelector('.dp-note');
+    const jumpInput = mask.querySelector('.dp-jump');
+    const FOLDER_SVG = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
     let current = '';      // '' = 盘符/根层（此层不可作为选择结果）
     let currentParent = null;
     const close = (val) => { mask.remove(); resolveP(val); };
     const render = (r) => {
       current = r.path || '';
       currentParent = r.parent;
-      cur.textContent = r.drives ? '此电脑（选择一个盘符）' : (r.path || '');
+      const curText = r.drives ? '此电脑（选择一个盘符）' : (r.path || '');
+      pathEl.textContent = curText;
+      pathEl.title = curText;
       upBtn.hidden = !r.parent;
       okBtn.disabled = !current;
       note.textContent = r.error || '';
       const items = r.drives
         ? r.drives.map((d) => ({ label: d, next: d }))
         : (r.dirs || []).map((d) => ({ label: d, next: joinPath(current, d) }));
-      list.innerHTML = items.length
-        ? items.map((it) => `<button data-next="${esc(it.next)}">${esc(it.label)}</button>`).join('')
-        : `<div class="empty">${r.error ? '（上述路径无法列出子目录）' : '（没有子目录）'}</div>`;
-      list.querySelectorAll('button[data-next]').forEach((b) => b.onclick = () => go(b.dataset.next));
+      grid.innerHTML = items.length
+        ? items.map((it) => `<button type="button" class="dp-item" data-next="${esc(it.next)}" title="${esc(it.next)}">${FOLDER_SVG}<span>${esc(it.label)}</span></button>`).join('')
+        : `<div class="dp-empty">${r.error ? '（上述路径无法列出子目录）' : '（没有子目录）'}</div>`;
+      grid.querySelectorAll('.dp-item').forEach((b) => b.onclick = () => go(b.dataset.next));
     };
     const go = async (p) => {
-      list.innerHTML = '<div class="empty">加载中…</div>';
+      grid.innerHTML = '<div class="dp-empty">加载中…</div>';
       try { render(await api('GET', `/api/fs/dirs?p=${encodeURIComponent(p)}`)); }
-      catch (e) { list.innerHTML = `<div class="empty">加载失败：${esc(e.message)}</div>`; }
+      catch (e) { grid.innerHTML = `<div class="dp-empty">加载失败：${esc(e.message)}</div>`; }
     };
     const jump = () => { const v = jumpInput.value.trim(); if (v) go(v); };
-    mask.querySelector('.pd-go').onclick = jump;
+    mask.querySelector('.dp-go').onclick = jump;
     jumpInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); jump(); } };
     upBtn.onclick = () => { if (currentParent) go(currentParent); };
-    okBtn.onclick = () => { if (current) close(current); };
-    mask.querySelector('.pd-cancel').onclick = () => close(null);
-    mask.onclick = (e) => { if (e.target === mask) close(null); };
+    // 关闭统一走 closeWithUnbind：弹层销毁时解绑捕获段按键监听
+    const unbind = bindDialogKeys((k) => { if (k === 'Escape') close(null); });
+    const closeWithUnbind = (val) => { unbind(); close(val); };
+    okBtn.onclick = () => { if (current) closeWithUnbind(current); };
+    mask.querySelector('.dp-cancel').onclick = () => closeWithUnbind(null);
+    mask.onclick = (e) => { if (e.target === mask) closeWithUnbind(null); };
     // 初始位置：现值路径存在则从它开始，否则停在盘符/根层（跳转框预填现值方便改错）
     jumpInput.value = initialPath || '';
     go(initialPath || '');
+    jumpInput.focus();
   });
 }
 
+// ============ 通用居中弹窗（挂壳层 #modalMask；CLI 授权 / 设置 / 改密 / 工作区选目录用） ============
+let modalOnClose = null;
+/** 打开通用居中弹窗。width 例：'min(460px,92vw)'；closeOnMask=false 时点遮罩不关（强制引导类） */
+export function openModal({ title, bodyHtml, footHtml, width = '', onClose = null, closeOnMask = true }) {
+  $('#modalTitle').textContent = title;
+  $('#modalBody').innerHTML = bodyHtml;
+  $('#modalFoot').innerHTML = footHtml || '';
+  $('#modalBox').style.width = width || '';
+  modalOnClose = onClose || null;
+  $('#modalMask').dataset.closeOnMask = closeOnMask ? '1' : '';
+  $('#modalMask').hidden = false;
+  return $('#modalBody');
+}
+export function closeModal() {
+  if ($('#modalMask').hidden) return;
+  $('#modalMask').hidden = true;
+  $('#modalBox').style.width = '';
+  const f = modalOnClose;
+  modalOnClose = null;
+  f?.();
+}
+export const isModalOpen = () => !$('#modalMask').hidden;
+
 // ============ 通用右侧抽屉（应用编辑 / 斜杆命令编辑 / 档案编辑共用） ============
 let drawerOnMount = null;
 let drawerSnap = null; // 抽屉打开前的 doc 快照（取消回滚用；远端 CRUD 抽屉不传 snap 则不回滚）
@@ -233,8 +266,18 @@ function initDrawerResize() {
 export function initDrawer() {
   $('#drawerClose').onclick = dismissDrawer;
   $('#drawerMask').addEventListener('mousedown', (e) => { if (e.target === e.currentTarget) dismissDrawer(); });
-  // ESC 有风格化弹窗打开时归弹窗（其自身在捕获阶段拦截并 stopPropagation，此处计数兜底）
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !openDialogs) dismissDrawer(); });
+  // 通用弹窗关闭路径：X / 点遮罩（closeOnMask 才关）/ ESC；层级 = 确认框 > 弹窗 > 抽屉
+  $('#modalClose').onclick = closeModal;
+  $('#modalMask').addEventListener('mousedown', (e) => {
+    if (e.target === e.currentTarget && $('#modalMask').dataset.closeOnMask) closeModal();
+  });
+  // ESC 分层：风格化弹窗（确认/输入/进度）自己在捕获段拦截；其次通用弹窗；最后抽屉
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if (openDialogs) return;
+    if (isModalOpen()) { closeModal(); return; }
+    dismissDrawer();
+  });
   initDrawerResize();
 }
 

package/dist/bin/lcb.js

@@ -11,6 +11,7 @@ import { startBridge } from '../index.js';
 import { loadConfig, CONFIG_PATH, CONFIG_DIR } from '../config.js';
 import { initManagedClaudeDir } from '../claude-config.js';
 import { startWebServer } from '../web/server.js';
+import { resetPasswordToDefault } from '../web/webauth.js';
 import { AccessControl } from '../access/access-control.js';
 import { VERSION } from '../version.js';
 import { join } from 'node:path';
@@ -84,6 +85,19 @@ async function main() {
             console.log('按 Ctrl+C 退出配置页');
             break;
         }
+        case 'reset-password': {
+            // 忘记配置页密码的兜底：恢复初始密码 123456（下次登录会再次引导修改）。
+            // 只有能登上这台机器的人才能执行——内网里隔着浏览器的人做不到，因此是安全的恢复通道
+            const r = resetPasswordToDefault(CONFIG_PATH);
+            if (!r.ok) {
+                console.error(`❌ ${r.error}`);
+                process.exit(1);
+            }
+            console.log('✅ 配置页密码已恢复为初始密码 123456');
+            console.log('注：webauth.json 每次校验现读现验，配置页无需重启，刷新页面输入 123456 即可进入；');
+            console.log('    登录后会再次引导你设置新密码。');
+            break;
+        }
         case 'pair': {
             const access = AccessControl.load(join(CONFIG_DIR, 'access.json'));
             const code = args[0];
@@ -220,6 +234,7 @@ async function main() {
   lcb setup              引导式配置（命令行问答，支持多个机器人应用）
   lcb start              启动桥接器（前台；含 Web 配置页，首次安装自动进入引导）
   lcb ui                 仅启动 Web 配置页（可与运行中的桥接器共存）
+  lcb reset-password     配置页密码忘记时，恢复初始密码 123456
   lcb pair <code>        批准配对码
   lcb app list           列出机器人应用
   lcb app add            添加机器人应用（重启后生效）