npm - mdk-skills - Versions diffs - 2.1.11 → 2.1.13 - Mend

mdk-skills 2.1.11 → 2.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/.claude/settings.json +3 -2
package/package.json +9 -2
package/scripts/cli.js +16 -2
package/scripts/web-ui/index.html +12 -0
package/scripts/web-ui/server.js +461 -0
package/scripts/web-ui/src/App.vue +98 -0
package/scripts/web-ui/src/api/skills.js +65 -0
package/scripts/web-ui/src/components/SkillCard.vue +72 -0
package/scripts/web-ui/src/components/StatusBar.vue +67 -0
package/scripts/web-ui/src/main.js +9 -0
package/scripts/web-ui/src/router/index.js +15 -0
package/scripts/web-ui/src/styles/main.css +55 -0
package/scripts/web-ui/src/views/Dashboard.vue +66 -0
package/scripts/web-ui/src/views/SceneSwitch.vue +181 -0
package/scripts/web-ui/src/views/Settings.vue +220 -0

package/.claude/settings.json CHANGED Viewed

@@ -26,9 +26,10 @@
     }
   },
   "always_apply_skills": [
-    "frontend-design",
     "vue",
+    "frontend-design",
     "frontend-code-review",
     "ui-ux-pro-max"
-  ]
+  ],
+  "_active_profile": "vue3-frontend"
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mdk-skills",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "mdk-engineer - 沉稳靠谱的前端开发助手 Claude Skills 配置包，一键注入 .claude/ 技能目录和 CLAUDE.md 人设配置",
   "author": "XiaoMa",
   "license": "MIT",
@@ -18,6 +18,13 @@
   },
   "dependencies": {
     "@inquirer/prompts": "^8.4.2",
-    "chalk": "^5.6.2"
+    "@vicons/ionicons5": "^0.13.0",
+    "@vicons/material": "^0.13.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "chalk": "^5.6.2",
+    "naive-ui": "^2.44.1",
+    "vite": "^8.0.11",
+    "vue": "^3.5.34",
+    "vue-router": "^5.0.6"
   }
 }

package/scripts/cli.js CHANGED Viewed

@@ -15,7 +15,7 @@ const projectRoot = (() => {
   }
 })();
 const packageDir = path.join(__dirname, "..");
-const skillsSource = getSkillsSource(projectRoot, packageDir);
+let skillsSource = getSkillsSource(projectRoot, packageDir);
 const claudeDest = path.join(projectRoot, ".claude");
 const skillsDest = path.join(claudeDest, "skills");
 const settingsPath = path.join(claudeDest, "settings.json");
