feat(web): 技能弹框平台/我的拆成独立两栏(三栏 master-detail)

平台 skill 多、我的是用户核心区,混一栏易被淹。改三栏:平台列表 |
我的列表 | 正文,我的获得与平台对等版面。modal 加宽到 1000px;窄屏
(<=760px)三栏自动上下堆叠。load_errors 归到「我的」栏底。纯前端。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/static/dev.html

@@ -214,7 +214,7 @@
   /* ───── 技能查看 modal(两栏 master-detail)───── */
   #skills-modal { z-index: 112; }
   #skills-modal .card {
-    width: 880px; max-width: 94vw; height: 80vh; max-height: 80vh;
+    width: 1000px; max-width: 94vw; height: 80vh; max-height: 80vh;
     display: flex; flex-direction: column;
   }
   #skills-modal h3 {
@@ -228,17 +228,18 @@
     border: none; background: transparent; font-size: 16px;
     cursor: pointer; color: var(--muted); padding: 2px 6px;
   }
-  /* 两栏:左列表 / 右正文 */
+  /* 三栏:平台列表 / 我的列表 / 正文 */
   #sk-cols { flex: 1; display: flex; min-height: 0; }
-  #sk-list {
-    width: 290px; flex-shrink: 0; overflow: auto;
+  .sk-pane {
+    width: 230px; flex-shrink: 0; overflow: auto;
     padding: 12px; border-right: 1px solid var(--border);
   }
   #sk-detail { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; }
   .sk-empty { color: var(--muted); font-size: 13px; padding: 24px 8px; text-align: center; }
 
-  .sk-group-title { font-weight: 600; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
-  .sk-group-title.mt { margin-top: 16px; }
+  .sk-group-title {
+    font-weight: 600; font-size: 12px; color: var(--muted); margin: 0 0 8px;
+  }
   .sk-item {
     padding: 7px 10px; border: 1px solid var(--border);
     border-radius: var(--r-md); margin-bottom: 6px; cursor: pointer;
@@ -277,11 +278,11 @@
   .sk-detail-md h1, .sk-detail-md h2, .sk-detail-md h3 { margin: 14px 0 6px; }
   .sk-detail-md table { border-collapse: collapse; }
   .sk-detail-md th, .sk-detail-md td { border: 1px solid var(--border); padding: 4px 8px; }
-  /* 窄屏:两栏改上下堆叠 */
-  @media (max-width: 640px) {
-    #skills-modal .card { height: 88vh; max-height: 88vh; }
+  /* 窄屏:三栏改上下堆叠 */
+  @media (max-width: 760px) {
+    #skills-modal .card { width: 96vw; height: 88vh; max-height: 88vh; }
     #sk-cols { flex-direction: column; }
-    #sk-list { width: auto; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border); }
+    .sk-pane { width: auto; max-height: 26vh; border-right: none; border-bottom: 1px solid var(--border); }
   }
 
   /* ───── 3-pane layout ───── */
@@ -1084,8 +1085,9 @@
       <button id="sk-close" class="sk-x" title="关闭">✕</button>
     </h3>
     <div id="sk-cols">
-      <div id="sk-list"><div class="muted" style="padding:8px;">加载中…</div></div>
-      <div id="sk-detail"><div class="sk-empty">← 从左侧选一个 skill 查看完整说明</div></div>
+      <div id="sk-builtin" class="sk-pane"><div class="muted" style="padding:8px;">加载中…</div></div>
+      <div id="sk-user" class="sk-pane"></div>
+      <div id="sk-detail"><div class="sk-empty">← 选一个 skill 查看完整说明</div></div>
     </div>
   </div>
 </div>

web/static/js/skills.js

@@ -31,41 +31,42 @@ function itemHtml(s) {
 }
 
 async function renderList() {
-  const list = $("sk-list");
-  list.innerHTML = '<div class="muted" style="padding:8px;">加载中…</div>';
+  const colB = $("sk-builtin");
+  const colU = $("sk-user");
+  colB.innerHTML = '<div class="muted" style="padding:8px;">加载中…</div>';
+  colU.innerHTML = "";
   let data;
   try {
     data = await api("GET", "/v1/skills");
   } catch (e) {
-    list.innerHTML = `<div class="err" style="padding:8px;">加载失败: ${escapeHtml(e.message)}</div>`;
+    colB.innerHTML = `<div class="err" style="padding:8px;">加载失败: ${escapeHtml(e.message)}</div>`;
     return;
   }
   state.skills = data.skills || []; // 顺手刷新新建任务下拉的缓存
   const platform = state.skills.filter((s) => s.source === "builtin");
   const mine = state.skills.filter((s) => s.source === "user");
 
-  let html = "";
-  html += `<div class="sk-group-title">平台 skill (${platform.length})</div>`;
-  html +=
-    platform.map(itemHtml).join("") ||
-    '<div class="muted" style="padding:4px 8px;">(无)</div>';
-  html += `<div class="sk-group-title mt">我的 skill (${mine.length})</div>`;
-  html += mine.length
+  colB.innerHTML =
+    `<div class="sk-group-title">平台 skill (${platform.length})</div>` +
+    (platform.map(itemHtml).join("") ||
+      '<div class="muted" style="padding:4px 8px;">(无)</div>');
+
+  let userHtml = `<div class="sk-group-title">我的 skill (${mine.length})</div>`;
+  userHtml += mine.length
     ? mine.map(itemHtml).join("")
     : '<div class="muted" style="padding:4px 8px;font-size:12px;">还没有。让助手「帮我做个 skill」或「把某个平台 skill fork 成我的」即可创建。</div>';
-
   if (data.load_errors && data.load_errors.length) {
     const errs = data.load_errors
       .map((e) => `${escapeHtml(e.name)}(${escapeHtml(e.reason)})`)
       .join("；");
-    html += `<div class="sk-loaderr">⚠ ${data.load_errors.length} 个 skill 因格式问题未加载:${errs}</div>`;
+    userHtml += `<div class="sk-loaderr">⚠ ${data.load_errors.length} 个未加载:${errs}</div>`;
   }
-  list.innerHTML = html;
+  colU.innerHTML = userHtml;
 }
 
 async function selectSkill(name, itemEl) {
-  // 左栏高亮
-  $("sk-list").querySelectorAll(".sk-item.active").forEach((el) => el.classList.remove("active"));
+  // 跨两个列表栏清高亮
+  $("sk-cols").querySelectorAll(".sk-item.active").forEach((el) => el.classList.remove("active"));
   if (itemEl) itemEl.classList.add("active");
 
   const detail = $("sk-detail");
@@ -97,8 +98,9 @@ $("skills-modal").addEventListener("click", (e) => {
   if (e.target.id === "skills-modal") closeSkillsModal(); // 点遮罩关闭
 });
 
-// 左栏:点 item 选中 → 右栏载正文
-$("sk-list").addEventListener("click", (e) => {
+// 列表栏(平台 + 我的):点 item 选中 → 右栏载正文。委托到 #sk-cols,
+// detail 栏的点击不含 .sk-item 故不误触(删除按钮另由下方 #sk-detail 监听处理)。
+$("sk-cols").addEventListener("click", (e) => {
   const item = e.target.closest(".sk-item");
   if (item) selectSkill(item.getAttribute("data-name"), item);
 });