gridsum-vue3-pc 1.0.0

package/template/base/src/views/error/NotFound.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="error-page">
+    <div class="error-content">
+      <div class="error-icon">
+        <svg viewBox="0 0 80 80" width="80" height="80">
+          <circle cx="40" cy="40" r="36" fill="none" stroke="#409eff" stroke-width="3" opacity="0.2" />
+          <circle cx="40" cy="40" r="36" fill="none" stroke="#409eff" stroke-width="3"
+            stroke-dasharray="226" stroke-dashoffset="56" transform="rotate(-90 40 40)" />
+          <text x="40" y="46" text-anchor="middle" font-size="20" font-weight="700" fill="#409eff">404</text>
+        </svg>
+      </div>
+      <h1 class="error-title">{{ $t('error.notFoundTitle') }}</h1>
+      <p class="error-desc">{{ $t('error.notFoundDesc') }}</p>
+      <el-button type="primary" round @click="$router.push('/')">
+        {{ $t('error.backHome') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 40px;
+}
+
+.error-content {
+  text-align: center;
+  max-width: 420px;
+}
+
+.error-icon {
+  margin-bottom: 24px;
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin: 0 0 12px;
+}
+
+.error-desc {
+  font-size: 14px;
+  color: #909399;
+  margin: 0 0 32px;
+  line-height: 1.6;
+}
+
+html.dark .error-title {
+  color: #c9d1d9;
+}
+
+html.dark .error-desc {
+  color: #8b949e;
+}
+</style>

package/template/base/src/views/error/ServerError.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="error-page">
+    <div class="error-content">
+      <div class="error-icon">
+        <svg viewBox="0 0 80 80" width="80" height="80">
+          <circle cx="40" cy="40" r="36" fill="none" stroke="#f56c6c" stroke-width="3" opacity="0.2" />
+          <circle cx="40" cy="40" r="36" fill="none" stroke="#f56c6c" stroke-width="3"
+            stroke-dasharray="226" stroke-dashoffset="56" transform="rotate(-90 40 40)" />
+          <line x1="30" y1="30" x2="50" y2="50" stroke="#f56c6c" stroke-width="3" stroke-linecap="round" />
+          <line x1="50" y1="30" x2="30" y2="50" stroke="#f56c6c" stroke-width="3" stroke-linecap="round" />
+          <text x="40" y="70" text-anchor="middle" font-size="18" font-weight="700" fill="#f56c6c">500</text>
+        </svg>
+      </div>
+      <h1 class="error-title">{{ $t('error.serverErrorTitle') }}</h1>
+      <p class="error-desc">{{ $t('error.serverErrorDesc') }}</p>
+      <el-button type="primary" round @click="$router.push('/')">
+        {{ $t('error.backHome') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 40px;
+}
+
+.error-content {
+  text-align: center;
+  max-width: 420px;
+}
+
+.error-icon {
+  margin-bottom: 24px;
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin: 0 0 12px;
+}
+
+.error-desc {
+  font-size: 14px;
+  color: #909399;
+  margin: 0 0 32px;
+  line-height: 1.6;
+}
+
+html.dark .error-title {
+  color: #c9d1d9;
+}
+
+html.dark .error-desc {
+  color: #8b949e;
+}
+</style>

package/template/base/tests/e2e/example.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('首页加载', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.waitForSelector('.dashboard');
+  await expect(page.locator('.dashboard')).toBeVisible();
+});

package/template/base/tests/unit/user.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { login } from '@/services/user';
+
+describe('用户服务', () => {
+  it('应能调用登录接口', async () => {
+    try {
+      const res = await login('admin', 'admin');
+      expect(res).toHaveProperty('code');
+      expect(res.code).toBe(0);
+    } catch {
+      // 测试环境无后端，捕获预期异常
+      expect(true).toBe(true);
+    }
+  });
+});

package/template/base/vite.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
+import { viteMockServe } from 'vite-plugin-mock';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    plugins: [
+      vue(),
+      viteMockServe({
+        mockPath: 'mock',
+        enable: env.VITE_APP_MOCK === 'true',
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
+    server: {
+      port: Number(env.VITE_APP_PORT) || 3000,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_APP_API_BASE_URL || 'http://localhost:8080',
+          changeOrigin: true,
+        },
+      },
+    },
+    build: {
+      target: 'es2015',
+      cssTarget: 'chrome80',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'element-plus': ['element-plus'],
+            'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          },
+        },
+      },
+    },
+  };
+});

package/template/cicd-github/.github/workflows/ci.yml

@@ -0,0 +1,123 @@
+name: CI/CD
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: '20'
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run lint
+        run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        run: npm run test
+
+  build-dev:
+    name: Build Dev
+    runs-on: ubuntu-latest
+    needs: test
+    if: github.ref == 'refs/heads/develop'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+        env:
+          VITE_APP_ENV: development
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-dev
+          path: dist
+
+  build-prod:
+    name: Build Prod
+    runs-on: ubuntu-latest
+    needs: test
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+        env:
+          VITE_APP_ENV: production
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-prod
+          path: dist
+
+  deploy-dev:
+    name: Deploy Dev
+    runs-on: ubuntu-latest
+    needs: build-dev
+    if: github.ref == 'refs/heads/develop'
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-dev
+          path: dist
+      - name: Deploy to dev server
+        run: |
+          echo "Deploying to dev server..."
+          # 添加部署命令
+
+  deploy-prod:
+    name: Deploy Prod
+    runs-on: ubuntu-latest
+    needs: build-prod
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-prod
+          path: dist
+      - name: Deploy to prod server
+        run: |
+          echo "Deploying to prod server..."
+          # 添加部署命令

