From: Codebuddy <codebuddy@localhost>
Date: Thu, 3 Sep 2026 07:55:39 +0000 (+0800)
Subject: feat: 技能侧栏改为可收起抽屉（默认收起，☰ 打开）
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=88cae669378565b7612e815196fd3983947a82c5;p=codebuddy-web.git

feat: 技能侧栏改为可收起抽屉（默认收起，☰ 打开）

- 技能侧栏默认 sk-collapsed（display:none），任务列表占满整宽
- 顶部工具栏新增「☰ 技能」按钮，点击以覆盖式抽屉滑出，不挤压任务列表
- 支持四种关闭方式：再点 ☰ / 面板右上角 ✕ / 点遮罩 / Esc
- 打开时加半透明遮罩，关闭时移除定位

Co-Authored-By: CodeBuddy <noreply@codebuddy.ai>
---

diff --git a/frontend/index.html b/frontend/index.html
index c8d26a5..9f9b250 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -133,10 +133,28 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
 .paste-drop-hint b { color: #4ecca3; font-weight: 600; }
 .picker-body { flex: 1; overflow: auto; padding: 28px; }
 .picker-main { display: flex; flex: 1; min-height: 0; }
+/* 技能侧栏：默认收起，点☰以覆盖式抽屉滑出，不挤压任务列表 */
 #skills-sidebar {
   width: 300px; flex-shrink: 0; background: #16213e; border-right: 1px solid rgba(255,255,255,0.08);
   display: flex; flex-direction: column; padding: 14px; gap: 12px; overflow: auto;
 }
+#skills-sidebar.sk-collapsed { display: none; }
+#skills-sidebar.sk-drawer {
+  position: absolute; top: 0; left: 0; bottom: 0; z-index: 210;
+  box-shadow: 4px 0 24px rgba(0,0,0,0.45);
+}
+.picker-main { position: relative; }
+#sk-backdrop {
+  display: none; position: absolute; inset: 0; z-index: 205; background: rgba(0,0,0,0.45);
+}
+#sk-backdrop.sk-open { display: block; }
+#skills-sidebar .ss-close {
+  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 6px; color: #ccc; font-size: 14px; line-height: 1; cursor: pointer;
+}
+#skills-sidebar .ss-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
 #skills-sidebar .ss-head { color: #74c0fc; font-size: 15px; font-weight: 600; }
 #skills-sidebar .ss-upload { display: flex; gap: 8px; }
 #skills-sidebar .ss-upload input[type=file] { flex: 1; min-width: 0; color: #ccc; font-size: 12px; }
@@ -309,7 +327,10 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
 <!-- 任务列表页 -->
 <div id="picker-page">
   <div class="picker-header">
-    <h2>任务清单 <small id="picker-subtitle"></small></h2>
+    <div style="display:flex; gap:12px; align-items:center;">
+      <button class="action-btn" id="btn-skills-toggle" title="打开技能面板">☰ 技能</button>
+      <h2>任务清单 <small id="picker-subtitle"></small></h2>
+    </div>
     <div style="display:flex; gap:16px; align-items:center;">
       <label class="picker-toggle"><input type="checkbox" id="show-all-tasks"> 显示全部任务</label>
       <button class="action-btn" id="btn-new-group" title="新建分组">＋ 新建分组</button>
@@ -318,7 +339,9 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
     </div>
   </div>
   <div class="picker-main">
-    <aside id="skills-sidebar">
+    <div id="sk-backdrop"></div>
+    <aside id="skills-sidebar" class="sk-collapsed">
+      <button class="ss-close" id="sk-close" title="关闭技能面板">✕</button>
       <div class="ss-head">🧩 技能（全局）</div>
       <div class="ss-upload">
         <input type="file" id="ss-file" accept=".zip">
@@ -824,6 +847,26 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
 
   document.getElementById('btn-new-group').onclick = createGroup;
 
+  // ========== 技能侧栏抽屉（默认收起，☰ 打开，覆盖式不挤压列表） ==========
+  const skillsSidebar = document.getElementById('skills-sidebar');
+  const skillsBackdrop = document.getElementById('sk-backdrop');
+  function setSkillsOpen(open) {
+    skillsSidebar.classList.toggle('sk-collapsed', !open);
+    // 打开时以抽屉形式浮在内容之上，关闭时移除定位
+    skillsSidebar.classList.toggle('sk-drawer', open);
+    skillsBackdrop.classList.toggle('sk-open', open);
+  }
+  document.getElementById('btn-skills-toggle').onclick = () => {
+    setSkillsOpen(skillsSidebar.classList.contains('sk-collapsed'));
+  };
+  document.getElementById('sk-close').onclick = () => setSkillsOpen(false);
+  skillsBackdrop.onclick = () => setSkillsOpen(false);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !skillsSidebar.classList.contains('sk-collapsed')) {
+      setSkillsOpen(false);
+    }
+  });
+
   // 显示全部任务切换
   document.getElementById('show-all-tasks').onchange = (e) => {
     showAllTasks = e.target.checked;