dk-frontend-skills 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dk-frontend-skills",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "dk-engineer - 幽默沉稳靠谱的前端开发助手 Claude Skills 配置包，一键注入 .claude/ 技能目录和 CLAUDE.md 人设配置",
   "author": "XiaoMa",
   "license": "MIT",
@@ -15,5 +15,9 @@
   },
   "scripts": {
     "postinstall": "node scripts/copy-skills.js"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.4.2",
+    "chalk": "^5.6.2"
   }
 }

package/scripts/cli.js

@@ -2,19 +2,18 @@
 
 const fs = require("fs");
 const path = require("path");
-const readline = require("readline");
 const { getPackageSkills, getUserSkills } = require("./core");
 
-// 定位项目根目录和包目录
-const projectRoot = path.resolve(__dirname, "..", "..", "..");
+// npx 运行时：process.cwd() 是用户项目目录
+// __dirname 是包内 scripts/ 目录
+const projectRoot = process.cwd();
 const packageDir = path.join(__dirname, "..");
 const claudeDest = path.join(projectRoot, ".claude");
+const skillsDest = path.join(claudeDest, "skills");
 const settingsPath = path.join(claudeDest, "settings.json");
+const pkgSkillsSource = path.join(packageDir, ".claude", "skills");
 
-const command = process.argv[2];
-const args = process.argv.slice(3);
-
-// ---------- 辅助函数 ----------
+// ---------- 文件写入 ----------
 
 function readSettings() {
   if (!fs.existsSync(settingsPath)) return { skills: {}, always_apply_skills: [] };
@@ -26,17 +25,47 @@ function readSettings() {
 }
 
 function writeSettings(settings) {
+  if (!fs.existsSync(claudeDest)) {
+    fs.mkdirSync(claudeDest, { recursive: true });
+  }
   fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n", "utf-8");
 }
 
-/**
- * 保存技能选择结果到 settings.json
- */
-function saveSkillSelection(choices) {
+// ---------- 安装勾选的技能 ----------
+
+function installSelectedSkills(selectedNames) {
+  // 创建 .claude/ 和 skills/ 目录
+  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)) {
+        fs.cpSync(src, dest, { recursive: true });
+        installedCount++;
+      }
+    } else {
+      // 没勾选的 → 如果之前装了，删掉
+      if (fs.existsSync(dest)) {
+        fs.rmSync(dest, { recursive: true, force: true });
+      }
+    }
+  }
+
+  // 生成 settings.json
   const settings = readSettings();
   if (!settings.skills) settings.skills = {};
 
