chore: 一些小改动

README.md

@@ -4,21 +4,61 @@
 
 business-center-vite 是一个开源免费，含前后端的后台管理模板
 
+前端技术栈：`Vue`， `Vite`，`Element Plus`，`Pinia`，`TypeScript`
+
 ## 项目结构
 
 项目代码使用 monorepo 管理（即整个项目代码都在主仓库维护），子仓库仅定期同步代码，如您只需要前端/后端模板，可以使用子仓库代码。
 
 ```
 business-center-vite            (主仓库 business-center-vite)
- ├─ frontend ---------- 项目前端源码 (定期同步代码至子仓库: business-center-frontend)
+ ├─ frontend ------------------------------- 项目前端源码 (定期同步代码至子仓库: business-center-frontend)
+ │   ├─ library ---------------------------- 业务无关的库依赖文件，例如：自动导入配置等
+ │   │   ├─ build --------------------------
+ │   │   │   └─ unplugin -------------------
+ │   │   │       ├─ auto-imports.d.ts ------
+ │   │   │       └─ components.d.ts --------
+ │   │   └─ ...
+ │   ├─ public ----------------------------- 不参与 build 打包的静态文件目录
+ │   ├─ src
+ │   │   ├─ assets -------------------------
+ │   │   ├─ components ---------------------
+ │   │   ├─ router -------------------------
+ │   │   ├─ stores -------------------------
+ │   │   ├─ types --------------------------
+ │   │   ├─ views --------------------------
+ │   │   ├─ App.vue ------------------------
+ │   │   └─ main.ts ------------------------
+ │   ├─ vite.config.ts ---------------------
+ │   ├─ package.json ----------------------- 项目清单文件
  │   ├─ ...
- │   └─ README.md ----- 前端自述文件
- ├─ backend ----------- 项目后端源码 (定期同步代码至子仓库: business-center-backend)
+ │   └─ README.md -------------------------- 前端自述文件
+ ├─ backend -------------------------------- 项目后端源码 (定期同步代码至子仓库: business-center-backend)
  │   ├─ ...
- │   └─ README.md ----- 后端自述文件
- └─ README.md --------- 自述文件
+ │   └─ README.md -------------------------- 后端自述文件
+ └─ README.md ------------------------------ 自述文件
 ```
 
