create-swdg-frontend 0.1.0

package/README.md

@@ -0,0 +1,39 @@
+# create-swdg
+
+Scaffold a new project from the SWDG frontend template.
+
+## Usage
+
+```bash
+pnpm create swdg my-app
+# or
+pnpm dlx create-swdg my-app
+```
+
+Options:
+
+- `--install` to install dependencies after creation
+- `--no-install` to skip installing dependencies
+- `--pm pnpm|npm|yarn` to choose the package manager (default: pnpm)
+- `--git` to run `git init`
+- `--no-git` to skip `git init`
+- `--gis` to include Cesium GIS assets
+- `--no-gis` to exclude Cesium GIS assets
+
+## Sync template
+
+```bash
+pnpm run sync-template
+```
+
+You can override the template repo and branch:
+
+```bash
+TEMPLATE_REPO=http://10.20.124.70/bim/frontend-framework.git TEMPLATE_BRANCH=main pnpm run sync-template
+```
+
+You can also sync from a local template directory:
+
+```bash
+TEMPLATE_DIR="/Users/inupedia/Side Projects/frontend-framework" pnpm run sync-template
+```

package/bin/index.js

@@ -0,0 +1,248 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawn } from 'node:child_process';
+import readline from 'node:readline/promises';
+
+const argv = process.argv.slice(2);
+
+let pm = 'pnpm';
+let targetDir;
+let shouldInstall;
+let shouldInitGit;
+let shouldIncludeGis;
+const flags = new Set();
+
+for (let i = 0; i < argv.length; i += 1) {
+  const arg = argv[i];
+  if (arg === '--pm') {
+    pm = argv[i + 1] ?? pm;
+    i += 1;
+    continue;
+  }
+  if (arg.startsWith('--pm=')) {
+    pm = arg.slice('--pm='.length) || pm;
+    continue;
+  }
+  if (arg === '--install') {
+    shouldInstall = true;
+    continue;
+  }
+  if (arg === '--no-install') {
+    shouldInstall = false;
+    continue;
+  }
+  if (arg === '--git') {
+    shouldInitGit = true;
+    continue;
+  }
+  if (arg === '--no-git') {
+    shouldInitGit = false;
+    continue;
+  }
+  if (arg === '--gis') {
+    shouldIncludeGis = true;
+    continue;
+  }
+  if (arg === '--no-gis') {
+    shouldIncludeGis = false;
+    continue;
+  }
+  if (arg.startsWith('-')) {
+    flags.add(arg);
+    continue;
+  }
+  if (!targetDir) targetDir = arg;
+}
+
+if (flags.has('--help') || flags.has('-h')) {
+  console.log(
+    `\nUsage: pnpm create swdg [project-name] [--install|--no-install] [--git|--no-git] [--gis|--no-gis] [--pm pnpm|npm|yarn]\n`
+  );
+  process.exit(0);
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.resolve(__dirname, '../template');
+let destDir;
+
+function isValidPackageName(name) {
+  if (!name) return false;
+  if (name.startsWith('@')) return false;
+  if (name.length > 214) return false;
+  return /^[a-z0-9][a-z0-9._-]*$/.test(name);
+}
+
+async function resolveTargetDir() {
+  if (targetDir) {
+    if (!isValidPackageName(targetDir)) {
+      console.error(
+        'Invalid project name. Use lowercase letters, numbers, dots, dashes or underscores.'
+      );
+      process.exit(1);
+    }
+    return targetDir;
+  }
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  let name = '';
+  while (!isValidPackageName(name)) {
+    const answer = await rl.question('Project name (my-app): ');
+    name = answer.trim() || 'my-app';
+    if (!isValidPackageName(name)) {
+      console.log(
+        'Invalid project name. Use lowercase letters, numbers, dots, dashes or underscores.'
+      );
+    }
+  }
+  rl.close();
+  return name;
+}
+
+async function resolveGisChoice() {
+  if (shouldIncludeGis === true) return true;
+  if (shouldIncludeGis === false) return false;
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  const answer = await rl.question('Include GIS (Cesium) assets? (Y/n): ');
+  rl.close();
+  if (!answer.trim()) return true;
+  return /^y(es)?$/i.test(answer.trim());
+}
+
+async function pathExists(p) {
+  try {
+    await fs.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function isDirEmpty(p) {
+  try {
+    const entries = await fs.readdir(p);
+    return entries.length === 0;
+  } catch {
+    return true;
+  }
+}
+
+async function copyTemplate() {
+  if (await pathExists(destDir)) {
+    const empty = await isDirEmpty(destDir);
+    if (!empty) {
+      const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+      });
+      const answer = await rl.question(
+        `Target directory is not empty. Remove and continue? (y/N): `
+      );
+      rl.close();
+      if (!/^y(es)?$/i.test(answer.trim())) {
+        console.error('Aborted.');
+        process.exit(1);
+      }
+      await fs.rm(destDir, { recursive: true, force: true });
+      await fs.mkdir(destDir, { recursive: true });
+    }
+  } else {
+    await fs.mkdir(destDir, { recursive: true });
+  }
+
+  await fs.cp(templateDir, destDir, { recursive: true });
+}
+
+async function updatePackageName() {
+  const pkgPath = path.join(destDir, 'package.json');
+  const raw = await fs.readFile(pkgPath, 'utf8');
+  const pkg = JSON.parse(raw);
+  pkg.name = path.basename(destDir);
+  await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+}
+
+async function updateIndexTitle() {
+  const indexPath = path.join(destDir, 'index.html');
+  try {
+    const html = await fs.readFile(indexPath, 'utf8');
+    const title = path.basename(destDir);
+    const next = html.replace(
+      /<title>.*?<\/title>/i,
+      `<title>${title}</title>`
+    );
+    await fs.writeFile(indexPath, next, 'utf8');
+  } catch {
+    // Ignore if index.html does not exist
+  }
+}
+
+async function removeGisAssets() {
+  const gisDir = path.join(destDir, 'public', 'Cesium1.119');
+  await fs.rm(gisDir, { recursive: true, force: true });
+}
+
+async function runInstall() {
+  const cmd = pm || 'pnpm';
+  const child = spawn(cmd, ['install'], {
+    cwd: destDir,
+    stdio: 'inherit',
+  });
+  await new Promise((resolve, reject) => {
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${cmd} install failed with code ${code}`));
+    });
+  });
+}
+
+async function initGit() {
+  await new Promise((resolve, reject) => {
+    const child = spawn('git', ['init'], {
+      cwd: destDir,
+      stdio: 'inherit',
+    });
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`git init failed with code ${code}`));
+    });
+  });
+}
+
+try {
+  targetDir = await resolveTargetDir();
+  destDir = path.resolve(process.cwd(), targetDir);
+  await copyTemplate();
+  await updatePackageName();
+  await updateIndexTitle();
+
+  const includeGis = await resolveGisChoice();
+  if (!includeGis) {
+    await removeGisAssets();
+  }
+
+  if (shouldInitGit === true) {
+    await initGit();
+  }
+
+  if (
+    shouldInstall === true ||
+    (shouldInstall !== false && flags.has('--install'))
+  ) {
+    await runInstall();
+  }
+
+  console.log(`\nProject created at ${destDir}`);
+  console.log(
+    `\nNext steps:\n  cd ${targetDir}\n  ${pm} install\n  ${pm} run dev\n`
+  );
+} catch (err) {
+  console.error(err?.message ?? err);
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-swdg-frontend",
+  "version": "0.1.0",
+  "description": "Scaffold a new SWDG frontend project",
+  "type": "module",
+  "bin": {
+    "create-swdg": "bin/index.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "scripts": {
+    "sync-template": "node scripts/sync-template.js",
+    "prepublishOnly": "node scripts/sync-template.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "pnpm",
+    "create",
+    "scaffold",
+    "vite",
+    "vue"
+  ],
+  "author": "inupedia",
+  "license": "MIT"
+}

package/template/.husky/commit-msg

@@ -0,0 +1,42 @@
+npx commitlint --edit "$1" || (
+  echo ""
+  echo "提交格式："
+  echo "  <type>[scope]: <subject>"
+  echo "  type 和 subject 必填，scope 可选。"
+  echo ""
+  echo "详细说明："
+  echo "1. type（提交类型）："
+  echo "   描述提交的目的，必须是以下之一："
+  echo "    - feat     新功能开发"
+  echo "    - fix      问题修复"
+  echo "    - update   更新现有功能"
+  echo "    - docs     文档调整"
+  echo "    - style    代码格式调整（不影响功能）"
+  echo "    - refactor 代码重构（非功能变更）"
+  echo "    - perf     性能优化"
+  echo "    - test     添加或修改测试代码"
+  echo "    - chore    构建工具或依赖的变更"
+  echo "    - revert   回滚到上一次提交"
+  echo "    - build    构建相关的变更"
+  echo "    - ci       CI/CD 配置或脚本调整"
+  echo ""
+  echo "2. scope（范围模块，可选）："
+  echo "   - 可选字段，表明受影响的模块，例如 auth, api, ui 等。"
+  echo "   - 如果省略，则提交格式为：<type>: <subject>"
+  echo ""
+  echo "3. subject（简要描述）："
+  echo "   - 用一句话清晰描述本次提交的目的。"
+  echo "   - 必须清晰、简短，不超过 72 个字符。"
+  echo "   - 支持中文描述，可以用句号（。）结尾。"
+  echo "   - subject 必须全部使用小写字母，不能使用句首大写、首字母大写、帕斯卡命名或全大写。（例如：update: gis弹窗添加基础功能, 地图定位）"
+  echo ""
+  echo "提交信息示例："
+  echo "  feat(auth): 添加用户登录功能"
+  echo "  fix: 修复用户接口返回错误问题"
+  echo "  update(ui): 优化表单组件样式"
+  echo "  style: 调整代码格式，去除无用空格"
+  echo ""
+  echo "错误原因：提交信息不符合以上规范，请根据提示修改！"
+  echo ""
+  exit 1
+)

package/template/.husky/pre-commit

@@ -0,0 +1,2 @@
+# 运行 lint-staged
+npx lint-staged

package/template/.husky/prepare-commit-msg

@@ -0,0 +1 @@
+# node --experimental-modules scripts/auto-commit.mjs "$1"

package/template/.lintstagedrc

@@ -0,0 +1,5 @@
+{
+  "*.{js,ts}": ["eslint --fix", "prettier --write"],
+  "*.vue": ["stylelint --fix", "prettier --write"],
+  "*.{less,css}": ["prettier --write"]
+}

package/template/.prettierignore

@@ -0,0 +1,26 @@
+# 忽略构建输出目录
+dist
+out
+
+# 忽略依赖目录
+node_modules
+
+# 忽略 Vite 自动生成的文件
+index.html
+
+# 忽略所有 .d.ts 文件
+*.d.ts
+
+# 忽略环境配置文件
+.env
+.env.local
+.env.*.local
+
+# 忽略自动生成的组件声明文件
+src/components.d.ts
+
+android
+
+dev-dist
+
+public/**

package/template/.prettierrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  semi: true, // 在语句末尾添加分号
+  singleQuote: true, // 使用单引号而不是双引号
+  trailingComma: 'es5', // 多行时尽可能打印尾随逗号
+  bracketSpacing: true, // 在对象的括号之间添加空格
+  tabWidth: 2, // 指定每个缩进级别的空格数
+  useTabs: false, // 使用空格代替制表符
+  endOfLine: 'lf', // 维持现有的行尾（防止在不同操作系统间出现问题）
+  printWidth: 80, // 推荐值是 80 或 120
+};

package/template/.stylelintignore

@@ -0,0 +1 @@
+src/style/**

package/template/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-vue"],
+  "rules": {
+    "no-empty-source": null
+  }
+}

package/template/README.md

@@ -0,0 +1,36 @@
+# Frontend Framework (Vue 3 + TypeScript + Vite)
+
+面向小型开发团队的通用前端框架模板，提供清晰目录、可复用示例、统一配置与约定。
+
+## 目录结构
+
+project
+├── interface/ # 📝 业务模型接口定义
+├── public/ # 🌐 公共资源，打包会直接打进根目录
+├── src
+│ ├── api/ # 🔌 请求后端接口
+│ ├── assets/ # 🖼 静态资源
+│ ├── components/ # 🧩 公共基础组件
+│ ├── directive/ # ⚡ 全局指令
+│ ├── layout/ # 📐 布局组件
+│ ├── router/ # 🛣 路由配置
+│ ├── stores/ # 🗄 全局状态管理
+│ ├── styles/ # 🎨 全局样式
+│ ├── utils/ # 🛠 工具类
+│ └── views/ # 📄 业务页面
+├── tests/ # 🧪 测试目录
+│ ├── unit/ # 单元测试（Vitest）
+│ ├── e2e/ # E2E 测试
+│ ├── setup.ts # 测试环境配置
+│ └── utils/ # 测试工具函数
+├── types/ # 📋 全局类型声明
+├── vitest.config.ts # 🧪 Vitest 配置
+└── package.json
+
+## 示例说明
+
+- `src/api/`：`modules/demo.ts` 演示接口调用
+- `src/stores/`：`useCounter.ts` 演示 Pinia Store
+- `src/directive/`：`focus.ts` 演示自定义指令
+- `src/layout/`：`BasicLayout.vue` 演示布局壳
+- `src/views/Test`：演示使用 store + api + composable

package/template/commitlint.config.cjs

@@ -0,0 +1,64 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    // 提交消息的类型必须是以下之一
+    'type-enum': [
+      2, // 错误级别
+      'always',
+      [
+        'feat', // 新功能
+        'fix', // 修复问题
+        'update', // 更新现有功能
+        'docs', // 文档更新
+        'style', // 代码格式（不影响功能）
+        'refactor', // 重构代码（不影响功能）
+        'perf', // 性能优化
+        'test', // 添加或修改测试
+        'chore', // 杂项更新（比如构建工具）
+        'revert', // 回滚提交
+        'build', // 构建系统或外部依赖变更
+        'ci', // CI/CD 配置或脚本修改
+      ],
+    ],
+    // 允许范围为空
+    'scope-empty': [0, 'never'],
+    'scope-case': [2, 'always'],
+    // 提交消息的主题不能为空
+    'subject-empty': [2, 'never'],
+    // 不限制提交消息结尾的标点符号
+    'subject-full-stop': [0, 'never'],
+    // 限制提交消息的主题长度
+    'header-max-length': [2, 'always', 72],
+    // 'message-case': [2, 'always', 'lower-case'],
+  },
+  prompt: {
+    messages: {
+      skip: ':跳过',
+      max: '最多输入 %d 个字符',
+      min: '至少输入 %d 个字符',
+      emptyWarning: '请填写有效内容',
+      upperLimitWarning: '长度超过限制',
+      lowerLimitWarning: '长度不足',
+    },
+    questions: {
+      type: {
+        description: '选择提交类型（如：feat, fix, docs等）',
+      },
+      scope: {
+        description: '影响的模块范围（如：auth, api等，可选）',
+      },
+      subject: {
+        description: '简要描述本次提交（限72个字符以内）',
+      },
+      body: {
+        description: '详细描述本次提交（可选）',
+      },
+      breaking: {
+        description: '列出任何破坏性更新（可选）',
+      },
+      footer: {
+        description: '关联的issue，例如：#123, #456（可选）',
+      },
+    },
+  },
+};

package/template/eslint.config.js

@@ -0,0 +1,96 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import vue from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      'dist',
+      'out',
+      'node_modules',
+      'index.html',
+      '*.d.ts',
+      '.env',
+      '.env.local',
+      '.env.*.local',
+      'src/components.d.ts',
+      'public/**',
+      'dev-dist',
+    ],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ),
+  ...vue.configs['flat/recommended'],
+  {
+    plugins: {
+      vue,
+      '@typescript-eslint': tseslint,
+    },
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'require-jsdoc': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+      'no-console': 'off',
+      'vue/no-unused-components': 'warn',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+      'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-ignore': 'allow-with-description',
+          'ts-expect-error': 'allow-with-description',
+          'ts-nocheck': true,
+          'ts-check': false,
+        },
+      ],
+      'vue/attribute-hyphenation': 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      'vue/html-indent': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/multiline-html-element-content-newline': 'off',
+      'vue/no-mutating-props': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'no-undef': 'off',
+      'spaced-comment': 'off',
+    },
+  },
+  {
+    files: ['**/*.cjs'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+];

package/template/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <title>物联网地下水位监测系统</title>
+  </head>
+  <body>
+    <div hidden>Copyright © 2026 四川水发勘测设计研究有限公司</div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/interface/user.ts

@@ -0,0 +1,5 @@
+export interface User {
+  id: string;
+  name: string;
+  role: 'admin' | 'member';
+}