@wendongfly/myhi 1.3.13 → 1.3.15

package/dist/chat.html

@@ -334,6 +334,7 @@
       <button class="sk sk-claude" onclick="doSlashCmd('/rename')">命名</button>
       <button class="sk sk-claude" onclick="openGitSheet()" style="color:#3fb950">提交</button>
       <button class="sk sk-claude" onclick="showMemory()">记忆</button>
+      <button class="sk sk-claude" onclick="openSkillSheet()" style="color:#9d5cf5">技能</button>
       <span id="sk-custom-skills"></span>
     </div>
   </div>
@@ -451,6 +452,34 @@
     </div>
   </div>
 
+  <div id="skill-sheet" class="action-sheet">
+    <div class="action-sheet-backdrop" onclick="closeSkillSheet()"></div>
+    <div class="action-sheet-box" style="max-height:85vh;display:flex;flex-direction:column">
+      <div class="action-sheet-title" style="display:flex;align-items:center;justify-content:space-between;text-align:left">
+        <span id="skill-sheet-title">技能管理</span>
+        <button onclick="showSkillEditor()" style="background:#7c3aed;color:#fff;border:none;border-radius:6px;padding:0.3rem 0.7rem;font-size:0.75rem;cursor:pointer">+ 新建</button>
+      </div>
+      <!-- 技能列表视图 -->
+      <div id="skill-list-view" style="flex:1;overflow-y:auto;scrollbar-width:thin">
+        <div style="text-align:center;color:#8b949e;padding:2rem 0">加载中...</div>
+      </div>
+      <!-- 技能编辑视图 -->
+      <div id="skill-edit-view" style="display:none;flex:1;overflow-y:auto;scrollbar-width:thin;padding:0.3rem 0.2rem">
+        <div style="display:flex;flex-direction:column;gap:0.4rem">
+          <input id="skill-name" class="slash-inp" placeholder="技能名称 (如 mosaic-names)" autocomplete="off">
+          <select id="skill-scope" class="slash-inp" style="background:#0d1117;color:#c9d1d9;border:1px solid #30363d;border-radius:8px;padding:0.5rem;font-size:0.82rem">
+            <option value="user">用户级 (~/.claude/commands/)</option>
+            <option value="project">项目级 (.claude/commands/)</option>
+          </select>
+          <textarea id="skill-content" class="slash-inp" placeholder="# 技能标题&#10;&#10;技能描述和指令内容..." rows="10" style="resize:vertical;font-family:monospace;font-size:0.78rem;line-height:1.5"></textarea>
+        </div>
+        <button class="action-sheet-cancel" style="background:#7c3aed;color:#fff;font-weight:600;margin-top:0.5rem;margin-bottom:0.4rem" onclick="saveSkill()">保存</button>
+        <button class="action-sheet-cancel" onclick="backToSkillList()">返回列表</button>
+      </div>
+      <button id="skill-close-btn" class="action-sheet-cancel" onclick="closeSkillSheet()">关闭</button>
+    </div>
+  </div>
+
   <div id="status-overlay">连接中...</div>
 
   <script type="module">
@@ -1950,6 +1979,113 @@
     // 加入会话后加载 skill
     socket.on('joined', () => { if (currentSession?.mode === 'agent') loadSkills(); });
 