+## frontend 前端部分
+
+### 核心依赖
+
+| 依赖                        |  版本  |                             链接                             | 说明                                                         |
+| --------------------------- | :----: | :----------------------------------------------------------: | ------------------------------------------------------------ |
+| vue                         | 3.5.x  | [官网](https://cn.vuejs.org/) [npm](https://www.npmjs.com/package/vue) [GitHub](https://github.com/vuejs/vue) | JavaScript 框架                                              |
+| vite                        | 6.0.x  | [官网](https://cn.vite.dev/) [npm](https://www.npmjs.com/package/vite) [GitHub](https://github.com/vitejs/vite) | 前端工具链                                                   |
+| element-plus                | 2.9.x  | [官网](https://element-plus.org/zh-CN/) [npm](https://www.npmjs.com/package/element-plus) [GitHub](https://github.com/element-plus/element-plus) | UI 组件库（使用[手动导入](https://element-plus.org/zh-CN/guide/quickstart.html#%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5)方式） |
+| pinia                       | 2.3.x  | [官网](https://pinia.vuejs.org/) [npm](https://www.npmjs.com/package/pinia) [GitHub](https://github.com/vuejs/pinia) | 全局状态管理                                                 |
+| pinia-plugin-persistedstate | 4.2.x  | [官网](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/) [npm](https://www.npmjs.com/package/pinia-plugin-persistedstate) [GitHub](https://github.com/prazdevs/pinia-plugin-persistedstate) | Pinia 存储持久化插件                                         |
+| vue-router                  | 4.5.x  | [官网](https://router.vuejs.org/) [npm](https://www.npmjs.com/package/vue-router) [GitHub](https://github.com/vuejs/router) | 路由管理                                                     |
+| vue-i18n                    | 11.1.x | [官网](https://vue-i18n.intlify.dev/) [npm](https://www.npmjs.com/package/vue-i18n) [GitHub](https://github.com/intlify/vue-i18n) | i18n 国际化                                                  |
+| @vueuse/core                | 12.7.x | [官网](https://vueuse.org/) [中文网](https://vueuse.nodejs.cn/) [npm](https://www.npmjs.com/package/@vueuse/core) [GitHub](https://github.com/vueuse/vueuse) | Vue 组合实用工具集合                                         |
+
+
+### 命名规范
+
+目录名使用连字符 (例如: `auto-import/`), 组件名使用大驼峰 (例如: `UserCenter.vue`)
+
 ## 贡献
 
 请在主仓库进行 issue 或 pr 提交，子仓库仅作同步。

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Business Center Vite 后台管理系统</title>
   </head>
   <body>
     <div id="app"></div>

frontend/package.json

@@ -14,8 +14,13 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vueuse/core": "^12.7.0",
+    "element-plus": "^2.9.5",
     "pinia": "^2.3.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "unplugin-element-plus": "^0.9.1",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.1",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import MainView from './views/MainView.vue'
+import { ElConfigProvider } from 'element-plus'
+import { useThemeConfigStore } from './stores/themeConfig';
+
+const themeConfigStore = useThemeConfigStore()
 </script>
 
 <template>
+  {{ themeConfigStore.elConfig.size }}
+  {{ themeConfigStore.themeConfig.themeMode }}
+  <el-config-provider :size="themeConfigStore.elConfig.size" :z-index="themeConfigStore.elConfig.zIndex"
+    :button="{ autoInsertSpace: true }">
+    <!-- :locale="locale" -->
     <MainView />
+  </el-config-provider>
 </template>
 
 <style scoped></style>

frontend/src/assets/base.css

@@ -1,26 +1,3 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
 /* semantic color variables for this project */
 :root {
   --color-background: var(--vt-c-white);
@@ -84,3 +61,11 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.light body {
+}
+
+.dark body {
+  background-color: black;
+  color: white;
+}

frontend/src/assets/main.css

@@ -1,17 +1,10 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
 a,
 .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+  /* transition: 0.4s; */
   padding: 3px;
 }
 
@@ -22,14 +15,4 @@ a,
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

frontend/src/components/DarkSwitch/DarkSwitch.vue

@@ -0,0 +1,98 @@
+<template>
+  <ElSwitch v-model="themeConfig.themeMode" :active-icon="Moon" active-value="dark" :inactive-icon="Sunny"
+    inactive-value="light" inline-prompt @click="_toggleDark($event)" />
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeMount } from 'vue'
+import { storeToRefs } from 'pinia'
+import { ElSwitch } from 'element-plus'
+import { Moon, Sunny } from '@element-plus/icons-vue'
+import { useThemeConfigStore } from '@/stores/themeConfig'
+import { useDark, useToggle } from '@vueuse/core'
+
+const themeConfigStore = useThemeConfigStore()
+
+const { themeConfig } = storeToRefs(themeConfigStore)
+
+const isDark = useDark()
+
+onBeforeMount(() => {
+  if (themeConfig.value.themeMode === 'auto') {
+
+  } else {
+    if (themeConfig.value.themeMode === 'dark') {
+      isDark.value = true
+    } else {
+      isDark.value = false
+    }
+  }
+  const root = document.documentElement
+  root.classList.add(isDark.value ? 'dark' : 'light')
+})
+
+const _toggleDark = async (event: MouseEvent) => {
+  if (typeof document.startViewTransition === 'function') {
+    const x = event.clientX
+    const y = event.clientY
+    const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+    nextTick(async () => {
+      let _isDark: boolean
+      const transition = document.startViewTransition(() => {
+        const root = document.documentElement
+        _isDark = root.classList.contains('dark')
+        root.classList.remove(_isDark ? 'dark' : 'light')
+        root.classList.add(_isDark ? 'light' : 'dark')
+      })
+      await transition.ready.then(() => {
+        const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+        // console.log('_isDark', _isDark)
+        document.documentElement.animate(
+          {
+            // clipPath: _isDark ? [...clipPath].reverse() : clipPath,
+            clipPath: clipPath,
+          },
+          {
+            duration: 500,
+            easing: 'ease-in',
+            // pseudoElement: _isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
+            pseudoElement: '::view-transition-new(root)',
+          }
+        )
+      })
+
+    })
+  } else {
+    const toggleDark = useToggle(themeConfig.value.isDark)
+    await toggleDark()
+  }
+}
+</script>
+
+<style>
+/* 注意这里不加 scope, 是全局样式 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+::view-transition-old(root) {
+  z-index: 999;
+}
+
+::view-transition-new(root) {
+  z-index: 1;
+}
+
+.dark,
+.light {
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 999;
+  }
+}
+</style>

frontend/src/main.ts

@@ -1,15 +1,27 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
 import router from './router'
 
+// element-plus 深色模式
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
 const app = createApp(App)
 
+// 导入 vue-i18n 模块
+const i18n = createI18n({
+  legacy: false, // you must set `false`, to use Composition API
+})
+app.use(i18n)
+
 // 导入 pinia 模块
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate) // 注册 pinia-plugin-persistedstate 插件
 app.use(pinia)
 
 // 导入 router 模块

frontend/src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

frontend/src/stores/themeConfig.ts

@@ -0,0 +1,46 @@
+import { computed, ref, type WritableComputedRef } from 'vue'
+import { defineStore } from 'pinia'
+import type { ElConfigSize, ThemeMode } from '@/types/common/ThemeConfig';
+import { useDark } from '@vueuse/core';
+
+export const useThemeConfigStore = defineStore('themeConfig', () => {
+  // refer: https://element-plus.org/zh-CN/component/config-provider.html
+  const elConfig = ref<{
+    // 全局组件大小
+    size: ElConfigSize;
+    // 全局初始化 zIndex 的值
+    zIndex?: number;
+  }>({
+    size: 'small',
+    // zIndex: 3000,
+  })
+
+  const themeConfig = ref<{
+    themeMode: ThemeMode;
+    // updateThemeMode: Function;
+    getCurrentThemeMode: Function;
+  }>({
+    themeMode: 'auto',
+    // updateThemeMode: (themeMode: ThemeMode) => {
+    //   themeConfig.value.themeMode = themeMode
+    // },
+    getCurrentThemeMode: () => {
+      if (themeConfig.value.themeMode === 'auto') {
+        return ''
+      }
+      return themeConfig.value.themeMode
+    },
+  })
+
+  return {
+    elConfig,
+
+    themeConfig,
+  }
+}, {
+  // 启用持久化
+  // persist: true,
+  persist: {
+    // key: 'themeConfig',
+  },
+})

frontend/src/types/common/ThemeConfig.ts

@@ -0,0 +1,10 @@
+
+/**
+ * element-plus config
+ */
+export type ElConfigSize = '' | 'small' | 'default' | 'large'
+
+/**
+ * theme config
+ */
+export type ThemeMode = 'auto' | 'light' | 'dark'

frontend/src/views/MainView.vue

@@ -1,19 +1,23 @@
 <template>
-  <el-config-provider :button="{ autoInsertSpace: true }" :locale="locale">
   <RouterView />
 
-    <header>
+  <DarkSwitch />
   <div class="wrapper">
-
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'small'">哈哈哈</ElButton>
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'default'">哈哈哈</ElButton>
+    <ElButton @click="() => themeConfigStore.elConfig.size = 'large'">哈哈哈</ElButton>
     <nav>
       <!-- <RouterLink to="/">Home</RouterLink> -->
       <!-- <RouterLink to="/about">About</RouterLink> -->
     </nav>
   </div>
-    </header>
-  </el-config-provider>
 </template>
 
 <script setup lang="ts">
+import DarkSwitch from '@/components/DarkSwitch/DarkSwitch.vue';
+import { useThemeConfigStore } from '@/stores/themeConfig';
+import { ElButton } from 'element-plus';
 import { RouterLink, RouterView } from 'vue-router'
+
+const themeConfigStore = useThemeConfigStore()
 </script>

frontend/vite.config.ts

@@ -3,12 +3,39 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+// 按需引入 element-plus
+// import AutoImport from 'unplugin-auto-import/vite'
+// import Components from 'unplugin-vue-components/vite'
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+// 手动引入 element-plus
+import ElementPlus from 'unplugin-element-plus/vite'
+
+// const resolvers = [
+//   ElementPlusResolver({
+//     // importStyle: false, // 必须设置false，否则会严重影响开发体验
+//   }),
+// ]
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    port: 4012,
+  },
   plugins: [
     vue(),
     vueDevTools(),
+    // 按需引入 element-plus
+    // AutoImport({
+    //   resolvers: [...resolvers],
+    //   dts: 'library/build/unplugin/auto-imports.d.ts',
+    // }),
+    // Components({
+    //   resolvers: [...resolvers],
+    //   dts: 'library/build/unplugin/components.d.ts',
+    // }),
+    // 手动引入 element-plus
+    ElementPlus({}),
   ],
   resolve: {
     alias: {