gridsum-vue3-pc 1.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "gridsum-vue3-pc",
+  "version": "1.0.0",
+  "description": "Gridsum Vue3 Vite PC Template Generator - 快速生成基于 Vue3 + Vite + TypeScript 的企业级 PC 端项目",
+  "type": "module",
+  "sideEffects": false,
+  "bin": {
+    "gridsum-vue3-pc": "./bin/create-vue3-pc.mjs",
+    "gsvue": "./bin/create-vue3-pc.mjs"
+  },
+  "files": [
+    "bin",
+    "template",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "vue",
+    "vite",
+    "vue3",
+    "typescript",
+    "template",
+    "scaffolding",
+    "generator",
+    "element-plus",
+    "pinia",
+    "gridsum"
+  ],
+  "author": "",
+  "license": "MIT",
+  "homepage": "https://github.com/gridsum/vue3-pc-template#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gridsum/vue3-pc-template.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gridsum/vue3-pc-template/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/gridsum"
+  },
+
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "cross-spawn": "^7.0.6",
+    "mri": "^1.2.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.6",
+    "eslint": "^10.5.0"
+  },
+  "scripts": {
+    "lint": "eslint bin/ --ext .mjs --fix",
+    "test": "node bin/create-vue3-pc.mjs --help",
+    "test:create": "node bin/create-vue3-pc.mjs test-project --name test-project --title \"Test Project\" --no-interactive && npm --prefix test-project install --legacy-peer-deps && npm --prefix test-project run lint && npm --prefix test-project run typecheck && npm --prefix test-project run build",
+    "posttest:create": "node -e \"const fs = require('fs'); if (fs.existsSync('test-project')) fs.rmSync('test-project', { recursive: true, force: true }); console.log('cleaned up test-project');\"",
+    "prepublishOnly": "npm test",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major"
+  }
+}

package/template/base/.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+.git
+.gitignore
+*.log
+.DS_Store
+.vscode
+.idea
+coverage
+tests
+mock
+*.md

package/template/base/.env

@@ -0,0 +1,5 @@
+VITE_APP_TITLE=Vue3 PC Template
+VITE_APP_LOCALE=zh-CN
+VITE_APP_MOCK=true
+VITE_APP_PORT=3000
+VITE_APP_API_BASE_URL=http://localhost:8080

package/template/base/.env.production

@@ -0,0 +1,5 @@
+VITE_APP_TITLE=Vue3 PC Template
+VITE_APP_LOCALE=zh-CN
+VITE_APP_MOCK=false
+VITE_APP_PORT=80
+VITE_APP_API_BASE_URL=/api

package/template/base/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+  },
+  plugins: ['vue'],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'no-unused-vars': 'warn',
+  },
+};

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

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

package/template/base/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/template/base/.lintstagedrc

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

package/template/base/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all"
+}

package/template/base/.stylelintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-prettier',
+  ],
+};

package/template/base/.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "files.associations": {
+    "*.vue": "vue"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
+  }
+}

package/template/base/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 0.1.0
+
+### Added
+- Initial project setup

package/template/base/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+
+FROM nginx:alpine AS production
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package/template/base/README.md

