dk-frontend-skills 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dk-frontend-skills",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "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,7 +2,6 @@
 
 const fs = require("fs");
 const path = require("path");
-const readline = require("readline");
 const { getPackageSkills, getUserSkills } = require("./core");
 
 // 定位项目根目录和包目录
@@ -11,9 +10,6 @@ const packageDir = path.join(__dirname, "..");
 const claudeDest = path.join(projectRoot, ".claude");
 const settingsPath = path.join(claudeDest, "settings.json");
 
-const command = process.argv[2];
-const args = process.argv.slice(3);
-
 // ---------- 辅助函数 ----------
 
 function readSettings() {
@@ -29,9 +25,6 @@ function writeSettings(settings) {
   fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n", "utf-8");
 }
 
-/**
- * 保存技能选择结果到 settings.json
- */
 function saveSkillSelection(choices) {
   const settings = readSettings();
   if (!settings.skills) settings.skills = {};
@@ -48,34 +41,38 @@ function saveSkillSelection(choices) {
 
 // ---------- 命令：list ----------
 
-function cmdList() {
+async function cmdList() {
+  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-skills 进入交互选择模式")}\n`);
 }
 
 // ---------- 命令：enable / disable ----------
@@ -116,106 +113,57 @@ function cmdToggle(enable, names) {
   console.log(`  ✅ 已${action}: ${names.join(", ")}\n`);
 }
 
-// ---------- 交互式 TUI 菜单 ----------
+// ---------- 交互式菜单 (@inquirer/prompts) ----------
+
+async function startInteractiveMenu() {
+  const { checkbox } = await import("@inquirer/prompts");
 
-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 choices = pkgSkills.map((s) => ({
+    name: s.name,
+    value: s.name,
+    description: s.description || undefined,
+    checked: userMap.has(s.name) ? userMap.get(s.name) : false,
   }));
 
-  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`);
-    }
-
-    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 selected = await checkbox({
+    message: "选择要启用的技能",
+    instructions: "(↑↓ 导航, 空格 开关, Enter 确认)",
+    choices,
+    pageSize: 15,
+    loop: false,
+  });
 
-  function exitMenu(saved) {
-    stdin.setRawMode(false);
-    stdin.pause();
-    if (saved) {
-      console.log("\n  ✅ 技能选择已保存\n");
-    }
-    process.exit(0);
-  }
+  const allChoices = pkgSkills.map((s) => ({
+    name: s.name,
+    enabled: selected.includes(s.name),
+  }));
 
-  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);
-    }
-  });
+  saveSkillSelection(allChoices);
+  console.log("\n  ✅ 技能选择已保存\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
 
   用法:
@@ -230,13 +178,16 @@ if (!command) {
     npx dk-skills enable vue fe-biz-patterns
     npx dk-skills disable moai-framework-electron
 `);
-} 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") {
+    cmdToggle(true, args);
+  } else if (command === "disable") {
+    cmdToggle(false, args);
+  } else {
+    console.log(`  未知命令: ${command}\n  可用: ${COMMANDS.join(", ")}\n`);
+    process.exit(1);
+  }
 }
+
+main().catch(console.error);