mdk-skills 2.2.12 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdk-skills",
-  "version": "2.2.12",
+  "version": "2.2.14",
   "description": "mdk-engineer - 沉稳靠谱的前端开发助手 Claude Skills 配置包，一键注入 .claude/ 技能目录和 CLAUDE.md 人设配置",
   "author": "XiaoMa",
   "license": "MIT",

package/scripts/web-ui/server.js

@@ -497,10 +497,21 @@ async function handleApi(req, res) {
         }
       }
 
+      // README.md 缺失状态（独立于骨架文件）
+      let readmeStatus = null;
+      if (sourcePath) {
+        const skillsDir = path.join(sourcePath, ".claude", "skills");
+        readmeStatus = {
+          root: fs.existsSync(path.join(sourcePath, "README.md")),
+          skills: fs.existsSync(path.join(skillsDir, "README.md")),
+        };
+      }
+
       return sendJSON(res, {
         connected: !!sourcePath,
         path: sourcePath,
         needsInit,
+        readmeStatus,
       });
     }
 

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

@@ -1,201 +1,201 @@
-<template>
-  <div class="dashboard">
-    <!-- 仓库 README -->
-    <n-collapse v-if="readmeContent" :default-expanded-names="['readme']" class="readme-collapse">
-      <n-collapse-item title="仓库说明" name="readme">
-        <div class="markdown-content" v-html="renderedReadme" />
-      </n-collapse-item>
-    </n-collapse>
-
-    <div class="page-header">
-      <h2>技能列表</h2>
-      <n-button size="small" @click="loadSkills">
-        <template #icon><n-icon><RefreshOutline /></n-icon></template>
-        刷新
-      </n-button>
-    </div>
-
-    <n-spin :show="loading">
-      <SkillCard
-        v-for="skill in skills"
-        :key="skill.name"
-        :skill="skill"
-        @refresh="loadSkills"
-        @click="showSkillDetail(skill)"
-      />
-    </n-spin>
-
-    <n-empty v-if="!loading && skills.length === 0" description="暂无技能数据">
-      <template #extra>
-        <n-button size="small" @click="$router.push({ name: 'Scenes' })">
-          前往场景切换
-        </n-button>
-      </template>
-    </n-empty>
-
-    <!-- 技能详情弹窗 -->
-    <n-modal
-      v-model:show="detailVisible"
-      :title="detailSkill?.name || '技能详情'"
-      preset="card"
-      style="width: 720px;"
-      content-style="max-height: 65vh; overflow-y: auto; padding: 16px 24px; background: #fff;"
-      :mask-closable="true"
-    >
-      <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 文档" />
-    </n-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onActivated, onUnmounted, nextTick } from "vue";
-import { NIcon } 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";
-
-// marked 配置：代码高亮 + 外链安全
-marked.use({
-  renderer: {
-    code({ text, lang }) {
-      const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
-      let highlighted;
-      try {
-        highlighted = hljs.highlight(text, { language }).value;
-      } catch {
-        highlighted = hljs.highlightAuto(text).value;
-      }
-      return `<pre><button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentNode.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',1500)">复制</button><code class="hljs language-${language}">${highlighted}</code></pre>`;
-    },
-    link({ href, text }) {
-      const isExternal = href && (href.startsWith("http://") || href.startsWith("https://"));
-      const target = isExternal ? ' target="_blank" rel="noopener noreferrer"' : "";
-      return `<a href="${href}"${target}>${text}</a>`;
-    },
-  },
-});
-
-const emit = defineEmits(["refresh"]);
-const skills = ref([]);
-const loading = ref(false);
-
-// README
-const readmeContent = ref(null);
-const renderedReadme = ref("");
-
-// 详情弹窗
-const detailVisible = ref(false);
-const detailSkill = ref(null);
-const detailLoading = ref(false);
-const detailContent = ref(null);
-const renderedDetail = ref("");
-
-/** 去掉 YAML frontmatter（--- 包裹的元数据） */
-function stripFrontmatter(text) {
-  if (!text) return text;
-  return text.replace(/^---[\s\S]*?---\s*/, "");
-}
-
-/** 渲染 markdown，返回 HTML */
-function renderMd(text) {
-  if (!text) return "";
-  const body = stripFrontmatter(text);
-  if (!body.trim()) return "";
-  try {
-    return marked.parse(body);
-  } catch {
-    return body;
-  }
-}
-
-async function loadSkills() {
-  loading.value = true;
-  try {
-    skills.value = await getSkills();
-    emit("refresh");
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function loadReadme() {
-  try {
-    const res = await getReadme();
-    if (res.content) {
-      readmeContent.value = res.content;
-      renderedReadme.value = renderMd(res.content);
-    }
-  } catch {
-    // 静默失败
-  }
-}
-
-async function showSkillDetail(skill) {
-  detailSkill.value = skill;
-  detailVisible.value = true;
-  detailLoading.value = true;
-  detailContent.value = null;
-  renderedDetail.value = "";
-  try {
-    const res = await getSkillReadme(skill.name);
-    if (res.content) {
-      detailContent.value = res.content;
-      await nextTick();
-      renderedDetail.value = renderMd(res.content);
-    }
-  } catch {
-    detailContent.value = null;
-  } finally {
-    detailLoading.value = false;
-  }
-}
-
-// 首次加载
-onMounted(() => {
-  loadSkills();
-  loadReadme();
-});
-
-// keep-alive 切回来时自动刷新
-onActivated(loadSkills);
-
-// 从其他窗口切回浏览器时自动刷新
-function onFocus() {
-  if (document.visibilityState === "visible") {
-    loadSkills();
-    loadReadme();
-  }
-}
-onMounted(() => document.addEventListener("visibilitychange", onFocus));
-onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
-</script>
-
-<style scoped>
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.page-header h2 {
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.readme-collapse {
-  margin-bottom: 20px;
-}
-
-.detail-status {
-  display: flex;
-  justify-content: center;
-  padding: 40px 0;
-}
+<template>
+  <div class="dashboard">
+    <!-- 仓库 README -->
+    <n-collapse v-show="readmeContent" :default-expanded-names="['readme']" class="readme-collapse" :animated="false">
+      <n-collapse-item title="仓库说明" name="readme">
+        <div class="markdown-content" v-html="renderedReadme" />
+      </n-collapse-item>
+    </n-collapse>
+
+    <div class="page-header">
+      <h2>技能列表</h2>
+      <n-button size="small" @click="loadSkills">
+        <template #icon><n-icon><RefreshOutline /></n-icon></template>
+        刷新
+      </n-button>
+    </div>
+
+    <n-spin :show="loading">
+      <SkillCard
+        v-for="skill in skills"
+        :key="skill.name"
+        :skill="skill"
+        @refresh="loadSkills"
+        @click="showSkillDetail(skill)"
+      />
+    </n-spin>
+
+    <n-empty v-if="!loading && skills.length === 0" description="暂无技能数据">
+      <template #extra>
+        <n-button size="small" @click="$router.push({ name: 'Scenes' })">
+          前往场景切换
+        </n-button>
+      </template>
+    </n-empty>
+
+    <!-- 技能详情弹窗 -->
+    <n-modal
+      v-model:show="detailVisible"
+      :title="detailSkill?.name || '技能详情'"
+      preset="card"
+      style="width: 720px;"
+      content-style="max-height: 65vh; overflow-y: auto; padding: 16px 24px; background: #fff;"
+      :mask-closable="true"
+    >
+      <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 文档" />
+    </n-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onActivated, onUnmounted, nextTick } from "vue";
+import { NIcon } 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";
+
+// marked 配置：代码高亮 + 外链安全
+marked.use({
+  renderer: {
+    code({ text, lang }) {
+      const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
+      let highlighted;
+      try {
+        highlighted = hljs.highlight(text, { language }).value;
+      } catch {
+        highlighted = hljs.highlightAuto(text).value;
+      }
+      return `<pre><button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentNode.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',1500)">复制</button><code class="hljs language-${language}">${highlighted}</code></pre>`;
+    },
+    link({ href, text }) {
+      const isExternal = href && (href.startsWith("http://") || href.startsWith("https://"));
+      const target = isExternal ? ' target="_blank" rel="noopener noreferrer"' : "";
+      return `<a href="${href}"${target}>${text}</a>`;
+    },
+  },
+});
+
+const emit = defineEmits(["refresh"]);
+const skills = ref([]);
+const loading = ref(false);
+
+// README
+const readmeContent = ref(null);
+const renderedReadme = ref("");
+
+// 详情弹窗
+const detailVisible = ref(false);
+const detailSkill = ref(null);
+const detailLoading = ref(false);
+const detailContent = ref(null);
+const renderedDetail = ref("");
+
+/** 去掉 YAML frontmatter（--- 包裹的元数据） */
+function stripFrontmatter(text) {
+  if (!text) return text;
+  return text.replace(/^---[\s\S]*?---\s*/, "");
+}
+
+/** 渲染 markdown，返回 HTML */
+function renderMd(text) {
+  if (!text) return "";
+  const body = stripFrontmatter(text);
+  if (!body.trim()) return "";
+  try {
+    return marked.parse(body);
+  } catch {
+    return body;
+  }
+}
+
+async function loadSkills() {
+  loading.value = true;
+  try {
+    skills.value = await getSkills();
+    emit("refresh");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadReadme() {
+  try {
+    const res = await getReadme();
+    if (res.content) {
+      readmeContent.value = res.content;
+      renderedReadme.value = renderMd(res.content);
+    }
+  } catch {
+    // 静默失败
+  }
+}
+
+async function showSkillDetail(skill) {
+  detailSkill.value = skill;
+  detailVisible.value = true;
+  detailLoading.value = true;
+  detailContent.value = null;
+  renderedDetail.value = "";
+  try {
+    const res = await getSkillReadme(skill.name);
+    if (res.content) {
+      detailContent.value = res.content;
+      await nextTick();
+      renderedDetail.value = renderMd(res.content);
+    }
+  } catch {
+    detailContent.value = null;
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+// 首次加载
+onMounted(() => {
+  loadSkills();
+  loadReadme();
+});
+
+// keep-alive 切回来时自动刷新
+onActivated(loadSkills);
+
+// 从其他窗口切回浏览器时自动刷新
+function onFocus() {
+  if (document.visibilityState === "visible") {
+    loadSkills();
+    loadReadme();
+  }
+}
+onMounted(() => document.addEventListener("visibilitychange", onFocus));
+onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
+</script>
+
+<style scoped>
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.readme-collapse {
+  margin-bottom: 20px;
+}
+
+.detail-status {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
 </style>