@jesonliu/lark-claudecode-bridge 0.18.1 → 0.20.0

package/assets/web/js/pages/permissions.js

@@ -1,48 +1,56 @@
-// ============ 权限 ============
+// ============ 权限（页内一级 tab：免确认工具 / 危险命令黑名单） ============
 import { S, $, esc, toast, saveDoc } from '../core.js';
+import { confirmDialog } from '../ui.js';
 
-let permTab = 'allow'; // 页内子 tab 状态：免确认工具 / 危险命令黑名单（重渲染保持）
+let permTab = 'allow'; // tab 状态：切换 / 重渲染保持
 function renderPermissions(el) {
   const p = S.doc.permissions || (S.doc.permissions = {});
   p.allow_tools = p.allow_tools || [];
   p.dangerous_commands = p.dangerous_commands || [];
   el.innerHTML = `
-  <div class="card">
-    <div class="subtabs">
-      <button data-t="allow" class="${permTab === 'allow' ? 'active' : ''}">免确认工具</button>
-      <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单</button>
-    </div>
-    <div id="permPanel"></div>
-  </div>`;
-  el.querySelectorAll('.subtabs button').forEach((b) =>
+  <div class="tabs">
+    <button data-t="allow" class="${permTab === 'allow' ? 'active' : ''}">免确认工具</button>
+    <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单</button>
+  </div>
+  <div id="permPanel"></div>`;
+  el.querySelectorAll('.tabs button').forEach((b) =>
     b.onclick = () => { permTab = b.dataset.t; renderPermissions(el); });
   const panel = $('#permPanel');
-  if (permTab === 'danger') renderDangerTab(panel, p, el);
-  else renderAllowTab(panel, p, el);
+  if (permTab === 'danger') renderDangerTab(panel, p);
+  else renderAllowTab(panel, p);
 }
 
-function renderAllowTab(panel, p, el) {
+function renderAllowTab(panel, p) {
   const defaults = S.status?.permissionDefaults?.allowTools || [];
   const isDefault = defaults.length > 0 && JSON.stringify(p.allow_tools) === JSON.stringify(defaults);
   panel.innerHTML = `
+  <div class="card">
+    <h3>免确认工具</h3>
     <div class="desc">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
-    <div class="row" style="max-width:480px;margin:8px 0 10px">
-      <input type="text" id="newTool" placeholder="工具名，如 Write">
-      <div class="btn-wrap"><button class="btn sm" id="addTool">添加</button></div>
-      <div class="btn-wrap"><button class="btn sm" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button></div>
+    <div class="list-toolbar">
+      <input type="text" id="newTool" placeholder="工具名，如 Write" style="max-width:320px">
+      <button class="btn" id="addTool">添加</button>
+      <button class="btn" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
     </div>
-    ${p.allow_tools.length === 0 ? '<div style="background:#fff3e0;color:var(--warn);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</div>' : ''}
+    ${p.allow_tools.length === 0 ? '<div style="background:var(--warn-bg);color:var(--warn-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</div>' : ''}
     ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
     <table><tbody id="toolBody"></tbody></table>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：白名单命中直通，未命中弹确认卡。</div>`;
+    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：白名单命中直通，未命中弹确认卡。</div>
+  </div>`;
   $('#toolBody').innerHTML = p.allow_tools.map((t, i) =>
     `<tr><td><code>${esc(t)}</code></td><td style="width:80px"><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
     || '<tr><td colspan="2" class="hint">（空）</td></tr>';
   // 即时保存：低风险高频操作，免去「改完再点保存」两步；失败回滚内存保持一致
   $('#toolBody').querySelectorAll('button').forEach((b) =>
     b.onclick = async () => {
+      const i = Number(b.dataset.i);
+      if (!(await confirmDialog({
+        title: '移出免确认名单',
+        message: `确定将工具 <code>${esc(p.allow_tools[i])}</code> 移出免确认名单？移出后该工具的调用将恢复弹确认卡。`,
+        confirmText: '移出',
+      }))) return;
       const old = [...p.allow_tools];
-      p.allow_tools.splice(Number(b.dataset.i), 1);
+      p.allow_tools.splice(i, 1);
       if (!await saveDoc()) p.allow_tools = old;
     });
   $('#addTool').onclick = async () => {
@@ -54,34 +62,48 @@ function renderAllowTab(panel, p, el) {
   };
   $('#resetTools').onclick = async () => {
     if (!defaults.length) return;
-    if (!window.confirm('恢复为内置默认名单？当前自定义项将被覆盖（立即保存生效）。')) return;
+    if (!(await confirmDialog({
+      title: '恢复默认名单',
+      message: '恢复为内置默认名单？当前自定义项将被覆盖（立即保存生效）。',
+      confirmText: '恢复默认',
+    }))) return;
     const old = [...p.allow_tools];
     p.allow_tools = [...defaults];
     if (!await saveDoc()) p.allow_tools = old;
   };
 }
 
-function renderDangerTab(panel, p, el) {
+function renderDangerTab(panel, p) {
   const defaults = S.status?.permissionDefaults?.dangerousCommands || [];
   const isDefault = defaults.length > 0 && JSON.stringify(p.dangerous_commands) === JSON.stringify(defaults);
   panel.innerHTML = `
+  <div class="card">
+    <h3>危险命令黑名单</h3>
     <div class="desc">正则源串（不区分大小写），命中即弹确认卡。删除正则 = 放宽对应命令为直通，请谨慎。</div>
-    <div class="row" style="max-width:680px;margin:8px 0 10px">
-      <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force">
-      <div class="btn-wrap"><button class="btn sm" id="addDc">添加</button></div>
-      <div class="btn-wrap"><button class="btn sm" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button></div>
+    <div class="list-toolbar">
+      <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force" style="max-width:480px">
+      <button class="btn" id="addDc">添加</button>
+      <button class="btn" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
     </div>
-    ${p.dangerous_commands.length === 0 ? '<div style="background:#fee;color:var(--danger);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 黑名单为空：所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之</div>' : ''}
+    ${p.dangerous_commands.length === 0 ? '<div style="background:var(--err-bg);color:var(--err-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 黑名单为空：所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之</div>' : ''}
     ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
     <table><tbody id="dcBody"></tbody></table>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：白名单命中直通，未命中弹确认卡。</div>`;
+    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：白名单命中直通，未命中弹确认卡。</div>
+  </div>`;
   $('#dcBody').innerHTML = p.dangerous_commands.map((s, i) =>
     `<tr><td style="width:90%"><code>${esc(s)}</code></td><td><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
     || '<tr><td colspan="2" class="hint">（空）</td></tr>';
   $('#dcBody').querySelectorAll('button').forEach((b) =>
     b.onclick = async () => {
+      const i = Number(b.dataset.i);
+      if (!(await confirmDialog({
+        title: '删除黑名单正则',
+        message: `确定删除正则 <code>${esc(p.dangerous_commands[i])}</code>？删除后对应命令将免确认直通，请确认有意为之。`,
+        danger: true,
+        confirmText: '删除',
+      }))) return;
       const old = [...p.dangerous_commands];
-      p.dangerous_commands.splice(Number(b.dataset.i), 1);
+      p.dangerous_commands.splice(i, 1);
       if (!await saveDoc()) p.dangerous_commands = old;
     });
   $('#addDc').onclick = async () => {
@@ -94,7 +116,11 @@ function renderDangerTab(panel, p, el) {
   };
   $('#resetDc').onclick = async () => {
     if (!defaults.length) return;
-    if (!window.confirm('恢复为内置默认黑名单？当前自定义项将被覆盖（立即保存生效）。')) return;
+    if (!(await confirmDialog({
+      title: '恢复默认黑名单',
+      message: '恢复为内置默认黑名单？当前自定义项将被覆盖（立即保存生效）。',
+      confirmText: '恢复默认',
+    }))) return;
     const old = [...p.dangerous_commands];
     p.dangerous_commands = [...defaults];
     if (!await saveDoc()) p.dangerous_commands = old;

package/assets/web/js/pages/plugins.js

@@ -1,5 +1,6 @@
 // ============ 插件 ============
 import { $, esc, toast, api } from '../core.js';
+import { confirmDialog } from '../ui.js';
 
 // 点击 combobox 之外收起面板的监听只注册一次（模块级标志，等价原 document.body 标记法）
 let comboHideBound = false;
@@ -76,12 +77,25 @@ async function renderPlugins(el) {
             <button class="btn sm danger" data-op="uninstall" data-arg="${esc(p.key)}" data-dir="${p.source}">卸载</button>
           </td>
         </tr>`).join('');
-      body.querySelectorAll('button[data-op]').forEach((b) => b.onclick = () => {
+      body.querySelectorAll('button[data-op]').forEach((b) => b.onclick = async () => {
         const { op, arg, dir } = b.dataset;
-        // 影响性操作先二次确认（启用/安装/市场管理为新增类，无需确认）
-        if (op === 'disable' && !window.confirm(`确定要停用插件「${arg}」吗？\n停用后下一条消息不再加载该插件，可随时再启用。`)) return;
-        if (op === 'update' && !window.confirm(`确定要更新插件「${arg}」吗？\n更新后下一条消息按新版本加载。`)) return;
-        if (op === 'uninstall' && !window.confirm(`确定要卸载插件「${arg}」吗？\n卸载后需重新安装才能恢复，进行中的会话不受影响。`)) return;
+        // 影响性操作先二次确认（启用/安装/市场添加为新增类，无需确认）
+        if (op === 'disable' && !(await confirmDialog({
+          title: '停用插件',
+          message: `确定停用插件 <code>${esc(arg)}</code> 吗？停用后下一条消息不再加载该插件，可随时再启用。`,
+          confirmText: '停用',
+        }))) return;
+        if (op === 'update' && !(await confirmDialog({
+          title: '更新插件',
+          message: `确定更新插件 <code>${esc(arg)}</code> 吗？更新后下一条消息按新版本加载。`,
+          confirmText: '更新',
+        }))) return;
+        if (op === 'uninstall' && !(await confirmDialog({
+          title: '卸载插件',
+          message: `确定卸载插件 <code>${esc(arg)}</code> 吗？卸载后需重新安装才能恢复，进行中的会话不受影响。`,
+          danger: true,
+          confirmText: '卸载',
+        }))) return;
         // 慢操作走进度弹框；亚秒级启停走轻量 act（弹框一闪而过反而干扰）
         if (op === 'enable' || op === 'disable') act(op, arg, dir, b);
         else runOpDialog(op, arg, dir, b);
@@ -273,7 +287,16 @@ async function renderPlugins(el) {
     $('#plDir').value = $('#plMarketDir').value;
     runOpDialog('marketplace-add', v, $('#plMarketDir').value, $('#plDoMarketAdd'));
   };
-  $('#plDoMarketUpdate').onclick = () => runOpDialog('update-all', '', $('#plMarketDir').value, $('#plDoMarketUpdate'));
+  $('#plDoMarketUpdate').onclick = async () => {
+    // 影响面大（该目录全部已装插件逐个更新）：先二次确认
+    const dirLabel = $('#plMarketDir').value === 'bridge' ? 'bridge 托管目录' : '本机 ~/.claude';
+    if (!(await confirmDialog({
+      title: '全部更新',
+      message: `将刷新市场索引，并逐个更新「${dirLabel}」下的全部已装插件。确定继续？`,
+      confirmText: '全部更新',
+    }))) return;
+    runOpDialog('update-all', '', $('#plMarketDir').value, $('#plDoMarketUpdate'));
+  };
   await Promise.all([load(), loadAvailable()]);
 }
 

package/assets/web/js/pages/skills.js

@@ -0,0 +1,342 @@
+// ============ Skills 管理页（#12）============
+// 后端：GET /api/skills · POST /api/skills/action（create/delete）· POST /api/skills/import（zip）
+// 四来源：用户级·本机（~/.claude/skills）/ 用户级·bridge（managed 生效目录）/ 项目级（工作区 .claude/skills）/
+// 已装插件内（<plugin-installPath>/skills；plugin 只读，未启用时标「（未启用）」）。
+// 远端 CRUD：改动即时落盘，无页内保存条
+import { $, esc, toast, api } from '../core.js';
+import { openDrawer, closeDrawer, confirmDialog, promptDialog } from '../ui.js';
+
+/** 来源标签（function：plugin 来源需要拼插件名与启用状态） */
+const SOURCE_TAG = {
+  'machine-user': '用户级 · 本机',
+  bridge: '用户级 · bridge',
+  project: '项目级',
+};
+const sourceTag = (s) => {
+  if (s.source === 'project') return `项目级 · ${esc(s.workspaceName || '?')}`;
+  if (s.source === 'plugin') return `插件 · ${esc(s.pluginName || '?')}${s.pluginEnabled ? '' : '（未启用）'}`;
+  return SOURCE_TAG[s.source] || s.source;
+};
+/** 来源是否可删（project / plugin 只读；其他用户级可删） */
+const isDeletable = (s) => s.source !== 'project' && s.source !== 'plugin';
+
+function renderSkills(el) {
+  el.innerHTML = `
+  <div class="card">
+    <h3>Skills</h3>
+    <div class="desc">Claude Code 技能（每项一个目录，含 SKILL.md）。列表聚合四个来源：本机用户级、bridge 自管用户级、各工作区项目级、已装插件内的 skills（只读展示）。新增（含 zip 导入）统一进用户级生效目录。</div>
+    <div class="list-toolbar">
+      <button class="btn" id="skillImport">导入 zip</button>
+      <button class="btn primary" id="skillAdd">+ 新建</button>
+    </div>
+    <input type="file" id="skillZipFile" accept=".zip" style="display:none">
+    <input type="search" class="list-search" id="skillSearch" placeholder="按名字 / 来源 / 路径过滤…">
+    <table><thead><tr>
+      <th style="width:170px">名字</th><th>说明</th><th style="width:130px">来源</th><th style="width:240px">路径</th><th style="width:110px"></th>
+    </tr></thead>
+      <tbody id="skillBody"><tr><td colspan="5" class="desc">加载中…</td></tr></tbody>
+    </table>
+    <div class="desc" id="skillEffective" style="margin-top:10px"></div>
+  </div>`;
+  $('#skillAdd').onclick = addSkill;
+  $('#skillSearch').oninput = filterSkillRows;
+  bindZipImport();
+  void loadSkills();
+}
+
+/** 搜索过滤：遍历 tr.dataset.searchText 切换 hidden */
+function filterSkillRows() {
+  const q = ($('#skillSearch').value || '').trim().toLowerCase();
+  const body = $('#skillBody');
+  if (!body) return;
+  let shown = 0;
+  for (const tr of body.querySelectorAll('tr[data-search-text]')) {
+    const hit = !q || (tr.dataset.searchText || '').includes(q);
+    tr.hidden = !hit;
+    if (hit) shown++;
+  }
+  // 空状态行（无 data-search-text）展示原始文案
+  const total = body.querySelectorAll('tr[data-search-text]').length;
+  const empty = body.querySelector('tr.empty-row');
+  if (empty) empty.hidden = q && shown > 0 ? true : false;
+  // 实时同步计数到有效目录那行末尾
+  const eff = $('#skillEffective');
+  if (eff && eff.dataset.base) eff.textContent = `${eff.dataset.base} · 搜索结果 ${shown}/${total}`;
+}
+
+async function loadSkills() {
+  const body = $('#skillBody');
+  let data;
+  try {
+    data = await api('GET', '/api/skills');
+  } catch (e) {
+    body.innerHTML = `<tr><td colspan="5" class="desc">加载失败：${esc(e.message)}</td></tr>`;
+    return;
+  }
+  const eff = $('#skillEffective');
+  // 诊断行：插件目录扫到 N 个已装插件，其中 M 个含 skill 定义（含 plugin 未启用）
+  const stats = data.pluginStats;
+  const diag = stats && stats.total > 0 ? ` · 插件目录扫到 ${stats.total} 个已装插件，其中 ${stats.withSkills} 个含 skill 定义` : '';
+  if (eff) {
+    eff.dataset.base = `新增 / 导入落盘目录（用户级生效目录）：${data.effectiveDir || ''}${diag}`;
+    eff.textContent = eff.dataset.base;
+  }
+  const skills = data.skills || [];
+  if (skills.length === 0) {
+    body.innerHTML = `<tr class="empty-row"><td colspan="5" class="desc">暂无 skill（四个来源均未发现 SKILL.md）。可点上方「+ 新建」或「导入 zip」。</td></tr>`;
+    return;
+  }
+  body.innerHTML = '';
+  for (const s of skills) {
+    const tag = sourceTag(s);
+    const tr = document.createElement('tr');
+    tr.dataset.searchText = `${s.name} ${sourceTag(s)} ${s.path} ${s.description || ''}`.toLowerCase();
+    tr.innerHTML = `
+      <td><strong>${esc(s.name)}</strong></td>
+      <td>${esc(s.description) || '<span class="desc">（无说明）</span>'}</td>
+      <td><span class="chip">${tag}</span></td>
+      <td><code class="desc">${esc(s.path)}</code></td>
+      <td>
+        <button class="btn sm" data-browse="${esc(s.name)}">查看</button>
+        ${isDeletable(s) ? `<button class="btn sm danger" data-del="${esc(s.name)}">删除</button>` : ''}
+      </td>`;
+    tr.querySelector('[data-browse]').onclick = () => browseSkill(s);
+    const delBtn = tr.querySelector('[data-del]');
+    if (delBtn) delBtn.onclick = () => delSkill(s);
+    body.appendChild(tr);
+  }
+  // 保留搜索框当前过滤（如刷新列表后保留关键字）
+  filterSkillRows();
+}
+
+async function delSkill(s) {
+  if (!(await confirmDialog({
+    title: '删除 skill',
+    message: `确定删除 skill <b>${esc(s.name)}</b>（${sourceTag(s)}）？该目录会被整体移除（不可恢复）。`,
+    danger: true,
+    confirmText: '删除',
+  }))) return;
+  api('POST', '/api/skills/action', { op: 'delete', name: s.name, source: s.source, workspaceName: s.workspaceName })
+    .then(() => { toast('已删除'); void loadSkills(); })
+    .catch((e) => toast(e.message, true));
+}
+
+// ---------- skill 文件浏览（#3）：目录树 + 原文/视图/双栏三种查看模式 ----------
+
+/** 极简 markdown → HTML（先整体转义再还原语法，绝无 XSS 面）：标题/代码块/行内代码/粗斜体/列表/引用/链接/分割线 */
+function renderMarkdown(src) {
+  const codeBlocks = [];
+  let text = String(src).replace(/```(\w*)\n?([\s\S]*?)(?:```|$)/g, (_m, lang, code) => {
+    codeBlocks.push(`<pre style="background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow:auto;font-size:12px"><code>${esc(code.replace(/\n$/, ''))}</code></pre>`);
+    return `${codeBlocks.length - 1}`;
+  });
+  const lines = text.split('\n');
+  const out = [];
+  let listOpen = false;
+  const closeList = () => { if (listOpen) { out.push('</ul>'); listOpen = false; } };
+  const inline = (s) => esc(s)
+    .replace(/`([^`]+)`/g, '<code style="background:var(--code-bg);padding:1px 5px;border-radius:4px;font-size:12px">$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" style="color:var(--primary)">$1</a>');
+  for (const line of lines) {
+    const block = /^ (\d+) $/.exec(line);
+    if (block) { closeList(); out.push(codeBlocks[Number(block[1])]); continue; }
+    const h = /^(#{1,4})\s+(.*)$/.exec(line);
+    if (h) { closeList(); const lv = h[1].length; out.push(`<h${lv + 1} style="margin:12px 0 6px">${inline(h[2])}</h${lv + 1}>`); continue; }
+    if (/^\s*[-*]\s+/.test(line)) {
+      if (!listOpen) { out.push('<ul style="margin:4px 0;padding-left:22px">'); listOpen = true; }
+      out.push(`<li>${inline(line.replace(/^\s*[-*]\s+/, ''))}</li>`);
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      if (!listOpen) { out.push('<ul style="margin:4px 0;padding-left:22px">'); listOpen = true; }
+      out.push(`<li>${inline(line.replace(/^\s*\d+\.\s+/, ''))}</li>`);
+      continue;
+    }
+    closeList();
+    if (/^---+\s*$/.test(line)) { out.push('<hr style="border:none;border-top:1px solid var(--border);margin:10px 0">'); continue; }
+    if (/^>\s?/.test(line)) { out.push(`<blockquote style="margin:6px 0;padding:4px 12px;border-left:3px solid var(--border);color:var(--muted,#667)">${inline(line.replace(/^>\s?/, ''))}</blockquote>`); continue; }
+    if (line.trim() === '') { out.push(''); continue; }
+    out.push(`<p style="margin:4px 0">${inline(line)}</p>`);
+  }
+  closeList();
+  return out.join('\n');
+}
+
+/** 浏览抽屉：左侧文件树（目录懒加载展开），右侧查看区（markdown 文件支持 原文/视图/两者 三模式） */
+function browseSkill(s) {
+  openDrawer({
+    title: `${s.name} · ${sourceTag(s)}`,
+    bodyHtml: `
+      <div class="hint" style="margin:0 0 10px"><code class="desc">${esc(s.path)}</code></div>
+      <div style="display:flex;gap:14px;align-items:flex-start">
+        <div id="sbTree" style="width:250px;flex:none;border:1px solid var(--border);border-radius:8px;padding:8px;max-height:62vh;overflow:auto;font-size:13px">
+          <div class="desc">目录加载中…</div>
+        </div>
+        <div style="flex:1;min-width:0">
+          <div id="sbModes" style="display:none;gap:8px;margin-bottom:8px" class="subtabs">
+            <button data-mode="both" class="active">两者都看</button>
+            <button data-mode="raw">只看原文</button>
+            <button data-mode="view">只看视图</button>
+          </div>
+          <div id="sbFileName" class="desc" style="margin-bottom:6px">点击左侧文件查看内容</div>
+          <div id="sbView" style="display:none;border:1px solid var(--border);border-radius:8px;padding:12px;max-height:56vh;overflow:auto;font-size:13px;line-height:1.6"></div>
+          <textarea id="sbRaw" readonly style="display:none;width:100%;min-height:56vh;font-family:ui-monospace,Consolas,monospace;font-size:12px"></textarea>
+        </div>
+      </div>`,
+    footHtml: `<button class="btn" data-act="close">关闭</button>`,
+    onMount({ body, foot }) {
+      foot.querySelector('[data-act="close"]').onclick = () => closeDrawer();
+      const tree = body.querySelector('#sbTree');
+      const modes = body.querySelector('#sbModes');
+      const fileName = body.querySelector('#sbFileName');
+      const viewPane = body.querySelector('#sbView');
+      const rawPane = body.querySelector('#sbRaw');
+      let mode = 'both';
+      const isMd = (p) => /\.(md|markdown)$/i.test(p);
+      const applyMode = () => {
+        modes.querySelectorAll('[data-mode]').forEach((b) => b.classList.toggle('active', b.dataset.mode === mode));
+        viewPane.style.display = mode === 'raw' ? 'none' : '';
+        rawPane.style.display = mode === 'view' ? 'none' : '';
+      };
+      modes.querySelectorAll('[data-mode]').forEach((b) => {
+        b.onclick = () => { mode = b.dataset.mode; applyMode(); };
+      });
+      const openFile = async (fp) => {
+        fileName.textContent = `加载中：${fp}`;
+        try {
+          const r = await api('GET', `/api/skills/raw?path=${encodeURIComponent(fp)}`);
+          fileName.innerHTML = `<strong>${esc(r.name)}</strong> <span class="desc">· ${(r.size / 1024).toFixed(1)}KB</span>`;
+          rawPane.value = r.content;
+          if (isMd(r.name)) {
+            viewPane.innerHTML = renderMarkdown(r.content);
+            modes.style.display = 'flex';
+            applyMode(); // md：按当前模式（默认两者都看）
+          } else {
+            viewPane.innerHTML = `<pre style="margin:0;white-space:pre-wrap;font-size:12px">${esc(r.content)}</pre>`;
+            modes.style.display = 'none';
+            viewPane.style.display = '';
+            rawPane.style.display = 'none'; // 非 md：格式化视图即原文等宽展示
+          }
+        } catch (e) {
+          fileName.textContent = '';
+          toast(e.message, true);
+        }
+      };
+      const renderDir = async (dir, container) => {
+        container.innerHTML = '<div class="desc" style="padding:2px 6px">加载中…</div>';
+        let files;
+        try {
+          const r = await api('GET', `/api/skills/files?path=${encodeURIComponent(dir)}`);
+          files = r.files || [];
+        } catch (e) {
+          container.innerHTML = `<div class="desc" style="padding:2px 6px;color:var(--err-tx)">${esc(e.message)}</div>`;
+          return;
+        }
+        container.innerHTML = '';
+        if (files.length === 0) {
+          container.innerHTML = '<div class="desc" style="padding:2px 6px">（空目录）</div>';
+          return;
+        }
+        for (const f of files) {
+          const row = document.createElement('div');
+          row.style.cssText = 'padding:3px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis';
+          row.onmouseenter = () => { row.style.background = 'var(--off-bg)'; };
+          row.onmouseleave = () => { row.style.background = ''; };
+          const childPath = `${dir.replace(/[\\/]+$/, '')}/${f.name}`;
+          if (f.isDir) {
+            row.textContent = `▸ 📁 ${f.name}`;
+            let expanded = false;
+            let childBox = null;
+            row.onclick = async () => {
+              expanded = !expanded;
+              row.textContent = `${expanded ? '▾' : '▸'} 📁 ${f.name}`;
+              if (expanded && !childBox) {
+                childBox = document.createElement('div');
+                childBox.style.marginLeft = '14px';
+                row.after(childBox);
+                await renderDir(childPath, childBox);
+              } else if (childBox) {
+                childBox.style.display = expanded ? '' : 'none';
+              }
+            };
+          } else {
+            row.textContent = `📄 ${f.name}`;
+            row.title = `${f.name}（${(f.size / 1024).toFixed(1)}KB）`;
+            row.onclick = () => {
+              tree.querySelectorAll('[data-active]').forEach((x) => { delete x.dataset.active; x.style.background = ''; x.style.fontWeight = ''; });
+              row.dataset.active = '1';
+              row.style.background = 'var(--primary-weak)';
+              row.style.fontWeight = '600';
+              void openFile(childPath);
+            };
+          }
+          container.appendChild(row);
+        }
+      };
+      void renderDir(s.path, tree);
+    },
+  });
+}
+
+function addSkill() {
+  openDrawer({
+    title: '新建 skill（用户级）',
+    bodyHtml: `
+      <label>名字（字母/数字/下划线/连字符，1-64 位）</label>
+      <input type="text" id="nskName" placeholder="my-skill">
+      <label>说明（frontmatter description）</label>
+      <input type="text" id="nskDesc" placeholder="这个 skill 做什么、什么时候用">
+      <div class="hint" style="margin-top:10px">创建后生成目录与 SKILL.md 模板，请到目录中补充正文与脚本。</div>`,
+    footHtml: `<button class="btn" data-act="cancel">取消</button><button class="btn primary" data-act="save">创建</button>`,
+    onMount({ foot }) {
+      foot.querySelector('[data-act="cancel"]').onclick = () => closeDrawer();
+      foot.querySelector('[data-act="save"]').onclick = async () => {
+        const name = $('#nskName').value.trim();
+        const description = $('#nskDesc').value.trim();
+        if (!name) return toast('请填写名字', true);
+        try {
+          await api('POST', '/api/skills/action', { op: 'create', name, description });
+          toast('已创建（含默认 SKILL.md 模板）');
+          closeDrawer();
+          void loadSkills();
+        } catch (e) { toast(e.message, true); }
+      };
+    },
+  });
+}
+
+/** 导入 zip：兼容「根即 skill 目录」与「单层子目录」两种打包结构；根打包时弹名字输入 */
+function bindZipImport() {
+  const fileInput = $('#skillZipFile');
+  $('#skillImport').onclick = () => fileInput.click();
+  fileInput.onchange = async () => {
+    const file = fileInput.files?.[0];
+    fileInput.value = ''; // 允许连续导入同名文件
+    if (!file) return;
+    if (file.size > 10 * 1024 * 1024) return toast('zip 超过 10MB 上限', true);
+    const buf = await file.arrayBuffer();
+    const zipBase64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
+    // 根打包（无子目录层级）时后端拿不到名字，先问一次；目录打包可留空由后端取名
+    const guess = file.name.replace(/\.zip$/i, '');
+    const name = (await promptDialog({
+      title: '导入 skill',
+      message: `zip 内含目录结构时可留空（将取目录名）；根打包时必填。建议：${esc(guess)}`,
+      placeholder: 'skill 名（可留空）',
+      confirmText: '导入',
+    })) ?? '';
+    try {
+      const r = await api('POST', '/api/skills/import', { zipBase64, name: name.trim() || undefined });
+      toast(`已导入 "${r.name}"（${r.files} 个文件）`);
+      void loadSkills();
+    } catch (e) { toast(`导入失败：${e.message}`, true); }
+  };
+}
+
+export const page = {
+  id: 'skills',
+  title: 'Skills',
+  icon: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
+  render: renderSkills,
+};

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

@@ -1,17 +1,18 @@
 // ============ 斜杠命令（远端直操作飞书 API；本页与 config.yaml / 保存按钮无关） ============
 import { S, $, esc, toast, api } from '../core.js';
-import { openDrawer, closeDrawer } from '../ui.js';
+import { openDrawer, closeDrawer, confirmDialog } from '../ui.js';
 
 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="row" style="align-items:end">
-      <div style="max-width:320px"><label>目标应用</label><select id="scApp"></select></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 primary" id="scAdd">+ 新增命令</button>
       <button class="btn" id="scBuiltins">补齐内置命令</button>
+      <button class="btn primary" id="scAdd">+ 新增命令</button>
     </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>
@@ -58,7 +59,12 @@ function renderSlash(el) {
     }
   };
   const delRemote = async (cid, cmd) => {
-    if (!window.confirm(`确认删除远端命令 /${cmd}？（约 5 分钟后从飞书面板消失，不可恢复）`)) return;
+    if (!(await confirmDialog({
+      title: '删除斜杠命令',
+      message: `确认删除远端命令 <code>/${esc(cmd)}</code>？约 5 分钟后从飞书面板消失，不可恢复。`,
+      danger: true,
+      confirmText: '删除',
+    }))) return;
     try {
       await api('POST', '/api/slash-commands/action', { op: 'delete', app: appSel.value, commandId: cid });
       toast(`已删除 /${cmd}`);