@@ -0,0 +1,87 @@
+# Vue3 PC Template
+
+基于 Vite + Vue3 + TypeScript + Pinia 的 PC 端项目模板。
+
+## 技术栈
+
+- **构建工具**: Vite 5
+- **框架**: Vue 3.5
+- **语言**: TypeScript
+- **状态管理**: Pinia
+- **路由**: Vue Router 4
+- **UI 组件库**: Element Plus
+- **国际化**: vue-i18n
+- **网络请求**: Axios
+- **样式**: SCSS
+- **代码规范**: ESLint + Prettier + Stylelint
+- **提交规范**: Husky + Commitlint
+- **测试**: Vitest + Playwright
+
+## 功能特性
+
+- ✅ Vite + Vue3 + TypeScript 完整配置
+- ✅ Pinia 状态管理
+- ✅ Element Plus 组件库
+- ✅ 国际化支持 (vue-i18n)
+- ✅ Mock 数据支持
+- ✅ 权限路由守卫
+- ✅ 环境变量配置
+- ✅ Docker 构建支持
+- ✅ CI/CD 配置
+
+## 快速开始
+
+```bash
+# 安装依赖
+yarn install
+
+# 开发模式
+yarn dev
+
+# 构建生产
+yarn build
+
+# 预览构建
+yarn preview
+
+# 类型检查
+yarn typecheck
+
+# 代码检查
+yarn lint
+```
+
+## 环境变量
+
+| 变量名 | 说明 | 默认值 |
+|--------|------|--------|
+| VITE_APP_TITLE | 项目标题 | Vue3 PC Template |
+| VITE_APP_LOCALE | 默认语言 | zh-CN |
+| VITE_APP_MOCK | 是否启用 Mock | true |
+| VITE_APP_PORT | 开发服务器端口 | 3000 |
+| VITE_APP_API_BASE_URL | API 基础路径 | http://localhost:8080 |
+
+## 目录结构
+
+```
+src/
+├── api/              # API 接口
+├── assets/           # 静态资源
+├── components/       # 公共组件
+├── locales/          # 国际化文件
+├── router/           # 路由配置
+├── services/         # 网络请求
+├── store/           # Pinia 状态管理
+├── utils/           # 工具函数
+└── views/           # 页面组件
+```
+
+## Docker 构建
+
+```bash
+# 构建镜像
+docker build -t vue3-pc .
+
+# 运行容器
+docker run -p 80:80 vue3-pc
+```

package/template/base/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package/template/base/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Vue3 PC Template - Enterprise Admin Dashboard">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <title>Vue3 PC Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/base/mock/user.js

