cmpt-huitu-cli 1.0.0

package/README.md

@@ -0,0 +1,169 @@
+# cmpt-huitu-cli
+
+慧图前端项目工程化 CLI 工具，用于快速创建基于 Vue 3 + Vite 的项目模板。
+
+## ✨ 特性
+
+- 🚀 基于 Vue 3 (Composition API) + Vite 7.x
+- 📦 自动集成 cmpt-huitu-ui 和 cmpt-huitu-utils
+- 🎨 内置 Element Plus + Pinia + Vue Router
+- 🔧 开箱即用的工程化配置（ESLint、Prettier、路径别名等）
+- 📱 支持多页面应用（MPA）
+- 🎯 TypeScript 友好（可选）
+
+## 📦 安装
+
+### 全局安装（推荐）
+
+```bash
+npm install -g cmpt-huitu-cli
+```
+
+### 使用 npx（无需安装）
+
+```bash
+npx cmpt-huitu-cli create my-project
+```
+
+## 🚀 快速开始
+
+### 创建新项目
+
+```bash
+# 使用 npx（推荐）
+npx cmpt-huitu-cli create my-project
+
+# 或全局安装后
+huitu create my-project
+
+# 指定创建目录
+huitu create my-project --dir /path/to/dir
+```
+
+### 启动项目
+
+```bash
+cd my-project
+pnpm install  # 或 npm install
+pnpm dev      # 或 npm run dev
+```
+
+## 📁 生成的项目结构
+
+```
+my-project/
+├── public/           # 静态资源
+├── src/
+│   ├── assets/      # 资源文件
+│   ├── components/  # 组件
+│   ├── routers/     # 路由配置
+│   ├── services/    # API 服务
+│   ├── stores/      # Pinia 状态管理
+│   ├── styles/      # 样式文件
+│   ├── utils/       # 工具函数
+│   └── views/       # 页面视图
+├── vite.config.js   # Vite 配置
+└── package.json
+```
+
+## 🎯 内置功能
+
+### 路径别名
+
+已配置以下路径别名（可在 `vite.config.js` 和 `jsconfig.json` 中查看）：
+
+- `@` → `./src`
+- `@components` → `./src/components`
+- `@views` → `./src/views`
+- `@stores` → `./src/stores`
+- `@utils` → `./src/utils`
+- `@services` → `./src/services`
+- `@assets` → `./src/assets`
+- `@styles` → `./src/styles`
+
+### 样式系统
+
+- 自动注入共享样式变量和 mixin（来自 cmpt-huitu-ui）
+- 支持 SCSS
+- 支持主题切换（浅色/深色）
+
+### 状态管理
+
+- 集成 Pinia
+- 延迟实例化模式（避免 Pinia 未初始化错误）
+- 示例 Store 代码
+
+## 📚 使用 cmpt-huitu-ui 和 cmpt-huitu-utils
+
+创建的项目已自动安装并配置好 cmpt-huitu-ui 和 cmpt-huitu-utils。
+
+### 使用 UI 组件
+
+```vue
+<script setup>
+import { HTable, ModuleTitle } from 'cmpt-huitu-ui'
+</script>
+
+<template>
+  <ModuleTitle title="模块标题" />
+  <HTable :data="tableData" />
+</template>
+```
+
+### 使用工具函数
+
+```javascript
+import { parseTime, cache, modal } from 'cmpt-huitu-utils'
+
+// 时间处理
+const time = parseTime(new Date())
+
+// 缓存
+cache.session.set('key', 'value')
+const value = cache.session.get('key')
+
+// 消息提示
+modal.msgSuccess('操作成功')
+```
+
+## 🔧 配置说明
+
+### 环境变量
+
+创建 `.env.development` 和 `.env.production` 文件：
+
+```env
+VITE_PORT=3001
+VITE_PATH=/
+VITE_MOCK=false
+```
+
+### 代理配置
+
+在 `vite.config.js` 中配置开发代理：
+
+```javascript
+proxy: {
+  '/api': {
+    target: 'http://localhost:3000',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(/^\/api/, '')
+  }
+}
+```
+
+## 📖 更多文档
+
+- [项目规则与架构指南](../../.lingma/rules/project_rule.md)
+- [cmpt-huitu-ui 文档](../ui/README.md)
+- [cmpt-huitu-utils 文档](../utils/README.md)
+- [发布指南](./发布指南.md)
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 许可证
+
+ISC
+