@@ -487,7 +487,7 @@ function cmdDisconnect() {
 // ---------- 主入口 ----------
-const COMMANDS = ["list", "connect", "sync", "disconnect"];
+const COMMANDS = ["list", "connect", "sync", "disconnect", "ui"];
 async function main() {
   const command = process.argv[2];
@@ -511,18 +511,30 @@ async function main() {
     npx mdk-skills connect     绑定本地技能源仓库路径
     npx mdk-skills sync        将项目中的技能修改推送到仓库
     npx mdk-skills disconnect  解绑本地源，恢复使用 npm 包内置技能
+    npx mdk-skills ui          启动 Web 管理面板
+    npx mdk-skills --connect   绑定本地仓库后直接进入场景选择
     npx mdk-skills --help      显示帮助
   首次运行选择场景后自动配置技能和 CLAUDE.md
   再次运行可切换场景或进入自定义模式微调
   示例:
+    npx mdk-skills --connect D:/dev/mdk-skills
     npx mdk-skills connect D:/dev/mdk-skills
     npx mdk-skills sync
     npx mdk-skills disconnect
     npx mdk-skills
     npx mdk-skills list
 `);
+  } else if (command === "--connect") {
+    cmdConnect(args[0]);
+    skillsSource = getSkillsSource(projectRoot, packageDir);
+    const profiles = loadProfiles();
+    if (profiles) {
+      await startSceneSelection();
+    } else {
+      await startInteractiveMenu();
+    }
   } else if (command === "list") {
     await cmdList();
   } else if (command === "connect") {
@@ -531,6 +543,8 @@ async function main() {
     cmdSync();
   } else if (command === "disconnect") {
     cmdDisconnect();
+  } else if (command === "ui") {
+    require("./web-ui/server");
   } else {
     console.log(`  未知命令: ${command}\n  可用: ${COMMANDS.join(", ")}\n`);
     process.exit(1);

package/scripts/web-ui/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mdk-skills 管理面板</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/scripts/web-ui/server.js ADDED Viewed

@@ -0,0 +1,461 @@
+const fs = require("fs");
+const path = require("path");
+const { createServer: createViteServer } = require("vite");
+const core = require("../core");
+// ---------- 路径（与 cli.js 保持一致） ----------
+const projectRoot = (() => {
+  try {
+    return fs.realpathSync.native(process.cwd());
+  } catch {
+    return process.cwd();
+  }
+})();
+const packageDir = path.join(__dirname, "..", "..");
+const skillsSource = core.getSkillsSource(projectRoot, packageDir);
+const claudeDest = path.join(projectRoot, ".claude");
+const skillsDest = path.join(claudeDest, "skills");
+const settingsPath = path.join(claudeDest, "settings.json");
+const pkgSkillsSource = path.join(skillsSource, ".claude", "skills");
+// ---------- 工具函数 ----------
+function readSettings() {
+  if (!fs.existsSync(settingsPath))
+    return { skills: {}, always_apply_skills: [] };
+  try {
+    return JSON.parse(fs.readFileSync(settingsPath, "utf-8"));
+  } catch {
+    return { skills: {}, always_apply_skills: [] };
+  }
+}
+function writeSettings(settings) {
+  if (!fs.existsSync(claudeDest)) {
+    fs.mkdirSync(claudeDest, { recursive: true });
+  }
+  fs.writeFileSync(
+    settingsPath,
+    JSON.stringify(settings, null, 2) + "\n",
+    "utf-8",
+  );
+}
+function sendJSON(res, data, status = 200) {
+  res.writeHead(status, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(data));
+}
+function parseBody(req) {
+  return new Promise((resolve) => {
+    let body = "";
+    req.on("data", (chunk) => (body += chunk));
+    req.on("end", () => {
+      try {
+        resolve(JSON.parse(body));
+      } catch {
+        resolve({});
+      }
+    });
+  });
+}
+// 手动递归拷贝目录
+function copyDirSync(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const item of fs.readdirSync(src)) {
+    const srcPath = path.join(src, item);
+    const destPath = path.join(dest, item);
+    if (fs.statSync(srcPath).isDirectory()) {
+      copyDirSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+// 读取 profiles.json
+function loadProfiles() {
+  const profilesPath = path.join(skillsSource, ".claude", "profiles.json");
+  if (!fs.existsSync(profilesPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(profilesPath, "utf-8")).profiles;
+  } catch {
+    return null;
+  }
+}
+// 应用场景
+function applyProfile(profile) {
+  const pkgSkills = fs.existsSync(pkgSkillsSource)
+    ? fs.readdirSync(pkgSkillsSource)
+    : [];
+  const settings = readSettings();
+  let selected;
+  if (profile.skills === null) {
+    return { selected: [], message: "自定义场景，不做自动切换" };
+  } else if (profile.skills.length === 0) {
+    selected = [];
+  } else {
+    selected = profile.skills.filter((s) => pkgSkills.includes(s));
+  }
+  // 安装/删除技能
+  if (!fs.existsSync(skillsDest)) {
+    fs.mkdirSync(skillsDest, { recursive: true });
+  }
+  for (const name of pkgSkills) {
+    const src = path.join(pkgSkillsSource, name);
+    const dest = path.join(skillsDest, name);
+    if (selected.includes(name)) {
+      if (!fs.existsSync(dest)) {
+        try {
+          copyDirSync(src, dest);
+        } catch (err) {
+          console.error(`安装技能 "${name}" 失败:`, err.message);
+        }
+      }
+    } else {
+      if (fs.existsSync(dest)) {
+        fs.rmSync(dest, { recursive: true, force: true });
+      }
+    }
+  }
+  // 更新 settings
+  if (!settings.skills) settings.skills = {};
+  for (const name of pkgSkills) {
+    const enabled = selected.includes(name);
+    if (!settings.skills[name]) settings.skills[name] = {};
+    settings.skills[name].enabled = enabled;
+  }
+  if (profile.always_apply) {
+    settings.always_apply_skills = profile.always_apply;
+  }
+  settings._active_profile = profile.id;
+  writeSettings(settings);
+  // 复制 profiles.json
+  const profilesSource = path.join(skillsSource, ".claude", "profiles.json");
+  const profilesDest = path.join(claudeDest, "profiles.json");
+  if (fs.existsSync(profilesSource)) {
+    fs.copyFileSync(profilesSource, profilesDest);
+  }
+  return {
+    selected,
+    enabled: selected.length,
+    disabled: pkgSkills.length - selected.length,
+  };
+}
+// 安装勾选的技能
+function installSelectedSkills(selectedNames) {
+  if (!fs.existsSync(pkgSkillsSource)) return { installed: 0 };
+  if (!fs.existsSync(skillsDest)) {
+    fs.mkdirSync(skillsDest, { recursive: true });
+  }
+  const allPkgSkills = fs.readdirSync(pkgSkillsSource);
+  let installedCount = 0;
+  for (const name of allPkgSkills) {
+    const src = path.join(pkgSkillsSource, name);
+    const dest = path.join(skillsDest, name);
+    if (selectedNames.includes(name)) {
+      if (!fs.existsSync(dest)) {
+        try {
+          copyDirSync(src, dest);
+          installedCount++;
+        } catch (err) {
+          console.error(`安装技能 "${name}" 失败:`, err.message);
+        }
+      }
+    } else {
+      if (fs.existsSync(dest)) {
+        fs.rmSync(dest, { recursive: true, force: true });
+      }
+    }
+  }
+  const settings = readSettings();
+  if (!settings.skills) settings.skills = {};
+  for (const name of allPkgSkills) {
+    const enabled = selectedNames.includes(name);
+    if (!settings.skills[name]) settings.skills[name] = {};
+    settings.skills[name].enabled = enabled;
+  }
+  writeSettings(settings);
+  return { installed: installedCount };
+}
+// ---------- API 路由 ----------
+async function handleApi(req, res) {
+  const url = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+  const pathname = url.pathname;
+  const method = req.method;
+  // CORS
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+  if (method === "OPTIONS") {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+  try {
+    // GET /api/skills — 获取所有技能列表（含启用状态）
+    if (method === "GET" && pathname === "/api/skills") {
+      const pkgSkills = core.getPackageSkills(skillsSource);
+      const userSkills = core.getUserSkills(claudeDest);
+      const userMap = new Map(userSkills.map((s) => [s.name, s]));
+      const result = pkgSkills.map((s) => ({
+        ...s,
+        enabled: userMap.has(s.name) ? userMap.get(s.name).enabled : false,
+        installed: userMap.has(s.name),
+      }));
+      return sendJSON(res, result);
+    }
+    // POST /api/skills/toggle — 开关技能
+    if (method === "POST" && pathname === "/api/skills/toggle") {
+      const body = await parseBody(req);
+      const { name, enabled } = body;
+      if (!name) return sendJSON(res, { error: "缺少技能名" }, 400);
+      const settings = readSettings();
+      if (!settings.skills) settings.skills = {};
+      if (!settings.skills[name]) settings.skills[name] = {};
+      settings.skills[name].enabled = !!enabled;
+      writeSettings(settings);
+      return sendJSON(res, { ok: true, name, enabled: !!enabled });
+    }
+    // POST /api/skills/install — 自定义勾选安装
+    if (method === "POST" && pathname === "/api/skills/install") {
+      const body = await parseBody(req);
+      const { selected } = body;
+      if (!Array.isArray(selected))
+        return sendJSON(res, { error: "参数错误" }, 400);
+      const result = installSelectedSkills(selected);
+      return sendJSON(res, { ok: true, ...result });
+    }
+    // GET /api/profiles — 获取场景列表
+    if (method === "GET" && pathname === "/api/profiles") {
+      const profiles = loadProfiles();
+      const settings = readSettings();
+      return sendJSON(res, {
+        profiles: profiles || [],
+        activeProfile: settings._active_profile || null,
+      });
+    }
+    // POST /api/profiles/apply — 应用场景
+    if (method === "POST" && pathname === "/api/profiles/apply") {
+      const body = await parseBody(req);
+      const { profileId } = body;
+      if (!profileId) return sendJSON(res, { error: "缺少场景 ID" }, 400);
+      const profiles = loadProfiles();
+      const profile = profiles?.find((p) => p.id === profileId);
+      if (!profile)
+        return sendJSON(res, { error: "场景不存在: " + profileId }, 404);
+      const result = applyProfile(profile);
+      return sendJSON(res, { ok: true, ...result });
+    }
+    // GET /api/status — 当前状态总览
+    if (method === "GET" && pathname === "/api/status") {
+      const settings = readSettings();
+      const userSkills = core.getUserSkills(claudeDest);
+      const profiles = loadProfiles();
+      const activeProfile = profiles?.find(
+        (p) => p.id === settings._active_profile,
+      );
+      const enabledCount = userSkills.filter((s) => s.enabled).length;
+      const mdExists = fs.existsSync(path.join(projectRoot, "CLAUDE.md"));
+      return sendJSON(res, {
+        enabledCount,
+        totalCount: userSkills.length,
+        activeProfile: activeProfile
+          ? { id: activeProfile.id, name: activeProfile.name }
+          : null,
+        sourcePath: settings._skill_source || null,
+        hasClaudeMd: mdExists,
+      });
+    }
+    // GET /api/source — 获取本地源信息
+    if (method === "GET" && pathname === "/api/source") {
+      const settings = readSettings();
+      return sendJSON(res, {
+        connected: !!settings._skill_source,
+        path: settings._skill_source || null,
+      });
+    }
+    // POST /api/source/connect — 绑定本地源
+    if (method === "POST" && pathname === "/api/source/connect") {
+      const body = await parseBody(req);
+      const repoPath = body.path;
+      if (!repoPath)
+        return sendJSON(res, { error: "缺少仓库路径" }, 400);
+      const resolved = path.resolve(repoPath);
+      if (!fs.existsSync(path.join(resolved, ".claude", "skills"))) {
+        return sendJSON(res, { error: `路径 "${resolved}" 下没有 .claude/skills/` }, 400);
+      }
+      const settings = readSettings();
+      settings._skill_source = resolved;
+      writeSettings(settings);
+      return sendJSON(res, { ok: true, path: resolved });
+    }
+    // POST /api/source/disconnect — 解绑本地源
+    if (method === "POST" && pathname === "/api/source/disconnect") {
+      const settings = readSettings();
+      if (!settings._skill_source) {
+        return sendJSON(res, { error: "当前未绑定任何技能源" }, 400);
+      }
+      delete settings._skill_source;
+      writeSettings(settings);
+      return sendJSON(res, { ok: true });
+    }
+    // POST /api/source/sync — 同步到本地源
+    if (method === "POST" && pathname === "/api/source/sync") {
+      const settings = readSettings();
+      const sourcePath = settings._skill_source;
+      if (!sourcePath)
+        return sendJSON(res, { error: "尚未绑定技能源" }, 400);
+      if (!fs.existsSync(path.join(sourcePath, ".claude"))) {
+        return sendJSON(res, { error: "绑定的路径已失效" }, 400);
+      }
+      const repoClaude = path.join(sourcePath, ".claude");
+      core.backupDir(repoClaude);
+      // 技能反推
+      const repoSkills = path.join(sourcePath, ".claude", "skills");
+      if (!fs.existsSync(repoSkills))
+        fs.mkdirSync(repoSkills, { recursive: true });
+      if (fs.existsSync(skillsDest)) {
+        for (const name of fs.readdirSync(skillsDest)) {
+          const src = path.join(skillsDest, name);
+          const dest = path.join(repoSkills, name);
+          if (fs.existsSync(dest))
+            fs.rmSync(dest, { recursive: true, force: true });
+          copyDirSync(src, dest);
+        }
+      }
+      // profiles.json 反推
+      const projectProfiles = path.join(claudeDest, "profiles.json");
+      if (fs.existsSync(projectProfiles)) {
+        fs.copyFileSync(
+          projectProfiles,
+          path.join(sourcePath, ".claude", "profiles.json"),
+        );
+      }
+      // settings.json 反推
+      const cleanSettings = { ...settings };
+      delete cleanSettings._skill_source;
+      delete cleanSettings._active_profile;
+      fs.writeFileSync(
+        path.join(sourcePath, ".claude", "settings.json"),
+        JSON.stringify(cleanSettings, null, 2) + "\n",
+        "utf-8",
+      );
+      // CLAUDE.md 反推
+      const projectMd = path.join(projectRoot, "CLAUDE.md");
+      if (fs.existsSync(projectMd)) {
+        fs.copyFileSync(projectMd, path.join(sourcePath, "CLAUDE.md"));
+      }
+      return sendJSON(res, { ok: true });
+    }
+    // GET /api/diagnose — 健康检查
+    if (method === "GET" && pathname === "/api/diagnose") {
+      const results = [];
+      const pkgSkills = core.getPackageSkills(skillsSource);
+      for (const skill of pkgSkills) {
+        const skillDir = path.join(skillsDest, skill.name);
+        const issues = [];
+        if (!fs.existsSync(skillDir)) {
+          issues.push("未安装");
+        } else {
+          const metaPath = path.join(skillDir, ".meta.json");
+          if (!fs.existsSync(metaPath)) {
+            issues.push("缺少 .meta.json");
+          } else {
+            try {
+              const meta = JSON.parse(fs.readFileSync(metaPath, "utf-8"));
+              if (!meta.version) issues.push("版本号缺失");
+            } catch {
+              issues.push(".meta.json 格式错误");
+            }
+          }
+        }
+        results.push({
+          name: skill.name,
+          healthy: issues.length === 0,
+          issues,
+        });
+      }
+      return sendJSON(res, results);
+    }
+    // 404
+    sendJSON(res, { error: "Not Found: " + pathname }, 404);
+  } catch (err) {
+    console.error("API 错误:", err);
+    sendJSON(res, { error: err.message }, 500);
+  }
+}
+// ---------- 启动 ----------
+async function startUI() {
+  const vite = await createViteServer({
+    root: __dirname,
+    server: { port: 3344, open: false },
+    plugins: [
+      {
+        name: "api-routes",
+        configureServer(viteServer) {
+          viteServer.middlewares.use((req, res, next) => {
+            if (req.url.startsWith("/api")) {
+              handleApi(req, res);
+            } else {
+              next();
+            }
+          });
+        },
+      },
+    ],
+  });
+  await vite.listen();
+  const port = vite.config.server.port;
+  console.log(`\n  🖥️  mdk-skills Web UI`);
+  console.log(`  ─────────────────────`);
+  console.log(`  地址: http://localhost:${port}\n`);
+  console.log(`  按 Ctrl+C 停止服务\n`);
+}
+startUI().catch((err) => {
+  console.error("启动失败:", err);
+  process.exit(1);
+});

package/scripts/web-ui/src/App.vue ADDED Viewed

@@ -0,0 +1,98 @@
+<template>
+  <n-message-provider>
+    <n-notification-provider>
+      <n-config-provider :theme="theme">
+        <n-layout class="app-layout">
+          <!-- 导航栏 -->
+          <n-layout-header class="app-header" bordered>
+            <div class="header-inner">
+              <div class="header-left">
+                <span class="logo">mdk-skills</span>
+                <n-menu
+                  v-model:value="activeKey"
+                  mode="horizontal"
+                  :options="menuOptions"
+                  @update:value="onMenuChange"
+                />
+              </div>
+              <n-tag v-if="statusData" :type="statusData.sourcePath ? 'success' : 'default'" size="small">
+                {{ statusData.sourcePath ? "本地源" : "npm 源" }}
+              </n-tag>
+            </div>
+          </n-layout-header>
+          <!-- 状态条 -->
+          <StatusBar v-if="statusData" :data="statusData" />
+          <!-- 内容区 -->
+          <n-layout-content class="app-content">
+            <router-view @refresh="loadStatus" />
+          </n-layout-content>
+        </n-layout>
+      </n-config-provider>
+    </n-notification-provider>
+  </n-message-provider>
+</template>
+<script setup>
+import { h, ref, onMounted, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { NIcon, useMessage } from "naive-ui";
+import {
+  DashboardOutlined,
+  SwapOutlined,
+  SettingOutlined,
+} from "@vicons/material";
+import StatusBar from "./components/StatusBar.vue";
+import { getStatus } from "./api/skills";
+const router = useRouter();
+const route = useRoute();
+const message = useMessage();
+const statusData = ref(null);
+const theme = ref(null);
+const menuOptions = [
+  {
+    label: "仪表盘",
+    key: "Dashboard",
+    icon: () => h(NIcon, null, { default: () => h(DashboardOutlined) }),
+  },
+  {
+    label: "场景切换",
+    key: "Scenes",
+    icon: () => h(NIcon, null, { default: () => h(SwapOutlined) }),
+  },
+  {
+    label: "设置",
+    key: "Settings",
+    icon: () => h(NIcon, null, { default: () => h(SettingOutlined) }),
+  },
+];
+const activeKey = ref(route.name || "Dashboard");
+function onMenuChange(key) {
+  router.push({ name: key });
+}
+router.afterEach((to) => {
+  activeKey.value = to.name;
+});
+async function loadStatus() {
+  try {
+    statusData.value = await getStatus();
+  } catch {
+    // 静默失败
+  }
+}
+onMounted(loadStatus);
+</script>
+<style>
+@import "./styles/main.css";
+</style>