@@ -0,0 +1,393 @@
+const users = [
+  {
+    id: '1',
+    username: 'admin',
+    name: '管理员',
+    email: 'admin@example.com',
+    phone: '13800138000',
+    role: 'admin',
+    status: 1,
+    createTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '2',
+    username: 'zhangsan',
+    name: '张三',
+    email: 'zhangsan@example.com',
+    phone: '13800138001',
+    role: 'user',
+    status: 1,
+    createTime: '2024-01-15 14:30:00',
+  },
+  {
+    id: '3',
+    username: 'lisi',
+    name: '李四',
+    email: 'lisi@example.com',
+    phone: '13800138002',
+    role: 'user',
+    status: 1,
+    createTime: '2024-02-01 09:15:00',
+  },
+  {
+    id: '4',
+    username: 'wangwu',
+    name: '王五',
+    email: 'wangwu@example.com',
+    phone: '13800138003',
+    role: 'user',
+    status: 0,
+    createTime: '2024-02-10 16:45:00',
+  },
+  {
+    id: '5',
+    username: 'zhaoliu',
+    name: '赵六',
+    email: 'zhaoliu@example.com',
+    phone: '13800138004',
+    role: 'guest',
+    status: 1,
+    createTime: '2024-03-05 11:20:00',
+  },
+];
+
+const roles = [
+  {
+    id: '1',
+    name: '管理员',
+    code: 'admin',
+    description: '拥有所有权限',
+    permissions: ['user:view', 'user:add', 'user:edit', 'user:delete', 'role:view', 'role:add', 'role:edit', 'role:delete'],
+    createTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '2',
+    name: '普通用户',
+    code: 'user',
+    description: '普通用户权限',
+    permissions: ['user:view', 'role:view'],
+    createTime: '2024-01-01 10:00:00',
+  },
+  {
+    id: '3',
+    name: '访客',
+    code: 'guest',
+    description: '只读权限',
+    permissions: ['user:view'],
+    createTime: '2024-01-01 10:00:00',
+  },
+];
+
+const permissions = [
+  { id: '1', name: '用户查看', code: 'user:view' },
+  { id: '2', name: '用户新增', code: 'user:add' },
+  { id: '3', name: '用户编辑', code: 'user:edit' },
+  { id: '4', name: '用户删除', code: 'user:delete' },
+  { id: '5', name: '角色查看', code: 'role:view' },
+  { id: '6', name: '角色新增', code: 'role:add' },
+  { id: '7', name: '角色编辑', code: 'role:edit' },
+  { id: '8', name: '角色删除', code: 'role:delete' },
+];
+
+const credentials = {
+  admin: 'admin',
+  zhangsan: '123456',
+  lisi: '123456',
+  wangwu: '123456',
+  zhaoliu: '123456',
+};
+
+let nextUserId = 6;
+let nextRoleId = 4;
+
+function getId({ url, params }) {
+  return params?.id || url?.split('/').pop();
+}
+
+export default [
+  // 登录验证
+  {
+    url: '/api/auth/login',
+    method: 'post',
+    response: ({ body }) => {
+      const { username, password } = body;
+      const user = users.find(u => u.username === username && credentials[u.username] === password);
+      if (user) {
+        const roleObj = roles.find(r => r.code === user.role);
+        return {
+          code: 0,
+          data: {
+            id: user.id,
+            username: user.username,
+            displayName: user.name,
+            email: user.email,
+            role: user.role,
+            permissions: roleObj ? roleObj.permissions : [],
+          },
+        };
+      }
+      return { code: 401, message: '用户名或密码错误' };
+    },
+  },
+
+  // 用户列表
+  {
+    url: '/api/users',
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 10, keyword = '' } = query;
+      let filteredUsers = [...users];
+      
+      if (keyword) {
+        filteredUsers = filteredUsers.filter(u => 
+          u.username.includes(keyword) || 
+          u.name.includes(keyword) || 
+          u.email.includes(keyword)
+        );
+      }
+      
+      const start = (page - 1) * pageSize;
+      const end = start + parseInt(pageSize);
+      const list = filteredUsers.slice(start, end);
+      
+      return {
+        code: 0,
+        data: {
+          list,
+          total: filteredUsers.length,
+          page: parseInt(page),
+          pageSize: parseInt(pageSize),
+        },
+      };
+    },
+  },
+
+  // 导出用户
+  {
+    url: '/api/users/export',
+    method: 'get',
+    response: () => {
+      const exportData = users.map(u => {
+        const roleObj = roles.find(r => r.code === u.role);
+        return {
+          ...u,
+          roleName: roleObj ? roleObj.name : u.role,
+        };
+      });
+      return { code: 0, data: { list: exportData, total: exportData.length } };
+    },
+  },
+
+  // 用户详情
+  {
+    url: '/api/users/:id',
+    method: 'get',
+    response: ({ params, url }) => {
+      const id = getId({ url, params });
+      const user = users.find(u => u.id === id);
+      return user
+        ? { code: 0, data: user }
+        : { code: 404, message: '用户不存在' };
+    },
+  },
+
+  // 新增用户
+  {
+    url: '/api/users',
+    method: 'post',
+    response: ({ body }) => {
+      const newUser = {
+        ...body,
+        id: String(nextUserId++),
+        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+      };
+      users.push(newUser);
+      return { code: 0, data: newUser };
+    },
+  },
+
+  // 编辑用户
+  {
+    url: '/api/users/:id',
+    method: 'put',
+    response: ({ params, body, url }) => {
+      const id = getId({ url, params });
+      const index = users.findIndex(u => u.id === id);
+      if (index > -1) {
+        users[index] = { ...users[index], ...body };
+        return { code: 0, data: users[index] };
+      }
+      return { code: 404, message: '用户不存在' };
+    },
+  },
+
+  // 批量删除用户
+  {
+    url: '/api/users/batch',
+    method: 'delete',
+    response: ({ body }) => {
+      const ids = body?.ids || [];
+      ids.forEach(id => {
+        const index = users.findIndex(u => u.id === id);
+        if (index > -1) users.splice(index, 1);
+      });
+      return { code: 0, message: '批量删除成功' };
+    },
+  },
+
+  // 删除用户
+  {
+    url: '/api/users/:id',
+    method: 'delete',
+    response: ({ params, url }) => {
+      const id = getId({ url, params });
+      const index = users.findIndex(u => u.id === id);
+      if (index > -1) {
+        users.splice(index, 1);
+        return { code: 0, message: '删除成功' };
+      }
+      return { code: 404, message: '用户不存在' };
+    },
+  },
+
+  // 角色列表
+  {
+    url: '/api/roles',
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 10, keyword = '', all } = query;
+      let filteredRoles = [...roles];
+      
+      if (keyword) {
+        filteredRoles = filteredRoles.filter(r => 
+          r.name.includes(keyword) || 
+          r.code.includes(keyword)
+        );
+      }
+      
+      if (all) {
+        return { code: 0, data: filteredRoles };
+      }
+      
+      const start = (page - 1) * pageSize;
+      const end = start + parseInt(pageSize);
+      const list = filteredRoles.slice(start, end);
+      
+      return {
+        code: 0,
+        data: {
+          list,
+          total: filteredRoles.length,
+          page: parseInt(page),
+          pageSize: parseInt(pageSize),
+        },
+      };
+    },
+  },
+
+  // 角色详情
+  {
+    url: '/api/roles/:id',
+    method: 'get',
+    response: ({ params, url }) => {
+      const id = getId({ url, params });
+      const role = roles.find(r => r.id === id);
+      return role
+        ? { code: 0, data: role }
+        : { code: 404, message: '角色不存在' };
+    },
+  },
+
+  // 新增角色
+  {
+    url: '/api/roles',
+    method: 'post',
+    response: ({ body }) => {
+      const existingCode = roles.find(r => r.code === body.code);
+      if (existingCode) {
+        return { code: 400, message: '角色编码已存在' };
+      }
+      const newRole = {
+        ...body,
+        id: String(nextRoleId++),
+        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+      };
+      roles.push(newRole);
+      return { code: 0, data: newRole };
+    },
+  },
+
+  // 编辑角色
+  {
+    url: '/api/roles/:id',
+    method: 'put',
+    response: ({ params, body, url }) => {
+      const id = getId({ url, params });
+      const index = roles.findIndex(r => r.id === id);
+      if (index > -1) {
+        const existingCode = roles.find((r, i) => i !== index && r.code === body.code);
+        if (existingCode) {
+          return { code: 400, message: '角色编码已存在' };
+        }
+        roles[index] = { ...roles[index], ...body };
+        return { code: 0, data: roles[index] };
+      }
+      return { code: 404, message: '角色不存在' };
+    },
+  },
+
+  // 批量删除角色
+  {
+    url: '/api/roles/batch',
+    method: 'delete',
+    response: ({ body }) => {
+      const ids = body?.ids || [];
+      const errors = [];
+      ids.forEach(id => {
+        const index = roles.findIndex(r => r.id === id);
+        if (index > -1) {
+          const roleCode = roles[index].code;
+          const hasUsers = users.some(u => u.role === roleCode);
+          if (hasUsers) {
+            errors.push(`角色 "${roles[index].name}" 下还有用户，无法删除`);
+          } else {
+            roles.splice(index, 1);
+          }
+        }
+      });
+      if (errors.length > 0) {
+        return { code: 400, message: errors.join('；') };
+      }
+      return { code: 0, message: '批量删除成功' };
+    },
+  },
+
+  // 删除角色
+  {
+    url: '/api/roles/:id',
+    method: 'delete',
+    response: ({ params, url }) => {
+      const id = getId({ url, params });
+      const index = roles.findIndex(r => r.id === id);
+      if (index > -1) {
+        const roleCode = roles[index].code;
+        const hasUsers = users.some(u => u.role === roleCode);
+        if (hasUsers) {
+          return { code: 400, message: '该角色下还有用户，无法删除' };
+        }
+        roles.splice(index, 1);
+        return { code: 0, message: '删除成功' };
+      }
+      return { code: 404, message: '角色不存在' };
+    },
+  },
+
+  // 权限列表
+  {
+    url: '/api/permissions',
+    method: 'get',
+    response: () => {
+      return { code: 0, data: permissions };
+    },
+  },
+];