package/bin/huitu.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander'
+import chalk from 'chalk'
+import { create } from '../src/create.js'
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// 获取 package.json 版本号
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const pkg = fs.readJsonSync(path.join(__dirname, '../package.json'))
+
+const program = new Command()
+
+program
+  .name('huitu')
+  .description('慧图前端工程化 CLI 工具')
+  .version(pkg.version)
+
+program
+  .command('create <name>')
+  .description('创建一个新项目')
+  .option('-d, --dir <dir>', '指定项目创建目录（默认为当前目录）')
+  .action((name, options) => {
+    create(name, options.dir)
+  })
+
+program.parse(process.argv)

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "cmpt-huitu-cli",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "慧图前端项目工程化 CLI 工具",
+  "main": "index.js",
+  "bin": {
+    "huitu": "./bin/huitu.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "node -e \"console.log('请确保模板文件已包含在 templates/ 目录中')\""
+  },
+  "keywords": [
+    "cli",
+    "scaffold",
+    "vue3",
+    "vite",
+    "huitu",
+    "vue-cli"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^8.2.6"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/src/create.js

@@ -0,0 +1,127 @@
+import fs from 'fs-extra'
+import path from 'path'
+import inquirer from 'inquirer'
+import chalk from 'chalk'
+import { fileURLToPath } from 'url'
+import { getDependencyVersion } from './versions.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// 模板目录：从 CLI 包内获取模板（发布后模板会随包一起发布）
+const TEMPLATE_DIR = path.resolve(__dirname, '../templates/default')
+
+/**
+ * 创建项目
+ * @param {string} projectName - 项目名称
+ * @param {string} targetDir - 目标目录（可选，默认为当前目录下的项目名）
+ */
+export async function create(projectName, targetDir) {
+  // 如果没有指定目标目录，使用当前工作目录
+  if (!targetDir) {
+    targetDir = path.resolve(process.cwd(), projectName)
+  } else {
+    targetDir = path.resolve(targetDir, projectName)
+  }
+
+  // 1. 检查模板目录是否存在
+  if (!fs.existsSync(TEMPLATE_DIR)) {
+    console.error(chalk.red(`✘ 模板目录不存在: ${TEMPLATE_DIR}`))
+    console.error(chalk.yellow('请确保 CLI 包已正确安装'))
+    return
+  }
+
+  // 2. 检查目标目录是否存在
+  if (fs.existsSync(targetDir)) {
+    const { action } = await inquirer.prompt([
+      {
+        name: 'action',
+        type: 'list',
+        message: `目标目录 ${chalk.cyan(targetDir)} 已存在，请选择操作：`,
+        choices: [
+          { name: '覆盖 (Overwrite)', value: 'overwrite' },
+          { name: '取消 (Cancel)', value: 'cancel' },
+        ],
+      },
+    ])
+
+    if (action === 'cancel') {
+      console.log(chalk.yellow('操作已取消'))
+      return
+    }
+
+    if (action === 'overwrite') {
+      console.log(chalk.yellow(`\n正在移除旧目录 ${targetDir}...`))
+      await fs.remove(targetDir)
+    }
+  }
+
+  // 3. 复制模板
+  console.log(chalk.blue(`\n正在创建项目 ${chalk.cyan(projectName)}...`))
+  try {
+    await fs.copy(TEMPLATE_DIR, targetDir, {
+      filter: (src) => {
+        // 过滤不需要的文件和目录
+        const basename = path.basename(src)
+        const relativePath = path.relative(TEMPLATE_DIR, src)
+
+        // 过滤 node_modules、dist、.git 等
+        if (['node_modules', 'dist', '.git', '.DS_Store'].includes(basename)) {
+          return false
+        }
+
+        return true
+      },
+    })
+    console.log(chalk.green('✔ 模板复制完成'))
+  } catch (err) {
+    console.error(chalk.red('✘ 模板复制失败:'), err)
+    return
+  }
+
+  // 4. 修改 package.json
+  try {
+    const pkgPath = path.join(targetDir, 'package.json')
+    const pkg = await fs.readJson(pkgPath)
+
+    // 更新项目名称（去掉 @huitu/ 前缀，让用户自由命名）
+    pkg.name = projectName
+    pkg.description = `${projectName} project created by cmpt-huitu-cli`
+
+    // 将 workspace 协议改为具体版本号（从 npm 安装）
+    // 使用语义化版本范围（如 ^1.0.0），允许小版本和补丁版本更新
+    if (pkg.dependencies) {
+      if (pkg.dependencies['@huitu/ui'] === 'workspace:*') {
+        pkg.dependencies['cmpt-huitu-ui'] = getDependencyVersion('cmpt-huitu-ui')
+        delete pkg.dependencies['@huitu/ui']
+      }
+      if (pkg.dependencies['@huitu/utils'] === 'workspace:*') {
+        pkg.dependencies['cmpt-huitu-utils'] = getDependencyVersion('cmpt-huitu-utils')
+        delete pkg.dependencies['@huitu/utils']
+      }
+    }
+
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 })
+    console.log(chalk.green('✔ 配置更新完成'))
+  } catch (err) {
+    console.error(chalk.red('✘ 配置更新失败:'), err)
+    return
+  }
+
+  // 5. 完成提示
+  console.log(chalk.green(`\n🎉 项目 ${chalk.cyan(projectName)} 创建成功！`))
+  console.log(chalk.cyan('\n请运行以下命令启动项目：\n'))
+  console.log(chalk.white(`  cd ${projectName}`))
+  console.log(chalk.white(`  pnpm install  # 或 npm install / yarn install`))
+  console.log(chalk.white(`  pnpm dev      # 或 npm run dev`))
+  console.log('')
+
+  // 6. 提示信息
+  console.log(chalk.cyan('\n📦 项目已配置以下依赖：'))
+  console.log(chalk.white(`   cmpt-huitu-ui: ${getDependencyVersion('cmpt-huitu-ui')}`))
+  console.log(chalk.white(`   cmpt-huitu-utils: ${getDependencyVersion('cmpt-huitu-utils')}`))
+  console.log('')
+  console.log(chalk.yellow('💡 提示：'))
+  console.log(chalk.yellow('   - 如果使用私有 npm 仓库，请先配置正确的 registry'))
+  console.log(chalk.yellow('   - 运行 npm install 时会自动安装 @huitu/ui 和 @huitu/utils\n'))
+}

