bohui-vue 1.0.1

package/README.md

@@ -0,0 +1,121 @@
+# bohui-vue
+
+前端工程化项目模板脚手架（Vue 3 + TypeScript + Vite + Element Plus），用于通过命令快速生成标准化的业务项目。
+
+特点：
+
+- 交互式选择功能模块：ECharts / UnoCSS / 数据埋点（Tracker）
+- 未选择的功能会在生成结果中被真实移除（依赖、配置、源码都会裁剪）
+- 生成后的项目默认使用 pnpm（模板内置 `only-allow pnpm`）
+
+## 本地运行（开发/调试脚手架）
+
+在本仓库根目录执行：
+
+```bash
+node ./bin/create-vue-template.js
+```
+
+也可以带项目名（避免先询问项目名）：
+
+```bash
+node ./bin/create-vue-template.js my-app
+```
+
+调试“无交互”模式（适合 CI 或批量生成）：
+
+```bash
+node ./bin/create-vue-template.js my-app --no-echarts --no-unocss --no-tracker --force --description "demo" --author "team"
+```
+
+参数说明：
+
+- `--echarts` / `--no-echarts`：是否包含 ECharts 相关能力（默认：交互模式按选择；无交互默认 true，可用 `--no-echarts` 关闭）
+- `--unocss` / `--no-unocss`：是否包含 UnoCSS（同上）
+- `--tracker` / `--no-tracker`：是否包含数据埋点 Tracker（同上）
+- `--description "<text>"`：项目描述（用于写入生成项目的 package.json）
+- `--author "<name>"`：作者（用于写入生成项目的 package.json）
+- `--force`：目标目录存在时强制覆盖（无交互模式必备）
+
+生成成功后，在新项目目录执行：
+
+```bash
+pnpm install
+pnpm serve
+```
+
+## 发布 npm 包
+
+### 1) 检查 package.json
+
+确认根目录 `package.json` 信息正确：
+
+- `name`：包名（例如 `bohui-vue` 或 `@org/bohui-vue`）
+- `version`：版本号（每次发布需递增）
+- `bin`：命令名映射（本项目为 `bohui-vue` -> `./bin/create-vue-template.js`）
+- `files`：发布时包含 `bin/` 与 `templates/`
+
+### 2) 本地预验证（可选但推荐）
+
+打包检查发布内容：
+
+```bash
+npm pack
+```
+
+会生成一个 `.tgz` 文件，安装验证：
+
+```bash
+npm i -g ./bohui-vue-*.tgz
+bohui-vue my-app
+```
+
+### 3) 登录与发布
+
+```bash
+npm login
+npm publish
+```
+
+如果是 scope 包并需要公开发布：
+
+```bash
+npm publish --access public
+```
+
+## 发布后如何使用
+
+### 方式 A：npx（推荐，无需全局安装）
+
+```bash
+npx bohui-vue
+```
+
+带项目名：
+
+```bash
+npx bohui-vue my-app
+```
+
+全参数示例（关闭三个可选模块）：
+
+```bash
+npx bohui-vue my-app --no-echarts --no-unocss --no-tracker --force --description "demo" --author "team"
+```
+
+### 方式 B：全局安装
+
+```bash
+npm i -g bohui-vue
+bohui-vue my-app
+```
+
+## 模板目录约定
+
+模板位于：
+
+```text
+templates/vue-project/
+```
+
+脚手架会复制该目录到目标目录，并根据用户选择对生成项目做裁剪与替换。

package/bin/create-vue-template.js

