From ab09ee338efc5ca61dc971efa6e155fd45bbbc6c Mon Sep 17 00:00:00 2001
From: kuanghua <869653722@qq.com>
Date: Sun, 17 Jul 2022 21:48:54 +0800
Subject: [PATCH] Add Theme func detail to look v1.8.1 update log

---
 .env.serve-test                               |   2 +-
 .eslintrc-auto-import.json                    |  12 +
 .vscode/settings.json                         |   2 +-
 auto-imports.d.ts                             |  12 +
 components.d.ts                               |  22 ++
 index.html                                    |   2 +-
 optimize-include.ts                           | 122 ++++++++
 package.json                                  |  47 ++--
 src/App.vue                                   |  12 +-
 src/components/ThemeSelect/index.vue          |  57 ++++
 src/{directive => directives}/clickoutside.js |   0
 src/{directive => directives}/copy.js         |   0
 src/{directive => directives}/debounce.js     |   0
 src/{directive => directives}/index.js        |   0
 src/{directive => directives}/longpress.js    |   0
 src/{directive => directives}/permission.js   |   0
 src/{directive => directives}/watermark.js    |   0
 src/{directive => directives}/waves/waves.css |   0
 src/{directive => directives}/waves/waves.js  |   0
 src/icons/common/404.svg                      |   1 -
 src/icons/common/hamburger.svg                |   2 +
 src/icons/common/sidebar-logo.svg             |   2 +
 src/icons/common/zip.svg                      |   1 -
 src/icons/nav-bar/theme-icon.svg              |   2 +
 src/lang/zh.js                                |   9 +-
 src/layout/Layout.vue                         |  16 +-
 src/layout/components/AppMain.vue             |  20 +-
 .../components/Breadcrumb/Breadcrumb.vue      |   2 +-
 src/layout/components/Hamburger/Hamburger.vue |  29 +-
 src/layout/components/Navbar.vue              |  14 +-
 src/layout/components/Sidebar/ElSvgItem.vue   |   5 +-
 src/layout/components/Sidebar/Logo.vue        |  16 +-
 src/layout/components/Sidebar/Sidebar.vue     |  49 ++--
 src/layout/components/Sidebar/SidebarItem.vue |  14 -
 src/layout/components/TagsView/TagsView.vue   |  35 +--
 src/layout/hook/useResizeHandler.js           |  41 ---
 src/main.js                                   |  17 +-
 src/router/index.js                           |  18 +-
 src/router/modules/codeGenerator.js           |  24 ++
 src/settings.js                               |   5 +
 src/styles/index.scss                         |   3 +-
 src/styles/scss-suger.scss                    | 221 +--------------
 src/styles/variables-to-js.scss               |  20 +-
 src/styles/variables.scss                     |  51 ++--
 src/theme/base/css-vars.scss                  |  41 +++
 src/theme/base/index.scss                     |  82 ++++++
 src/theme/base/var.scss                       | 211 ++++++++++++++
 src/theme/dark/css-vars.scss                  |  41 +++
 src/theme/dark/index.scss                     |  89 ++++++
 src/theme/dark/var.scss                       | 211 ++++++++++++++
 src/theme/index.scss                          |  10 +
 src/theme/lighting/css-vars.scss              |  29 ++
 src/theme/lighting/index.scss                 |  83 ++++++
 src/theme/lighting/var.scss                   | 211 ++++++++++++++
 src/theme/utils/dark.ts                       |   3 +
 src/theme/utils/index.ts                      |   1 +
 src/views/code-generator/CodeGenerator.vue    |   4 +-
 src/views/code-generator/ListTableConfig.vue  |   5 +-
 .../GeneratorConfigSave.vue                   | 227 +++++++++++++++
 .../GeneratorConfigSaveForm.vue               | 107 +++++++
 .../code-generator-config/index.js            |   3 +
 src/views/code-generator/generatorUtis.js     |  40 ++-
 src/views/login/Login.vue                     | 264 +-----------------
 .../login/{Login-alt.vue => login-alt.vue}    |   0
 src/views/login/login-base.vue                | 218 +++++++++++++++
 src/views/login/login-lighting.vue            | 258 +++++++++++++++++
 src/views/use-example/countTo/countTo.vue     |  14 +-
 vite.config.js                                |  67 ++---
 68 files changed, 2350 insertions(+), 776 deletions(-)
 create mode 100644 components.d.ts
 create mode 100644 optimize-include.ts
 create mode 100644 src/components/ThemeSelect/index.vue
 rename src/{directive => directives}/clickoutside.js (100%)
 rename src/{directive => directives}/copy.js (100%)
 rename src/{directive => directives}/debounce.js (100%)
 rename src/{directive => directives}/index.js (100%)
 rename src/{directive => directives}/longpress.js (100%)
 rename src/{directive => directives}/permission.js (100%)
 rename src/{directive => directives}/watermark.js (100%)
 rename src/{directive => directives}/waves/waves.css (100%)
 rename src/{directive => directives}/waves/waves.js (100%)
 create mode 100644 src/icons/common/hamburger.svg
 create mode 100644 src/icons/common/sidebar-logo.svg
 create mode 100644 src/icons/nav-bar/theme-icon.svg
 delete mode 100644 src/layout/hook/useResizeHandler.js
 create mode 100644 src/router/modules/codeGenerator.js
 create mode 100644 src/theme/base/css-vars.scss
 create mode 100644 src/theme/base/index.scss
 create mode 100644 src/theme/base/var.scss
 create mode 100644 src/theme/dark/css-vars.scss
 create mode 100644 src/theme/dark/index.scss
 create mode 100644 src/theme/dark/var.scss
 create mode 100644 src/theme/index.scss
 create mode 100644 src/theme/lighting/css-vars.scss
 create mode 100644 src/theme/lighting/index.scss
 create mode 100644 src/theme/lighting/var.scss
 create mode 100644 src/theme/utils/dark.ts
 create mode 100644 src/theme/utils/index.ts
 create mode 100644 src/views/code-generator/code-generator-config/GeneratorConfigSave.vue
 create mode 100644 src/views/code-generator/code-generator-config/GeneratorConfigSaveForm.vue
 create mode 100644 src/views/code-generator/code-generator-config/index.js
 rename src/views/login/{Login-alt.vue => login-alt.vue} (100%)
 create mode 100644 src/views/login/login-base.vue
 create mode 100644 src/views/login/login-lighting.vue

diff --git a/.env.serve-test b/.env.serve-test
index 7eb8cd4..b3c3390 100644
--- a/.env.serve-test
+++ b/.env.serve-test
@@ -1,6 +1,6 @@
 #The defined variable must start with VITE_APP_
 VITE_APP_ENV = 'test'