package/src/versions.js

@@ -0,0 +1,23 @@
+/**
+ * @fileoverview 依赖包版本配置
+ * 用于 CLI 创建项目时指定 @huitu 包的版本
+ * 
+ * 更新说明：
+ * - 当 @huitu/ui 或 @huitu/utils 发布新版本时，同步更新此文件
+ * - 使用语义化版本范围（如 ^1.0.0）允许小版本和补丁版本更新
+ */
+
+export const DEPENDENCY_VERSIONS = {
+  'cmpt-huitu-ui': '^1.0.0',
+  'cmpt-huitu-utils': '^1.0.0',
+}
+
+/**
+ * 获取依赖包的推荐版本
+ * @param {string} packageName - 包名
+ * @returns {string} 版本号（如 '^1.0.0'）
+ */
+export function getDependencyVersion(packageName) {
+  return DEPENDENCY_VERSIONS[packageName] || 'latest'
+}
+

package/templates/default/README.md

@@ -0,0 +1,127 @@
+# 慧图 Vue3 项目模板
+
+## 📋 项目简介
+
+这是一个基于 Vue 3 + Vite + Element Plus 的标准项目模板，用于快速创建新的前端项目。
+
+## ✨ 核心特性
+
+- ✅ **Vue 3.5**：使用 Composition API
+- ✅ **Vite 7**：极速构建工具
+- ✅ **Element Plus**：企业级 UI 组件库
+- ✅ **Pinia**：Vue 3 官方状态管理
+- ✅ **Vue Router**：官方路由管理器
+- ✅ **@huitu/ui**：共享 UI 组件库
+- ✅ **@huitu/utils**：共享工具函数库
+
+## 🚀 快速开始
+
+### 使用 CLI 工具创建项目
+
+```bash
+# 在 Monorepo 根目录执行
+pnpm huitu create <project-name>
+
+# 例如
+pnpm huitu create web-saas
+```
+
+### 手动创建项目
+
+```bash
+# 1. 复制模板
+cp -r apps/template apps/your-project-name
+
+# 2. 修改 package.json 中的 name 字段
+# 3. 安装依赖
+pnpm install
+
+# 4. 启动开发
+pnpm --filter your-project-name dev
+```
+
+## 📁 项目结构
+
+```
+template/
+├── public/                 # 静态资源
+│   ├── config/            # 配置文件
+│   │   ├── envCfg.js      # 环境配置模板
+│   │   └── menuCfg.js     # 菜单配置模板
+│   ├── images/            # 图片资源
+│   └── static/            # 静态文件
+├── src/
+│   ├── assets/            # 资源文件
+│   ├── components/        # 组件
+│   ├── router/            # 路由配置
+│   ├── services/          # API 服务
+│   ├── stores/            # Pinia 状态管理
+│   ├── styles/            # 样式文件
+│   ├── utils/             # 工具函数
+│   └── views/             # 页面视图
+├── vite/                  # Vite 插件配置
+├── index.html             # HTML 模板
+└── vite.config.js         # Vite 配置
+```
+
+## ⚙️ 配置说明
+
+### 环境配置
+
+编辑 `public/config/envCfg.js`，配置：
+
+- API 地址
+- 登录配置（SSO）
+- 文件服务地址
+- 地图服务地址（如需要）
+
+### 菜单配置
+
+编辑 `public/config/menuCfg.js`，配置项目菜单结构。
+
+## 📦 共享包使用
+
+### 使用 @huitu/ui 组件
+
+```javascript
+import { HTable, ModuleTitle } from '@huitu/ui'
+```
+
+### 使用 @huitu/utils 工具
+
+```javascript
+import { parseTime, cache, modal } from '@huitu/utils'
+```
+
+## 🔧 开发命令
+
+```bash
+# 开发
+pnpm --filter template dev
+
+# 构建
+pnpm --filter template build
+
+# 预览
+pnpm --filter template preview
+
+# 代码检查
+pnpm --filter template lint
+```
+
+## 📝 注意事项
+
+1. **配置修改**：创建新项目后，务必修改 `public/config/envCfg.js` 中的配置
+2. **项目信息**：修改 `index.html` 和登录页面中的项目名称
+3. **业务代码**：在 `src/views/` 中添加业务页面
+4. **样式变量**：如需使用已注释的样式变量，请添加对应的图片文件
+
+## 📚 相关文档
+
+- [使用指南](../../web-saas使用指南.md)
+- [模板检查清单](./模板项目检查清单.md)
+
+---
+
+**版本**：1.0.0  
+**最后更新**：2026-01-04

