mdk-skills 2.2.9 → 2.2.11

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

@@ -1,5 +1,12 @@
 <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">
@@ -14,6 +21,7 @@
         :key="skill.name"
         :skill="skill"
         @refresh="loadSkills"
+        @click="showSkillDetail(skill)"
       />
     </n-spin>
 
@@ -24,20 +32,88 @@
         </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 } from "vue";
+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 } from "../api/skills";
+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 {
@@ -48,15 +124,53 @@ async function loadSkills() {
   }
 }
 
+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);
+onMounted(() => {
+  loadSkills();
+  loadReadme();
+});
 
 // keep-alive 切回来时自动刷新
 onActivated(loadSkills);
 
 // 从其他窗口切回浏览器时自动刷新
 function onFocus() {
-  if (document.visibilityState === "visible") loadSkills();
+  if (document.visibilityState === "visible") {
+    loadSkills();
+    loadReadme();
+  }
 }
 onMounted(() => document.addEventListener("visibilitychange", onFocus));
 onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
@@ -74,4 +188,14 @@ onUnmounted(() => document.removeEventListener("visibilitychange", onFocus));
   font-size: 20px;
   font-weight: 600;
 }
-</style>
+
+.readme-collapse {
+  margin-bottom: 20px;
+}
+
+.detail-status {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="readme-view">
+    <div class="page-header">
+      <h2>CLAUDE.md 文档</h2>
+      <n-button size="small" @click="loadClaudeMd">
+        <template #icon><n-icon><RefreshOutline /></n-icon></template>
+        刷新
+      </n-button>
+    </div>
+
+    <n-spin :show="loading">
+      <div v-if="content" class="markdown-content" v-html="rendered" />
+      <n-empty v-else description="暂无 CLAUDE.md 文档" />
+    </n-spin>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { NIcon } from "naive-ui";
+import { RefreshOutline } from "@vicons/ionicons5";
+import { marked } from "marked";
+import hljs from "highlight.js";
+import { getClaudeMd } 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 loading = ref(false);
+const content = ref(null);
+const rendered = ref("");
+
+function stripFrontmatter(text) {
+  if (!text) return text;
+  return text.replace(/^---[\s\S]*?---\s*/, "");
+}
+
+function renderMd(text) {
+  if (!text) return "";
+  const body = stripFrontmatter(text);
+  if (!body.trim()) return "";
+  try {
+    return marked.parse(body);
+  } catch {
+    return body;
+  }
+}
+
+async function loadClaudeMd() {
+  loading.value = true;
+  try {
+    const res = await getClaudeMd();
+    if (res.content) {
+      content.value = res.content;
+      await nextTick();
+      rendered.value = renderMd(res.content);
+    } else {
+      content.value = null;
+    }
+  } catch {
+    content.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadClaudeMd);
+</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;
+}
+</style>

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

@@ -1,5 +1,12 @@
 <template>
   <div class="scene-switch">
+    <!-- 技能说明文档 -->
+    <n-collapse v-if="skillsReadmeContent" :default-expanded-names="['skills-readme']" class="readme-collapse">
+      <n-collapse-item title="技能说明" name="skills-readme">
+        <div class="markdown-content" v-html="renderedSkillsReadme" />
+      </n-collapse-item>
+    </n-collapse>
+
     <div class="page-header">
       <h2>场景切换</h2>
       <n-button v-if="!readonly" size="small" type="primary" @click="openCreate">
@@ -23,7 +30,11 @@
               <n-button size="tiny" quaternary @click="openEdit(profile)">
                 <template #icon><n-icon size="16"><PencilOutline /></n-icon></template>
               </n-button>
-              <n-popconfirm @positive-click="onDelete(profile)">
+              <n-popconfirm
+                :negative-text="'取消'"
+                :positive-text="'确认删除'"
+                @positive-click="onDelete(profile)"
+              >
                 <template #trigger>
                   <n-button size="tiny" quaternary>
                     <template #icon><n-icon size="16"><TrashOutline /></n-icon></template>
@@ -49,7 +60,7 @@
               </n-tag>
 
               <n-button
-                v-if="profile.id !== activeId"
+                v-if="profile.id !== activeId && profile.skills !== null"
                 size="small"
                 type="primary"
                 :loading="applying === profile.id"
@@ -57,12 +68,38 @@
               >
                 应用
               </n-button>
+              <n-button
+                v-if="profile.id !== activeId && profile.skills === null"
+                size="small"
+                @click="openCustomDialog"
+              >
+                自定义勾选
+              </n-button>
             </div>
           </template>
         </n-card>
       </div>
     </n-spin>
 
+    <!-- 自定义勾选弹窗 -->
+    <n-modal v-model:show="showCustom" title="自定义技能组合" preset="card" style="width: 480px">
+      <n-checkbox-group v-model:value="customSelected">
+        <n-space vertical>
+          <n-checkbox
+            v-for="skill in allSkills"
+            :key="skill.name"
+            :value="skill.name"
+            :label="skill.name"
+          />
+        </n-space>
+      </n-checkbox-group>
+      <template #footer>
+        <n-button type="primary" :loading="customLoading" @click="onApplyCustom">
+          确认安装
+        </n-button>
+      </template>
+    </n-modal>
+
     <!-- 编辑弹窗 -->
     <n-modal
       v-model:show="showEditor"
@@ -134,17 +171,46 @@ import { ref, onMounted, computed } from "vue";
 import { useMessage } from "naive-ui";
 import { NIcon } from "naive-ui";
 import { AddOutline, PencilOutline, TrashOutline } from "@vicons/ionicons5";
+import { marked } from "marked";
+import hljs from "highlight.js";
 import {
   getProfiles,
   applyProfile,
   getSkills,
   saveProfile,
   deleteProfile,
+  installSkills,
+  getSkillsReadme,
 } 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 message = useMessage();
 
+// 技能说明 README
+const skillsReadmeContent = ref(null);
+const renderedSkillsReadme = ref("");
+
 const profiles = ref([]);
 const activeId = ref(null);
 const allSkills = ref([]);
@@ -152,6 +218,11 @@ const loading = ref(false);
 const applying = ref(null);
 const readonly = ref(true);
 
+// 自定义勾选
+const showCustom = ref(false);
+const customSelected = ref([]);
+const customLoading = ref(false);
+
 // 编辑器
 const showEditor = ref(false);
 const editingProfile = ref(null);
@@ -166,6 +237,34 @@ const formData = ref({
 // 过滤掉不可见的场景（如已有内置）
 const filteredProfiles = computed(() => profiles.value);
 
+function stripFrontmatter(text) {
+  if (!text) return text;
+  return text.replace(/^---[\s\S]*?---\s*/, "");
+}
+
+function renderMd(text) {
+  if (!text) return "";
+  const body = stripFrontmatter(text);
+  if (!body.trim()) return "";
+  try {
+    return marked.parse(body);
+  } catch {
+    return body;
+  }
+}
+
+async function loadSkillsReadme() {
+  try {
+    const res = await getSkillsReadme();
+    if (res.content) {
+      skillsReadmeContent.value = res.content;
+      renderedSkillsReadme.value = renderMd(res.content);
+    }
+  } catch {
+    // 静默失败
+  }
+}
+
 async function loadData() {
   loading.value = true;
   try {
@@ -201,6 +300,28 @@ function openEdit(profile) {
   showEditor.value = true;
 }
 
+function openCustomDialog() {
+  customSelected.value = allSkills.value.filter((s) => s.enabled).map((s) => s.name);
+  showCustom.value = true;
+}
+
+async function onApplyCustom() {
+  customLoading.value = true;
+  try {
+    const res = await installSkills(customSelected.value);
+    if (res.ok) {
+      message.success(`已安装 ${customSelected.value.length} 个技能`);
+      activeId.value = "custom";
+      showCustom.value = false;
+      emit("refresh");
+    }
+  } catch {
+    message.error("安装失败");
+  } finally {
+    customLoading.value = false;
+  }
+}
+
 async function onSave() {
   if (!formData.value.name.trim()) {
     message.warning("请填写场景名称");
@@ -262,7 +383,10 @@ async function onApply(profile) {
   }
 }
 
-onMounted(loadData);
+onMounted(() => {
+  loadData();
+  loadSkillsReadme();
+});
 </script>
 
 <style scoped>
@@ -278,6 +402,10 @@ onMounted(loadData);
   font-weight: 600;
 }
 
+.readme-collapse {
+  margin-bottom: 20px;
+}
+
 .scene-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

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

@@ -16,6 +16,12 @@
         </n-alert>
       </div>
 
+      <!-- 初始化提示 -->
+      <n-alert v-if="sourceInfo.connected && sourceInfo.needsInit" type="warning" :bordered="false" class="init-alert">
+        <template #header>本地源缺少配置文件</template>
+        profiles.json、settings.json 或 .meta.json 缺失，初始化后将生成骨架文件
+      </n-alert>
+
       <div class="source-actions">
         <n-input
           v-if="!sourceInfo.connected"
@@ -35,6 +41,14 @@
           >
             连接
           </n-button>
+          <n-button
+            v-if="sourceInfo.connected && sourceInfo.needsInit"
+            type="warning"
+            :loading="initializing"
+            @click="onInit"
+          >
+            初始化
+          </n-button>
           <n-button
             v-if="sourceInfo.connected"
             :loading="syncing"
@@ -97,15 +111,17 @@ import {
   connectSource,
   disconnectSource,
   syncSource,
+  initSource,
   diagnose,
 } from "../api/skills";
 
 const emit = defineEmits(["refresh"]);
 const message = useMessage();
 
-const sourceInfo = ref({ connected: false, path: null });
+const sourceInfo = ref({ connected: false, path: null, needsInit: false });
 const repoPath = ref("");
 const connecting = ref(false);
+const initializing = ref(false);
 const syncing = ref(false);
 const disconnecting = ref(false);
 const diagnosing = ref(false);
@@ -149,6 +165,28 @@ async function onSync() {
   }
 }
 
+async function onInit() {
+  initializing.value = true;
+  try {
+    const res = await initSource();
+    if (res.ok) {
+      const parts = [];
+      if (res.profiles) parts.push("profiles.json");
+      if (res.settings) parts.push("settings.json");
+      if (res.metaFiles > 0) parts.push(`${res.metaFiles} 个 .meta.json`);
+      message.success(`初始化完成：${parts.join("、") || "无缺失文件"}`);
+      await loadSource();
+      emit("refresh");
+    } else {
+      message.error(res.error || "初始化失败");
+    }
+  } catch {
+    message.error("初始化失败");
+  } finally {
+    initializing.value = false;
+  }
+}
+
 async function onDisconnect() {
   disconnecting.value = true;
   try {
@@ -193,6 +231,10 @@ onMounted(loadSource);
   margin-bottom: 20px;
 }
 
+.init-alert {
+  margin-bottom: 12px;
+}
+
 .source-status {
   margin-bottom: 16px;
 }