From f6140464380a06877b92d81cd916e8ef9fc58060 Mon Sep 17 00:00:00 2001 From: caoqianming Date: Thu, 11 Jun 2026 10:22:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=8A=80=E8=83=BD=E5=BC=B9?= =?UTF-8?q?=E6=A1=86=E5=B9=B3=E5=8F=B0/=E6=88=91=E7=9A=84=E6=8B=86?= =?UTF-8?q?=E6=88=90=E7=8B=AC=E7=AB=8B=E4=B8=A4=E6=A0=8F(=E4=B8=89?= =?UTF-8?q?=E6=A0=8F=20master-detail)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 平台 skill 多、我的是用户核心区,混一栏易被淹。改三栏:平台列表 | 我的列表 | 正文,我的获得与平台对等版面。modal 加宽到 1000px;窄屏 (<=760px)三栏自动上下堆叠。load_errors 归到「我的」栏底。纯前端。 Co-Authored-By: Claude Opus 4.8 (1M context) --- web/static/dev.html | 26 ++++++++++++++------------ web/static/js/skills.js | 36 +++++++++++++++++++----------------- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/web/static/dev.html b/web/static/dev.html index 7e9b6ee..d74a0d6 100644 --- a/web/static/dev.html +++ b/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 @@
-
加载中…
-
← 从左侧选一个 skill 查看完整说明
+
加载中…
+
+
← 选一个 skill 查看完整说明
diff --git a/web/static/js/skills.js b/web/static/js/skills.js index 422f143..c0b2f06 100644 --- a/web/static/js/skills.js +++ b/web/static/js/skills.js @@ -31,41 +31,42 @@ function itemHtml(s) { } async function renderList() { - const list = $("sk-list"); - list.innerHTML = '
加载中…
'; + const colB = $("sk-builtin"); + const colU = $("sk-user"); + colB.innerHTML = '
加载中…
'; + colU.innerHTML = ""; let data; try { data = await api("GET", "/v1/skills"); } catch (e) { - list.innerHTML = `
加载失败: ${escapeHtml(e.message)}
`; + colB.innerHTML = `
加载失败: ${escapeHtml(e.message)}
`; 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 += `
平台 skill (${platform.length})
`; - html += - platform.map(itemHtml).join("") || - '
(无)
'; - html += `
我的 skill (${mine.length})
`; - html += mine.length + colB.innerHTML = + `
平台 skill (${platform.length})
` + + (platform.map(itemHtml).join("") || + '
(无)
'); + + let userHtml = `
我的 skill (${mine.length})
`; + userHtml += mine.length ? mine.map(itemHtml).join("") : '
还没有。让助手「帮我做个 skill」或「把某个平台 skill fork 成我的」即可创建。
'; - if (data.load_errors && data.load_errors.length) { const errs = data.load_errors .map((e) => `${escapeHtml(e.name)}(${escapeHtml(e.reason)})`) .join("；"); - html += `
⚠ ${data.load_errors.length} 个 skill 因格式问题未加载:${errs}
`; + userHtml += `
⚠ ${data.load_errors.length} 个未加载:${errs}
`; } - 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); });