-  for (const { name, enabled } of choices) {
+  for (const name of allPkgSkills) {
+    const enabled = selectedNames.includes(name);
     if (!settings.skills[name]) {
       settings.skills[name] = {};
     }
@@ -44,199 +73,150 @@ function saveSkillSelection(choices) {
   }
 
   writeSettings(settings);
+
+  // 安装 CLAUDE.md（没有才装）
+  const mdSource = path.join(packageDir, "CLAUDE.md");
+  const mdDest = path.join(projectRoot, "CLAUDE.md");
+  if (fs.existsSync(mdSource) && !fs.existsSync(mdDest)) {
+    fs.copyFileSync(mdSource, mdDest);
+    console.log("  📝 CLAUDE.md 已创建\n");
+  }
+
+  return installedCount;
 }
 
 // ---------- 命令：list ----------
 
-function cmdList() {
+async function cmdList() {
+  if (!fs.existsSync(claudeDest)) {
+    console.log("\n  ⚠️  尚未安装技能，请先运行 npx dk-frontend-skills\n");
+    return;
+  }
+
+  const chalk = (await import("chalk")).default;
   const pkgSkills = getPackageSkills(packageDir);
   const userSkills = getUserSkills(claudeDest);
 
-  // 合并包内和用户已安装的技能状态
   const skillMap = new Map();
   for (const s of userSkills) skillMap.set(s.name, s);
   for (const s of pkgSkills) {
     if (!skillMap.has(s.name)) {
-      skillMap.set(s.name, { ...s, enabled: false, installed: false });
+      skillMap.set(s.name, { ...s, enabled: false });
     }
   }
 
   const allSkills = [...skillMap.values()];
 
-  console.log("\n📋 dk-frontend-skills 技能清单\n");
-  console.log("  状态    技能名               版本    描述");
-  console.log("  ─────────────────────────────────────────────────────");
+  console.log(`\n${chalk.bold("📋 dk-frontend-skills 技能清单")}\n`);
+  console.log(`  ${chalk.dim("状态        技能名                版本    描述")}`);
+  console.log(`  ${chalk.dim("─────────────────────────────────────────────────────")}`);
 
   for (const skill of allSkills) {
-    const status = skill.enabled ? "✅ 启用" : "⏸️  停用";
-    const name = skill.name.padEnd(20);
-    const ver = skill.version.padEnd(7);
-    const desc = skill.description || "(无描述)";
+    const status = skill.enabled
+      ? chalk.green("● 启用")
+      : chalk.gray("○ 停用");
+    const name = chalk.white(skill.name.padEnd(20));
+    const ver = chalk.dim(skill.version.padEnd(7));
+    const desc = skill.description
+      ? chalk.gray(skill.description)
+      : chalk.dim("(无描述)");
     console.log(`  ${status}  ${name} ${ver} ${desc}`);
   }
 
-  console.log(`\n  💡 运行 npx dk-skills 进入交互选择模式\n`);
+  console.log(`\n  ${chalk.cyan("💡")} ${chalk.dim("运行 npx dk-frontend-skills 进入交互选择模式")}\n`);
 }
 
-// ---------- 命令：enable / disable ----------
-
-function cmdToggle(enable, names) {
-  if (names.length === 0) {
-    console.log(`  用法: npx dk-skills ${enable ? "enable" : "disable"} <技能名...>`);
-    return;
-  }
-
-  const pkgSkills = getPackageSkills(packageDir);
-  const pkgNames = new Set(pkgSkills.map((s) => s.name));
-  const userSkills = getUserSkills(claudeDest);
-  const userNames = new Set(userSkills.map((s) => s.name));
+// ---------- 交互式菜单（选完即装） ----------
 
-  const notFound = names.filter((n) => !pkgNames.has(n));
-  if (notFound.length > 0) {
-    console.log(`  ⚠️  未知技能: ${notFound.join(", ")}`);
-    console.log(`  可用: ${[...pkgNames].join(", ")}\n`);
-    return;
-  }
+async function startInteractiveMenu() {
+  const { checkbox } = await import("@inquirer/prompts");
 
-  const notInstalled = names.filter((n) => !userNames.has(n));
-  if (notInstalled.length > 0) {
-    console.log(`  ⚠️  以下技能尚未安装: ${notInstalled.join(", ")}`);
-    console.log(`  请先执行 npm i dk-frontend-skills 安装完整技能包\n`);
+  if (!fs.existsSync(pkgSkillsSource)) {
+    console.log("  ⚠️  包内没有找到技能文件\n");
     return;
   }
 
-  const choices = userSkills.map((s) => ({
-    name: s.name,
-    enabled: names.includes(s.name) ? enable : s.enabled,
-  }));
-
-  saveSkillSelection(choices);
-
-  const action = enable ? "启用" : "停用";
-  console.log(`  ✅ 已${action}: ${names.join(", ")}\n`);
-}
-
-// ---------- 交互式 TUI 菜单 ----------
-
-function startInteractiveMenu() {
   const pkgSkills = getPackageSkills(packageDir);
 
   if (pkgSkills.length === 0) {
     console.log("  ⚠️  包内没有可用技能\n");
-    process.exit(0);
+    return;
   }
 
-  // 读取当前 settings 中的启用状态
+  // 读取已安装状态：已装且启用的默认勾选
   const userSkills = getUserSkills(claudeDest);
-  const userMap = new Map(userSkills.map((s) => [s.name, s.enabled]));
-
-  // choices 只包含包内有的技能
-  const skills = pkgSkills.map((s) => ({
-    ...s,
-    enabled: userMap.has(s.name) ? userMap.get(s.name) : false,
+  const enabledSet = new Set(
+    userSkills.filter((s) => s.enabled).map((s) => s.name),
+  );
+  const installedSet = new Set(userSkills.map((s) => s.name));
+
+  // 首次运行全部默认勾选（省事），再次运行沿用已有状态
+  const hasExistingInstall = fs.existsSync(claudeDest);
+  const defaultChecked = hasExistingInstall
+    ? enabledSet
+    : new Set(pkgSkills.map((s) => s.name));
+
+  const choices = pkgSkills.map((s) => ({
+    name: s.name,
+    value: s.name,
+    description: s.description || undefined,
+    checked: defaultChecked.has(s.name),
   }));
 
-  let cursor = 0;
-  const toggled = skills.map((s) => s.enabled);
-  const stdin = process.stdin;
-  const stdout = process.stdout;
-
-  function render() {
-    stdout.write("\x1Bc"); // 清屏
-    stdout.write("╔══════════════════════════════════════════════╗\n");
-    stdout.write("║       dk-frontend-skills  技能选择          ║\n");
-    stdout.write("╠══════════════════════════════════════════════╣\n");
-    stdout.write("║  ↑↓ 导航   ␣ 开关   Enter 确认   q 退出   ║\n");
-    stdout.write("╚══════════════════════════════════════════════╝\n\n");
-
-    for (let i = 0; i < skills.length; i++) {
-      const s = skills[i];
-      const arrow = i === cursor ? "❯" : " ";
-      const check = toggled[i] ? "✓" : " ";
-      const name = s.name.padEnd(20);
-      const desc = s.description || "";
-      stdout.write(` ${arrow} [${check}] ${name} ${desc}\n`);
-    }
+  const selected = await checkbox({
+    message: "选择要安装的技能（未勾选的将从 .claude/ 中移除）",
+    instructions: "(↑↓ 导航, 空格 开关, Enter 确认)",
+    choices,
+    pageSize: 15,
+    loop: false,
+  });
 
-    stdout.write("\n  选中: ");
-    const selectedNames = skills.filter((_, i) => toggled[i]).map((s) => s.name);
-    if (selectedNames.length === 0) {
-      stdout.write("(无)");
-    } else if (selectedNames.length <= 3) {
-      stdout.write(selectedNames.join(", "));
-    } else {
-      stdout.write(`${selectedNames.length} 个技能`);
-    }
-    stdout.write("\n");
-  }
+  const newCount = selected.filter((name) => !installedSet.has(name)).length;
+  const removedCount = [...installedSet].filter((name) => !selected.includes(name)).length;
 
-  function exitMenu(saved) {
-    stdin.setRawMode(false);
-    stdin.pause();
-    if (saved) {
-      console.log("\n  ✅ 技能选择已保存\n");
-    }
-    process.exit(0);
-  }
+  const installed = installSelectedSkills(selected);
 
-  render();
-
-  readline.emitKeypressEvents(stdin);
-  if (stdin.isTTY) stdin.setRawMode(true);
-  stdin.resume();
-
-  stdin.on("keypress", (str, key) => {
-    if (!key) return;
-
-    if (key.name === "up") {
-      cursor = Math.max(0, cursor - 1);
-      render();
-    } else if (key.name === "down") {
-      cursor = Math.min(skills.length - 1, cursor + 1);
-      render();
-    } else if (key.name === "space") {
-      toggled[cursor] = !toggled[cursor];
-      render();
-    } else if (key.name === "return") {
-      const choices = skills.map((s, i) => ({ name: s.name, enabled: toggled[i] }));
-      saveSkillSelection(choices);
-      exitMenu(true);
-    } else if (key.name === "q" || (key.ctrl && key.name === "c")) {
-      exitMenu(false);
-    }
-  });
+  const parts = [];
+  if (newCount > 0) parts.push(`新装 ${newCount} 个`);
+  if (removedCount > 0) parts.push(`移除 ${removedCount} 个`);
+  const summary = parts.length > 0 ? `（${parts.join("，")}）` : "";
+
+  console.log(`\n  ✅ 技能安装完成 ${summary}\n`);
 }
 
 // ---------- 主入口 ----------
 
 const COMMANDS = ["list", "enable", "disable"];
 
-if (!command) {
-  // 无参数 → 启动交互菜单
-  startInteractiveMenu();
-} else if (command === "--help" || command === "-h") {
-  console.log(`
+async function main() {
+  const command = process.argv[2];
+  const args = process.argv.slice(3);
+
+  if (!command) {
+    await startInteractiveMenu();
+  } else if (command === "--help" || command === "-h") {
+    console.log(`
   dk-frontend-skills CLI
 
   用法:
-    npx dk-skills             交互式技能选择菜单
-    npx dk-skills list        查看技能清单
-    npx dk-skills enable  <技能名...>   启用指定技能
-    npx dk-skills disable <技能名...>   停用指定技能
-    npx dk-skills --help      显示帮助
+    npx dk-frontend-skills             交互式选择并安装技能
+    npx dk-frontend-skills list        查看已安装的技能
+    npx dk-frontend-skills --help      显示帮助
+
+  首次运行会自动创建 .claude/ 目录，勾选要安装的技能即可
 
   示例:
-    npx dk-skills list
-    npx dk-skills enable vue fe-biz-patterns
-    npx dk-skills disable moai-framework-electron
+    npx dk-frontend-skills
+    npx dk-frontend-skills list
 `);
-} else if (command === "list") {
-  cmdList();
-} else if (command === "enable") {
-  cmdToggle(true, args);
-} else if (command === "disable") {
-  cmdToggle(false, args);
-} else {
-  console.log(`  未知命令: ${command}\n  可用: ${COMMANDS.join(", ")}\n`);
-  process.exit(1);
+  } else if (command === "list") {
+    await cmdList();
+  } else if (command === "enable" || command === "disable") {
+    console.log(`  ⚠️  该命令已废弃，请直接运行 npx dk-frontend-skills 使用交互菜单\n`);
+  } else {
+    console.log(`  未知命令: ${command}\n  可用: ${COMMANDS.join(", ")}\n`);
+    process.exit(1);
+  }
 }
+
+main().catch(console.error);