@sys-designer/create-vue 1.0.0

package/README.md

@@ -0,0 +1,52 @@
+# @sys-designer/create-vue
+
+基于 `sys-designer-vue-template` 的命令行脚手架，一键生成 Vue3 + Vite + TypeScript 项目。
+
+## 使用方式
+
+### 1. 通过 npm create（发布后，任意机器）
+
+```bash
+npm create @sys-designer/vue@latest my-app
+# npm 会自动补全为 @sys-designer/create-vue 并执行
+```
+
+### 2. 本地全局使用（无需发布）
+
+```bash
+cd sys-designer-vue-cli
+npm link
+create-vue my-app
+```
+
+### 3. 直接运行（无需安装）
+
+```bash
+npx @sys-designer/create-vue my-app
+# 或
+node sys-designer-vue-cli/cli.mjs my-app
+```
+
+## 发布
+
+```bash
+cd sys-designer-vue-cli
+npm publish            # publishConfig.access=public 已配置，作用域包直接公开
+```
+
+> 发布需满足 npm 的 2FA 要求：在 npmjs.com 开启 Two-Factor Authentication（Publishing），
+> 然后 `npm publish --otp=123456`（123456 为 Authenticator 当前动态码）。
+
+## 参数
+
+```
+create-vue [project-name] [-d|--dir <dir>] [-h|--help]
+```
+
+- 不传 `project-name` 时会交互式询问。
+- 生成后自动把模板 `package.json` 中的 `name` 替换为项目名。
+
+## 自定义模板
+
+编辑 `template/` 目录即可。模板文件中的 `{{projectName}}` 占位符会在生成时替换为项目名；
+如需让某个文件在生成后变为 `.gitignore`，可将其命名为 `_gitignore`。