-VITE_APP_BASE_URL = 'http://localhost:20156/api'
+VITE_APP_BASE_URL = 'http://localhost:20156/micro-service-api'
 
   #image or oss address
 VITE_APP_IMAGE_URL = 'https://github.jzfai.top/gofast-image'
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 6335a66..50d385d 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -1,19 +1,28 @@
 {
   "globals": {
+    "acceptHMRUpdate": true,
     "axiosReq": true,
     "computed": true,
     "createApp": true,
+    "createPinia": true,
     "customRef": true,
     "defineAsyncComponent": true,
     "defineComponent": true,
+    "defineStore": true,
     "effectScope": true,
     "EffectScope": true,
+    "getActivePinia": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,
     "h": true,
     "inject": true,
     "isReadonly": true,
     "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -34,9 +43,12 @@
     "readonly": true,
     "ref": true,
     "resolveComponent": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,
+    "storeToRefs": true,
     "toRaw": true,
     "toRef": true,
     "toRefs": true,
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4029450..c4c919f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "npm.packageManager": "yarn"
+  "npm.packageManager": "pnpm"
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 747e34f..203b2cc 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,20 +1,29 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const axiosReq: typeof import('@/utils/axiosReq')['axiosReq']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
   const EffectScope: typeof import('vue')['EffectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -35,9 +44,12 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..159d708
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,22 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ElSvgIcon: typeof import('./src/components/ElSvgIcon.vue')['default']
+    ImportExportComp: typeof import('./src/components/ImportExportComp.vue')['default']
+    LangSelect: typeof import('./src/components/LangSelect/index.vue')['default']
+    Pagination: typeof import('./src/components/Pagination/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScreenFull: typeof import('./src/components/ScreenFull/index.vue')['default']
+    SizeSelect: typeof import('./src/components/SizeSelect/index.vue')['default']
+    TestUnit: typeof import('./src/components/TestUnit.vue')['default']
+    ThemeSelect: typeof import('./src/components/ThemeSelect/index.vue')['default']
+    Tinymce: typeof import('./src/components/Tinymce/Tinymce.vue')['default']
+  }
+}
+
+export {}
diff --git a/index.html b/index.html
index c6b673c..949063b 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="base-theme" >
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
diff --git a/optimize-include.ts b/optimize-include.ts
new file mode 100644
index 0000000..c763150
--- /dev/null
+++ b/optimize-include.ts
@@ -0,0 +1,122 @@
+// const fs = require('fs')
+// const files = fs.readdirSync(
+//   'D:\\github\\vue3-admin-ts\\node_modules\\.pnpm\\element-plus@2.2.9_vue@3.2.37\\node_modules\\element-plus\\es\\components\\'
+// )
+// console.log(111, JSON.stringify(files))
+// console.log(console.dir(files))
+// console.log(console.dir(files.slice(20)))
+
+const elementPlusComponentNameArr = [
+  'affix',
+  'alert',
+  'aside',
+  'autocomplete',
+  'avatar',
+  'backtop',
+  'badge',
+  'base',
+  'breadcrumb',
+  'breadcrumb-item',
+  'button',
+  'button-group',
+  'calendar',
+  'card',
+  'carousel',
+  'carousel-item',
+  'cascader',
+  'cascader-panel',
+  'check-tag',
+  'checkbox',
+  'checkbox-button',
+  'checkbox-group',
+  'col',
+  'collapse',
+  'collapse-item',
+  'collapse-transition',
+  'color-picker',
+  'config-provider',
+  'container',
+  'date-picker',
+  'descriptions',
+  'descriptions-item',
+  'dialog',
+  'divider',
+  'drawer',
+  'dropdown',
+  'dropdown-item',
+  'dropdown-menu',
+  'empty',
+  'footer',
+  'form',
+  'form-item',
+  'header',
+  'icon',
+  'image',
+  'image-viewer',
+  'infinite-scroll',
+  'input',
+  'input-number',
+  'link',
+  'loading',
+  'main',
+  'menu',
+  'menu-item',
+  'menu-item-group',
+  'message',
+  'message-box',
+  'notification',
+  'option',
+  'option-group',
+  'overlay',
+  'page-header',
+  'pagination',
+  'popconfirm',
+  'popover',
+  'popper',
+  'progress',
+  'radio',
+  'radio-button',
+  'radio-group',
+  'rate',
+  'result',
+  'row',
+  'scrollbar',
+  'select',
+  'select-v2',
+  'skeleton',
+  'skeleton-item',
+  'slider',
+  'space',
+  'step',
+  'steps',
+  'sub-menu',
+  'switch',
+  'tab-pane',
+  'table',
+  'table-column',
+  'table-v2',
+  'tabs',
+  'tag',
+  'teleport',
+  'time-picker',
+  'time-select',
+  'timeline',
+  'timeline-item',
+  'tooltip',
+  'transfer',
+  'tree',
+  'tree-select',
+  'tree-v2',
+  'upload',
+  'virtual-list'
+]
+export const optimizeDepsArr = () => {
+  const depsArr = [] as string[]
+  elementPlusComponentNameArr.forEach((feItem) => {
+    depsArr.push(`element-plus/es/components/${feItem}/style/index`)
+  })
+
+  return depsArr
+}
+
+export default []
diff --git a/package.json b/package.json
index b711428..dfd47f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-admin-plus",
-  "version": "1.6.2",
+  "version": "1.8.1",
   "license": "ISC",
   "author": "kuanghua(869653722@qq.com)",
   "packageManager": "pnpm@6.32.3",
@@ -22,39 +22,38 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "2.0.4",
-    "@vueuse/core": "^8.7.5",
+    "@element-plus/icons-vue": "^2.0.4",
     "js-error-collection": "^1.0.7",
     "axios": "0.21.3",
-    "d3": "7.2.1",
-    "driver.js": "^0.9.8",
     "echarts": "4.2.1",
-    "element-china-area-data": "5.0.2",
-    "element-plus": "2.2.5",
+    "element-plus": "^2.2.9",
     "mitt": "3.0.0",
-    "moment-mini": "2.24.0",
+    "moment-mini": "2.22.1",
     "nprogress": "0.2.0",
     "path": "0.12.7",
-    "path-to-regexp": "^6.2.0",
-    "pinia": "2.0.14",
-    "screenfull": "4.2.0",
+    "path-to-regexp": "6.2.0",
+    "pinia": "^2.0.16",
     "tinymce": "4.9.11",
     "vue": "3.2.37",
+    "vue-router": "4.0.14",
+    "@vueuse/core": "^8.7.5",
+    "d3": "7.2.1",
+    "driver.js": "^0.9.8",
+    "element-china-area-data": "5.0.2",
+    "screenfull": "4.2.0",
     "vue-i18n": "9.1.6",
-    "vue-router": "4.0.12",
     "xlsx": "^0.18.5",
     "sortablejs": "1.15.0",
     "splitpanes": "^3.1.1"
   },
   "devDependencies": {
+    "scss": "0.2.4",
     "@babel/eslint-parser": "7.16.3",
     "@types/echarts": "4.9.7",
-    "@types/mockjs": "1.0.3",
-    "@types/node": "15.0.1",
+    "@types/mockjs": "1.0.6",
     "@typescript-eslint/eslint-plugin": "5.5.0",
     "@typescript-eslint/parser": "5.5.0",
     "@vitejs/plugin-legacy": "1.6.4",
-    "@vitejs/plugin-vue": "1.10.2",
     "@vitejs/plugin-vue-jsx": "1.3.1",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
@@ -65,19 +64,12 @@
     "husky": "7.0.2",
     "mockjs": "1.1.0",
     "prettier": "2.2.1",
-    "sass": "1.32.12",
-    "scss": "0.2.4",
     "svg-sprite-loader": "6.0.11",
-    "typescript": "4.3.2",
-    "unplugin-auto-import": "^0.5.11",
-    "unplugin-vue-components": "^0.17.14",
-    "vite": "2.9.12",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "1.2.1",
     "vite-plugin-svg-icons": "1.0.5",
     "vite-plugin-vue-setup-extend-plus": "0.0.2",
-    "vue-tsc": "0.28.1",
     "jest": "<27",
     "ts-jest": "<27",
     "tslib": "^2.4.0",
@@ -92,7 +84,16 @@
     "ts-node": "10.7.0",
     "majestic": "1.8.1",
     "@vue/cli-plugin-unit-jest": "4.5.17",
-    "@vue/cli-service": "4.5.17"
+    "@vue/cli-service": "4.5.17",
+    "@types/node": "^17.0.35",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "sass": "^1.52.1",
+    "typescript": "^4.7.2",
+    "unplugin-auto-import": "^0.5.11",
+    "unplugin-vue-components": "^0.19.5",
+    "vite": "^3.0.0",
+    "@vueuse/core": "^8.7.5",
+    "vue-tsc": "^0.34.16"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/App.vue b/src/App.vue
index 72f5be4..f28d533 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,24 @@
 <template>
-  <router-view />
+  <el-config-provider :locale="locale" :size="size" namespace="el">
+    <router-view />
+  </el-config-provider>
 </template>
 <script setup>
 import { setToken } from '@/utils/auth'
 import { useAppStore } from '@/store/app'
 
+//get settings
 const appStore = useAppStore()
 const settings = computed(() => {
   return appStore.settings
 })
+//lang and size config
+import zh from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en' // element-ui lang
+let lang = { zh, en }
+let size = $ref(localStorage.getItem('size') || settings.value.defaultSize)
+let locale = $ref(lang[localStorage.getItem('language') || settings.value.defaultLanguage])
+
 onBeforeMount(() => {
   //set tmp token when setting isNeedLogin false
   if (!settings.value.isNeedLogin) setToken(settings.value.tmpToken)
diff --git a/src/components/ThemeSelect/index.vue b/src/components/ThemeSelect/index.vue
new file mode 100644
index 0000000..69f08c6
--- /dev/null
+++ b/src/components/ThemeSelect/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-dropdown trigger="click" type="primary" @command="handleSettheme">
+    <svg-icon icon-class="theme-icon" class="theme-icon-style" />
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in themeOptions"
+          :key="item.value"
+          :command="item.value"
+          :disabled="theme === item.value"
+        >
+          <h3 class="pt-1 pb-1 font-themePx14">{{ item.label }}</h3>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+import { computed, reactive, toRefs } from 'vue'
+import settings from '@/settings'
+
+const state = reactive({
+  themeOptions: [
+    { label: 'base', value: 'base-theme' },
+    { label: 'dark', value: 'dark' },
+    { label: 'lighting', value: 'lighting-theme' }
+  ]
+})
+
+const theme = computed(() => {
+  return localStorage.getItem('Theme') || settings.defaultTheme
+})
+import { toggleHtmlClass } from '@/theme/utils'
+toggleHtmlClass(localStorage.getItem('Theme') || settings.defaultTheme)
+
+const handleSettheme = (theme) => {
+  localStorage.setItem('Theme', theme)
+  toggleHtmlClass(theme)
+  location.reload()
+}
+//导出属性到页面中使用
+let { themeOptions } = toRefs(state)
+</script>
+
+<style scoped lang="scss">
+.theme-icon-style {
+  height: 23px;
+  width: 23px;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: #494949; //#ff9901;
+  position: relative;
+  font-weight: bold;
+  top: 1px;
+}
+</style>
diff --git a/src/directive/clickoutside.js b/src/directives/clickoutside.js
similarity index 100%
rename from src/directive/clickoutside.js
rename to src/directives/clickoutside.js
diff --git a/src/directive/copy.js b/src/directives/copy.js
similarity index 100%
rename from src/directive/copy.js
rename to src/directives/copy.js
diff --git a/src/directive/debounce.js b/src/directives/debounce.js
similarity index 100%
rename from src/directive/debounce.js
rename to src/directives/debounce.js
diff --git a/src/directive/index.js b/src/directives/index.js
similarity index 100%
rename from src/directive/index.js
rename to src/directives/index.js
diff --git a/src/directive/longpress.js b/src/directives/longpress.js
similarity index 100%
rename from src/directive/longpress.js
rename to src/directives/longpress.js
diff --git a/src/directive/permission.js b/src/directives/permission.js
similarity index 100%
rename from src/directive/permission.js
rename to src/directives/permission.js
diff --git a/src/directive/watermark.js b/src/directives/watermark.js
similarity index 100%
rename from src/directive/watermark.js
rename to src/directives/watermark.js
diff --git a/src/directive/waves/waves.css b/src/directives/waves/waves.css
similarity index 100%
rename from src/directive/waves/waves.css
rename to src/directives/waves/waves.css
diff --git a/src/directive/waves/waves.js b/src/directives/waves/waves.js
similarity index 100%
rename from src/directive/waves/waves.js
rename to src/directives/waves/waves.js
diff --git a/src/icons/common/404.svg b/src/icons/common/404.svg
index 6df5019..e69de29 100644
--- a/src/icons/common/404.svg
+++ b/src/icons/common/404.svg
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file
diff --git a/src/icons/common/hamburger.svg b/src/icons/common/hamburger.svg
new file mode 100644
index 0000000..9766c95
--- /dev/null
+++ b/src/icons/common/hamburger.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658048166307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1878" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" p-id="1879"></path></svg>
\ No newline at end of file
diff --git a/src/icons/common/sidebar-logo.svg b/src/icons/common/sidebar-logo.svg
new file mode 100644
index 0000000..1825fb3
--- /dev/null
+++ b/src/icons/common/sidebar-logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652520562374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1623" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M667.2 598.1l24 163.1c21.8 148-143.9 250.6-298.3 184.7l-170.1-72.7c-154.3-65.9-181.6-250.9-49-333l146.1-90.5c132.6-82 325.5 0.4 347.3 148.4z"  p-id="1624"></path><path d="M413.084289 314.438892a90 138 24.437 1 0 114.179113-251.275009 90 138 24.437 1 0-114.179113 251.275009Z"  p-id="1625"></path><path d="M137.204814 438.494762a90 138 24.437 1 0 114.179112-251.275009 90 138 24.437 1 0-114.179112 251.275009Z" p-id="1626"></path><path d="M690.068583 440.383783a90 138 24.437 1 0 114.179113-251.275009 90 138 24.437 1 0-114.179113 251.275009Z"  p-id="1627"></path><path d="M778.727414 730.103856a90 138 24.437 1 0 114.179112-251.275009 90 138 24.437 1 0-114.179112 251.275009Z"  p-id="1628"></path></svg>
diff --git a/src/icons/common/zip.svg b/src/icons/common/zip.svg
index f806fc4..e69de29 100644
--- a/src/icons/common/zip.svg
+++ b/src/icons/common/zip.svg
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.527 116.793c.178.008.348.024.527.024h40.233c4.711-.005 8.53-3.677 8.534-8.21V18.895c-.004-4.532-3.823-8.204-8.534-8.209H79.054c-.179 0-.353.016-.527.024V0L0 10.082v107.406l78.527 10.342v-11.037zm0-101.362c.174-.024.348-.052.527-.052h40.233c2.018 0 3.659 1.578 3.659 3.52v89.713c-.003 1.942-1.64 3.517-3.659 3.519H79.054c-.179 0-.353-.028-.527-.052V15.431zM30.262 75.757l-18.721-.46V72.37l11.3-16.673v-.148l-10.266.164v-4.51l17.504-.44v3.264L18.696 70.76v.144l11.566.176v4.678zm9.419.231l-5.823-.144V50.671l5.823-.144v25.461zm22.255-11.632c-2.168 1.922-5.353 2.76-9.02 2.736-.702.004-1.402-.04-2.097-.131v9.303l-5.997-.148V50.743c1.852-.352 4.473-.647 8.218-.743 3.838-.096 6.608.539 8.48 1.913 1.807 1.306 3.032 3.5 3.032 6.112s-.926 4.833-2.612 6.331h-.004zM53.36 54.45c-.856-.01-1.71.083-2.541.275v7.682c.523.116 1.167.152 2.06.152 3.301-.004 5.36-1.614 5.36-4.314 0-2.425-1.772-3.843-4.875-3.791l-.004-.004zm39.847-37.066h9.564v3.795h-9.564v-3.795zm-9.568 5.68h9.564v3.8h-9.564v-3.8zm9.568 6.216h9.564v3.799h-9.564V29.28zm0 12h9.564v3.794h-9.564V41.28zm-9.568-6.096h9.564v3.795h-9.564v-3.795zm9.472 47.064c2.512 0 4.921-.96 6.697-2.67 1.776-1.708 2.773-4.026 2.772-6.442l-1.748-15.263c0-5.033-2.492-9.112-7.725-9.112-5.232 0-7.72 4.079-7.72 9.112l-1.752 15.263c-.001 2.417.996 4.735 2.773 6.444 1.777 1.71 4.187 2.669 6.7 2.668h.003zm-3.135-16.75h6.27v12.743h-6.27V65.5z"/></svg>
\ No newline at end of file
diff --git a/src/icons/nav-bar/theme-icon.svg b/src/icons/nav-bar/theme-icon.svg
new file mode 100644
index 0000000..49a3613
--- /dev/null
+++ b/src/icons/nav-bar/theme-icon.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658058099656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2288" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M736.8 64.7H287.2C175 64.7 83.8 155.9 83.8 268.1V756c0 112.1 91.2 203.4 203.4 203.4h449.7c112.1 0 203.4-91.2 203.4-203.4V268.1C940.2 155.9 849 64.7 736.8 64.7z m149.5 691.2c0 82.4-67 149.5-149.5 149.5H287.2c-82.4 0-149.5-67-149.5-149.5V268.1c0-82.4 67-149.5 149.5-149.5h449.7c82.4 0 149.5 67 149.5 149.5v487.8z"  p-id="2289"></path><path d="M645.2 344.6c-9.7-9.7-23.7-13.8-37.3-10.9-6.5 1.4-12.4 4.1-17.5 8.2-21.1 16.9-47.6 26.2-74.6 26.2h-0.8c-0.8 0-1.6-0.1-2.4-0.1h-1.2c-0.8 0-1.6 0.1-2.4 0.1h-0.8c-27 0-53.6-9.3-74.7-26.2-5.1-4.1-11-6.8-17.5-8.2-13.7-2.9-27.6 1.2-37.3 10.9l-66.8 66.8c-7.5 7.5-11.8 17.8-11.9 28.4v2.6c0.6 11 5.6 21.4 13.9 28.7 13.8 12 28.9 22.8 44.8 32.1 2.9 1.7 4.6 4.7 4.6 7.9v121.8c0 21.2 14.4 39.6 35.1 44.8 35.6 9 72.4 13.5 109.3 13.5h4c38.8 0.3 76.9-4.2 113.8-13.5 20.6-5.2 35.1-23.6 35.1-44.8V511.1c0-3.3 1.7-6.3 4.6-7.9 15.9-9.2 30.9-20 44.8-32.1 8.2-7.1 13.2-17.4 13.9-28.2 0.1-1.1 0.1-2.2 0.1-3.3-0.2-10.5-4.5-20.7-11.9-28.1l-66.9-66.9z m-3.7 117.8c-17.3 10.1-28.1 28.8-28.1 48.7v121c-32.8 8.2-66.7 12.3-101.7 11.9-34.3 0.4-68.5-3.7-101.3-11.9v-121c0-20-10.8-38.6-28.1-48.7-11.3-6.6-22.2-14.1-32.3-22.5l58-58c28.7 21.5 64.1 33.3 100 33.3 1.2 0 2.4-0.1 3.5-0.1h0.4c1.2 0.1 2.4 0.1 3.5 0.1 36 0 71.3-11.8 100-33.3l58 58c-9.7 8.4-20.5 15.9-31.9 22.5z"  p-id="2290"></path></svg>
diff --git a/src/lang/zh.js b/src/lang/zh.js
index effa12d..15ca18a 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -2,7 +2,7 @@ export default {
   route: {
     Dashboard: '首页',
     'Setting Switch': '设置文件测试',
-    'Guide': '引导页',
+    Guide: '引导页',
     ErrorLog: '错误日志',
     'ErrorLog Test': '错误日志测试',
 
@@ -17,6 +17,7 @@ export default {
     Table: '表格',
     exportExcel: '导出Excel',
     importExcel: '导入Excel',
+    CodeGenerator: '低代码平台',
     ExternalLink: '外链',
 
     Charts: '图表',
@@ -39,11 +40,11 @@ export default {
     'RouterDemo-F': '路由跳转页面1',
     'RouterDemo-S': '路由跳转页面2',
     'Use Example': '使用例子',
-    'Directive':'自定义指令',
+    Directive: '自定义指令',
     Tinymce: 'Tinymce富文本',
     'I18n-Demo': 'i18n例子',
-    'dragPane': '拖拽面板',
-     'countTo' :'数字动画',
+    dragPane: '拖拽面板',
+    countTo: '数字动画',
     Permission: '权限',
     'Role Index': '角色权限',
     'Page Permission': '角色权限页面',
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index b496bbe..817ee6b 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -10,15 +10,8 @@
     </div>
   </div>
 </template>
-<!--原理vue2.0-->
-<script>
-/*可以设置默认的名字*/
-export default {
-  name: 'Layout'
-}
-</script>
 
-<script setup>
+<script setup name="Layout">
 import { Sidebar, Navbar, AppMain, TagsView } from './components'
 
 const appStore = useAppStore()
@@ -45,13 +38,14 @@ ResizeHook()
 .main-container {
   min-height: 100%;
   transition: margin-left 0.28s;
-  margin-left: $sideBarWidth;
+  margin-left: var(--side-bar-width);
   position: relative;
+  border-left: 1px solid var(--layout-border-left-color);
 }
 .sidebar-container {
   transition: width 0.28s;
-  width: $sideBarWidth !important;
-  background-color: $menuBg;
+  width: var(--side-bar-width) !important;
+  background-color: var(--el-menu-bg-color);
   height: 100%;
   position: fixed;
   font-size: 0;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index bd38d3a..0d31085 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -4,12 +4,12 @@
       <!--has transition  Judging by settings.mainNeedAnimation-->
       <transition v-if="settings.mainNeedAnimation" name="fade-transform" mode="out-in">
         <keep-alive :include="cachedViews">
-          <component :is="Component" />
+          <component :is="Component" :key="key" />
         </keep-alive>
       </transition>
       <!-- no transition -->
       <keep-alive v-else :include="cachedViews">
-        <component :is="Component" />
+        <component :is="Component" :key="key" />
       </keep-alive>
     </router-view>
   </div>
@@ -31,9 +31,6 @@ const cachedViews = computed(() => {
   return appStore.cachedViews
 })
 
-// import { $ref } from 'vue'
-// const fai = $ref(111)
-// console.log(fai)
 /*listen the component name changing, then to keep-alive the page*/
 // cachePage: is true, keep-alive this Page
 // leaveRmCachePage: is true, keep-alive remote when page leave
@@ -121,23 +118,16 @@ watch(
 
 <style scoped lang="scss">
 .app-main {
-  padding: $appMainPadding;
+  padding: var(--app-main-padding);
   /*50 = navbar  */
   position: relative;
   overflow: hidden;
+  background-color: var(--app-main-background);
 }
 .show-tag-view {
-  height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight}) !important;
+  height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)}) !important;
 }
 .fixed-header + .app-main {
   padding-top: 50px;
 }
 </style>
-
-<style lang="scss">
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>
diff --git a/src/layout/components/Breadcrumb/Breadcrumb.vue b/src/layout/components/Breadcrumb/Breadcrumb.vue
index 2f5c207..2aec6cc 100644
--- a/src/layout/components/Breadcrumb/Breadcrumb.vue
+++ b/src/layout/components/Breadcrumb/Breadcrumb.vue
@@ -88,7 +88,7 @@ onBeforeMount(() => {
   margin-left: 8px;
 
   .no-redirect {
-    color: #97a8be;
+    color: var(--breadcrumb-no-redirect);
     cursor: text;
   }
 }
diff --git a/src/layout/components/Hamburger/Hamburger.vue b/src/layout/components/Hamburger/Hamburger.vue
index 699e32b..76da024 100644
--- a/src/layout/components/Hamburger/Hamburger.vue
+++ b/src/layout/components/Hamburger/Hamburger.vue
@@ -1,21 +1,12 @@
 <template>
   <div style="padding: 0 12px" @click="toggleClick">
-    <svg
-      :class="{ 'is-active': isActive }"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path
-        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
-    </svg>
+    <svg-icon icon-class="hamburger" :class="{ 'is-active': isActive }" class="hamburger-style" />
   </div>
 </template>
 
 <script setup>
+import SvgIcon from '@/icons/SvgIcon.vue'
+
 defineProps({
   isActive: {
     type: Boolean,
@@ -29,15 +20,15 @@ const toggleClick = () => {
 }
 </script>
 
-<style scoped>
-.hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
+<style scoped lang="scss">
+.hamburger-style {
+  color: var(--hamburger-color);
+  width: var(--hamburger-width);
+  height: var(--hamburger-height);
+  cursor: pointer;
 }
 
-.hamburger.is-active {
+.hamburger-style.is-active {
   transform: rotate(180deg);
 }
 </style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 5ec1473..c656859 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -13,14 +13,12 @@
     <div v-if="settings.showNavbarTitle" class="heardCenterTitle">{{ settings.showNavbarTitle }}</div>
     <div v-if="settings.ShowDropDown" class="right-menu rowSC">
       <ScreenFull />
+      <ThemeSelect />
       <SizeSelect />
       <LangSelect />
       <el-dropdown trigger="click" size="medium">
         <div class="avatar-wrapper">
-          <img
-            src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
-            class="user-avatar"
-          />
+          <img src="https://github.jzfai.top/file/images/nav-right-logo.gif" class="user-avatar" />
           <CaretBottom style="width: 1em; height: 1em; margin-left: 4px" />
         </div>
         <template #dropdown>
@@ -47,6 +45,7 @@
 import SizeSelect from '@/components/SizeSelect/index.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
 import ScreenFull from '@/components/ScreenFull/index.vue'
+import ThemeSelect from '@/components/ThemeSelect/index.vue'
 
 import { CaretBottom } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
@@ -82,11 +81,11 @@ const loginOut = () => {
 
 <style lang="scss" scoped>
 .navbar {
-  height: $navBarHeight;
+  height: var(--nav-bar-height);
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  background: var(--nav-bar-background);
+  box-shadow: var(--nav-bar-box-shadow);
 }
 
 //logo
@@ -126,5 +125,6 @@ const loginOut = () => {
 .right-menu {
   cursor: pointer;
   margin-right: 40px;
+  background-color: var(--nav-bar-right-menu-background);
 }
 </style>
diff --git a/src/layout/components/Sidebar/ElSvgItem.vue b/src/layout/components/Sidebar/ElSvgItem.vue
index 03185e3..d084a0a 100644
--- a/src/layout/components/Sidebar/ElSvgItem.vue
+++ b/src/layout/components/Sidebar/ElSvgItem.vue
@@ -20,8 +20,9 @@ const { elSvgName } = props
 .el-svg-icon {
   width: 1em;
   height: 1em;
-  margin-left: -2px; //el-svg-icon has some margin
-  font-size: 20px !important;
+  position: relative;
+  right: 3px;
+  font-size: var(--sidebar-el-icon-size);
   text-align: left !important;
 }
 </style>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index ffb4b84..c4dba54 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -2,11 +2,11 @@
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <svg-icon v-if="logo" icon-class="sidebar-logo" class="sidebar-logo" />
         <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <svg-icon v-if="logo" icon-class="sidebar-logo" class="sidebar-logo" />
         <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
@@ -15,6 +15,7 @@
 
 <script setup>
 import setting from '@/settings'
+import SvgIcon from '@/icons/SvgIcon.vue'
 defineProps({
   collapse: {
     type: Boolean,
@@ -23,7 +24,7 @@ defineProps({
 })
 const state = reactive({
   title: setting.title,
-  logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+  logo: 'https://github.jzfai.top/file/images/pd-logo.svg'
 })
 //export to page for
 const { title, logo } = toRefs(state)
@@ -47,7 +48,7 @@ const { title, logo } = toRefs(state)
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: var(--sidebar-logo-background);
   padding-left: 14px;
   text-align: left;
   overflow: hidden;
@@ -55,15 +56,16 @@ const { title, logo } = toRefs(state)
     height: 100%;
     width: 100%;
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      color: var(--sidebar-logo-color);
+      width: var(--sidebar-logo-width);
+      height: var(--sidebar-logo-height);
       vertical-align: middle;
       margin-right: 12px;
     }
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: var(--sidebar-logo-title-color);
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
diff --git a/src/layout/components/Sidebar/Sidebar.vue b/src/layout/components/Sidebar/Sidebar.vue
index 6d5af10..ac6bd6f 100644
--- a/src/layout/components/Sidebar/Sidebar.vue
+++ b/src/layout/components/Sidebar/Sidebar.vue
@@ -10,9 +10,6 @@
         :collapse="!isCollapse"
         :unique-opened="false"
         :collapse-transition="false"
-        :background-color="scssJson.menuBg"
-        :text-color="scssJson.menuText"
-        :active-text-color="scssJson.menuActiveText"
         mode="vertical"
       >
         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@@ -25,7 +22,6 @@
 import Logo from './Logo.vue'
 import SidebarItem from './SidebarItem.vue'
 //导入配置文件
-
 const appStore = useAppStore()
 const settings = computed(() => {
   return appStore.settings
@@ -41,24 +37,26 @@ const isCollapse = computed(() => {
 })
 
 //change  scss variable to js
-const dillScssExportToJson = (scssExportJson) => {
-  const jsonString = scssExportJson.replace(/:export\s*/, '').replace(/[\s+\r\n]/g, '')
-  const scssJson = {}
-  jsonString
-    .slice(1, jsonString.length - 2)
-    .split(';')
-    .forEach((fItem) => {
-      const arr = fItem.split(':')
-      scssJson[arr[0]] = arr[1]
-    })
-  return scssJson
-}
-
+// const dillScssExportToJson = (scssExportJson) => {
+//   const jsonString = scssExportJson.replace(/:export\s*/, '').replace(/[\s+\r\n]/g, '')
+//   const scssJson = {}
+//   jsonString
+//     .slice(1, jsonString.length - 2)
+//     .split(';')
+//     .forEach((fItem) => {
+//       const arr = fItem.split(':')
+//       scssJson[arr[0]] = arr[1]
+//     })
+//   return scssJson
+// }
+// import scssExportJson from '@/styles/variables-to-js.scss'
+// import { ObjTy } from '~/common'
+// const scssJson = dillScssExportToJson(scssExportJson)
 //get scss variable
-import scssExportJson from '@/styles/variables-to-js.scss'
+
 import { useAppStore } from '@/store/app'
 import { usePermissionStore } from '@/store/permission'
-const scssJson = dillScssExportToJson(scssExportJson)
+
 const activeMenu = computed(() => {
   const { meta, path } = route
   // if set path, the sidebar will highlight the path you set
@@ -68,18 +66,9 @@ const activeMenu = computed(() => {
   return path
 })
 </script>
-
 <style lang="scss">
-.reset-menu-style {
-  .el-menu {
-    border-right: none;
-  }
-  .el-scrollbar__wrap {
-    padding-bottom: 10vh;
-  }
-}
-
+//fix open the item style issue
 .el-menu-vertical {
-  width: $sideBarWidth;
+  width: var(--side-bar-width);
 }
 </style>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index f47e1f5..de8e3d3 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -81,17 +81,3 @@ const resolvePath = (routePath) => {
   return path.resolve(props.basePath, routePath)
 }
 </script>
-
-<style lang="scss">
-// menu hover
-/* .submenu-title-noDropdown,
-  .el-submenu__title {
-    &:hover {
-      background-color: $menuHover !important;
-    }
-  }
-
-  .is-active>.el-submenu__title {
-    color: $subMenuActiveText !important;
-  }*/
-</style>
diff --git a/src/layout/components/TagsView/TagsView.vue b/src/layout/components/TagsView/TagsView.vue
index 94b7554..1146a5f 100644
--- a/src/layout/components/TagsView/TagsView.vue
+++ b/src/layout/components/TagsView/TagsView.vue
@@ -218,11 +218,11 @@ const { visible, top, left, selectedTag } = toRefs(state)
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: $tagViewHeight;
+  height: var(--tag-view-height);
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  background: var(--tags-view-background);
+  border-bottom: 1px solid var(--tags-view-border-bottom);
+  box-shadow: var(--tags-view-box-shadow);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -230,9 +230,9 @@ const { visible, top, left, selectedTag } = toRefs(state)
       cursor: pointer;
       height: 27px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      border: 1px solid var(--tags-view-item-border-color);
+      color: var(--tags-view-item-color);
+      background: var(--tags-view-item-background);
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -244,12 +244,12 @@ const { visible, top, left, selectedTag } = toRefs(state)
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background-color: var(--tags-view-item-active-background);
+        color: var(--tags-view-item-active-color);
+        border-color: var(--tags-view-item-active-border-color);
         &::before {
           content: '';
-          background: #fff;
+          background: var(--tags-view-background);
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -262,7 +262,7 @@ const { visible, top, left, selectedTag } = toRefs(state)
   }
   .contextmenu {
     margin: 0;
-    background: #fff;
+    background: var(--tags-view-contextmenu-background);
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -270,14 +270,14 @@ const { visible, top, left, selectedTag } = toRefs(state)
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    color: var(--tags-view-contextmenu-color);
+    box-shadow: var(--tags-view-contextmenu-box-shadow);
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
       &:hover {
-        background: #eee;
+        background: var(--tags-view-contextmenu-hover-background);
       }
     }
   }
@@ -296,9 +296,10 @@ const { visible, top, left, selectedTag } = toRefs(state)
       transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
       vertical-align: -2px;
+
       &:hover {
-        background-color: #b4bccc;
-        color: #fff;
+        background-color: var(--tags-view-close-icon-hover-background);
+        color: var(--tags-view-close-icon-hover-color);
       }
     }
   }
diff --git a/src/layout/hook/useResizeHandler.js b/src/layout/hook/useResizeHandler.js
deleted file mode 100644
index fee22d9..0000000
--- a/src/layout/hook/useResizeHandler.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
-import store from '@/store'
-const { body } = document
-const WIDTH = 992
-export default function () {
-  const $_isMobile = () => {
-    const rect = body.getBoundingClientRect()
-    return rect.width - 1 < WIDTH
-  }
-  const $_resizeHandler = () => {
-    if (!document.hidden) {
-      const isMobile = $_isMobile()
-      // console.log('toggleDevice')
-      // store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
-      if (isMobile) {
-        // console.log('closeSideBar')
-        // store.dispatch('app/closeSideBar', { withoutAnimation: true })
-        /*此处只做根据window尺寸关闭sideBar功能*/
-        store.commit('app/M_sidebar_opened', false)
-      } else {
-        store.commit('app/M_sidebar_opened', true)
-      }
-    }
-  }
-  onBeforeMount(() => {
-    window.addEventListener('resize', $_resizeHandler)
-  })
-  onMounted(() => {
-    const isMobile = $_isMobile()
-    if (isMobile) {
-      store.commit('app/M_sidebar_opened', false)
-      // store.dispatch('app/toggleDevice', 'mobile')
-      // store.dispatch('app/closeSideBar', { withoutAnimation: true })
-    } else {
-      store.commit('app/M_sidebar_opened', true)
-    }
-  })
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', $_resizeHandler)
-  })
-}
diff --git a/src/main.js b/src/main.js
index 0f33d90..53e5b00 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,19 +2,14 @@ import { createApp } from 'vue'
 import App from './App.vue'
 const app = createApp(App)
 import router from './router'
+
 import '@/styles/index.scss' // global css
 
 //import element-plus
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import settings from '@/settings'
-import zh from 'element-plus/es/locale/lang/zh-cn'
-import en from 'element-plus/es/locale/lang/en' // element-ui lang
-let lang = { zh, en }
-app.use(ElementPlus, {
-  size: localStorage.getItem('size') || settings.defaultSize,
-  locale: lang[localStorage.getItem('language') || settings.defaultLanguage]
-})
+app.use(ElementPlus)
+
 //i18n
 import i18n from '@/lang'
 app.use(i18n)
@@ -37,15 +32,15 @@ import svgIcon from '@/icons/SvgIcon.vue'
 app.component('SvgIcon', svgIcon)
 
 //element svg icon
-import ElSvgIcon from '@/components/ElSvgIcon.vue'
-app.component('ElSvgIcon', ElSvgIcon)
+// import ElSvgIcon from '@/components/ElSvgIcon.vue'
+// app.component('ElSvgIcon', ElSvgIcon)
 
 //global mount moment-mini
 // import $momentMini from 'moment-mini'
 // app.config.globalProperties.$momentMini = $momentMini
 
 //import global directive
-import directive from '@/directive'
+import directive from '@/directives'
 directive(app)
 
 //import global directive
diff --git a/src/router/index.js b/src/router/index.js
index 14dcb8f..ba2832c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Layout from '@/layout'
 /* Router Modules */
 import chartsRouter from './modules/charts'
 import useExample from './modules/useExample'
+import codeGenerator from './modules/codeGenerator'
 
 export const constantRoutes = [
   {
@@ -46,19 +47,7 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/generation-code',
-    component: Layout,
-    redirect: '/generation-code/index',
-    children: [
-      {
-        path: 'index',
-        name: 'CodeGenerator',
-        component: () => import('@/views/code-generator'),
-        meta: { title: 'CodeGenerator', icon: 'tree' }
-      }
-    ]
-  },
+  codeGenerator,
   {
     path: '/setting-switch',
     component: Layout,
@@ -190,8 +179,7 @@ export const constantRoutes = [
         component: () => import('@/views/excel/importExcel.vue'),
         name: 'importExcel',
         meta: { title: 'importExcel' }
-      },
-
+      }
     ]
   },
   {
diff --git a/src/router/modules/codeGenerator.js b/src/router/modules/codeGenerator.js
new file mode 100644
index 0000000..187acec
--- /dev/null
+++ b/src/router/modules/codeGenerator.js
@@ -0,0 +1,24 @@
+import Layout from '@/layout'
+
+const codeGenerator = {
+  path: '/codeGenerator',
+  component: Layout,
+  redirect: '/generation-code/index',
+  meta: { title: 'CodeGenerator', icon: 'chart' },
+  children: [
+    {
+      path: 'index',
+      name: 'CodeGenerator',
+      component: () => import('@/views/code-generator'),
+      meta: { title: 'CodeGenerator', icon: 'chart' }
+    }
+    // {
+    //   path: 'code-generator-config',
+    //   name: 'CodeGeneratorConfig',
+    //   component: () => import('@/views/code-generator/code-generator-config'),
+    //   meta: { title: 'CodeGeneratorConfig' }
+    // }
+  ]
+}
+
+export default codeGenerator
diff --git a/src/settings.js b/src/settings.js
index 109a842..d48dc08 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -92,6 +92,11 @@ const setting = {
    * en/zh
    * */
   defaultLanguage: 'en',
+  /*
+   *  default theme
+   * base-theme/lighting-theme/dark-theme
+   * */
+  defaultTheme: 'base-theme',
   /*
    * setting default defaultSize
    * large / default /small
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 00bdf8d..3a6ad57 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,7 +7,8 @@
 //scroll
 @mixin main-show-wh() {
   /* css 声明 */
-  height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight} - #{$appMainPadding * 2});
+  //height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight} - #{$appMainPadding * 2});
+  height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)} - #{calc(var(--app-main-padding) * 2)});
   width: 100%;
 }
 .scroll-y {
diff --git a/src/styles/scss-suger.scss b/src/styles/scss-suger.scss
index d13895e..2b19e92 100644
--- a/src/styles/scss-suger.scss
+++ b/src/styles/scss-suger.scss
@@ -1,16 +1,3 @@
-body {
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --danger: #dc3545;
-  --warning: #ffc107;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --muted: #6c757d;
-  --white: #fff;
-  --borderColor: #dee2e6;
-  --lightmuted: #b2b2b2;
-}
 /*脱落文档流定位*/
 .center-50 {
   //居中定位
@@ -451,37 +438,6 @@ flex布局 第一个字母为主轴
   border-left-width: 0;
 }
 
-.border-primary {
-  border-color: var(--primary) !important;
-}
-.border-secondary {
-  border-color: var(--secondary) !important;
-}
-.border-success {
-  border-color: var(--success) !important;
-}
-.border-danger {
-  border-color: var(--danger) !important;
-}
-.border-warning {
-  border-color: var(--warning) !important;
-}
-.border-info {
-  border-color: var(--info) !important;
-}
-.border-light {
-  border-color: var(--light) !important;
-}
-.border-dark {
-  border-color: var(--dark) !important;
-}
-.border-white {
-  border-color: var(--white) !important;
-}
-.border-light-secondary {
-  border-color: #f1f1f1 !important;
-}
-
 .rounded {
   border-radius: 5px;
 }
@@ -492,72 +448,6 @@ flex布局 第一个字母为主轴
   border-radius: 0;
 }
 
-/* 字体颜色和bg */
-.text-primary {
-  color: var(--primary) !important;
-}
-.text-secondary {
-  color: var(--secondary) !important;
-}
-.text-success {
-  color: var(--success) !important;
-}
-.text-danger {
-  color: var(--danger) !important;
-}
-.text-warning {
-  color: var(--warning) !important;
-}
-.text-info {
-  color: var(--info) !important;
-}
-.text-light {
-  color: var(--light) !important;
-}
-.text-dark {
-  color: var(--dark) !important;
-}
-.text-muted {
-  color: var(--muted) !important;
-}
-.text-light-muted {
-  color: var(--lightmuted) !important;
-}
-.text-white {
-  color: var(--white) !important;
-}
-
-.bg-primary {
-  background-color: var(--primary) !important;
-}
-.bg-secondary {
-  background-color: var(--secondary) !important;
-}
-.bg-success {
-  background-color: var(--success) !important;
-}
-.bg-danger {
-  background-color: var(--danger) !important;
-}
-.bg-warning {
-  background-color: var(--warning) !important;
-}
-.bg-info {
-  background-color: var(--info) !important;
-}
-.bg-light {
-  background-color: var(--light) !important;
-}
-.bg-dark {
-  background-color: var(--dark) !important;
-}
-.bg-white {
-  background-color: var(--white) !important;
-}
-.bg-light-secondary {
-  background-color: #f1f1f1 !important;
-}
-
 /*width和height*/
 .widthPx-60 {
   width: 60px !important;
@@ -626,9 +516,6 @@ flex布局 第一个字母为主轴
 .widthPx-360 {
   width: 360px !important;
 }
-.widthPx-500 {
-  width: 500px !important;
-}
 /*height*/
 .heightPx-50 {
   height: 50px !important;
@@ -1028,20 +915,6 @@ flex布局 第一个字母为主轴
   margin-right: 8px;
 }
 
-/*px mt*/
-.mtPx-2 {
-  margin-top: 2px;
-}
-.mtPx-4 {
-  margin-top: 4px;
-}
-.mtPx-6 {
-  margin-top: 6px;
-}
-.mtPx-8 {
-  margin-top: 8px;
-}
-
 .p-0 {
   padding-left: 0;
   padding-right: 0;
@@ -1238,14 +1111,7 @@ flex布局 第一个字母为主轴
   margin-right: 4px;
 }
 
-/*重置element-ui样式*/
-//.el-checkbox__inner{
-//  border: 1px solid #bbb !important;
-//  width:15px;
-//  height:15px;
-//
-//}
-.fixBtnToBottom {
+.fix-btn-to-bottom {
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -1255,88 +1121,3 @@ flex布局 第一个字母为主轴
   background: #fff;
   width: 100vw;
 }
-
-/*element-ui样式重写*/
-.resetElementDialogFull {
-  .el-dialog {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    padding-bottom: 60px;
-    height: 100%;
-  }
-  .el-dialog__body {
-    padding-top: 10px;
-  }
-  .el-dialog__footer {
-    text-align: center;
-  }
-  .el-dialog__wrapper {
-    background: #fff;
-  }
-}
-
-.resetElementDialogFull {
-  .el-dialog {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    padding-bottom: 60px;
-    height: 100%;
-  }
-  .el-dialog__body {
-    padding-top: 10px;
-  }
-  .el-dialog__footer {
-    text-align: center;
-  }
-  .el-dialog__wrapper {
-    background: #fff;
-  }
-}
-
-/*修改input文件默认样式*/
-.inputFileClass {
-  width: 72px;
-  margin-right: 8px;
-  overflow-y: hidden !important;
-}
-
-.upload-image-global-style {
-  width: 60px;
-  height: 60px;
-}
-
-/*地图marker的样式*/
-.amap-marker > div {
-  color: #fff !important;
-}
-.monitor-marker-container {
-  position: relative;
-  .monitor-icon {
-    width: 24px;
-    height: 32px;
-  }
-  .markerSpeedTitle-container {
-    position: absolute;
-    top: -25px;
-    left: -50px;
-    height: 24px;
-    h3 {
-      position: relative;
-      padding: 0 6px;
-      line-height: 23px;
-      text-align: center;
-      background-color: #000;
-      font-size: 14px;
-      color: #fff;
-    }
-    h4 {
-      padding: 0 6px;
-      line-height: 23px;
-      width: 100px;
-      font-size: 14px;
-      text-align: center;
-      background-color: #fcca00;
-      color: #000;
-    }
-  }
-}
diff --git a/src/styles/variables-to-js.scss b/src/styles/variables-to-js.scss
index 702e644..7234a33 100644
--- a/src/styles/variables-to-js.scss
+++ b/src/styles/variables-to-js.scss
@@ -1,10 +1,10 @@
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}
+//:export {
+//  menuText: $menuText;
+//  menuActiveText: $menuActiveText;
+//  subMenuActiveText: $subMenuActiveText;
+//  menuBg: $menuBg;
+//  menuHover: $menuHover;
+//  subMenuBg: $subMenuBg;
+//  subMenuHover: $subMenuHover;
+//  sideBarWidth: $sideBarWidth;
+//}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 22868ea..151f1f1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,21 +1,38 @@
-// 全局变量定义
-$menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5;
-
-$menuBg: #304156;
-$menuHover: #263445;
-
-$subMenuBg: #1f2d3d;
-$subMenuHover: #001528;
-$sideBarWidth: 210px;
+//:root {
+//  --el-menu-active-color: #409eff;
+//  --el-menu-text-color: #bfcbd9;
+//  --el-menu-hover-text-color: var(--el-color-primary);
+//  --el-menu-bg-color: #304156;
+//  --el-menu-hover-bg-color: #263445;
+//  --el-menu-item-height: 56px;
+//
+//  --side-bar-width: 210px;
+//  //navbar
+//  --nav-bar-height: 50px;
+//  //tagsView
+//  --tag-view-height: 32px;
+//  //app-main padding
+//  --app-main-padding: 10px;
+//}
 
-//navbar
-$navBarHeight: 50px;
-//tagsView
-$tagViewHeight: 32px;
-//app-main padding
-$appMainPadding: 10px;
+// 全局变量定义
+//$menuText: #bfcbd9;
+//$menuActiveText: #409eff;
+//$subMenuActiveText: #f4f4f5;
+//
+//$menuBg: #304156;
+//$menuHover: #263445;
+//
+//$subMenuBg: #1f2d3d;
+//$subMenuHover: #001528;
+//$sideBarWidth: 210px;
+//
+////navbar
+//$navBarHeight: 50px;
+////tagsView
+//$tagViewHeight: 32px;
+////app-main padding
+//$appMainPadding: 10px;
 
 //导出scss定义的样式变量
 //vite无法获取scss变量https://github.com/vitejs/vite/issues/1279
diff --git a/src/theme/base/css-vars.scss b/src/theme/base/css-vars.scss
new file mode 100644
index 0000000..14bb31b
--- /dev/null
+++ b/src/theme/base/css-vars.scss
@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+// CSS3 var
+@use './var' as *;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}
diff --git a/src/theme/base/index.scss b/src/theme/base/index.scss
new file mode 100644
index 0000000..484f55a
--- /dev/null
+++ b/src/theme/base/index.scss
@@ -0,0 +1,82 @@
+/*custom  variables*/
+//$--colors: (
+//  'primary': (
+//    'base': red
+//  ),
+//  'success': (
+//    'base': #21ba45
+//  ),
+//  'warning': (
+//    'base': #f2711c
+//  ),
+//  'danger': (
+//    'base': #db2828
+//  ),
+//  'error': (
+//    'base': #db2828
+//  ),
+//  'info': (
+//    'base': #42b8dd
+//  )
+//);
+
+//@forward "./var.scss" with (
+//  $colors: $--colors
+//);
+
+/*import dark theme 起作用*/
+//@use "./css-vars.scss" as *;
+html.base-theme {
+  /*element-plus section */
+  --el-menu-active-color: #409eff;
+  --el-menu-text-color: #bfcbd9;
+  --el-menu-hover-text-color: var(--el-color-primary);
+  --el-menu-bg-color: #304156;
+  --el-menu-hover-bg-color: #263445;
+  --el-menu-item-height: 56px;
+  --el-menu-border-color: none;
+  /*layout section*/
+  //layout
+  --layout-border-left-color: #ddd;
+  //Breadcrumb
+  --breadcrumb-no-redirect: #97a8be;
+  //Hamburger
+  --hamburger-color: #2b2f3a;
+  --hamburger-width: 20px;
+  --hamburger-height: 20px;
+  //Sidebar
+  --sidebar-el-icon-size: 20px;
+  --sidebar-logo-background: #2b2f3a;
+  --sidebar-logo-color: #ff9901;
+  --sidebar-logo-width: 32px;
+  --sidebar-logo-height: 32px;
+  --sidebar-logo-title-color: #fff;
+  --side-bar-width: 210px;
+  --side-bar-border-right-color: '#ddd';
+  //TagsView
+  --tags-view-background: #fff;
+  --tags-view-border-bottom: #d8dce5;
+  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  --tags-view-item-background: #fff;
+  --tags-view-item-border-color: #d8dce5;
+  --tags-view-item-color: #495060;
+  --tag-view-height: 32px;
+  --tags-view-item-active-background: #42b983;
+  --tags-view-item-active-color: #fff;
+  --tags-view-item-active-border-color: #42b983;
+  --tags-view-contextmenu-background: #fff;
+  --tags-view-contextmenu-color: #333;
+  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  --tags-view-contextmenu-hover-background: #eee;
+  //close-icon
+  --tags-view-close-icon-hover-background: #b4bccc;
+  --tags-view-close-icon-hover-color: #fff;
+  //AppMain.vue
+  --app-main-padding: 10px;
+  --app-main-background: #fff;
+  //Navbar.vue
+  --nav-bar-height: 50px;
+  --nav-bar-background: #fff;
+  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  --nav-bar-right-menu-background: #fff;
+}
diff --git a/src/theme/base/var.scss b/src/theme/base/var.scss
new file mode 100644
index 0000000..61c8566
--- /dev/null
+++ b/src/theme/base/var.scss
@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use 'element-plus/theme-chalk/src/common/var.scss' as common;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+@use 'element-plus/theme-chalk/src/color/index.scss' as *;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base')
+      )
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f
+  ),
+  $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1)
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72)
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72)
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72)
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000
+    )
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, ''))
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4)
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3)
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5)
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay')
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a
+  ),
+  $empty
+);
diff --git a/src/theme/dark/css-vars.scss b/src/theme/dark/css-vars.scss
new file mode 100644
index 0000000..14bb31b
--- /dev/null
+++ b/src/theme/dark/css-vars.scss
@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+// CSS3 var
+@use './var' as *;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}
diff --git a/src/theme/dark/index.scss b/src/theme/dark/index.scss
new file mode 100644
index 0000000..ac1a9ef
--- /dev/null
+++ b/src/theme/dark/index.scss
@@ -0,0 +1,89 @@
+/*custom dark variables*/
+$--colors: (
+  'primary': (
+    'base': #589ef8
+  ),
+  'success': (
+    'base': #21ba45
+  ),
+  'warning': (
+    'base': #f2711c
+  ),
+  'danger': (
+    'base': #db2828
+  ),
+  'error': (
+    'base': #db2828
+  ),
+  'info': (
+    'base': #42b8dd
+  )
+);
+
+@forward "./var.scss" with (
+  $colors: $--colors
+);
+
+/*import dark theme 起作用*/
+@use "./css-vars.scss" as *;
+
+html.dark {
+  //--el-menu-active-color: #409eff;
+  //--el-menu-text-color: #bfcbd9;
+  //--el-menu-hover-text-color: var(--el-color-primary);
+  //--el-menu-bg-color: #304156;
+  //--el-menu-hover-bg-color: #263445;
+  /*element-plus section */
+  //--el-menu-active-color: #409eff;
+  //--el-menu-text-color: #bfcbd9;
+  //--el-menu-hover-text-color: var(--el-color-primary);
+  //--el-menu-bg-color: #304156;
+  //--el-menu-hover-bg-color: #263445;
+  //--el-menu-item-height: 56px;
+
+  --el-menu-border-color: none;
+
+  /*layout section*/
+  //layout
+  --layout-border-left-color: #222;
+  //Breadcrumb
+  --breadcrumb-no-redirect: #97a8be;
+  //Hamburger
+  --hamburger-width: 20px;
+  --hamburger-height: 20px;
+  //Sidebar
+  --sidebar-el-icon-size: 20px;
+  //--sidebar-logo-background: #fff;
+  --sidebar-logo-color: #ff9901;
+  --sidebar-logo-width: 32px;
+  --sidebar-logo-height: 32px;
+  --sidebar-logo-title-color: #fff;
+  --side-bar-width: 210px;
+  --side-bar-border-right-color: '#ddd';
+  //TagsView
+  //--tags-view-background: #fff;
+  --tags-view-border-bottom: #222;
+  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  --tags-view-item-background: #fff;
+  --tags-view-item-border-color: #000;
+  --tags-view-item-color: #000;
+  --tag-view-height: 32px;
+  --tags-view-item-active-background: #42b983;
+  --tags-view-item-active-color: #fff;
+  --tags-view-item-active-border-color: #42b983;
+  --tags-view-contextmenu-background: #fff;
+  --tags-view-contextmenu-color: #333;
+  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  --tags-view-contextmenu-hover-background: #eee;
+  //close-icon
+  --tags-view-close-icon-hover-background: #b4bccc;
+  --tags-view-close-icon-hover-color: #fff;
+  //AppMain.vue
+  --app-main-padding: 10px;
+  //--app-main-background: #fff;
+  //Navbar.vue
+  --nav-bar-height: 50px;
+  //--nav-bar-background: #fff;
+  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  //--nav-bar-right-menu-background: #fff;
+}
diff --git a/src/theme/dark/var.scss b/src/theme/dark/var.scss
new file mode 100644
index 0000000..61c8566
--- /dev/null
+++ b/src/theme/dark/var.scss
@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use 'element-plus/theme-chalk/src/common/var.scss' as common;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+@use 'element-plus/theme-chalk/src/color/index.scss' as *;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base')
+      )
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f
+  ),
+  $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1)
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72)
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72)
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72)
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000
+    )
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, ''))
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4)
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3)
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5)
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay')
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a
+  ),
+  $empty
+);
diff --git a/src/theme/index.scss b/src/theme/index.scss
new file mode 100644
index 0000000..dfa170a
--- /dev/null
+++ b/src/theme/index.scss
@@ -0,0 +1,10 @@
+// we can add this to custom namespace, default is 'el'
+//@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
+//  $namespace: "el"
+//);
+
+//base-theme
+@use "./base";
+//theme style such as dark-theme lighting
+@use "./dark";
+@use "./lighting";
diff --git a/src/theme/lighting/css-vars.scss b/src/theme/lighting/css-vars.scss
new file mode 100644
index 0000000..425aa19
--- /dev/null
+++ b/src/theme/lighting/css-vars.scss
@@ -0,0 +1,29 @@
+@use 'sass:map';
+
+// CSS3 var
+@use './var' as *;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+
+html.lighting-theme {
+  color-scheme: 'lighting-theme';
+
+  // hex colors
+  //@each $type in (primary, success, warning, danger, error, info) {
+  //  @include set-css-color-type($colors, $type);
+  //}
+  //
+  //// --el-box-shadow-#{$type}
+  //@include set-component-css-var('box-shadow', $box-shadow);
+  //
+  //// color-scheme
+  //// Background --el-bg-color-#{$type}
+  //@include set-component-css-var('bg-color', $bg-color);
+  //// --el-text-color-#{$type}
+  //@include set-component-css-var('text-color', $text-color);
+  //// --el-border-color-#{$type}
+  //@include set-component-css-var('border-color', $border-color);
+  //// Fill --el-fill-color-#{$type}
+  //@include set-component-css-var('fill-color', $fill-color);
+  //@include set-component-css-var('mask-color', $mask-color);
+}
diff --git a/src/theme/lighting/index.scss b/src/theme/lighting/index.scss
new file mode 100644
index 0000000..c80b0c8
--- /dev/null
+++ b/src/theme/lighting/index.scss
@@ -0,0 +1,83 @@
+/*custom  variables*/
+$--colors: (
+  'primary': (
+    'base': #589ef8
+  ),
+  'success': (
+    'base': #21ba45
+  ),
+  'warning': (
+    'base': #f2711c
+  ),
+  'danger': (
+    'base': #db2828
+  ),
+  'error': (
+    'base': #db2828
+  ),
+  'info': (
+    'base': #42b8dd
+  )
+);
+
+@forward "./var.scss" with (
+  $colors: $--colors
+);
+
+/*import theme 起作用*/
+@use "./css-vars.scss" as *;
+html.lighting-theme {
+  /*element-plus section */
+  //--el-menu-active-color: #409eff;
+  //--el-menu-text-color: #bfcbd9;
+  //--el-menu-hover-text-color: var(--el-color-primary);
+  //--el-menu-bg-color: #304156;
+  //--el-menu-hover-bg-color: #263445;
+  //--el-menu-item-height: 56px;
+
+  --el-menu-border-color: none;
+
+  /*layout section*/
+  //layout
+  --layout-border-left-color: #ddd;
+  //Breadcrumb
+  --breadcrumb-no-redirect: #97a8be;
+  //Hamburger
+  --hamburger-width: 20px;
+  --hamburger-height: 20px;
+  //Sidebar
+  --sidebar-el-icon-size: 20px;
+  --sidebar-logo-background: #fff;
+  --sidebar-logo-color: #ff9901;
+  --sidebar-logo-width: 32px;
+  --sidebar-logo-height: 32px;
+  --sidebar-logo-title-color: #2b2f3a;
+  --side-bar-width: 210px;
+  --side-bar-border-right-color: '#ddd';
+  //TagsView
+  --tags-view-background: #fff;
+  --tags-view-border-bottom: #d8dce5;
+  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  --tags-view-item-background: #fff;
+  --tags-view-item-border-color: #d8dce5;
+  --tags-view-item-color: #495060;
+  --tag-view-height: 32px;
+  --tags-view-item-active-background: #42b983;
+  --tags-view-item-active-color: #fff;
+  --tags-view-item-active-border-color: #42b983;
+  --tags-view-contextmenu-background: #fff;
+  --tags-view-contextmenu-color: #333;
+  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  --tags-view-contextmenu-hover-background: #eee;
+  //close-icon
+  --tags-view-close-icon-hover-background: #b4bccc;
+  --tags-view-close-icon-hover-color: #fff;
+  //AppMain.vue
+  --app-main-padding: 10px;
+  --app-main-background: #fff;
+  //Navbar.vue
+  --nav-bar-height: 50px;
+  --nav-bar-background: #fff;
+  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  --nav-bar-right-menu-background: #fff;
+}
diff --git a/src/theme/lighting/var.scss b/src/theme/lighting/var.scss
new file mode 100644
index 0000000..a80d649
--- /dev/null
+++ b/src/theme/lighting/var.scss
@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use 'element-plus/theme-chalk/src/common/var.scss' as common;
+@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
+@use 'element-plus/theme-chalk/src/color/index.scss' as *;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base')
+      )
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/lighting level
+@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f
+  ),
+  $bg-color
+);
+
+// lighting-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'lighting', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'lightinger': rgba($border-color-base, 0.35),
+    'lighting': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1)
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72)
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72)
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72)
+    ),
+    'lighting': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000
+    )
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'lightinger': rgba($fill-color-base, 0.2),
+    'lighting': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, ''))
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4)
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, ''))
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3)
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5)
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay')
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a
+  ),
+  $empty
+);
diff --git a/src/theme/utils/dark.ts b/src/theme/utils/dark.ts
new file mode 100644
index 0000000..1ed14f0
--- /dev/null
+++ b/src/theme/utils/dark.ts
@@ -0,0 +1,3 @@
+export const toggleHtmlClass = (className) => {
+  document.getElementsByTagName('html')[0].className = className
+}
diff --git a/src/theme/utils/index.ts b/src/theme/utils/index.ts
new file mode 100644
index 0000000..e8d1566
--- /dev/null
+++ b/src/theme/utils/index.ts
@@ -0,0 +1 @@
+export * from './dark'
diff --git a/src/views/code-generator/CodeGenerator.vue b/src/views/code-generator/CodeGenerator.vue
index 0c2307b..89bbcc9 100644
--- a/src/views/code-generator/CodeGenerator.vue
+++ b/src/views/code-generator/CodeGenerator.vue
@@ -223,7 +223,7 @@ const dbChooseRadioClick = (item) => {
     tableName: changeDashToCase(removeTbOrT(item.tableName)),
     originTableName: item.tableName,
     tableDesc: item.tableComment,
-    tableNameCase: changeTheFirstWordToCase(removeTbOrT(item.tableName)),
+    tableNameCase: changeTheFirstWordToCase(changeDashToCase(removeTbOrT(item.tableName))),
     uniKey: 'id'
   }
 }