package/templates/default/eslint.config.js

@@ -0,0 +1,187 @@
+import eslintParser from 'vue-eslint-parser'
+import pluginVue from 'eslint-plugin-vue'
+import pluginPrettier from 'eslint-plugin-prettier'
+import configPrettier from 'eslint-config-prettier'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+// 声明被eslint忽略的全局变量
+const global = {
+  acceptHMRUpdate: 'readonly',
+  computed: 'readonly',
+  createApp: 'readonly',
+  createPinia: 'readonly',
+  customRef: 'readonly',
+  defineAsyncComponent: 'readonly',
+  defineComponent: 'readonly',
+  defineStore: 'readonly',
+  effectScope: 'readonly',
+  getActivePinia: 'readonly',
+  getCurrentInstance: 'readonly',
+  getCurrentScope: 'readonly',
+  getCurrentWatcher: 'readonly',
+  h: 'readonly',
+  inject: 'readonly',
+  isProxy: 'readonly',
+  isReactive: 'readonly',
+  isReadonly: 'readonly',
+  isRef: 'readonly',
+  isShallow: 'readonly',
+  mapActions: 'readonly',
+  mapGetters: 'readonly',
+  mapState: 'readonly',
+  mapStores: 'readonly',
+  mapWritableState: 'readonly',
+  markRaw: 'readonly',
+  nextTick: 'readonly',
+  onActivated: 'readonly',
+  onBeforeMount: 'readonly',
+  onBeforeRouteLeave: 'readonly',
+  onBeforeRouteUpdate: 'readonly',
+  onBeforeUnmount: 'readonly',
+  onBeforeUpdate: 'readonly',
+  onDeactivated: 'readonly',
+  onErrorCaptured: 'readonly',
+  onMounted: 'readonly',
+  onRenderTracked: 'readonly',
+  onRenderTriggered: 'readonly',
+  onScopeDispose: 'readonly',
+  onServerPrefetch: 'readonly',
+  onUnmounted: 'readonly',
+  onUpdated: 'readonly',
+  onWatcherCleanup: 'readonly',
+  provide: 'readonly',
+  reactive: 'readonly',
+  readonly: 'readonly',
+  ref: 'readonly',
+  resolveComponent: 'readonly',
+  setActivePinia: 'readonly',
+  setMapStoreSuffix: 'readonly',
+  shallowReactive: 'readonly',
+  shallowReadonly: 'readonly',
+  shallowRef: 'readonly',
+  storeToRefs: 'readonly',
+  toRaw: 'readonly',
+  toRef: 'readonly',
+  toRefs: 'readonly',
+  toValue: 'readonly',
+  triggerRef: 'readonly',
+  unref: 'readonly',
+  useAttrs: 'readonly',
+  useCssModule: 'readonly',
+  useCssVars: 'readonly',
+  useId: 'readonly',
+  useLink: 'readonly',
+  useModel: 'readonly',
+  useRoute: 'readonly',
+  useRouter: 'readonly',
+  useSlots: 'readonly',
+  useTemplateRef: 'readonly',
+  watch: 'readonly',
+  watchEffect: 'readonly',
+  watchPostEffect: 'readonly',
+  watchSyncEffect: 'readonly',
+  window: 'readonly',
+  document: 'readonly',
+  location: 'readonly',
+  history‌: 'readonly',
+  screen‌‌: 'readonly',
+  URL: 'readonly',
+  setTimeout: 'readonly',
+  setInterval: 'readonly',
+  clearInterval: 'readonly',
+  clearTimeout: 'readonly',
+  console: 'readonly',
+  alert: 'readonly',
+  confirm: 'readonly',
+  atob: 'readonly',
+  btoa: 'readonly',
+  localStorage: 'readonly',
+  sessionStorage: 'readonly',
+  JSON: 'readonly',
+  Promise: 'readonly',
+  fetch: 'readonly',
+  process: 'readonly',
+  require: 'readonly',
+  Blob: 'readonly',
+  Image: 'readonly',
+  Cesium: 'readonly',
+  MetaGis: 'readonly',
+  URLSearchParams: 'readonly',
+  AbortController: 'readonly',
+}
+
+export default defineConfig([
+  // 0. 全局忽略目录配置，将忽略该目录及其子目录下的所有文件
+  globalIgnores(['node_modules/**', 'dist/**', 'mock/**', 'public/**', 'src/views/meta-base-layer/**', 'generate-api.js'], 'globaIgnoreDirectory'),
+
+  // 1. 基础配置：匹配.vue文件并指定解析器
+  {
+    files: ['src/**/*.js', 'src/**/*.vue'], //  files: ['**/*.{js,vue}'],
+    // 以下忽略文件只是用于package.json中eslint全局校验格式化忽略的文件
+    ignores: ['*.yaml', '*.ts', '*.md', '*.txt', '*.prettierrc', '*.prettierignore'],
+    languageOptions: {
+      parser: eslintParser, // 使用vue-eslint-parser解析.vue文件
+      parserOptions: {
+        parser: '@babel/eslint-parser', // 解析<script>标签内的代码
+        ecmaVersion: 2021,
+        sourceType: 'module',
+        requireConfigFile: false, // 禁用Babel配置检查
+      },
+      globals: global,
+    },
+  },
+
+  // 2. 集成eslint-plugin-vue
+  {
+    plugins: {
+      vue: pluginVue, // 启用Vue插件
+      prettier: pluginPrettier,
+    },
+    rules: {
+      // "prettier/prettier": "error", // 全局启用 Prettier 校验
+      'vue/multi-word-component-names': 'off', // 可选：关闭多单词组件名规则
+    },
+  },
+
+  // 3. 集成Prettier规则（关闭冲突规则）
+  {
+    ...configPrettier,
+  },
+
+  // 4. 自定义规则（可选）
+  {
+    rules: {
+      'prettier/prettier': [
+        'error',
+        {
+          printWidth: 150, // 每行代码宽度
+          singleQuote: true, // 使用单引号
+          semi: false, // 句尾分号
+          tabWidth: 2, // 缩进空格数
+          singleAttributePerLine: true, // 属性是否换行
+          vueIndentScriptAndStyle: true, // Vue 文件 script 和 style 缩进
+          trailingComma: 'es5', // 尾随逗号
+          bracketSpacing: true, // 对象字面量括号间距
+          bracketSameLine: false, // 箭头函数参数括号位置
+        },
+      ],
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all', // 检测所有变量（默认）
+          varsIgnorePattern: '^(_|props|\\$)', // 忽略以(_|props|\\$) 开头的变量（如 _unused,$test,props）
+          args: 'all', // 检测函数参数
+          argsIgnorePattern: '^(_|event|evt)', // 忽略以 _ 开头的参数
+          caughtErrors: 'all', // 检测 catch 语句中的错误变量
+          caughtErrorsIgnorePattern: '^err', // 忽略catch 中以err开头的参数
+          ignoreRestSiblings: true, // 忽略解构剩余元素（如 const { a, ...rest } = obj; 中的 rest）
+          destructuredArrayIgnorePattern: '^_', // 数组解构中忽略以 _ 开头的元素
+        },
+      ],
+      'no-undef': 'error', // 强制检测未声明变量
+      'vars-on-top': 'error', // 强制变量声明在作用域顶部
+      'block-scoped-var': 'error', // 防止块作用域变量泄漏
+      'prefer-const': 'warn', // 优先使用 const
+    },
+  },
+])