package/cli.mjs

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import readline from 'node:readline/promises';
+import { stdin, stdout } from 'node:process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.join(__dirname, 'template');
+
+const IGNORE_FILES = new Set(['.git', 'node_modules', 'pnpm-lock.yaml', 'package-lock.json', 'yarn.lock']);
+// 需要替换占位符的文本文件后缀
+const TEXT_EXT = new Set(['.js', '.mjs', '.cjs', '.ts', '.tsx', '.vue', '.json', '.html', '.css', '.scss', '.md', '.txt', '.yml', '.yaml', '.env']);
+
+function toValidPackageName(input) {
+  return input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9@.\-_/]+/g, '-')
+    .replace(/^[-_]+|[-_]+$/g, '')
+    || 'sys-designer-vue-app';
+}
+
+function copyDir(src, dest, vars) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const name = entry.name;
+    if (IGNORE_FILES.has(name)) continue;
+    const srcPath = path.join(src, name);
+    const destPath = path.join(dest, name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, vars);
+    } else {
+      // 模板内若用了 .gitignore.template 之类的隐藏名，这里还原为 .gitignore
+      const finalDest = name.startsWith('_gitignore') ? path.join(dest, '.gitignore') : destPath;
+      if (TEXT_EXT.has(path.extname(name))) {
+        let content = fs.readFileSync(srcPath, 'utf-8');
+        // package.json 单独处理：把 name 替换为项目名，避免损坏 JSON
+        if (name === 'package.json') {
+          try {
+            const pkg = JSON.parse(content);
+            pkg.name = vars.projectName;
+            if (vars.author) pkg.author = vars.author;
+            content = JSON.stringify(pkg, null, 2) + '\n';
+          } catch {
+            /* 解析失败则走下方占位符替换 */
+          }
+        }
+        for (const [k, v] of Object.entries(vars)) {
+          content = content.split(`{{${k}}}`).join(v);
+        }
+        fs.writeFileSync(finalDest, content);
+      } else {
+        fs.copyFileSync(srcPath, finalDest);
+      }
+    }
+  }
+}
+
+function printHelp() {
+  console.log(`
+Usage:
+  create-sys-designer-vue [project-name] [options]
+
+Options:
+  -h, --help      Show this help
+  -d, --dir <dir> Target directory (default: ./<project-name>)
+
+Examples:
+  create-sys-designer-vue my-app
+  npm create sys-designer-vue@latest my-app
+  npx create-sys-designer-vue my-app
+`);
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  if (args.some((a) => a === '-h' || a === '--help')) {
+    printHelp();
+    return;
+  }
+
+  let projectName = '';
+  let targetDir = '';
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-d' || args[i] === '--dir') {
+      targetDir = args[++i];
+    } else if (!projectName) {
+      projectName = args[i];
+    }
+  }
+
+  if (!projectName) {
+    const rl = readline.createInterface({ input: stdin, output: stdout });
+    projectName = (await rl.question('Project name: ')).trim();
+    await rl.close();
+  }
+  if (!projectName) {
+    console.error('Error: project name is required.');
+    printHelp();
+    process.exit(1);
+  }
+
+  const pkgName = toValidPackageName(projectName);
+  const destRoot = targetDir ? path.resolve(targetDir) : path.resolve(process.cwd(), pkgName);
+
+  if (fs.existsSync(destRoot) && fs.readdirSync(destRoot).length > 0) {
+    console.error(`Error: target directory "${destRoot}" is not empty.`);
+    process.exit(1);
+  }
+
+  console.log(`\nScaffolding project in ${destRoot} ...`);
+  copyDir(TEMPLATE_DIR, destRoot, {
+    projectName: pkgName,
+    name: pkgName,
+    author: process.env.USER || process.env.USERNAME || '',
+  });
+
+  console.log(`
+Done! Next steps:
+
+  cd ${path.relative(process.cwd(), destRoot) || '.'}
+  npm install      # or: pnpm install
+  npm run dev
+
+Happy coding! 🚀
+`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@sys-designer/create-vue",
+  "version": "1.0.0",
+  "description": "Scaffold a sys-designer Vue3 + Vite + TS project from the command line.",
+  "type": "module",
+  "bin": {
+    "create-vue": "cli.mjs"
+  },
+  "files": [
+    "cli.mjs",
+    "template"
+  ],
+  "keywords": [
+    "vue",
+    "vite",
+    "scaffold",
+    "sys-designer"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/.env.development

@@ -0,0 +1,13 @@
+# 只在开发模式中被载入
+VITE_PORT = 3001
+
+# 网站根目录
+VITE_PUBLIC_PATH = ./
+
+# API 接口地址
+VITE_GLOB_API_URL =/api
+
+VITE_PROXY=[["/api","http://localhost:11001/api/"]]
+
+VITE_HOME_PAGE_URL=http://localhost:3000/#/desktop
+VITE_LOGIN_PAGE_URL=

package/template/.env.electron

@@ -0,0 +1,13 @@
+# 只在开发模式中被载入
+VITE_PORT = 3001
+
+# 网站根目录
+VITE_PUBLIC_PATH = ./
+
+# API 接口地址
+VITE_GLOB_API_URL =/api
+
+VITE_PROXY=[["/api","http://localhost:11001/api/"]]
+VITE_HOME_PAGE_URL=./workspace/index.html/#/desktop
+VITE_GLOB_API_URL=https://www.sys-designer.com/api
+VITE_PRODUCT=electron

package/template/.env.production

@@ -0,0 +1,11 @@
+# 只在开发模式中被载入
+VITE_PORT = 3001
+
+# 网站根目录
+VITE_PUBLIC_PATH = ./
+
+# API 接口地址
+VITE_GLOB_API_URL =/api
+
+VITE_HOME_PAGE_URL=http://www.sys-designer.com/workspace/#/desktop
+VITE_LOGIN_PAGE_URL=

package/template/.eslintrc-auto-import.json

@@ -0,0 +1,96 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "acceptHMRUpdate": true,
+    "computed": true,
+    "createApp": true,
+    "createPinia": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "defineStore": true,
+    "effectScope": true,
+    "getActivePinia": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "storeToRefs": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useDialog": true,
+    "useId": true,
+    "useLink": true,
+    "useLoadingBar": true,
+    "useMessage": true,
+    "useModal": true,
+    "useModel": true,
+    "useNotification": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

package/template/README.md

@@ -0,0 +1,2 @@
+# sys-designer-vue-template
+Vue Template Project

package/template/_gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Build output
+dist
+dist-ssr
+*.local
+
+# Editor / OS
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Env
+.env.local
+.env.*.local

package/template/build/proxy.ts

@@ -0,0 +1,34 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
+import type { ProxyOptions } from 'vite';
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
+
+const httpsRE = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const isHttps = httpsRE.test(target);
+
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {}),
+    };
+  }
+  return ret;
+}

