zcdsj
/
zcbot
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
caoqianming 2026-06-11 10:22:06 +08:00
parent d89ebad272
commit f614046438
2 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/static/dev.html
View File

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

36
web/static/js/skills.js
View File

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