gridsum-vue3-pc 1.0.0

package/template/base/nginx.conf

@@ -0,0 +1,27 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_disable "msie6";
+}

package/template/base/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "<name>",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
+    "typecheck": "vue-tsc --noEmit",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "vue": "^3.5.0",
+    "pinia": "^2.2.0",
+    "vue-router": "^4.4.0",
+    "axios": "^1.7.0",
+    "element-plus": "^2.8.0",
+    "@element-plus/icons-vue": "^2.3.0",
+    "vue-i18n": "^11.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.0",
+    "vue-tsc": "^2.1.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.0",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "prettier": "^3.3.0",
+    "stylelint": "^15.11.0",
+    "husky": "^9.1.0",
+    "lint-staged": "^15.0.0",
+    "commitlint": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "vite-plugin-mock": "^3.0.0",
+    "mockjs": "^1.1.0",
+    "sass": "^1.79.0",
+    "zod": "^3.23.0",
+    "@playwright/test": "^1.48.0"
+  }
+}

package/template/base/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#667eea"/>
+  <g stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="translate(4,4) scale(1.5)">
+    <path d="M8 0L10 4.5H6L8 0Z" />
+    <path d="M8 16L6 11.5H10L8 16Z" />
+    <path d="M0 8L4.5 6V10L0 8Z" />
+    <path d="M16 8L11.5 10V6L16 8Z" />
+  </g>
+</svg>

package/template/base/public/logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <rect width="24" height="24" rx="4.5" fill="#667eea" />
+  <g stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="translate(3,3) scale(1.5)">
+    <path d="M6 0L7.5 4.5H4.5L6 0Z" />
+    <path d="M6 12L4.5 7.5H7.5L6 12Z" />
+    <path d="M0 6L4.5 4.5V7.5L0 6Z" />
+    <path d="M12 6L7.5 7.5V4.5L12 6Z" />
+  </g>
+</svg>

package/template/base/src/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-config-provider :locale="elementLocale">
+    <router-view />
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+import en from 'element-plus/dist/locale/en.mjs';
+
+const { locale } = useI18n();
+
+const elementLocale = ref(locale.value === 'zh' ? zhCn : en);
+
+watch(locale, (val) => {
+  elementLocale.value = val === 'zh' ? zhCn : en;
+});
+</script>

package/template/base/src/assets/index.css

@@ -0,0 +1,83 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Noto Sans SC', sans-serif;
+  background: #f0f2f5;
+  color: #1a1a2e;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #909399;
+}
+
+::selection {
+  background: rgba(64, 158, 255, 0.2);
+}
+
+html.dark body {
+  background: #0d1117;
+  color: #c9d1d9;
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background: #30363d;
+}
+
+html.dark ::-webkit-scrollbar-thumb:hover {
+  background: #484f58;
+}
+
+html.dark ::selection {
+  background: rgba(64, 158, 255, 0.4);
+}
+
+html.dark {
+  --el-bg-color: #0d1117;
+  --el-bg-color-overlay: #161b22;
+  --el-text-color-primary: #c9d1d9;
+  --el-text-color-regular: #8b949e;
+  --el-border-color: #21262d;
+  --el-border-color-light: #30363d;
+  --el-border-color-lighter: #30363d;
+  --el-fill-color: #1c2128;
+  --el-fill-color-light: #1e2430;
+  --el-fill-color-lighter: #21262d;
+  --el-table-bg-color: #161b22;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: #1c2128;
+  --el-table-header-text-color: #c9d1d9;
+  --el-table-text-color: #c9d1d9;
+  --el-table-border-color: #21262d;
+  --el-table-row-hover-bg-color: rgba(88, 166, 255, 0.08);
+  --el-card-bg-color: #161b22;
+  --el-card-border-color: #21262d;
+  --el-dialog-bg-color: #161b22;
+  --el-dialog-border-color: #30363d;
+  --el-menu-bg-color: #161b22;
+  --el-menu-text-color: #c9d1d9;
+  --el-menu-hover-bg-color: #1c2128;
+  --el-menu-active-color: #409eff;
+}

package/template/base/src/components/LanguageSwitch.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dropdown @command="handleCommand" trigger="click">
+    <el-button text class="lang-btn">
+      <el-icon><ArrowDown /></el-icon>
+      <span class="lang-text">{{ locale === 'zh' ? $t('language.zh') : $t('language.en') }}</span>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="zh">{{ $t('language.zh') }}</el-dropdown-item>
+        <el-dropdown-item command="en">{{ $t('language.en') }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { ArrowDown } from '@element-plus/icons-vue';
+import { setLocale } from '@/locales';
+
+const { locale, t } = useI18n();
+const route = useRoute();
+
+watch(locale, (val) => {
+  const titleKey = route.meta.titleKey as string;
+  document.title = titleKey
+    ? `${t(titleKey)} - ${import.meta.env.VITE_APP_TITLE}`
+    : import.meta.env.VITE_APP_TITLE;
+});
+
+const handleCommand = (command: string) => {
+  locale.value = command;
+  setLocale(command);
+};
+</script>
+
+<style scoped>
+.lang-btn {
+  padding: 6px 8px;
+  border-radius: 8px;
+  color: #606266;
+  transition: all 0.2s;
+}
+
+.lang-btn:hover {
+  color: #409eff;
+  background: rgba(64, 158, 255, 0.06);
+}
+
+.lang-text {
+  font-size: 13px;
+  margin-left: 2px;
+}
+
+html.dark .lang-btn {
+  color: #8b949e;
+}
+
+html.dark .lang-btn:hover {
+  color: #58a6ff;
+  background: rgba(88, 166, 255, 0.1);
+}
+</style>