package/template/build/utils.ts

@@ -0,0 +1,71 @@
+import fs from 'fs';
+import path from 'path';
+import dotenv from 'dotenv';
+
+export function isDevFn(mode: string): boolean {
+  return mode === 'development';
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === 'production';
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true';
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n');
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+    if (envName === 'VITE_PORT') {
+      realName = Number(realName);
+    }
+    if (envName === 'VITE_PROXY') {
+      try {
+        realName = JSON.parse(realName);
+      } catch (error) { }
+    }
+    ret[envName] = realName;
+    process.env[envName] = realName;
+  }
+  return ret;
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
+  let envConfig = {};
+  confFiles.forEach((item) => {
+    try {
+      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+      envConfig = { ...envConfig, ...env };
+    } catch (error) { }
+  });
+
+  Object.keys(envConfig).forEach((key) => {
+    const reg = new RegExp(`^(${match})`);
+    if (!reg.test(key)) {
+      Reflect.deleteProperty(envConfig, key);
+    }
+  });
+  return envConfig;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir);
+}

package/template/common/routes.ts

@@ -0,0 +1,7 @@
+export const routes = [
+   {
+    path: '/',
+    name: 'home',
+    component: () => import('@/views/index.vue')
+  },
+]

package/template/index.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+}
+
+html, body, #app, .n-config-provider, #page-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

package/template/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="一体化开发平台">
+    <meta name="keywords" content="一体化开发平台,IDesign Platform">
+    <meta name="author" content="idesign platform">
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <link rel="icon" href="./favicon.ico" />
+    <title>Sys-Designer 一体化开发平台</title>
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <div id="app">
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "sys-designer-vue-template",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode development",
+    "build": "tsc && vite build --mode production",
+    "build:electron": "tsc && vite build --mode electron ",
+    "build:test": "tsc && vite build --mode test",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.ts,.tsx --fix",
+    "lint:check": "eslint . --ext .vue,.ts,.tsx"
+  },
+  "dependencies": {
+    "@vicons/ionicons5": "^0.13.0",
+    "@vicons/material": "^0.13.0",
+    "axios": "^1.7.7",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "naive-ui": "^2.40.1",
+    "node-forge": "^1.4.0",
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.10",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^22.7.5",
+    "@types/node-forge": "^1.3.14",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "dotenv": "^17.4.2",
+    "eslint": "^9.12.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "mockjs": "^1.1.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.79.4",
+    "terser": "^5.34.0",
+    "typescript": "^5.6.3",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^6.0.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-mock": "^3.0.2"
+  }
+}

package/template/src/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+    <n-message-provider>
+      <n-dialog-provider >
+        <n-notification-provider>
+          <n-loading-bar-provider>
+            <router-view />
+          </n-loading-bar-provider>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-message-provider>
+    </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import { zhCN, dateZhCN } from 'naive-ui';
+
+</script>

package/template/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia'
+import '@/assets/styles/reset.scss'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia);
+app.use(router);
+
+app.mount('#app')

package/template/src/router/index.ts

@@ -0,0 +1,44 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { routes } from '@common/routes';
+
+export const constantRoutes: RouteRecordRaw[] = [
+  ...routes,
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: constantRoutes
+})
+
+// 全局路由守卫
+// router.beforeEach(async (to, from, next) => {
+//   // const token = getToken()
+//   // const userStore = useUserStore()
+//   const whiteList = ['/login']
+
+//   // if (token) {
+//   //   if (to.path === '/login') {
+//   //     next('/')
+//   //   } else {
+//   //     if (!userStore.userInfo.id) {
+//   //       await userStore.getUserInfo()
+//   //       next({ ...to, replace: true })
+//   //     } else {
+//   //       next()
+//   //     }
+//   //   }
+//   // } else {
+//   //   if (whiteList.includes(to.path)) {
+//   //     next()
+//   //   } else {
+//   //     next('/login')
+//   //   }
+//   // }
+//   next();
+// });
+
+export default router