+    // ── 技能管理 ──────────────────────────────────
+    let _editingSkill = null; // 编辑中的技能名，null 表示新建
+
+    window.openSkillSheet = async function() {
+      document.getElementById('skill-sheet').classList.add('open');
+      document.getElementById('skill-list-view').style.display = '';
+      document.getElementById('skill-edit-view').style.display = 'none';
+      document.getElementById('skill-close-btn').style.display = '';
+      await refreshSkillList();
+    };
+    window.closeSkillSheet = function() {
+      document.getElementById('skill-sheet').classList.remove('open');
+    };
+
+    async function refreshSkillList() {
+      const listEl = document.getElementById('skill-list-view');
+      listEl.innerHTML = '<div style="text-align:center;color:#8b949e;padding:2rem 0">加载中...</div>';
+      try {
+        const resp = await fetch(`/api/skills?sessionId=${SESSION_ID}&detail=1`);
+        const data = await resp.json();
+        if (!data.skills || !data.skills.length) {
+          listEl.innerHTML = '<div style="text-align:center;color:#8b949e;padding:2rem 0">暂无技能，点击右上角 + 新建</div>';
+          return;
+        }
+        listEl.innerHTML = data.skills.map(s => `
+          <div class="action-sheet-item" style="gap:0.5rem">
+            <div style="min-width:0;flex:1;cursor:pointer" onclick="editSkill('${escHtml(s.name)}','${escHtml(s.source)}')">
+              <div style="color:#9d5cf5;font-weight:500">/${escHtml(s.name)}</div>
+              <div class="desc">${escHtml(s.desc)} · ${s.source === 'project' ? '项目级' : '用户级'}</div>
+            </div>
+            <button onclick="deleteSkill('${escHtml(s.name)}','${escHtml(s.source)}')" style="background:none;border:none;color:#f85149;font-size:0.78rem;cursor:pointer;padding:0.3rem 0.5rem;white-space:nowrap">删除</button>
+          </div>
+        `).join('');
+      } catch (e) {
+        listEl.innerHTML = `<div style="text-align:center;color:#f85149;padding:2rem 0">加载失败: ${e.message}</div>`;
+      }
+    }
+
+    window.showSkillEditor = function(name, scope, content) {
+      _editingSkill = name || null;
+      document.getElementById('skill-list-view').style.display = 'none';
+      document.getElementById('skill-edit-view').style.display = '';
+      document.getElementById('skill-close-btn').style.display = 'none';
+      document.getElementById('skill-sheet-title').textContent = name ? `编辑 /${name}` : '新建技能';
+      document.getElementById('skill-name').value = name || '';
+      document.getElementById('skill-name').disabled = !!name;
+      document.getElementById('skill-scope').value = scope || 'user';
+      document.getElementById('skill-content').value = content || '# 技能标题\n\n在此输入技能指令...\n';
+    };
+
+    window.editSkill = async function(name, source) {
+      try {
+        const resp = await fetch(`/api/skills?sessionId=${SESSION_ID}&detail=1`);
+        const data = await resp.json();
+        const skill = data.skills?.find(s => s.name === name && s.source === source);
+        showSkillEditor(name, source, skill?.content || '');
+      } catch {}
+    };
+
+    window.backToSkillList = function() {
+      document.getElementById('skill-list-view').style.display = '';
+      document.getElementById('skill-edit-view').style.display = 'none';
+      document.getElementById('skill-close-btn').style.display = '';
+      document.getElementById('skill-sheet-title').textContent = '技能管理';
+      refreshSkillList();
+    };
+
+    window.saveSkill = async function() {
+      const name = document.getElementById('skill-name').value.trim();
+      const scope = document.getElementById('skill-scope').value;
+      const content = document.getElementById('skill-content').value;
+      if (!name) { addStatusMessage('请输入技能名称'); return; }
+      if (!content.trim()) { addStatusMessage('请输入技能内容'); return; }
+      try {
+        const resp = await fetch(`/api/skills?sessionId=${SESSION_ID}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, scope, content }),
+        });
+        const data = await resp.json();
+        if (data.error) { addStatusMessage('保存失败: ' + data.error); return; }
+        addStatusMessage(`技能 /${name} 已保存`);
+        backToSkillList();
+        loadSkills(); // 刷新快捷栏按钮
+      } catch (e) {
+        addStatusMessage('保存失败: ' + e.message);
+      }
+    };
+
+    window.deleteSkill = async function(name, source) {
+      if (!confirm(`确定删除技能 /${name}？`)) return;
+      try {
+        const resp = await fetch(`/api/skills?sessionId=${SESSION_ID}`, {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, scope: source }),
+        });
+        const data = await resp.json();
+        if (data.error) { addStatusMessage('删除失败: ' + data.error); return; }
+        addStatusMessage(`技能 /${name} 已删除`);
+        refreshSkillList();
+        loadSkills(); // 刷新快捷栏按钮
+      } catch (e) {
+        addStatusMessage('删除失败: ' + e.message);
+      }
+    };
+
     // ── Git 提交推送 ──────────────────────────────
     const GIT_STORAGE_KEY = 'myhi-git-' + SESSION_ID;