mdk-skills 2.2.21 → 2.2.23

package/scripts/web-ui/src/views/Dashboard.vue

@@ -13,19 +13,54 @@
 
     <div class="page-header">
       <h2>技能列表</h2>
-      <n-button size="small" @click="loadSkills">
-        <template #icon
-          ><n-icon><RefreshOutline /></n-icon
-        ></template>
-        刷新
-      </n-button>
+      <div class="header-actions">
+        <n-select
+          v-model:value="sortBy"
+          :options="sortOptions"
+          size="small"
+          style="width: 120px"
+        />
+        <n-button size="small" @click="loadSkills">
+          <template #icon
+            ><n-icon><RefreshOutline /></n-icon
+          ></template>
+          刷新
+        </n-button>
+        <n-button size="small" @click="openPullModal">
+          拉取
+        </n-button>
+      </div>
+    </div>
+
+    <div class="tag-filter" v-if="allTags.length > 0">
+      <n-tag
+        size="small"
+        :bordered="false"
+        :type="selectedTags.length === 0 ? 'primary' : 'default'"
+        style="cursor: pointer"
+        @click="selectedTags = []"
+      >
+        全部
+      </n-tag>
+      <n-tag
+        v-for="tag in allTags"
+        :key="tag"
+        size="small"
+        :bordered="false"
+        :type="selectedTags.includes(tag) ? 'primary' : 'default'"
+        style="cursor: pointer"
+        @click="toggleTag(tag)"
+      >
+        {{ tag }}
+      </n-tag>
     </div>
 
     <n-spin :show="loading">
       <SkillCard
-        v-for="skill in skills"
+        v-for="skill in displaySkills"
         :key="skill.name"
         :skill="skill"
+        :usages="getUsage(skill.name)"
         @refresh="loadSkills"
         @click="showSkillDetail(skill)"
       />
@@ -45,30 +80,98 @@
       :title="detailSkill?.name || '技能详情'"
       preset="card"
       style="width: 720px"
-      content-style="max-height: 65vh; overflow-y: auto; padding: 16px 24px; background: #fff;"
+      content-style="padding: 0;"
       :mask-closable="true"
     >
-      <div v-if="detailLoading" class="detail-status">
-        <n-spin />
+      <div class="detail-body">
+        <!-- 编辑面板 -->
+        <div class="edit-panel" v-if="detailSkill">
+          <div class="edit-row">
+            <span class="edit-label">版本</span>
+            <n-input v-model:value="editVersion" size="small" style="width: 120px" />
+          </div>
+          <div class="edit-row">
+            <span class="edit-label">描述</span>
+            <n-input v-model:value="editDescription" type="textarea" size="small" :rows="2" />
+          </div>
+          <div class="edit-row">
+            <span class="edit-label">标签</span>
+            <n-dynamic-tags v-model:value="editTags" size="small" />
+          </div>
+          <div class="edit-actions">
+            <n-button size="small" type="primary" @click="saveMeta" :loading="savingMeta">保存</n-button>
+            <n-button size="small" type="error" @click="handleDelete">删除技能</n-button>
+          </div>
+          <n-divider style="margin: 12px 0" />
+        </div>
+
+        <div v-if="detailLoading" class="detail-status">
+          <n-spin />
+        </div>
+        <div
+          v-else-if="detailContent"
+          class="markdown-content"
+          v-html="renderedDetail"
+        />
+        <n-empty v-else description="该技能没有 SKILL.md 文档" />
+      </div>
+    </n-modal>
+
+    <!-- 拉取弹窗 -->
+    <n-modal
+      v-model:show="showPullModal"
+      title="从远程仓库拉取"
+      preset="card"
+      style="width: 600px"
+      :mask-closable="true"
+    >
+      <div class="pull-modal-body">
+        <div class="pull-input-row">
+          <n-input v-model:value="pullUrl" placeholder="输入 GitHub 仓库地址..." size="small" @keyup.enter="handlePull" />
+          <n-button size="small" type="primary" @click="handlePull" :loading="pulling">拉取</n-button>
+        </div>
+
+        <div v-if="pullError" class="pull-error">
+          <n-alert type="error" :bordered="false" closable @close="pullError = ''">{{ pullError }}</n-alert>
+        </div>
+
+        <div v-if="pullResult" class="pull-result">
+          <div v-if="pullResult.imported && pullResult.imported.length > 0" class="pull-result-line">
+            <span class="pull-result-label">已导入：</span>
+            <n-tag v-for="name in pullResult.imported" :key="name" size="small" type="success" style="margin: 2px">{{ name }}</n-tag>
+          </div>
+          <div v-if="pullResult.skipped && pullResult.skipped.length > 0" class="pull-result-line">
+            <span class="pull-result-label">跳过：</span>
+            <n-tag v-for="name in pullResult.skipped" :key="name" size="small" style="margin: 2px">{{ name }}</n-tag>
+            <span class="pull-result-hint">（无 SKILL.md）</span>
+          </div>
+
+          <div v-if="pullResult.imported && pullResult.imported.length > 0" class="install-panel">
+            <div class="install-panel-label">选择要安装到项目目录的技能：</div>
+            <div class="install-check-list">
+              <n-checkbox v-for="name in pullResult.imported" :key="name" v-model:checked="installSelected[name]" style="margin-right: 16px">
+                {{ name }}
+              </n-checkbox>
+            </div>
+            <n-button size="small" type="primary" @click="handleInstallPull" :loading="installing" class="install-btn">
+              安装选中
+            </n-button>
+          </div>
+        </div>
       </div>