@@ -0,0 +1,565 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+// 创建命令行交互界面
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+  terminal: Boolean(process.stdin.isTTY),
+});
+
+// 询问问题
+function question(query) {
+  return new Promise((resolve) => rl.question(query, resolve));
+}
+
+function normalizeYesNo(input, defaultValue) {
+  const v = String(input ?? "")
+    .trim()
+    .toLowerCase();
+  if (!v) return defaultValue;
+  if (["y", "yes", "true", "1"].includes(v)) return true;
+  if (["n", "no", "false", "0"].includes(v)) return false;
+  return defaultValue;
+}
+
+async function questionYesNo(query, defaultValue = true) {
+  const suffix = defaultValue ? " (Y/n): " : " (y/N): ";
+  const ans = await question(`${query}${suffix}`);
+  return normalizeYesNo(ans, defaultValue);
+}
+
+function getArgValue(args, key) {
+  const idx = args.indexOf(key);
+  if (idx === -1) return null;
+  const v = args[idx + 1];
+  if (v == null) return null;
+  if (String(v).startsWith("-")) return null;
+  return String(v);
+}
+
+function parseFlags(args) {
+  const flags = new Set(args.filter((a) => String(a).startsWith("--")));
+  return {
+    echarts: flags.has("--no-echarts")
+      ? false
+      : flags.has("--echarts")
+        ? true
+        : null,
+    unocss: flags.has("--no-unocss")
+      ? false
+      : flags.has("--unocss")
+        ? true
+        : null,
+    tracker: flags.has("--no-tracker")
+      ? false
+      : flags.has("--tracker")
+        ? true
+        : null,
+    test:
+      flags.has("--no-test") || flags.has("--no-tests")
+        ? false
+        : flags.has("--test") || flags.has("--tests")
+          ? true
+          : null,
+    force: flags.has("--force"),
+    description: getArgValue(args, "--description"),
+    author: getArgValue(args, "--author"),
+  };
+}
+
+// 复制目录
+function copyDir(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+// 替换文件内容
+function replaceInFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, "utf8");
+
+  for (const [key, value] of Object.entries(replacements)) {
+    const regex = new RegExp(key, "g");
+    content = content.replace(regex, value);
+  }
+
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+// 递归替换目录下所有文件
+function replaceInDir(dirPath, replacements) {
+  const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const fullPath = path.join(dirPath, entry.name);
+
+    if (entry.isDirectory()) {
+      // 跳过 node_modules 等目录
+      if (!["node_modules", ".git", "dist", "build"].includes(entry.name)) {
+        replaceInDir(fullPath, replacements);
+      }
+    } else {
+      // 只处理文本文件
+      const ext = path.extname(entry.name);
+      const textExtensions = [
+        ".js",
+        ".vue",
+        ".ts",
+        ".json",
+        ".md",
+        ".html",
+        ".css",
+        ".scss",
+        ".less",
+        ".txt",
+        ".yml",
+        ".yaml",
+      ];
+
+      if (textExtensions.includes(ext) || entry.name.includes(".") === false) {
+        try {
+          replaceInFile(fullPath, replacements);
+        } catch (err) {
+          // 忽略无法读取的文件
+          console.warn(`警告: 无法处理文件 ${fullPath}: ${err.message}`);
+        }
+      }
+    }
+  }
+}
+
+function readTextIfExists(filePath) {
+  if (!fs.existsSync(filePath)) return null;
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function writeText(filePath, content) {
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+function rmIfExists(targetPath) {
+  if (!fs.existsSync(targetPath)) return;
+  fs.rmSync(targetPath, { recursive: true, force: true });
+}
+
+function readJsonIfExists(filePath) {
+  if (!fs.existsSync(filePath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch (_e) {
+    return null;
+  }
+}
+
+function writeJson(filePath, data) {
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2) + "\n", "utf8");
+}
+
+function removeDeps(obj, section, depsToRemove) {
+  if (!obj || typeof obj !== "object") return;
+  const target = obj[section];
+  if (!target || typeof target !== "object") return;
+  for (const dep of depsToRemove) {
+    if (dep in target) delete target[dep];
+  }
+  if (Object.keys(target).length === 0) delete obj[section];
+}
+
+function removeScripts(obj, scriptsToRemove) {
+  if (!obj || typeof obj !== "object") return;
+  const target = obj.scripts;
+  if (!target || typeof target !== "object") return;
+  for (const key of scriptsToRemove) {
+    if (key in target) delete target[key];
+  }
+  if (Object.keys(target).length === 0) delete obj.scripts;
+}
+
+function applyFeatureSelection(targetDir, features) {
+  const { echarts, unocss, tracker, test } = features;
+
+  const packageJsonPath = path.join(targetDir, "package.json");
+  const pkg = readJsonIfExists(packageJsonPath);
+  if (pkg) {
+    if (!echarts) {
+      removeDeps(pkg, "dependencies", ["echarts"]);
+    }
+    if (!unocss) {
+      removeDeps(pkg, "devDependencies", ["unocss", "@unocss/reset"]);
+    }
+    if (!test) {
+      removeDeps(pkg, "devDependencies", [
+        "vitest",
+        "@vitest/ui",
+        "@vitest/coverage-v8",
+        "@vue/test-utils",
+        "jsdom",
+      ]);
+      removeScripts(pkg, ["test", "test:run", "test:ui", "test:coverage"]);
+    }
+    writeJson(packageJsonPath, pkg);
+  }
+
+  if (!unocss) {
+    rmIfExists(path.join(targetDir, "uno.config.ts"));
+    rmIfExists(path.join(targetDir, "src", "types", "unocss.d.ts"));
+
+    const viteConfigPath = path.join(targetDir, "vite.config.ts");
+    const viteConfig = readTextIfExists(viteConfigPath);
+    if (viteConfig != null) {
+      let next = viteConfig;
+      next = next.replace(
+        /^\s*import\s+UnoCSS\s+from\s+"unocss\/vite";\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(/^\s*UnoCSS\(\),\s*\r?\n/m, "");
+      writeText(viteConfigPath, next);
+    }
+  }
+
+  if (!tracker) {
+    rmIfExists(path.join(targetDir, "src", "utils", "tracker.ts"));
+  }
+
+  if (!test) {
+    rmIfExists(path.join(targetDir, "tests"));
+    rmIfExists(
+      path.join(targetDir, "src", "views", "teachingLog", "__tests__"),
+    );
+
+    const viteConfigPath = path.join(targetDir, "vite.config.ts");
+    const viteConfig = readTextIfExists(viteConfigPath);
+    if (viteConfig != null) {
+      let next = viteConfig;
+      next = next.replace(
+        /^\s*import\s+\{\s*loadEnv\s*\}\s+from\s+"vite";\s*\r?\n\s*import\s+\{\s*defineConfig\s*\}\s+from\s+"vitest\/config";\s*\r?\n/m,
+        'import { defineConfig, loadEnv } from "vite";\n',
+      );
+      next = next.replace(
+        /^\s*import\s+\{\s*defineConfig\s*\}\s+from\s+"vitest\/config";\s*\r?\n/m,
+        'import { defineConfig } from "vite";\n',
+      );
+      next = next.replace(/^\s*test:\s*\{[\s\S]*?\r?\n\s*\},\s*\r?\n/m, "");
+      writeText(viteConfigPath, next);
+    }
+  }
+
+  if (!echarts) {
+    rmIfExists(path.join(targetDir, "src", "utils", "echarts.ts"));
+    rmIfExists(path.join(targetDir, "src", "components", "echarts"));
+    rmIfExists(path.join(targetDir, "src", "components", "BarChart.vue"));
+    rmIfExists(
+      path.join(
+        targetDir,
+        "src",
+        "views",
+        "teachingLog",
+        "composables",
+        "useEffectTrendChart.ts",
+      ),
+    );
+
+    const homePath = path.join(targetDir, "src", "views", "home", "Home.vue");
+    const homeContent = readTextIfExists(homePath);
+    if (homeContent != null) {
+      let next = homeContent;
+      next = next.replace(/^\s*<BarChart\s+[^>]*\/>\s*\r?\n/m, "");
+      next = next.replace(
+        /^\s*import\s+BarChart\s+from\s+"@\/components\/BarChart\.vue";\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*\/\/\s*柱状图测试数据[\s\S]*?^\s*};\s*\r?\n/m,
+        "",
+      );
+      writeText(homePath, next);
+    }
+
+    const teachingEffectPath = path.join(
+      targetDir,
+      "src",
+      "views",
+      "teachingLog",
+      "components",
+      "TeachingEffect.vue",
+    );
+    const teachingEffectContent = readTextIfExists(teachingEffectPath);
+    if (teachingEffectContent != null) {
+      let next = teachingEffectContent;
+      next = next.replace(
+        /\r?\n\s*<div class="effect-trend">[\s\S]*?<\/div>\r?\n\s*<div class="decline-section">/m,
+        '\n        <div class="decline-section">',
+      );
+      next = next.replace(
+        /^\s*import\s+\{\s*useEffectTrendChart\s*\}\s+from\s+"\.\.\/composables\/useEffectTrendChart";\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*import\s+\{\s*studentListenFocusListAPI,\s*\r?\n\s*getAILessonAttendAPI,\s*\r?\n\s*getStudentListenOverviewAPI,\s*\r?\n\s*\}\s+from\s+"@\/api\/services\/aicebd";\s*\r?\n/m,
+        'import { getAILessonAttendAPI, getStudentListenOverviewAPI } from "@/api/services/aicebd";\n',
+      );
+      next = next.replace(
+        /import\s+\{\s*ref,\s*computed,\s*onMounted,\s*onUnmounted\s*\}\s+from\s+"vue";/m,
+        'import { ref, computed, onMounted } from "vue";',
+      );
+      next = next.replace(
+        /^\s*\/\/ 学生专注度趋势数据[\s\S]*?\r?\n(\s*onMounted\(\(\)\s*=>)/m,
+        "$1",
+      );
+      next = next.replace(
+        /^\s*getStudentListenFocusListData\(\);\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*onUnmounted\(\(\)\s*=>\s*\{\s*\r?\n\s*disposer\?\.dispose\(\);\s*\r?\n\s*\}\);\s*\r?\n/m,
+        "",
+      );
+      writeText(teachingEffectPath, next);
+    }
+
+    const globalComponentsPath = path.join(
+      targetDir,
+      "src",
+      "types",
+      "components.d.ts",
+    );
+    const globalComponentsContent = readTextIfExists(globalComponentsPath);
+    if (globalComponentsContent != null) {
+      let next = globalComponentsContent;
+      next = next.replace(/^\s*BarChart:.*\r?\n/m, "");
+      next = next.replace(/^\s*EChart:.*\r?\n/m, "");
+      writeText(globalComponentsPath, next);
+    }
+  }
+
+  const mainPath = path.join(targetDir, "src", "main.ts");
+  const mainContent = readTextIfExists(mainPath);
+  if (mainContent != null) {
+    let next = mainContent;
+
+    if (!unocss) {
+      next = next.replace(
+        /^\s*import\s+"@unocss\/reset\/tailwind\.css";\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(/^\s*import\s+"uno\.css";\s*\r?\n/m, "");
+    }
+
+    if (!tracker) {
+      next = next.replace(
+        /^\s*import\s+\{\s*createTrackerPlugin,\s*getTracker\s*\}\s+from\s+"@\/utils\/tracker";\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*import\s+\{\s*abortAllRequests,\s*http,\s*formDataHttp\s*\}\s+from\s+"@\/api\/http";\s*\r?\n/m,
+        'import { abortAllRequests } from "@/api/http";\n',
+      );
+      next = next.replace(
+        /^\s*\.use\(createTrackerPlugin\(\{ appId: "vue3-template" \}\)\)\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /\r?\n\s*\/\/ 监听用户信息变化，更新 tracker 用户 ID[\s\S]*?\r?\n\s*\{ immediate: true \}\r?\n\s*\);\r?\n/m,
+        "\n",
+      );
+      next = next.replace(
+        /^\s*getTracker\(\)\.bindRouter\(router\);\s*\/\/ 绑定路由\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*getTracker\(\)\.bindRouterExposure\(router\);\s*\/\/ 绑定路由曝光事件\s*\r?\n/m,
+        "",
+      );
+      next = next.replace(
+        /^\s*getTracker\(\)\.attachAxios\(\[http,\s*formDataHttp\]\);\s*\/\/ 绑定 axios 实例\s*\r?\n/m,
+        "",
+      );
+    }
+
+    writeText(mainPath, next);
+  }
+}
+
+async function main() {
+  console.log("\n✨ Vue 项目模板创建工具\n");
+
+  const args = process.argv.slice(2);
+  const nonInteractive = !process.stdin.isTTY;
+  const parsed = parseFlags(args);
+  const positionalName =
+    args.find((a) => a && !String(a).startsWith("-")) || "";
+
+  // 获取项目名称
+  const projectName = positionalName
+    ? positionalName
+    : nonInteractive
+      ? ""
+      : await question("请输入项目名称: ");
+
+  if (!projectName || !projectName.trim()) {
+    console.error("❌ 项目名称不能为空");
+    process.exit(1);
+  }
+
+  const projectNameTrimmed = projectName.trim();
+
+  // 验证项目名称（只允许字母、数字、连字符、下划线）
+  if (!/^[a-zA-Z0-9_-]+$/.test(projectNameTrimmed)) {
+    console.error("❌ 项目名称只能包含字母、数字、连字符和下划线");
+    process.exit(1);
+  }
+
+  // 获取项目描述
+  const projectDescription = parsed.description
+    ? parsed.description
+    : nonInteractive
+      ? "一个基于 Vue 的项目"
+      : (await question("请输入项目描述 (可选，直接回车跳过): ")) ||
+        "一个基于 Vue 的项目";
+
+  // 获取作者信息
+  const author = parsed.author
+    ? parsed.author
+    : nonInteractive
+      ? "前端团队"
+      : (await question("请输入作者名称 (可选，直接回车跳过): ")) || "前端团队";
+
+  const useECharts =
+    parsed.echarts != null
+      ? parsed.echarts
+      : nonInteractive
+        ? true
+        : await questionYesNo("是否需要 ECharts 图表能力", true);
+  const useUnoCSS =
+    parsed.unocss != null
+      ? parsed.unocss
+      : nonInteractive
+        ? true
+        : await questionYesNo("是否需要 UnoCSS 原子化 CSS 能力", true);
+  const useTracker =
+    parsed.tracker != null
+      ? parsed.tracker
+      : nonInteractive
+        ? true
+        : await questionYesNo("是否需要数据埋点（Tracker）能力", true);
+  const useTest =
+    parsed.test != null
+      ? parsed.test
+      : nonInteractive
+        ? true
+        : await questionYesNo("是否需要自动化测试（Vitest）能力", true);
+
+  // 获取目标目录
+  const targetDir = path.resolve(process.cwd(), projectNameTrimmed);
+
+  // 检查目录是否已存在
+  if (fs.existsSync(targetDir)) {
+    if (parsed.force) {
+      fs.rmSync(targetDir, { recursive: true, force: true });
+    } else if (nonInteractive) {
+      if (!parsed.force) {
+        console.error(
+          `❌ 目录 ${projectNameTrimmed} 已存在。使用 --force 覆盖。`,
+        );
+        process.exit(1);
+      }
+      fs.rmSync(targetDir, { recursive: true, force: true });
+    } else {
+      const overwrite = await question(
+        `目录 ${projectNameTrimmed} 已存在，是否覆盖? (y/N): `,
+      );
+      if (
+        overwrite.toLowerCase() !== "y" &&
+        overwrite.toLowerCase() !== "yes"
+      ) {
+        console.log("❌ 已取消创建");
+        process.exit(0);
+      }
+      fs.rmSync(targetDir, { recursive: true, force: true });
+    }
+  }
+
+  // 获取模板目录
+  const templateDir = path.join(__dirname, "..", "templates", "vue-project");
+
+  if (!fs.existsSync(templateDir)) {
+    console.error(`❌ 模板目录不存在: ${templateDir}`);
+    console.error("请确保模板项目已放置在 templates/vue-project 目录下");
+    process.exit(1);
+  }
+
+  console.log("\n📦 正在创建项目...\n");
+
+  // 复制模板
+  copyDir(templateDir, targetDir);
+
+  // 替换占位符
+  const replacements = {
+    PROJECT_NAME: projectNameTrimmed,
+    PROJECT_DESCRIPTION: projectDescription,
+    AUTHOR_NAME: author,
+  };
+
+  console.log("🔄 正在替换项目配置...\n");
+  replaceInDir(targetDir, replacements);
+
+  applyFeatureSelection(targetDir, {
+    echarts: useECharts,
+    unocss: useUnoCSS,
+    tracker: useTracker,
+    test: useTest,
+  });
+
+  // 如果模板中有 package.json，更新它
+  const packageJsonPath = path.join(targetDir, "package.json");
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+      packageJson.name = projectNameTrimmed;
+      packageJson.description = projectDescription;
+      if (author) {
+        packageJson.author = author;
+      }
+      fs.writeFileSync(
+        packageJsonPath,
+        JSON.stringify(packageJson, null, 2) + "\n",
+        "utf8",
+      );
+    } catch (err) {
+      console.warn(`警告: 无法更新 package.json: ${err.message}`);
+    }
+  }
+
+  console.log("✅ 项目创建成功!\n");
+  console.log(`📁 项目位置: ${targetDir}\n`);
+
+  console.log("📝 下一步操作:");
+  console.log(`   cd ${projectNameTrimmed}`);
+  console.log("   pnpm install");
+  console.log("   pnpm serve\n");
+
+  rl.close();
+}
+
+main().catch((err) => {
+  console.error("❌ 创建项目时出错:", err);
+  rl.close();
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "bohui-vue",
+    "version": "1.0.1",
+    "description": "Vue 项目模板创建工具，用于快速创建标准化的 Vue 项目",
+    "main": "bin/create-vue-template.js",
+    "bin": {
+        "bohui-vue": "./bin/create-vue-template.js"
+    },
+    "scripts": {
+        "dev": "node ./bin/create-vue-template.js"
+    },
+    "keywords": [
+        "vue",
+        "template",
+        "scaffold",
+        "cli",
+        "bohui-vue"
+    ],
+    "author": "your name",
+    "license": "MIT",
+    "engines": {
+        "node": ">=14.0.0"
+    },
+    "files": [
+        "bin",
+        "templates"
+    ]
+}