Add Theme func detail to look v1.8.1 update log

.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'

.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,

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "npm.packageManager": "yarn"
+  "npm.packageManager": "pnpm"
 }

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']

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 {}

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" />

optimize-include.ts

@@ -0,0 +1,122 @@
+// const fs = require('fs')
+// const files = fs.readdirSync(
+//   'D:\\github\\vue3-admin-ts\\node_modules\\.pnpm\\[email protected][email protected]\\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 []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-admin-plus",
-  "version": "1.6.2",
+  "version": "1.8.1",
   "license": "ISC",
   "author": "kuanghua([email protected])",
   "packageManager": "[email protected]",
@@ -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%",

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)