@@ -404,7 +404,7 @@ const generatorSubData = () => {
       apiConfig: {
         queryApi: `${reqApiPre}/selectPage`,
         queryApiType: 'get',
-        insertApi: `/insert`,
+        insertApi: `${reqApiPre}/insert`,
         insertApiType: 'post',
         updateApi: `${reqApiPre}/updateById`,
         updateApiType: 'update',
diff --git a/src/views/code-generator/ListTableConfig.vue b/src/views/code-generator/ListTableConfig.vue
index 1743097..26b931e 100644
--- a/src/views/code-generator/ListTableConfig.vue
+++ b/src/views/code-generator/ListTableConfig.vue
@@ -116,7 +116,8 @@ import {
   splitDescReturnDesc,
   splitDescReturnOptionData,
   splitTheOptionArr,
-  changeDashToCaseAndFirstWord
+  changeDashToCaseAndFirstWord,
+  listTableComponentTypeMapping
 } from './generatorUtis'
 import commonUtil from '@/utils/commonUtil'
 const setListTableData = (checkColumnArr) => {
@@ -129,7 +130,7 @@ const setListTableData = (checkColumnArr) => {
       fItem.tbName = fItem.columnName
 
       fItem.type = tbTypeMapping(fItem.dataType) //数据库和java中的类型做映射
-      fItem.componentType = componentTypeMapping(fItem.dataType, fItem.columnComment, fItem.columnName) //数据库和前端控件中的类型做映射
+      fItem.componentType = listTableComponentTypeMapping(fItem.dataType, fItem.columnComment, fItem.columnName) //数据库和前端控件中的类型做映射
       fItem.rule = 'isNotNull'
       fItem.value = 'value'
       fItem.label = 'label'
diff --git a/src/views/code-generator/code-generator-config/GeneratorConfigSave.vue b/src/views/code-generator/code-generator-config/GeneratorConfigSave.vue
new file mode 100644
index 0000000..dfd8158
--- /dev/null
+++ b/src/views/code-generator/code-generator-config/GeneratorConfigSave.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="scroll-y">
+    <!--操作-->
+    <div class="mr-3 rowSS">
+      <el-button type="primary" @click="addBtnClick">
+        <el-icon style="vertical-align: middle">
+          <FolderAdd />
+        </el-icon>
+        <span style="vertical-align: middle">增加</span>
+      </el-button>
+      <el-button type="primary" @click="multiDelBtnClick">
+        <el-icon style="vertical-align: middle">
+          <Delete />
+        </el-icon>
+        <span style="vertical-align: middle">删除</span>
+      </el-button>
+      <!--条件搜索-->
+      <el-form ref="refsearchForm" :inline="true" class="demo-searchForm ml-2">
+        <el-form-item prop="name">
+          <el-input v-model="searchForm.name" style="width: 120px" placeholder="选中的字段配置" />
+        </el-form-item>
+        <el-form-item prop="generatorConfig">
+          <el-input v-model="searchForm.generatorConfig" style="width: 120px" placeholder="生成的配置" />
+        </el-form-item>
+      </el-form>
+      <!--查询按钮-->
+      <el-button type="primary" @click="searchBtnClick">查询</el-button>
+    </div>
+    <!--表格和分页-->
+    <el-table
+      id="resetElementDialog"
+      ref="refuserTable"
+      :height="`calc(100vh - ${settings.delWindowHeight})`"
+      border="border"
+      :data="usertableData"
+    >
+      <el-table-column align="center" prop="name" label="选中的字段配置" min-width="120" />
+      <el-table-column align="center" prop="generatorConfig" label="生成的配置" min-width="120" />
+      <!--点击操作-->
+      <el-table-column fixed="right" align="center" label="操作" width="150">
+        <template #default="{ row }">
+          <div class="rowSS reset-element-button-left">
+            <el-button type="text" size="small" @click="tableEditClick(row)">编辑</el-button>
+            <el-button type="text" size="small" @click="tableDetailClick(row)">详情</el-button>
+            <el-button type="text" size="small" @click="tableDelClick(row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block columnCC mt-2">
+      <el-pagination
+        :current-page="pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalPage"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <el-dialog v-model="detailDialog" :title="dialogTitle" width="500px" :close-on-click-modal="false">
+      <div class="detail-container rowBC">
+        <div class="detail-container-item">：{{ detailData.id }}</div>
+      </div>
+      <div class="detail-container rowBC">
+        <div class="detail-container-item">选中的字段配置：{{ detailData.name }}</div>
+      </div>
+      <div class="detail-container rowBC">
+        <div class="detail-container-item">生成的配置：{{ detailData.generatorConfig }}</div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="detailDialog = false">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <GeneratorConfigSaveForm
+      v-if="showFrom"
+      ref="refGeneratorConfigSaveForm"
+      @hideComp="hideComp"
+      @selectPageReq="selectPageReq"
+    />
+  </div>
+</template>
+<script setup="setup" name="GeneratorConfigSave">
+import { Delete, FolderAdd } from '@element-plus/icons-vue'
+import tablePageHook from '@/hooks/useTablePage'
+import settings from '@/settings'
+import GeneratorConfigSaveForm from './GeneratorConfigSaveForm.vue'
+let totalPage = $ref(0)
+let startEndArr = $ref([])
+let usertableData = $ref([])
+let searchForm = reactive({ id: '', name: '', generatorConfig: '' })
+/*查询搜索相关*/
+let selectPageReq = () => {
+  const data = Object.assign(searchForm, {
+    pageNum: pageNum,
+    pageSize: pageSize
+  })
+  let reqConfig = {
+    url: '/integration-front/generatorConfigSave/selectPage',
+    method: 'get',
+    data,
+    isParams: true
+  }
+  axiosReq(reqConfig).then((resData) => {
+    usertableData = resData.data?.records
+    totalPage = resData.data?.total
+  })
+}
+let { pageNum, pageSize, handleCurrentChange, handleSizeChange } = tablePageHook(selectPageReq)
+const searchBtnClick = () => {
+  //此处要重置页数，也是常出的bug
+  pageNum = 1
+  selectPageReq()
+}
+//删除相关
+let { elMessage, elConfirm } = useElement()
+//多个删除
+const multipleSelection = $ref([])
+const refuserTable = $ref(null)
+const multiDelBtnClick = () => {
+  let rowDeleteIdArr = []
+  let deleteNameTitle = ''
+  rowDeleteIdArr = multipleSelection.map((mItem) => {
+    deleteNameTitle = deleteNameTitle + mItem.name + ','
+    return mItem.id
+  })
+  if (rowDeleteIdArr.length === 0) {
+    elMessage('表格选项不能为空', 'warning')
+    return
+  }
+  let stringLength = deleteNameTitle.length - 1
+  elConfirm('删除', `您确定要删除${deleteNameTitle}吗`)
+    .then(() => {
+      const data = rowDeleteIdArr
+      axiosReq({
+        url: `/integration-front/generatorConfigSave/deleteBatchIds`,
+        data,
+        method: 'delete',
+        bfLoading: true
+      }).then((res) => {
+        elMessage('删除成功')
+        selectPageReq()
+      })
+    })
+    .catch(() => {})
+}
+//单个删除
+let deleteByIdReq = (id) => {
+  return axiosReq({
+    url: '/integration-front/generatorConfigSave/deleteById',
+    data: { id: id },
+    isParams: true,
+    method: 'delete',
+    bfLoading: true
+  })
+}
+let tableDelClick = (row) => {
+  elConfirm('确定', `您确定要删除【${row.name}】吗？`)
+    .then(() => {
+      deleteByIdReq(row.id).then(() => {
+        selectPageReq()
+        elMessage(`【${row.name}】删除成功`)
+      })
+    })
+    .catch(() => {})
+}
+//添加和修改
+let tableEditClick = (row) => {
+  getDetailByIdReq(row.id).then((resData) => {
+    showFrom = true
+    nextTick(() => {
+      refGeneratorConfigSaveForm.showModal(true, resData.data)
+    })
+  })
+}
+let showFrom = $ref(false)
+const refGeneratorConfigSaveForm = $ref(null)
+let addBtnClick = () => {
+  showFrom = true
+  nextTick(() => {
+    refGeneratorConfigSaveForm.showModal()
+  })
+}
+const hideComp = () => {
+  showFrom = false
+}
+/*3.详情modal*/
+let detailData = $ref({})
+let dialogTitle = $ref('')
+let detailDialog = $ref(false)
+let tableDetailClick = (row) => {
+  dialogTitle = `详情【${row.name}】`
+  getDetailByIdReq(row.id).then((resData) => {
+    detailData = resData.data
+    detailDialog = true
+  })
+}
+let getDetailByIdReq = (id) => {
+  return axiosReq({
+    url: '/integration-front/generatorConfigSave/selectById',
+    data: { id },
+    isParams: true,
+    method: 'get'
+  })
+}
+onMounted(() => {
+  selectPageReq()
+})
+</script>
+
+<style scoped="scoped" lang="scss">
+/*详情*/
+.detail-container {
+  flex-wrap: wrap;
+}
+.detail-container-item {
+  min-width: 40%;
+  margin-bottom: 20px;
+}
+.detailDialog-title {
+  margin-bottom: 14px;
+  font-weight: bold;
+  font-size: 16px;
+}
+</style>
diff --git a/src/views/code-generator/code-generator-config/GeneratorConfigSaveForm.vue b/src/views/code-generator/code-generator-config/GeneratorConfigSaveForm.vue
new file mode 100644
index 0000000..054b9e2
--- /dev/null
+++ b/src/views/code-generator/code-generator-config/GeneratorConfigSaveForm.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="dialogTitle"
+    width="60vw"
+    :close-on-click-modal="false"
+    :before-close="closeFormModal"
+  >
+    <el-form ref="refForm" label-width="150px" :inline="false" :model="subForm" :rules="formRules" class="pr-5">
+      <el-form-item label="选中的字段配置" prop="name" :rules="formRules.isNotNull">
+        <el-input v-model="subForm.name" style="width: 120px" placeholder="选中的字段配置" />
+      </el-form-item>
+      <el-form-item label="生成的配置" prop="generatorConfig" :rules="formRules.isNotNull">
+        <el-input v-model="subForm.generatorConfig" style="width: 120px" placeholder="生成的配置" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeFormModal">取 消</el-button>
+        <el-button type="primary" @click="confirmBtnClick">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup="setup" name="GeneratorConfigSaveForm">
+const emit = defineEmits(['selectPageReq', 'hideComp'])
+const { formRules, elMessage } = useElement()
+/*2.modal新增和修改*/
+//新增
+let subForm = reactive({ id: '', name: '', generatorConfig: '' })
+const refForm = $ref(null)
+let confirmBtnClick = () => {
+  refForm.validate((valid) => {
+    if (valid) {
+      if (subForm.id) {
+        updateReq()
+      } else {
+        insertReq()
+      }
+    } else {
+      return false
+    }
+  })
+}
+const insertReq = () => {
+  const data = JSON.parse(JSON.stringify(subForm))
+  delete data.id
+  axiosReq({
+    url: '/integration-front/generatorConfigSave/insert',
+    data: data,
+    method: 'post',
+    bfLoading: true
+  }).then(() => {
+    elMessage('保存成功')
+    emit('selectPageReq')
+    emit('hideComp')
+  })
+}
+//修改
+const reshowData = (row) => {
+  Object.keys(row).forEach((fItem) => {
+    Object.keys(subForm).forEach((sItem) => {
+      if (fItem === sItem) {
+        subForm[sItem] = row[sItem]
+      }
+    })
+  })
+}
+const updateReq = () => {
+  return axiosReq({
+    url: '/integration-front/generatorConfigSave/updateById',
+    data: subForm,
+    method: 'update',
+    bfLoading: true
+  }).then(() => {
+    elMessage('更新成功')
+    emit('selectPageReq')
+    emit('hideComp')
+  })
+}
+
+/*3.弹框相关*/
+//显示弹框
+let dialogTitle = $ref(null)
+let dialogVisible = $ref(null)
+let chooseFileName = $ref(null)
+let showModal = (isEdit, detailData) => {
+  if (isEdit) {
+    dialogTitle = `编辑【配置】`
+    dialogVisible = true
+    reshowData(detailData)
+  } else {
+    dialogTitle = '添加【配置】'
+    dialogVisible = true
+  }
+}
+//关闭弹框
+let closeFormModal = () => {
+  emit('hideComp')
+}
+onMounted(() => {})
+//导出给refs使用
+defineExpose({ showModal })
+</script>
+
+<style scoped="scoped" lang="scss"></style>
diff --git a/src/views/code-generator/code-generator-config/index.js b/src/views/code-generator/code-generator-config/index.js
new file mode 100644
index 0000000..6a4d45a
--- /dev/null
+++ b/src/views/code-generator/code-generator-config/index.js
@@ -0,0 +1,3 @@
+import component from './GeneratorConfigSave.vue'
+
+export default component
diff --git a/src/views/code-generator/generatorUtis.js b/src/views/code-generator/generatorUtis.js
index 9e5570b..a8291cc 100644
--- a/src/views/code-generator/generatorUtis.js
+++ b/src/views/code-generator/generatorUtis.js
@@ -22,6 +22,7 @@ export const changeDashToCase = (str) => {
 
 //首字母转大写和_转驼峰
 export const changeDashToCaseAndFirstWord = (str) => {
+  if (!str) return str
   let changeStr = ``
   if (str && str.includes('_')) {
     let arr = str.split(`_`)
@@ -30,9 +31,8 @@ export const changeDashToCaseAndFirstWord = (str) => {
     })
     changeStr = newArr.join(``)
   }
-  if (typeof str === 'string') {
-    changeStr = changeStr.slice(0, 1).toUpperCase() + changeStr.slice(1)
-  }
+  changeStr = changeStr || str
+  changeStr = changeStr.slice(0, 1).toUpperCase() + changeStr.slice(1)
   return changeStr
 }
 
@@ -69,7 +69,7 @@ export const tbTypeMapping = (type) => {
     return 'Double'
   } else if ('int,bit,tinyint'.includes(type)) {
     return 'Integer'
-  } else if ('bigInt'.includes(type)) {
+  } else if ('bigint'.includes(type)) {
     return 'Long'
   } else if ('datetime,timestamp'.includes(type)) {
     return 'Date'
@@ -129,19 +129,35 @@ export const listTableComponentTypeArr = [
  * @author 熊猫哥
  * @date 2022/6/4 10:23
  */
+const commitTail = ':'
+const commitExampleTail = '='
+const commitExampleSplit = ','
 export const componentTypeMapping = (type, commont, field) => {
   if (field.includes('id')) {
     return ''
   }
-  if (commont.includes('；') || commont.includes('1：')) {
+  if (commont.includes(commitTail) || commont.includes(commitExampleTail)) {
     return 'select'
   }
-  if ('datetime,timestamp,Date'.includes(type)) {
+  if ('datetime,timestamp,Date,time'.includes(type)) {
     return 'datetime'
   }
   return 'input'
 }
 
+export const listTableComponentTypeMapping = (type, commont, field) => {
+  if (field.includes('id')) {
+    return ''
+  }
+  if (commont.includes(commitTail) || commont.includes(commitExampleTail)) {
+    return 'select'
+  }
+  // if ('datetime,timestamp,Date,time'.includes(type)) {
+  //   return 'datetime'
+  // }
+  return 'input'
+}
+
 //资管家校验规则
 export const ruleMapping = [
   { key: 'isNotNull', label: '必填' },
@@ -153,7 +169,7 @@ export const ruleMapping = [
 export const splitDescReturnDesc = (desc) => {
   if (isSelectType(desc)) {
     desc = desc.replace(/[\r\n\t]/g, '').replace(/\ +/g, '')
-    const index = desc.indexOf('；')
+    const index = desc.indexOf(commitTail)
     return desc.substring(0, index)
   }
   return desc
@@ -162,7 +178,7 @@ export const splitDescReturnDesc = (desc) => {
 export const splitDescReturnOptionData = (desc) => {
   if (isSelectType(desc)) {
     desc = desc.replace(/[\r\n\t]/g, '').replace(/\ +/g, '')
-    const index = desc.indexOf('；')
+    const index = desc.indexOf(commitTail)
     return desc.substr(index + 1)
   }
   return ''
@@ -171,7 +187,7 @@ export const splitDescReturnOptionData = (desc) => {
 /**
  *
  * @param string 传入的string
- * @example '1：大于短信，2：阿里短信'
+ * @example '1=大于短信,2=阿里短信'
  * @return
  * @author 邝华
  * @email kuanghua@aulton.com
@@ -179,7 +195,7 @@ export const splitDescReturnOptionData = (desc) => {
  */
 const { elMessage } = useElement()
 export const isSelectType = (desc) => {
-  return desc.includes('1：')
+  return desc.includes('1=')
 }
 export const splitTheOptionArr = (string) => {
   if (!string) {
@@ -189,14 +205,14 @@ export const splitTheOptionArr = (string) => {
     elMessage(string + '传入有误', 'warning')
     return []
   }
-  let tsArr = string.split('，')
+  let tsArr = string.split(commitExampleSplit)
   tsArr = tsArr.map((mfItem) => {
     //去除空格和换行
     return mfItem.replace(/[\r\n]/g, '').replace(/\ +/g, '')
   })
 
   return tsArr.map((mItem) => {
-    let splitArr = mItem.split('：')
+    let splitArr = mItem.split(commitExampleTail)
     return {
       value: splitArr[0],
       label: splitArr[1]
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 27b8a2a..bc2b8c6 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -1,258 +1,22 @@
 <template>
-  <div class="login-container columnCE">
-    <div class="login-hero">
-      <img src="@/assets/layout/login.svg" :alt="settings.title" />
-    </div>
-    <el-form ref="refloginForm" class="login-form" :model="formInline" :rules="formRules">
-      <div class="title-container">
-        <h3 class="title text-center">{{ settings.title }}</h3>
-      </div>
-      <el-form-item prop="username" :rules="formRules.isNotNull">
-        <span class="svg-container">
-          <ElSvgIcon name="User" :size="14" />
-        </span>
-        <el-input v-model="formInline.username" placeholder="用户名(admin)" />
-          <!--占位-->
-      </el-form-item>
-      <el-form-item prop="password" :rules="formRules.isNotNull">
-        <span class="svg-container">
-          <ElSvgIcon name="Lock" :size="14" />
-        </span>
-        <el-input
-          :key="passwordType"
-          ref="refPassword"
-          v-model="formInline.password"
-          :type="passwordType"
-          name="password"
-          placeholder="密码(123456)"
-          @keyup.enter="handleLogin"
-        />
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-        </span>
-      </el-form-item>
-      <div class="tip-message">{{ tipMessage }}</div>
-      <el-button :loading="loading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
-        登录
-      </el-button>
-    </el-form>
-  </div>
+  <component :is="Component" />
 </template>
 
-<script setup name="Login">
-import settings from '@/settings'
+<script setup>
+import LoginAlt from './login-alt.vue'
+import LoginBase from './login-base.vue'
+import LoginLighting from './login-lighting.vue'
 
-import { ElMessage } from 'element-plus'
-import { useUserStore } from '@/store/user'
-//element valid
-const formRules = useElement().formRules
-//form
-let formInline = reactive({
-  username: 'admin',
-  password: '123456'
-})
-let state = reactive({
-  otherQuery: {},
-  redirect: undefined
-})
-
-/* listen router change  */
-const route = useRoute()
-let getOtherQuery = (query) => {
-  return Object.keys(query).reduce((acc, cur) => {
-    if (cur !== 'redirect') {
-      acc[cur] = query[cur]
-    }
-    return acc
-  }, {})
-}
-
-watch(
-  () => route.query,
-  (query) => {
-    if (query) {
-      state.redirect = query.redirect
-      state.otherQuery = getOtherQuery(query)
-    }
-  },
-  { immediate: true }
-)
-
-/*
- *  login relative
- * */
-let loading = ref(false)
-let tipMessage = ref('')
+const renderNum = Math.floor(Math.random() * 10) + 1
 
-const refloginForm = ref(null)
-let handleLogin = () => {
-  refloginForm.value.validate((valid) => {
-    if (valid) {
-      loginReq()
-    } else {
-      return false
-    }
-  })
-}
-
-//use the auto import from vite.config.js of AutoImport
-const router = useRouter()
-let loginReq = () => {
-  loading.value = true
-  const userStore = useUserStore()
-  userStore
-    .login(formInline)
-    .then(() => {
-      ElMessage({ message: '登录成功', type: 'success' })
-      router.push({ path: state.redirect || '/', query: state.otherQuery })
-    })
-    .catch((res) => {
-      tipMessage.value = res.msg
-      useCommon()
-        .sleep(30)
-        .then(() => {
-          loading.value = false
-        })
-    })
-}
-/*
- *  password show or hidden
- * */
-let passwordType = ref('password')
-const refPassword = ref(null)
-let showPwd = () => {
-  if (passwordType.value === 'password') {
-    passwordType.value = ''
-  } else {
-    passwordType.value = 'password'
+const Component = computed(() => {
+  if (renderNum <= 2) {
+    return LoginBase
+  } else if (renderNum <= 4 && renderNum > 2) {
+    return LoginLighting
   }
-  nextTick(() => {
-    refPassword.value.focus()
-  })
-}
+  return LoginAlt
+})
 </script>
 
-<style lang="scss" scoped>
-$bg: #FBFCFF;
-$dark_gray: #333;
-$gray: #999;
-$light_gray: #eee;
-.login-container {
-  height: 100vh;
-  position: relative;
-  width: 100%;
-  background-color: $bg;
-  .login-form {
-    width: 360px;
-    padding: 40px 30px;
-    background: #fff;
-    box-shadow: 0px 4px 16px rgba(4, 61, 175, 0.15);
-    border-radius: 8px;
-    margin-right: 20vw;
-    z-index: 10;
-    @media screen and (min-width: 769px) and (max-width: 992px) {
-        margin-right: 10vw;
-    }
-    @media only screen and (max-width: 768px) {
-        margin-right: auto;
-        margin-left: auto;
-    }
-  }
-  .title-container {
-    .title {
-      font-size: 18px;
-      color: $dark_gray;
-      margin: 0px auto 25px auto;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
-}
-.login-hero{
-  width:40vw;
-  position: absolute;
-  top:50%;
-  left:15vw;
-  z-index: 0;
-  transform: translateY(-50%);
-  @media screen and (min-width: 769px) and (max-width: 992px) {
-      width:60vw;
-      left:5vw;
-  }
-  @media screen and (max-width: 768px) {
-      width:100vw;
-      left:0;
-  }
-  img{
-    width: 100%;
-  }
-}
-.svg-container {
-  padding-left: 16px;
-  color: $gray;
-  text-align: center;
-  width: 30px;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-//错误提示信息
-.tip-message {
-  color: #e4393c;
-  height: 30px;
-  margin-top: -12px;
-  font-size: 12px;
-}
-
-//登录按钮
-.login-btn {
-  width: 100%;
-  margin-bottom: 30px;
-}
-.show-pwd {
-  width: 50px;
-  font-size: 16px;
-  color: $gray;
-  cursor: pointer;
-  text-align: center;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-</style>
-
-<style lang="scss">
-//css 样式重置 增加个前缀避免全局污染
-.login-container {
-  .el-input__wrapper {
-    background-color: transparent;
-    box-shadow: none;
-  }
-  .el-form-item {
-    border:  1px solid #E0E0E0;
-    background: #fff;
-    border-radius: 4px;
-    color: #999;
-    &__content{
-      position: relative;
-    }
-  }
-  .el-input input {
-    background: transparent;
-    border: 0px;
-    -webkit-appearance: none;
-    border-radius: 0px;
-    padding: 10px 5px 10px 35px;
-    color: #999;
-    height: 42px; //此处调整item的高度
-    caret-color: #999;
-  }
-  //hiden the input border
-  .el-input__inner {
-    box-shadow: none !important;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/login/Login-alt.vue b/src/views/login/login-alt.vue
similarity index 100%
rename from src/views/login/Login-alt.vue
rename to src/views/login/login-alt.vue
diff --git a/src/views/login/login-base.vue b/src/views/login/login-base.vue
new file mode 100644
index 0000000..d579c9d
--- /dev/null
+++ b/src/views/login/login-base.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="login-container columnCC">
+    <el-form ref="refloginForm" class="login-form" :model="formInline" :rules="formRules">
+      <div class="title-container">
+        <h3 class="title text-center">{{ settings.title }}</h3>
+      </div>
+      <el-form-item prop="username" :rules="formRules.isNotNull">
+        <div class="rowSC">
+          <span class="svg-container">
+            <svg-icon icon-class="user" />
+          </span>
+          <el-input v-model="formInline.username" placeholder="用户名(admin)" />
+          <!--占位-->
+          <div class="show-pwd" />
+        </div>
+      </el-form-item>
+      <!--<el-form-item prop="password" :rules="formRules.passwordValid">-->
+      <el-form-item prop="password" :rules="formRules.isNotNull">
+        <div class="rowSC flex-1">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            :key="passwordType"
+            ref="refPassword"
+            v-model="formInline.password"
+            :type="passwordType"
+            name="password"
+            placeholder="password(123456)"
+            @keyup.enter="handleLogin"
+          />
+          <span class="show-pwd" @click="showPwd">
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          </span>
+        </div>
+      </el-form-item>
+      <div class="tip-message">{{ tipMessage }}</div>
+      <el-button :loading="loading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
+        Login
+      </el-button>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import settings from '@/settings'
+
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/store/user'
+//element valid
+const formRules = useElement().formRules
+//form
+let formInline = reactive({
+  username: 'admin',
+  password: '123456'
+})
+let state = reactive({
+  otherQuery: {},
+  redirect: undefined
+})
+
+/* listen router change  */
+const route = useRoute()
+let getOtherQuery = (query) => {
+  return Object.keys(query).reduce((acc, cur) => {
+    if (cur !== 'redirect') {
+      acc[cur] = query[cur]
+    }
+    return acc
+  }, {})
+}
+
+watch(
+  () => route.query,
+  (query) => {
+    if (query) {
+      state.redirect = query.redirect
+      state.otherQuery = getOtherQuery(query)
+    }
+  },
+  { immediate: true }
+)
+
+/*
+ *  login relative
+ * */
+let loading = ref(false)
+let tipMessage = ref('')
+
+const refloginForm = ref(null)
+let handleLogin = () => {
+  refloginForm.value.validate((valid) => {
+    if (valid) {
+      loginReq()
+    } else {
+      return false
+    }
+  })
+}
+
+//use the auto import from vite.config.js of AutoImport
+const router = useRouter()
+let loginReq = () => {
+  loading.value = true
+  const userStore = useUserStore()
+  userStore
+    .login(formInline)
+    .then(() => {
+      ElMessage({ message: '登录成功', type: 'success' })
+      router.push({ path: state.redirect || '/', query: state.otherQuery })
+    })
+    .catch((res) => {
+      tipMessage.value = res.msg
+      useCommon()
+        .sleep(30)
+        .then(() => {
+          loading.value = false
+        })
+    })
+}
+/*
+ *  password show or hidden
+ * */
+let passwordType = ref('password')
+const refPassword = ref(null)
+let showPwd = () => {
+  if (passwordType.value === 'password') {
+    passwordType.value = ''
+  } else {
+    passwordType.value = 'password'
+  }
+  nextTick(() => {
+    refPassword.value.focus()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+.login-container {
+  height: 100vh;
+  width: 100%;
+  background-color: #2d3a4b;
+  .login-form {
+    margin-bottom: 20vh;
+    width: 360px;
+  }
+  .title-container {
+    .title {
+      font-size: 22px;
+      color: #eee;
+      margin: 0px auto 25px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+}
+
+.svg-container {
+  padding-left: 6px;
+  color: $dark_gray;
+  text-align: center;
+  width: 30px;
+}
+
+//错误提示信息
+.tip-message {
+  color: #e4393c;
+  height: 30px;
+  margin-top: -12px;
+  font-size: 12px;
+}
+
+//登录按钮
+.login-btn {
+  width: 100%;
+  margin-bottom: 30px;
+}
+.show-pwd {
+  width: 50px;
+  font-size: 16px;
+  color: $dark_gray;
+  cursor: pointer;
+  text-align: center;
+}
+</style>
+
+<style lang="scss">
+//css 样式重置 增加个前缀避免全局污染
+.login-container {
+  .el-input__wrapper {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+  .el-input input {
+    background: transparent;
+    border: 0px;
+    -webkit-appearance: none;
+    border-radius: 0px;
+    padding: 10px 5px 10px 15px;
+    color: #fff;
+    height: 42px; //此处调整item的高度
+    caret-color: #fff;
+  }
+  //hiden the input border
+  .el-input__inner {
+    box-shadow: none !important;
+  }
+}
+</style>
diff --git a/src/views/login/login-lighting.vue b/src/views/login/login-lighting.vue
new file mode 100644
index 0000000..5743c9a
--- /dev/null
+++ b/src/views/login/login-lighting.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="login-container columnCE">
+    <div class="login-hero">
+      <img src="@/assets/layout/login.svg" :alt="settings.title" />
+    </div>
+    <el-form ref="refloginForm" class="login-form" :model="formInline" :rules="formRules">
+      <div class="title-container">
+        <h3 class="title text-center">{{ settings.title }}</h3>
+      </div>
+      <el-form-item prop="username" :rules="formRules.isNotNull">
+        <span class="svg-container">
+          <ElSvgIcon name="User" :size="14" />
+        </span>
+        <el-input v-model="formInline.username" placeholder="用户名(admin)" />
+        <!--占位-->
+      </el-form-item>
+      <el-form-item prop="password" :rules="formRules.isNotNull">
+        <span class="svg-container">
+          <ElSvgIcon name="Lock" :size="14" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="refPassword"
+          v-model="formInline.password"
+          :type="passwordType"
+          name="password"
+          placeholder="密码(123456)"
+          @keyup.enter="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+      </el-form-item>
+      <div class="tip-message">{{ tipMessage }}</div>
+      <el-button :loading="loading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
+        登录
+      </el-button>
+    </el-form>
+  </div>
+</template>
+
+<script setup name="Login">
+import settings from '@/settings'
+
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/store/user'
+//element valid
+const formRules = useElement().formRules
+//form
+let formInline = reactive({
+  username: 'admin',
+  password: '123456'
+})
+let state = reactive({
+  otherQuery: {},
+  redirect: undefined
+})
+
+/* listen router change  */
+const route = useRoute()
+let getOtherQuery = (query) => {
+  return Object.keys(query).reduce((acc, cur) => {
+    if (cur !== 'redirect') {
+      acc[cur] = query[cur]
+    }
+    return acc
+  }, {})
+}
+
+watch(
+  () => route.query,
+  (query) => {
+    if (query) {
+      state.redirect = query.redirect
+      state.otherQuery = getOtherQuery(query)
+    }
+  },
+  { immediate: true }
+)
+
+/*
+ *  login relative
+ * */
+let loading = ref(false)
+let tipMessage = ref('')
+
+const refloginForm = ref(null)
+let handleLogin = () => {
+  refloginForm.value.validate((valid) => {
+    if (valid) {
+      loginReq()
+    } else {
+      return false
+    }
+  })
+}
+
+//use the auto import from vite.config.js of AutoImport
+const router = useRouter()
+let loginReq = () => {
+  loading.value = true
+  const userStore = useUserStore()
+  userStore
+    .login(formInline)
+    .then(() => {
+      ElMessage({ message: '登录成功', type: 'success' })
+      router.push({ path: state.redirect || '/', query: state.otherQuery })
+    })
+    .catch((res) => {
+      tipMessage.value = res.msg
+      useCommon()
+        .sleep(30)
+        .then(() => {
+          loading.value = false
+        })
+    })
+}
+/*
+ *  password show or hidden
+ * */
+let passwordType = ref('password')
+const refPassword = ref(null)
+let showPwd = () => {
+  if (passwordType.value === 'password') {
+    passwordType.value = ''
+  } else {
+    passwordType.value = 'password'
+  }
+  nextTick(() => {
+    refPassword.value.focus()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+$bg: #fbfcff;
+$dark_gray: #333;
+$gray: #999;
+$light_gray: #eee;
+.login-container {
+  height: 100vh;
+  position: relative;
+  width: 100%;
+  background-color: $bg;
+  .login-form {
+    width: 360px;
+    padding: 40px 30px;
+    background: #fff;
+    box-shadow: 0px 4px 16px rgba(4, 61, 175, 0.15);
+    border-radius: 8px;
+    margin-right: 20vw;
+    z-index: 10;
+    @media screen and (min-width: 769px) and (max-width: 992px) {
+      margin-right: 10vw;
+    }
+    @media only screen and (max-width: 768px) {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+  .title-container {
+    .title {
+      font-size: 18px;
+      color: $dark_gray;
+      margin: 0px auto 25px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+}
+.login-hero {
+  width: 40vw;
+  position: absolute;
+  top: 50%;
+  left: 15vw;
+  z-index: 0;
+  transform: translateY(-50%);
+  @media screen and (min-width: 769px) and (max-width: 992px) {
+    width: 60vw;
+    left: 5vw;
+  }
+  @media screen and (max-width: 768px) {
+    width: 100vw;
+    left: 0;
+  }
+  img {
+    width: 100%;
+  }
+}
+.svg-container {
+  padding-left: 16px;
+  color: $gray;
+  text-align: center;
+  width: 30px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+//错误提示信息
+.tip-message {
+  color: #e4393c;
+  height: 30px;
+  margin-top: -12px;
+  font-size: 12px;
+}
+
+//登录按钮
+.login-btn {
+  width: 100%;
+  margin-bottom: 30px;
+}
+.show-pwd {
+  width: 50px;
+  font-size: 16px;
+  color: $gray;
+  cursor: pointer;
+  text-align: center;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>
+
+<style lang="scss">
+//css 样式重置 增加个前缀避免全局污染
+.login-container {
+  .el-input__wrapper {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .el-form-item {
+    border: 1px solid #e0e0e0;
+    background: #fff;
+    border-radius: 4px;
+    color: #999;
+    &__content {
+      position: relative;
+    }
+  }
+  .el-input input {
+    background: transparent;
+    border: 0px;
+    -webkit-appearance: none;
+    border-radius: 0px;
+    padding: 10px 5px 10px 35px;
+    color: #999;
+    height: 42px; //此处调整item的高度
+    caret-color: #999;
+  }
+  //hiden the input border
+  .el-input__inner {
+    box-shadow: none !important;
+  }
+}
+</style>
diff --git a/src/views/use-example/countTo/countTo.vue b/src/views/use-example/countTo/countTo.vue
index 5fa8890..341e575 100644
--- a/src/views/use-example/countTo/countTo.vue
+++ b/src/views/use-example/countTo/countTo.vue
@@ -1,18 +1,20 @@
 <template>
-  <span>
-    {{ value.toFixed(2) }}
-  </span>
-  <el-button class="ml-1" type="primary" @click="toggle">开始</el-button>
+  <div>
+    <span>
+      {{ value.toFixed(2) }}
+    </span>
+    <el-button class="ml-1" type="primary" @click="toggle">开始</el-button>
+  </div>
 </template>
 <script setup>
-import { useTransition, TransitionPresets } from "@vueuse/core";
+import { useTransition, TransitionPresets } from '@vueuse/core'
 
 const baseNumber = ref(0)
 const duration = 2500
 
 const toggle = () => {
   baseNumber.value += 100
-};
+}
 const value = useTransition(baseNumber, {
   duration,
   //动画效果库
diff --git a/vite.config.js b/vite.config.js
index 31fbced..534aca6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,8 +11,8 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 //setup name
 import VueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
 
-//auto import element-plus has some issue
-// import Components from 'unplugin-vue-components/vite'
+// auto import element-plus has some issue
+import Components from 'unplugin-vue-components/vite'
 // import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 //auto import vue https://www.npmjs.com/package/unplugin-auto-import
@@ -35,19 +35,16 @@ try {
 } catch (e) {
   console.log('.git仓库为空或者未安装git')
 }
+
+import { optimizeDepsArr } from './optimize-include'
+const pathSrc = path.resolve(__dirname, 'src')
 export default ({ command, mode }) => {
   /*
    console.log(command, mode)
   * serve serve-dev
   * */
   return {
-    /*
-     * "/vue3-admin-plus" nginx deploy folder
-     * detail to look https://vitejs.cn/config/#base
-     * how to config, such as https://github.jzfai.top/vue3-admin-plus/#/dashboard
-     * "/vue3-admin-plus/" --> config to base is you need
-     * https://github.jzfai.top --> if you config "/" , you can visit attached  to https://github.jzfai.top
-     * */
+    //detail to look https://vitejs.cn/config/#base
     base: setting.viteBasePath,
     //define global var
     define: {
@@ -81,8 +78,13 @@ export default ({ command, mode }) => {
       strictPort: true
     },
     plugins: [
-      vue({
-        refTransform: true // 开启ref转换 还是实验性   use example for $ref
+      vue({ reactivityTransform: true }),
+      Components({
+        // resolvers: [
+        //   ElementPlusResolver({
+        //     importStyle: 'sass'
+        //   })
+        // ]
       }),
       vueJsx(),
       // legacy({
@@ -113,6 +115,7 @@ export default ({ command, mode }) => {
         // resolvers: [ElementPlusResolver()],
         imports: [
           'vue',
+          'pinia',
           'vue-router',
           {
             '@/hooks/global/useCommon': ['useCommon'],
@@ -137,9 +140,6 @@ export default ({ command, mode }) => {
           }
         }
       })
-      // Components({
-      //   resolvers: [ElementPlusResolver()]
-      // })
     ],
     build: {
       minify: 'terser',
@@ -167,38 +167,39 @@ export default ({ command, mode }) => {
     },
     resolve: {
       alias: {
-        '@': resolve(__dirname, 'src'),
+        '~/': `${pathSrc}/`,
+        '@/': `${pathSrc}/`,
         //remove i18n waring
         'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
       }
-      // why remove it , look for https://github.com/vitejs/vite/issues/6026
+      //why remove it , look for https://github.com/vitejs/vite/issues/6026
       // extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
     },
     css: {
-      postcss: {
-        //remove build charset warning
-        plugins: [
-          {
-            postcssPlugin: 'internal:charset-removal',
-            AtRule: {
-              charset: (atRule) => {
-                if (atRule.name === 'charset') {
-                  atRule.remove()
-                }
-              }
-            }
-          }
-        ]
-      },
+      // postcss: {
+      //   //remove build charset warning
+      //   plugins: [
+      //     {
+      //       postcssPlugin: 'internal:charset-removal',
+      //       AtRule: {
+      //         charset: (atRule) => {
+      //           if (atRule.name === 'charset') {
+      //             atRule.remove()
+      //           }
+      //         }
+      //       }
+      //     }
+      //   ]
+      // },
       preprocessorOptions: {
         //define global scss variable
         scss: {
-          additionalData: `@import "@/styles/variables.scss";`
+          additionalData: `@use '@/theme/index.scss' as * ;`
         }
       }
     },
     optimizeDeps: {
-      include: ['moment-mini']
+      include: ['element-plus/es', 'moment-mini', ...optimizeDepsArr()]
     }
   }
 }