-      <div
-        v-else-if="detailContent"
-        class="markdown-content"
-        v-html="renderedDetail"
-      />
-      <n-empty v-else description="该技能没有 SKILL.md 文档" />
     </n-modal>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onActivated, onUnmounted, nextTick } from "vue";
-import { NIcon } from "naive-ui";
+import { ref, computed, onMounted, onActivated, onUnmounted, nextTick } from "vue";
+import { NIcon, useMessage } from "naive-ui";
 import { RefreshOutline } from "@vicons/ionicons5";
 import { marked } from "marked";
 import hljs from "highlight.js";
 import SkillCard from "../components/SkillCard.vue";
-import { getSkills, getReadme, getSkillReadme } from "../api/skills";
+import { getSkills, getReadme, getSkillReadme, updateSkillMeta, deleteSkill, pullSkills, installSkills } from "../api/skills";
+import { sortSkills, getUsageMap } from "../utils/usage";
 
 // marked 配置：代码高亮 + 外链安全
 marked.use({
@@ -95,6 +198,7 @@ marked.use({
 });
 
 const emit = defineEmits(["refresh"]);
+const message = useMessage();
 const skills = ref([]);
 const loading = ref(false);
 
@@ -110,6 +214,114 @@ const detailLoading = ref(false);
 const detailContent = ref(null);
 const renderedDetail = ref("");
 
+// 编辑面板
+const editVersion = ref("");
+const editDescription = ref("");
+const editTags = ref([]);
+const savingMeta = ref(false);
+
+// 标签筛选 & 排序
+const selectedTags = ref([]);
+const sortBy = ref("name");
+const sortOptions = [
+  { label: "按名称", value: "name" },
+  { label: "按频率", value: "frequency" },
+  { label: "最近使用", value: "recent" },
+];
+
+
+// 拉取 & 安装
+const pullUrl = ref("");
+const pulling = ref(false);
+const pullResult = ref(null);
+const pullError = ref("");
+const showPullModal = ref(false);
+const installSelected = ref({});
+const installing = ref(false);
+
+function openPullModal() {
+  showPullModal.value = true;
+  pullUrl.value = "";
+  pullResult.value = null;
+  pullError.value = "";
+}
+
+async function handlePull() {
+  if (!pullUrl.value.trim()) {
+    pullError.value = "请输入仓库地址";
+    return;
+  }
+  pulling.value = true;
+  pullResult.value = null;
+  pullError.value = "";
+  try {
+    const res = await pullSkills(pullUrl.value.trim());
+    if (res.ok) {
+      pullResult.value = { imported: res.imported, skipped: res.skipped };
+      // 默认全选
+      const sel = {};
+      (res.imported || []).forEach((n) => { sel[n] = true; });
+      installSelected.value = sel;
+      await loadSkills();
+    } else {
+      pullError.value = res.error || "拉取失败";
+    }
+  } catch (e) {
+    pullError.value = "拉取失败，请检查地址或网络";
+  } finally {
+    pulling.value = false;
+  }
+}
+
+async function handleInstallPull() {
+  const selected = Object.keys(installSelected.value).filter((k) => installSelected.value[k]);
+  if (selected.length === 0) {
+    pullError.value = "请至少选择一个技能";
+    return;
+  }
+  installing.value = true;
+  try {
+    const res = await installSkills(selected);
+    if (res.ok) {
+      message.success("安装完成");
+      await loadSkills();
+      pullResult.value = null;
+    } else {
+      pullError.value = res.error || "安装失败";
+    }
+  } catch {
+    pullError.value = "安装失败";
+  } finally {
+    installing.value = false;
+  }
+}
+const allTags = computed(() => {
+  const set = new Set();
+  skills.value.forEach((s) => (s.tags || []).forEach((t) => set.add(t)));
+  return [...set].sort();
+});
+
+const displaySkills = computed(() => {
+  let filtered = skills.value;
+  if (selectedTags.value.length > 0) {
+    filtered = skills.value.filter((s) =>
+      selectedTags.value.every((t) => (s.tags || []).includes(t))
+    );
+  }
+  return sortSkills(filtered, sortBy.value);
+});
+
+function toggleTag(tag) {
+  const idx = selectedTags.value.indexOf(tag);
+  if (idx === -1) selectedTags.value.push(tag);
+  else selectedTags.value.splice(idx, 1);
+}
+
+function getUsage(name) {
+  const usage = getUsageMap();
+  return usage[name]?.count || 0;
+}
+
 /** 去掉 YAML frontmatter（--- 包裹的元数据） */
 function stripFrontmatter(text) {
   if (!text) return text;
@@ -156,6 +368,9 @@ async function showSkillDetail(skill) {
   detailLoading.value = true;
   detailContent.value = null;
   renderedDetail.value = "";
+  editVersion.value = skill.version || "1.0.0";
+  editDescription.value = skill.description || "";
+  editTags.value = [...(skill.tags || [])];
   try {
     const res = await getSkillReadme(skill.name);
     if (res.content) {
@@ -170,6 +385,46 @@ async function showSkillDetail(skill) {
   }
 }
 
+async function saveMeta() {
+  if (!detailSkill.value) return;
+  savingMeta.value = true;
+  try {
+    const res = await updateSkillMeta(detailSkill.value.name, {
+      version: editVersion.value,
+      description: editDescription.value,
+      tags: editTags.value,
+    });
+    if (res.ok) {
+      message.success("技能信息已更新");
+      detailSkill.value.version = editVersion.value;
+      detailSkill.value.description = editDescription.value;
+      detailSkill.value.tags = [...editTags.value];
+      await loadSkills();
+    }
+  } catch {
+    message.error("保存失败");
+  } finally {
+    savingMeta.value = false;
+  }
+}
+
+async function handleDelete() {
+  if (!detailSkill.value) return;
+  const ok = window.confirm(`确定要删除技能 "${detailSkill.value.name}" 吗？
+将同时删除源目录和项目目录中的文件。`);
+  if (!ok) return;
+  try {
+    const res = await deleteSkill(detailSkill.value.name);
+    if (res.ok) {
+      message.success(`技能 "${detailSkill.value.name}" 已删除`);
+      detailVisible.value = false;
+      await loadSkills();
+    }
+  } catch {
+    message.error("删除失败");
+  }
+}
+
 // 首次加载
 onMounted(() => {
   loadSkills();
@@ -195,7 +450,9 @@ onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .page-header h2 {
@@ -203,9 +460,121 @@ onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
   font-weight: 600;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tag-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
 .detail-status {
   display: flex;
   justify-content: center;
   padding: 40px 0;
 }
+
+.detail-body {
+  max-height: 65vh;
+  overflow-y: auto;
+  padding: 16px 24px;
+}
+
+.edit-panel {
+  margin-bottom: 4px;
+}
+
+.edit-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.edit-label {
+  width: 50px;
+  font-size: 13px;
+  color: #888;
+  line-height: 30px;
+  flex-shrink: 0;
+}
+
+
+.pull-modal-body {
+  min-height: 100px;
+}
+
+.pull-section {
+  margin-top: 12px;
+}
+
+.pull-input-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.pull-input-row .n-input {
+  flex: 1;
+}
+
+.pull-error {
+  margin-bottom: 8px;
+}
+
+.pull-result {
+  margin-top: 8px;
+}
+
+.pull-result-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.pull-result-label {
+  color: #888;
+  flex-shrink: 0;
+}
+
+.pull-result-hint {
+  color: #999;
+  font-size: 12px;
+}
+
+.install-panel {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+}
+
+.install-panel-label {
+  font-size: 13px;
+  margin-bottom: 8px;
+  color: #666;
+}
+
+.install-check-list {
+  margin-bottom: 10px;
+}
+
+.install-btn {
+  float: right;
+}
+
+.edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 </style>

package/scripts/web-ui/src/views/SceneSwitch.vue

@@ -211,6 +211,7 @@ import {
   installSkills,
   getSkillsReadme,
 } from "../api/skills";
+import { recordUsage } from "../utils/usage";
 
 // marked 配置：代码高亮 + 外链安全
 marked.use({
@@ -348,6 +349,7 @@ async function onApplyCustom() {
       message.success(`已安装 ${customSelected.value.length} 个技能`);
       activeId.value = "custom";
       showCustom.value = false;
+      customSelected.value.forEach(recordUsage);
       emit("refresh");
     }
   } catch {
@@ -409,6 +411,7 @@ async function onApply(profile) {
     if (res.ok) {
       activeId.value = profile.id;
       message.success(`已切换到「${profile.name}」`);
+      (profile.skills || []).forEach(recordUsage);
       emit("refresh");
     }
   } catch {
@@ -441,6 +444,7 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 16px;
+  margin: 2px;
 }
 
 .scene-card {

package/scripts/web-ui/src/views/Settings.vue

@@ -18,8 +18,21 @@
 
       <!-- 初始化提示 -->
       <n-alert v-if="sourceInfo.connected && sourceInfo.needsInit" type="warning" :bordered="false" class="init-alert">
-        <template #header>本地源缺少配置文件</template>
-        profiles.json、settings.json 或 .meta.json 缺失，初始化后将生成骨架文件
+        <template #header>本地源缺少必要文件</template>
+        <div class="missing-list">
+          <template v-if="sourceInfo.missingConfig?.length">
+            <div class="missing-item" v-for="f in sourceInfo.missingConfig" :key="f">
+              缺少配置文件：<code>{{ f }}</code>
+            </div>
+          </template>
+          <template v-if="sourceInfo.missingSkillDocs?.length">
+            <div class="missing-item">
+              以下技能缺少 SKILL.md 文档：
+              <code v-for="name in sourceInfo.missingSkillDocs" :key="name" class="skill-tag">{{ name }}</code>
+            </div>
+          </template>
+          <div class="missing-hint">可手动检测该文件夹是否为skill，若该目录不是 skill，可手动删除</div>
+        </div>
       </n-alert>
 
       <div class="source-actions">
@@ -355,6 +368,35 @@ onMounted(loadSource);
   margin-bottom: 12px;
 }
 
+.missing-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.missing-item {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.missing-item code {
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+.skill-tag {
+  display: inline-block;
+  margin: 1px 2px;
+}
+
+.missing-hint {
+  margin-top: 4px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
 .source-status {
   margin-bottom: 16px;
 }

package/scripts/web-ui/vite.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require("vite");
+const vue = require("@vitejs/plugin-vue");
+
+module.exports = defineConfig({
+  root: __dirname,
+  plugins: [vue()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});

package/.claude/backups/20260510.153300/.install.log

@@ -1,10 +0,0 @@
-[2026-05-10 15:19:53] [INFO] Install started (upgrade)
-[2026-05-10 15:19:53] [SKILL] frontend-code-review (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SKILL] frontend-design (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SKILL] skill-creator (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SKILL] ui-ux-pro-max (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SKILL] v3-fe-biz-patterns (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SKILL] vue (1.0.0) → skipped (exists)
-[2026-05-10 15:19:53] [SETTINGS] settings.json merged
-[2026-05-10 15:19:53] [BACKUP] backups/CLAUDE.md.20260510.151953 (CLAUDE.md user version preserved)
-[2026-05-10 15:33:00] [INFO] Install started (upgrade)

package/.claude/backups/20260510.153300/profiles.json

@@ -1,67 +0,0 @@
-{
-  "version": 1,
-  "profiles": [
-    {
-      "id": "vue3-frontend",
-      "name": "Vue3 前端专项",
-      "description": "Vue3 技术栈 | 业务架构 | 界面设计 | 代码规范评审",
-      "skills": [
-        "vue",
-        "v3-fe-biz-patterns",
-        "frontend-design",
-        "frontend-code-review",
-        "ui-ux-pro-max",
-        "skill-creator"
-      ],
-      "always_apply": [
-        "vue",
-        "frontend-design",
-        "frontend-code-review",
-        "ui-ux-pro-max"
-      ]
-    },
-    {
-      "id": "react-frontend",
-      "name": "React 前端专项",
-      "description": "React 技术栈 | 界面设计 | 代码评审 | 通用前端能力",
-      "skills": [
-        "frontend-design",
-        "frontend-code-review",
-        "ui-ux-pro-max",
-        "skill-creator"
-      ],
-      "always_apply": [
-        "frontend-design",
-        "frontend-code-review",
-        "ui-ux-pro-max"
-      ]
-    },
-    {
-      "id": "backend-java",
-      "name": "Java 后端开发",
-      "description": "接口架构设计 | 数据库建模 | Java 后端体系能力",
-      "skills": ["skill-creator"],
-      "always_apply": []
-    },
-    {
-      "id": "backend-python",
-      "name": "Python 后端开发",
-      "description": "接口架构设计 | 数据层设计 | Python 后端体系能力",
-      "skills": ["skill-creator"],
-      "always_apply": []
-    },
-    {
-      "id": "backend-node",
-      "name": "Node.js 后端开发",
-      "description": "接口架构设计 | 服务端架构 | Node 后端体系能力",
-      "skills": ["skill-creator"],
-      "always_apply": []
-    },
-    {
-      "id": "custom",
-      "name": "自定义技能组合",
-      "description": "自由勾选技能项，按需个性化配置",
-      "skills": null
-    }
-  ]
-}

package/.claude/backups/20260510.153300/settings.json

@@ -1,29 +0,0 @@
-{
-  "skills": {
-    "frontend-code-review": {
-      "enabled": true,
-      "description": "前端代码全面审查"
-    },
-    "frontend-design": {
-      "enabled": true,
-      "description": "创意前端界面设计，落地页/品牌页/营销页"
-    },
-    "skill-creator": {
-      "enabled": true,
-      "description": "创建和更新技能指令"
-    },
-    "ui-ux-pro-max": {
-      "enabled": true,
-      "description": "UI/UX 设计智能系统，50 种样式，21 种配色方案"
-    },
-    "vue": {
-      "enabled": true,
-      "description": "Vue 3 组件/组合式函数开发，提供 Composition API 最佳实践"
-    },
-    "v3-fe-biz-patterns": {
-      "enabled": true,
-      "description": "前端业务模式库，loading/滚动加载/导入导出/批量操作/表单联动/大列表渲染/Service层封装/Pinia Store模式/分页数据管理等常见业务场景"
-    }
-  },
-  "always_apply_skills": []
-}

package/.claude/backups/20260510.153300/skills/frontend-code-review/.meta.json

@@ -1,6 +0,0 @@
-{
-  "name": "frontend-code-review",
-  "version": "1.0.0",
-  "description": "前端代码全面审查，含 React/Vue/Angular/原生 JS/TS 项目",
-  "tags": ["frontend", "review", "react", "vue", "angular"]
-}