package/template/cicd-gitlab/.gitlab-ci.yml

@@ -0,0 +1,103 @@
+stages:
+  - lint
+  - test
+  - build
+  - deploy
+
+variables:
+  NODE_VERSION: "20"
+  NPM_CONFIG_CACHE: $CI_PROJECT_DIR/.npm
+
+cache:
+  key: $CI_COMMIT_REF_SLUG
+  paths:
+    - .npm/
+    - node_modules/
+
+lint:
+  stage: lint
+  image: node:$NODE_VERSION-alpine
+  script:
+    - npm ci
+    - npm run lint
+  only:
+    - main
+    - develop
+    - merge_requests
+
+test:
+  stage: test
+  image: node:$NODE_VERSION-alpine
+  script:
+    - npm ci
+    - npm run test
+  only:
+    - main
+    - develop
+    - merge_requests
+
+build-dev:
+  stage: build
+  image: node:$NODE_VERSION-alpine
+  script:
+    - npm ci
+    - npm run build
+    - echo "Build completed"
+  artifacts:
+    paths:
+      - dist/
+    expire_in: 1 hour
+  environment:
+    name: development
+  only:
+    - develop
+  tags:
+    - docker
+
+build-prod:
+  stage: build
+  image: node:$NODE_VERSION-alpine
+  script:
+    - npm ci
+    - npm run build
+    - echo "Build completed"
+  artifacts:
+    paths:
+      - dist/
+    expire_in: 1 hour
+  environment:
+    name: production
+  only:
+    - main
+  tags:
+    - docker
+
+deploy-dev:
+  stage: deploy
+  image: alpine:latest
+  script:
+    - echo "Deploying to development server..."
+    # 添加部署到开发服务器的命令
+  environment:
+    name: development
+  only:
+    - develop
+  needs:
+    - build-dev
+  tags:
+    - docker
+
+deploy-prod:
+  stage: deploy
+  image: alpine:latest
+  script:
+    - echo "Deploying to production server..."
+    # 添加部署到生产服务器的命令
+  environment:
+    name: production
+  only:
+    - main
+  needs:
+    - build-prod
+  tags:
+    - docker

package/template/cicd-jenkins/Jenkinsfile

@@ -0,0 +1,107 @@
+pipeline {
+  agent any
+  
+  environment {
+    NODE_VERSION = '20'
+    DEV_SERVER = 'dev-server.example.com'
+    PROD_SERVER = 'prod-server.example.com'
+  }
+
+  options {
+    timeout(time: 30, unit: 'MINUTES')
+    disableConcurrentBuilds()
+    buildDiscarder(logRotator(numToKeepStr: '10'))
+  }
+
+  stages {
+    stage('Install') {
+      steps {
+        echo 'Installing dependencies...'
+        sh 'npm ci'
+      }
+    }
+
+    stage('Lint') {
+      steps {
+        echo 'Running lint...'
+        sh 'npm run lint'
+      }
+    }
+
+    stage('Test') {
+      steps {
+        echo 'Running tests...'
+        sh 'npm run test'
+      }
+    }
+
+    stage('Build Dev') {
+      when {
+        branch 'develop'
+      }
+      steps {
+        echo 'Building for development...'
+        sh 'npm run build'
+        archiveArtifacts artifacts: 'dist/**/*', fingerprint: true
+      }
+    }
+
+    stage('Build Prod') {
+      when {
+        branch 'main'
+      }
+      steps {
+        echo 'Building for production...'
+        sh 'npm run build'
+        archiveArtifacts artifacts: 'dist/**/*', fingerprint: true
+      }
+    }
+
+    stage('Deploy Dev') {
+      when {
+        branch 'develop'
+      }
+      steps {
+        echo "Deploying to development server: ${DEV_SERVER}"
+        script {
+          def distDir = "${WORKSPACE}/dist"
+          sh """
+            echo "Syncing files to dev server..."
+            # 添加部署到开发服务器的命令
+            # 例如: rsync -avz -e ssh --delete ${distDir}/ user@${DEV_SERVER}:/var/www/html/
+          """
+        }
+      }
+    }
+
+    stage('Deploy Prod') {
+      when {
+        branch 'main'
+      }
+      steps {
+        echo "Deploying to production server: ${PROD_SERVER}"
+        script {
+          def distDir = "${WORKSPACE}/dist"
+          sh """
+            echo "Syncing files to prod server..."
+            # 添加部署到生产服务器的 命令
+            # 例如: rsync -avz -e ssh --delete ${distDir}/ user@${PROD_SERVER}:/var/www/html/
+          """
+        }
+      }
+    }
+  }
+
+  post {
+    always {
+      echo 'Cleaning workspace...'
+      cleanWs()
+    }
+    success {
+      echo 'Pipeline completed successfully!'
+    }
+    failure {
+      echo 'Pipeline failed!'
+    }
+  }
+}

package/template/ts/shims-vue.d.ts

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

package/template/ts/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}