@wendongfly/myhi 1.3.14 → 1.3.16

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,51 @@
     </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>
+        <div style="display:flex;gap:0.4rem">
+          <button onclick="showSkillImport()" style="background:#21262d;color:#c9d1d9;border:1px solid #30363d;border-radius:6px;padding:0.3rem 0.7rem;font-size:0.75rem;cursor:pointer">Git 安装</button>
+          <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>
+      <!-- 技能列表视图 -->
+      <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>
+      <!-- Git 安装视图 -->
+      <div id="skill-import-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-git-url" class="slash-inp" placeholder="Git 仓库地址 (https:// 或 git@...)" autocomplete="off">
+          <select id="skill-import-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>
+        </div>
+        <div id="skill-import-preview" style="display:none;margin-top:0.5rem;padding:0.5rem;background:#0d1117;border:1px solid #30363d;border-radius:8px;font-size:0.78rem;max-height:30vh;overflow-y:auto;scrollbar-width:thin"></div>
+        <button id="skill-import-scan-btn" class="action-sheet-cancel" style="background:#7c3aed;color:#fff;font-weight:600;margin-top:0.5rem;margin-bottom:0.4rem" onclick="scanGitSkills()">扫描技能</button>
+        <button id="skill-import-install-btn" class="action-sheet-cancel" style="display:none;background:#3fb950;color:#000;font-weight:600;margin-bottom:0.4rem" onclick="installGitSkills()">安装选中的技能</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 +1996,200 @@
     // 加入会话后加载 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-import-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 安装技能 ──────────────────────────────
+    let _gitSkills = []; // 扫描到的技能列表
+
+    window.showSkillImport = function() {
+      document.getElementById('skill-list-view').style.display = 'none';
+      document.getElementById('skill-edit-view').style.display = 'none';
+      document.getElementById('skill-import-view').style.display = '';
+      document.getElementById('skill-close-btn').style.display = 'none';
+      document.getElementById('skill-sheet-title').textContent = '从 Git 安装技能';
+      document.getElementById('skill-import-preview').style.display = 'none';
+      document.getElementById('skill-import-install-btn').style.display = 'none';
+      document.getElementById('skill-import-scan-btn').style.display = '';
+      document.getElementById('skill-git-url').value = '';
+      _gitSkills = [];
+    };
+
+    window.scanGitSkills = async function() {
+      const url = document.getElementById('skill-git-url').value.trim();
+      if (!url) { addStatusMessage('请输入 Git 仓库地址'); return; }
+      const btn = document.getElementById('skill-import-scan-btn');
+      btn.textContent = '正在克隆并扫描...';
+      btn.disabled = true;
+      try {
+        const resp = await fetch('/api/skills/scan-git', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url }),
+        });
+        const data = await resp.json();
+        if (data.error) { addStatusMessage(data.error); return; }
+        _gitSkills = data.skills || [];
+        if (!_gitSkills.length) {
+          addStatusMessage(data.message || '未找到技能文件');
+          return;
+        }
+        const preview = document.getElementById('skill-import-preview');
+        preview.innerHTML = _gitSkills.map((s, i) => `
+          <label style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;border-bottom:1px solid #21262d;cursor:pointer">
+            <input type="checkbox" checked data-skill-idx="${i}" style="margin-top:0.15rem">
+            <div style="min-width:0;flex:1">
+              <div style="color:#9d5cf5;font-weight:500">/${escHtml(s.name)}</div>
+              <div style="color:#8b949e;font-size:0.72rem">${escHtml(s.desc)}</div>
+            </div>
+          </label>
+        `).join('');
+        preview.style.display = '';
+        document.getElementById('skill-import-install-btn').style.display = '';
+      } catch (e) {
+        addStatusMessage('扫描失败: ' + e.message);
+      } finally {
+        btn.textContent = '扫描技能';
+        btn.disabled = false;
+      }
+    };
+
+    window.installGitSkills = async function() {
+      const scope = document.getElementById('skill-import-scope').value;
+      const checkboxes = document.querySelectorAll('#skill-import-preview input[type=checkbox]');
+      const selected = [];
+      checkboxes.forEach(cb => {
+        if (cb.checked) selected.push(_gitSkills[parseInt(cb.dataset.skillIdx)]);
+      });
+      if (!selected.length) { addStatusMessage('请至少选择一个技能'); return; }
+      const btn = document.getElementById('skill-import-install-btn');
+      btn.textContent = '安装中...';
+      btn.disabled = true;
+      let ok = 0, fail = 0;
+      for (const s of selected) {
+        try {
+          const resp = await fetch(`/api/skills?sessionId=${SESSION_ID}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name: s.name, scope, content: s.content }),
+          });
+          const data = await resp.json();
+          if (data.error) fail++;
+          else ok++;
+        } catch { fail++; }
+      }
+      addStatusMessage(`安装完成: ${ok} 个成功${fail ? `, ${fail} 个失败` : ''}`);
+      btn.textContent = '安装选中的技能';
+      btn.disabled = false;
+      backToSkillList();
+      loadSkills();
+    };
+
     // ── Git 提交推送 ──────────────────────────────
     const GIT_STORAGE_KEY = 'myhi-git-' + SESSION_ID;