'admin-21.03.14:此次版本变动大！新增eslint、prettier、vuex模块化、echartsMap等系列优化'

.eslintignore

@@ -0,0 +1,18 @@
+
+*.sh
+node_modules
+lib
+*.md
+*.scss
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+mock
+public
+bin
+build
+config
+index.html
+src/assets

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
+	},
+	parser: 'vue-eslint-parser',
+	parserOptions: {
+		ecmaVersion: 12,
+		parser: '@typescript-eslint/parser',
+		sourceType: 'module',
+	},
+	extends: ['plugin:vue/essential'],
+	plugins: ['vue', '@typescript-eslint'],
+	rules: {
+		// http://eslint.cn/docs/rules/
+		// https://eslint.vuejs.org/rules/
+		'@type-eslint/ban-ts-ignore': 'off',
+		'@type-eslint/explicit-function-return-type': 'off',
+		'@type-eslint/no-explicit-any': 'off',
+		'@type-eslint/no-var-requires': 'off',
+		'@type-eslint/no-empty-function': 'off',
+		'@type-eslint/no-use-before-define': 'off',
+		'@type-eslint/ban-ts-comment': 'off',
+		'@type-eslint/ban-types': 'off',
+		'@type-eslint/no-non-null-assertion': 'off',
+		'@type-eslint/explicit-module-boundary-types': 'off',
+		'vue/custom-event-name-casing': 'off',
+		'vue/attributes-order': 'off',
+		'vue/one-component-per-file': 'off',
+		'vue/html-closing-bracket-newline': 'off',
+		'vue/max-attributes-per-line': 'off',
+		'vue/multiline-html-element-content-newline': 'off',
+		'vue/singleline-html-element-content-newline': 'off',
+		'vue/attribute-hyphenation': 'off',
+		'vue/html-self-closing': 'off',
+		'vue/no-multiple-template-root': 'off',
+		'vue/require-default-prop': 'off',
+		'vue/no-v-model-argument': 'off',
+		'vue/no-arrow-functions-in-watch': 'off',
+		'vue/no-template-key': 'off',
+		'vue/no-v-html': 'off',
+		'no-use-before-define': 'off',
+		'no-restricted-globals': 'off',
+		'no-restricted-syntax': 'off',
+		'generator-star-spacing': 'off',
+		'no-unreachable': 'off',
+		'no-multiple-template-root': 'off',
+		'no-unused-vars': 'error',
+		'no-v-model-argument': 'off',
+	},
+};

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.vscode

.prettierrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+	// 一行最多多少个字符
+	printWidth: 150,
+	// 指定每个缩进级别的空格数
+	tabWidth: 2,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 在语句末尾打印分号
+	semi: true,
+	// 使用单引号而不是双引号
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: false,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+	trailingComma: 'es5',
+	// 在对象文字中的括号之间打印空格
+	bracketSpacing: true,
+	// jsx 标签的反尖括号需要换行
+	jsxBracketSameLine: false,
+	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+	arrowParens: 'always',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 不需要自动在文件开头插入 @prettier
+	insertPragma: false,
+	// 使用默认的折行标准 always\never\preserve
+	proseWrap: 'preserve',
+	// 指定HTML文件的全局空格敏感度 css\strict\ignore
+	htmlWhitespaceSensitivity: 'css',
+	// Vue文件脚本和样式标签缩进
+	vueIndentScriptAndStyle: false,
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'lf',
+}

build/utils.ts

@@ -1,24 +0,0 @@
-// vite 打包相关
-import dotenv from 'dotenv'
-export interface ViteEnv {
-    VITE_PORT: number,
-    VITE_OPEN: boolean,
-    VITE_PUBLIC_PATH: string
-}
-
-export function loadEnv(): ViteEnv {
-    const env = process.env.NODE_ENV
-    const ret: any = {}
-    const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,]
-    envList.forEach((e) => { dotenv.config({ path: e }) })
-    for (const envName of Object.keys(process.env)) {
-        console.log(envName)
-        let realName = (process.env as any)[envName].replace(/\\n/g, '\n')
-        realName = realName === 'true' ? true : realName === 'false' ? false : realName
-        if (envName === 'VITE_PORT') realName = Number(realName)
-        if (envName === 'VITE_OPEN') realName = Boolean(realName)
-        ret[envName] = realName
-        process.env[envName] = realName
-    }
-    return ret
-}

index.html

@@ -6,13 +6,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta
 			name="keywords"
-      content="vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。vue2.x、vue2.0、vue2、vue3、vue3.x、vue3.0、
+			content="vue-next-admin，vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。vue2.x，vue2.0，vue2，vue3，vue3.x，vue3.0，CompositionAPI，typescript，element plus，element，plus，admin，wonderful，wonderful-next，vue-next-admin，vite，vite-admin，快速，高效，后台模板，后台系统，管理系统"
-      CompositionAPI、typescript、element plus、element、plus、admin、wonderful、wonderful-next、vue-next-admin、vite、快速、高效、
-      后台模板、后台系统、管理系统"
 		/>
 		<meta
 			name="description"
-      content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc！"
+			content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！"
 		/>
 		<link rel="icon" href="/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="/loading.css" />
@@ -36,13 +34,13 @@
 				var _hmt = _hmt || [];
 				(function () {
 					var hm = document.createElement('script');
-          hm.src =
+					hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
-            'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
 					var s = document.getElementsByTagName('script')[0];
 					s.parentNode.insertBefore(hm, s);
 				})();
 			}
 		</script>
 		<script type="module" src="/src/main.ts"></script>
+		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
 	</body>
 </html>

package.json

@@ -3,37 +3,46 @@
 	"version": "1.0.0",
 	"scripts": {
 		"dev": "vite",
-    "build": "vite build"
+		"build": "vite build",
+		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
+		"@antv/g6": "^4.2.0",
 		"axios": "^0.21.1",
-    "clipboard": "^2.0.7",
+		"clipboard": "^2.0.8",
 		"countup.js": "^2.0.7",
 		"cropperjs": "^1.5.11",
 		"echarts": "^5.0.2",
 		"echarts-wordcloud": "^2.0.0",
-    "element-plus": "^1.0.2-beta.33",
+		"element-plus": "^1.0.2-beta.34",
 		"mitt": "^2.1.0",
 		"nprogress": "^0.2.0",
+		"qrcodejs2-fixes": "^0.0.2",
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.13.0",
 		"vue": "^3.0.5",
 		"vue-router": "^4.0.2",
 		"vuex": "^4.0.0-rc.2",
-    "wangeditor": "^4.6.8"
+		"wangeditor": "^4.6.9"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-    "@types/node": "^14.14.32",
+		"@types/node": "^14.14.34",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.6",
+		"@typescript-eslint/eslint-plugin": "^4.17.0",
+		"@typescript-eslint/parser": "^4.17.0",
 		"@vitejs/plugin-vue": "^1.1.5",
 		"@vue/compiler-sfc": "^3.0.7",
 		"dotenv": "^8.2.0",
+		"eslint": "^7.22.0",
+		"eslint-plugin-vue": "^7.7.0",
+		"prettier": "^2.2.1",
 		"sass": "^1.32.8",
 		"sass-loader": "^11.0.1",
 		"typescript": "^4.2.3",
-    "vite": "^2.0.5"
+		"vite": "^2.0.5",
+		"vue-eslint-parser": "^7.6.0"
 	}
 }

shim.d.ts

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

source.d.ts

@@ -1,6 +1,8 @@
-declare const React: string;
 declare module '*.json';
 declare module '*.png';
 declare module '*.jpg';
 declare module '*.scss';
 declare module '*.ts';
+declare module 'qrcodejs2-fixes';
+declare module 'element-plus';
+declare module 'element-plus/lib/locale/lang/zh-cn';

src/App.vue

@@ -5,30 +5,22 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
-  computed,
+import { useStore } from '/@/store/index.ts';
-  ref,
+import { getLocal } from '/@/utils/storage.ts';
-  getCurrentInstance,
+import setIntroduction from '/@/utils/setIconfont.ts';
-  onBeforeMount,
+import LockScreen from '/@/views/layout/lockScreen/index.vue';
-  onMounted,
+import Setings from '/@/views/layout/navBars/breadcrumb/setings.vue';
-  onUnmounted,
+export default defineComponent({
-  nextTick,
+	name: 'app',
-} from "vue";
-import { useStore } from "/@/store/index.ts";
-import { getLocal } from "/@/utils/storage.ts";
-import setIntroduction from "/@/utils/setIconfont.ts";
-import LockScreen from "/@/views/layout/lockScreen/index.vue";
-import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
-export default {
-  name: "app",
 	components: { LockScreen, Setings },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const setingsRef = ref();
 		const store = useStore();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 布局配置弹窗打开
 		const openSetingsDrawer = () => {
@@ -45,24 +37,24 @@ export default {
 		onMounted(() => {
 			nextTick(() => {
 				// 监听布局配置弹窗点击打开
-        proxy.mittBus.on("openSetingsDrawer", () => {
+				proxy.mittBus.on('openSetingsDrawer', () => {
 					openSetingsDrawer();
 				});
 				// 获取缓存中的布局配置
-        if (getLocal("themeConfig")) {
+				if (getLocal('themeConfig')) {
-          store.dispatch("setThemeConfig", getLocal("themeConfig"));
+					store.dispatch('themeConfig/setThemeConfig', getLocal('themeConfig'));
-          document.documentElement.style.cssText = getLocal("themeConfigStyle");
+					document.documentElement.style.cssText = getLocal('themeConfigStyle');
 				}
 			});
 		});
 		// 页面销毁时，关闭监听布局配置
 		onUnmounted(() => {
-      proxy.mittBus.off("openSetingsDrawer", () => {});
+			proxy.mittBus.off('openSetingsDrawer', () => {});
 		});
 		return {
 			setingsRef,
 			getThemeConfig,
 		};
 	},
-};
+});
 </script>

src/api/login/index.ts

@@ -1,12 +1,12 @@
-import request from '/@/utils/request.ts'
+import request from '/@/utils/request.ts';
 
 // 用户登录
 export function signIn(params: object) {
 	return request({
 		url: '/user/signIn',
 		method: 'post',
-        data: params
+		data: params,
-    })
+	});
 }
 
 // 用户退出登录
@@ -14,6 +14,6 @@ export function signOut(params: object) {
 	return request({
 		url: '/user/signOut',
 		method: 'post',
-        data: params
+		data: params,
-    })
+	});
 }

src/api/menu/index.ts

@@ -1,4 +1,4 @@
-import request from '/@/utils/request.ts'
+import request from '/@/utils/request.ts';
 
 /**
  * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/raw/master/menu/menu

src/components/auth/auth.vue

@@ -5,21 +5,21 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 export default {
-  name: "auth",
+	name: 'auth',
 	props: {
 		value: {
 			type: String,
-      default: () => "",
+			default: () => '',
 		},
 	},
 	setup(props) {
 		const store = useStore();
 		// 获取 vuex 中的用户权限
 		const getUserAuthBtnList = computed(() => {
-      return store.state.userInfos.authBtnList.some((v) => v === props.value);
+			return store.state.userInfos.userInfos.authBtnList.some((v: any) => v === props.value);
 		});
 		return {
 			getUserAuthBtnList,

src/components/auth/authAll.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import { judementSameArr } from "/@/utils/arrayOperation.ts";
+import { judementSameArr } from '/@/utils/arrayOperation.ts';
 export default {
-  name: "authAll",
+	name: 'authAll',
 	props: {
 		value: {
 			type: Array,
@@ -20,7 +20,7 @@ export default {
 		const store = useStore();
 		// 获取 vuex 中的用户权限
 		const getUserAuthBtnList = computed(() => {
-      return judementSameArr(props.value, store.state.userInfos.authBtnList);
+			return judementSameArr(props.value, store.state.userInfos.userInfos.authBtnList);
 		});
 		return {
 			getUserAuthBtnList,

src/components/auth/auths.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 export default {
-  name: "auths",
+	name: 'auths',
 	props: {
 		value: {
 			type: Array,
@@ -20,7 +20,7 @@ export default {
 		// 获取 vuex 中的用户权限
 		const getUserAuthBtnList = computed(() => {
 			let flag = false;
-      store.state.userInfos.authBtnList.map((val) => {
+			store.state.userInfos.userInfos.authBtnList.map((val: any) => {
 				props.value.map((v) => {
 					if (val === v) flag = true;
 				});

src/components/cropper/index.vue

@@ -32,19 +32,19 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, nextTick } from "vue";
+import { reactive, toRefs, nextTick } from 'vue';
-import Cropper from "cropperjs";
+import Cropper from 'cropperjs';
-import "cropperjs/dist/cropper.css";
+import 'cropperjs/dist/cropper.css';
 export default {
-  name: "cropperIndex",
+	name: 'cropperIndex',
 	setup() {
 		const state = reactive({
 			isShowDialog: false,
-      cropperImg: "",
+			cropperImg: '',
-      cropperImgBase64: "",
+			cropperImgBase64: '',
 		});
 		// 打开弹窗
-    const openDialog = (imgs) => {
+		const openDialog = (imgs: any) => {
 			state.cropperImg = imgs;
 			state.isShowDialog = true;
 			nextTick(() => {
@@ -52,7 +52,7 @@ export default {
 			});
 		};
 		// 关闭弹窗
-    const closeDialog = (row) => {
+		const closeDialog = () => {
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -63,24 +63,20 @@ export default {
 		const onSubmit = () => {};
 		// 初始化cropperjs图片裁剪
 		const initCropper = () => {
-      const cropper = new Cropper(
+			const letImg: any = document.querySelector('.cropper-warp-left-img');
-        document.querySelector(".cropper-warp-left-img"),
+			const cropper = new Cropper(letImg, {
-        {
 				viewMode: 1,
-          dragMode: "none",
+				dragMode: 'none',
 				initialAspectRatio: 1,
 				aspectRatio: 1,
-          preview: ".before",
+				preview: '.before',
 				background: false,
 				autoCropArea: 0.6,
 				zoomOnWheel: false,
-          crop: (e) => {
+				crop: () => {
-            state.cropperImgBase64 = cropper
+					state.cropperImgBase64 = cropper.getCroppedCanvas().toDataURL('image/jpeg');
-              .getCroppedCanvas()
-              .toDataURL("image/jpeg");
 				},
-        }
+			});
-      );
 		};
 		return {
 			openDialog,
@@ -124,6 +120,7 @@ export default {
 		.cropper-warp-right-item {
 			margin: 15px 0;
 			.cropper-warp-right-value {
+				display: flex;
 				.cropper-warp-right-value-img {
 					width: 100px;
 					height: 100px;

src/components/iconSelector/index.vue

@@ -1,10 +1,16 @@
 <template>
 	<div class="icon-selector">
-    <el-popover :placement="placement" :width="fontIconWidth" v-model:visible="fontIconVisible"
+		<el-popover :placement="placement" :width="fontIconWidth" v-model:visible="fontIconVisible" popper-class="icon-selector-popper">
-      popper-class="icon-selector-popper">
 			<template #reference>
-        <el-input v-model="fontIcon" placeholder="请点击选择图标" clearable size="small" ref="inputWidthRef"
+				<el-input
-          :prefix-icon="fontIconPrefix" @clear="onClearFontIcon"></el-input>
+					v-model="fontIcon"
+					placeholder="请点击选择图标"
+					clearable
+					size="small"
+					ref="inputWidthRef"
+					:prefix-icon="fontIconPrefix"
+					@clear="onClearFontIcon"
+				></el-input>
 			</template>
 			<transition name="el-zoom-in-top">
 				<div class="icon-selector-warp" v-show="fontIconVisible">
@@ -12,20 +18,34 @@
 					<div v-if="isAllOn" class="icon-selector-all">
 						<el-input v-model="fontIconSearch" placeholder="请输入内容进行搜索" size="small"></el-input>
 						<div class="icon-selector-all-tabs">
-              <div class="icon-selector-all-tabs-item" v-for="(v,k) in fontIconTabsList" :key="k"
+							<div
-                @click="onFontIconTabsClick(v,k)" :class="{'icon-selector-all-tabs-active': fontIconTabsIndex === k}">
+								class="icon-selector-all-tabs-item"
+								v-for="(v, k) in fontIconTabsList"
+								:key="k"
+								@click="onFontIconTabsClick(v, k)"
+								:class="{ 'icon-selector-all-tabs-active': fontIconTabsIndex === k }"
+							>
 								<div class="label">{{ v.label }}</div>
 							</div>
 						</div>
 					</div>
 					<div class="icon-selector-warp-row">
 						<el-row :gutter="10">
-              <el-col :xs="4" :sm="4" :md="2" :lg="2" :xl="1" :class="`${iconShow}-col`" @click="onColClick(v,k)"
+							<el-col
-                v-for="(v,k) in fontIconSheetsFilterList" :key="k">
+								:xs="4"
+								:sm="4"
+								:md="2"
+								:lg="2"
+								:xl="1"
+								:class="`${fontIconTabsIcon}-col`"
+								@click="onColClick(v, k)"
+								v-for="(v, k) in fontIconSheetsFilterList"
+								:key="k"
+							>
 								<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconIndex === k }">
 									<div class="flex-margin">
 										<div class="icon-selector-warp-item-value">
-                      <i :class="[iconShow,v]"></i>
+											<i :class="[fontIconTabsIcon, v]"></i>
 										</div>
 									</div>
 								</div>
@@ -40,11 +60,10 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed } from "vue";
+import { ref, toRefs, reactive, onMounted, nextTick, computed } from 'vue';
-import initIconfont from "/@/utils/getStyleSheets.ts";
+import initIconfont from '/@/utils/getStyleSheets.ts';
-import { stat } from "node:fs";
 export default {
-  name: "iconSelector",
+	name: 'iconSelector',
 	props: {
 		// 是否开启高级功能
 		isAllOn: {
@@ -54,40 +73,31 @@ export default {
 		// 出现位置
 		placement: {
 			type: String,
-      default: () => "bottom",
+			default: () => 'bottom',
 		},
 	},
 	setup(props, { emit }) {
 		const inputWidthRef = ref();
-    const state = reactive({
+		const state: any = reactive({
-      fontIcon: "",
+			fontIcon: '',
-      fontIconPrefix: "",
+			fontIconPrefix: '',
 			fontIconVisible: false,
 			fontIconWidth: 0,
-      fontIconIndex: "",
+			fontIconIndex: '',
-      fontIconSearch: "",
+			fontIconSearch: '',
 			fontIconTabsIndex: 0,
-      fontIconTabsList: [
+			fontIconTabsIcon: 'iconfont ali',
-        { label: "iconfont" },
+			fontIconTabsList: [{ label: 'iconfont' }, { label: 'element' }, { label: 'awesome' }],
-        { label: "element" },
-        { label: "awesome" },
-      ],
 			fontIconSheetsList: [],
 			fontIconSheetsListAli: [],
 			fontIconSheetsListEle: [],
 			fontIconSheetsListAwe: [],
 		});
-    // 设置 iconShow 的动态显示
-    const iconShow = computed(() => {
-      if (state.fontIconTabsIndex === 0) return `iconfont ali`;
-      else if (state.fontIconTabsIndex === 1) return `ele`;
-      else if (state.fontIconTabsIndex === 2) return `fa awe`;
-    });
 		// 设置无数据时的空状态
 		const fontIconSheetsFilterList = computed(() => {
 			if (!state.fontIconSearch) return state.fontIconSheetsList;
 			let search = state.fontIconSearch.trim().toLowerCase();
-      return state.fontIconSheetsList.filter((item) => {
+			return state.fontIconSheetsList.filter((item: any) => {
 				if (item.toLowerCase().indexOf(search) !== -1) return item;
 			});
 		});
@@ -99,51 +109,48 @@ export default {
 		};
 		// 监听页面宽度改变
 		const initResize = () => {
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				getInputWidth();
 			});
 		};
 		// 初始化数据
 		const initFontIconData = () => {
-      initIconfont.ali().then((res) => {
+			initIconfont.ali().then((res: any) => {
 				state.fontIconSheetsList = res;
 				state.fontIconSheetsListAli = res;
 			});
-      initIconfont.ele().then((res) => {
+			initIconfont.ele().then((res: any) => {
 				state.fontIconSheetsListEle = res;
 			});
-      initIconfont.awe().then((res) => {
+			initIconfont.awe().then((res: any) => {
 				state.fontIconSheetsListAwe = res;
 			});
 		};
 		// 当前项点击
-    const onColClick = (v, k) => {
+		const onColClick = (v: any, k: number) => {
 			state.fontIconIndex = k;
 			state.fontIcon = v;
 			state.fontIconVisible = false;
-      if (state.fontIconTabsIndex === 0)
+			if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `iconfont ali ${v}`;
-        state.fontIconPrefix = `iconfont ali ${v}`;
 			else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `ele ${v}`;
-      else if (state.fontIconTabsIndex === 2)
+			else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `fa awe ${v}`;
-        state.fontIconPrefix = `fa awe ${v}`;
+			emit('get', state.fontIconPrefix);
-      emit("get", state.fontIconPrefix);
 		};
 		// input 点击清除按钮时
 		const onClearFontIcon = () => {
-      state.fontIconIndex = "";
+			state.fontIconIndex = '';
-      state.fontIconPrefix = "";
+			state.fontIconPrefix = '';
-      emit("get", state.fontIconPrefix);
+			emit('get', state.fontIconPrefix);
 		};
 		// tabs 点击
-    const onFontIconTabsClick = (v, k) => {
+		const onFontIconTabsClick = (v: any, k: number) => {
 			state.fontIconTabsIndex = k;
-      if (v.label === "iconfont") {
+			if (v.label === 'iconfont') state.fontIconSheetsList = state.fontIconSheetsListAli;
-        state.fontIconSheetsList = state.fontIconSheetsListAli;
+			else if (v.label === 'element') state.fontIconSheetsList = state.fontIconSheetsListEle;
-      } else if (v.label === "element") {
+			else if (v.label === 'awesome') state.fontIconSheetsList = state.fontIconSheetsListAwe;
-        state.fontIconSheetsList = state.fontIconSheetsListEle;
+			if (k === 0) state.fontIconTabsIcon = `iconfont ali`;
-      } else if (v.label === "awesome") {
+			else if (k === 1) state.fontIconTabsIcon = `ele`;
-        state.fontIconSheetsList = state.fontIconSheetsListAwe;
+			else if (k === 2) state.fontIconTabsIcon = `fa awe`;
-      }
 		};
 		// 页面加载时
 		onMounted(() => {
@@ -153,7 +160,6 @@ export default {
 		});
 		return {
 			inputWidthRef,
-      iconShow,
 			fontIconSheetsFilterList,
 			onColClick,
 			onClearFontIcon,

src/main.ts

@@ -1,17 +1,17 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
-import { store, key } from './store'
+import { store, key } from './store';
-import { authDirective } from '/@/utils/authDirective.ts'
+import { authDirective } from '/@/utils/authDirective.ts';
 
-import ElementPlus from 'element-plus'
+import ElementPlus from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css'
+import 'element-plus/lib/theme-chalk/index.css';
-import '/@/theme/index.scss'
+import '/@/theme/index.scss';
-import lang from 'element-plus/lib/locale/lang/zh-cn'
+import lang from 'element-plus/lib/locale/lang/zh-cn';
-import mitt from "mitt"
+import mitt from 'mitt';
 
-const app = createApp(App)
+const app = createApp(App);
-app.use(router).use(store, key).use(ElementPlus, { locale: lang }).mount('#app')
+app.use(router).use(store, key).use(ElementPlus, { locale: lang }).mount('#app');
-app.config.globalProperties.mittBus = mitt()
+app.config.globalProperties.mittBus = mitt();
 
-authDirective(app)
+authDirective(app);

src/router/index.ts

@@ -1,10 +1,9 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import NProgress from 'nprogress'
+import NProgress from 'nprogress';
-import 'nprogress/nprogress.css'
+import 'nprogress/nprogress.css';
-import { store } from "/@/store/index.ts"
+import { store } from '/@/store/index.ts';
-import { getSession, clearSession } from "/@/utils/storage.ts"
+import { getSession, clearSession } from '/@/utils/storage.ts';
-import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts'
+import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts';
-import themeConfig from '/@/utils/themeConfig.ts'
 
 // 定义动态路由
 export const dynamicRoutes = [
@@ -14,9 +13,10 @@ export const dynamicRoutes = [
 		component: () => import('/@/views/layout/index.vue'),
 		redirect: '/home',
 		meta: {
-            isKeepAlive: true
+			isKeepAlive: true,
 		},
-        children: [{
+		children: [
+			{
 				path: '/home',
 				name: 'home',
 				component: () => import('/@/views/home/index.vue'),
@@ -28,8 +28,8 @@ export const dynamicRoutes = [
 					isAffix: true,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-shouye'
+					icon: 'iconfont icon-shouye',
-            }
+				},
 			},
 			{
 				path: '/system',
@@ -44,12 +44,12 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin'],
-                icon: 'iconfont icon-xitongshezhi'
+					icon: 'iconfont icon-xitongshezhi',
 				},
 				children: [
 					{
 						path: '/system/menu',
-                    name: "systemMenu",
+						name: 'systemMenu',
 						component: () => import('/@/views/system/menu/index.vue'),
 						meta: {
 							title: '菜单管理',
@@ -59,12 +59,12 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin'],
-                        icon: 'iconfont icon-caidan'
+							icon: 'iconfont icon-caidan',
-                    }
+						},
 					},
 					{
 						path: '/system/user',
-                    name: "systemUser",
+						name: 'systemUser',
 						component: () => import('/@/views/system/user/index.vue'),
 						meta: {
 							title: '用户管理',
@@ -75,9 +75,9 @@ export const dynamicRoutes = [
 							isIframe: false,
 							auth: ['admin'],
 							icon: 'iconfont icon-icon-',
-                    }
+						},
-                }
+					},
-            ]
+				],
 			},
 			{
 				path: '/limits',
@@ -92,7 +92,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-quanxian'
+					icon: 'iconfont icon-quanxian',
 				},
 				children: [
 					{
@@ -107,7 +107,7 @@ export const dynamicRoutes = [
 							isKeepAlive: true,
 							isAffix: false,
 							isIframe: false,
-                        auth: ['admin', 'test']
+							auth: ['admin', 'test'],
 						},
 						children: [
 							{
@@ -121,8 +121,8 @@ export const dynamicRoutes = [
 									isKeepAlive: true,
 									isAffix: false,
 									isIframe: false,
-                                auth: ['admin', 'test']
+									auth: ['admin', 'test'],
-                            }
+								},
 							},
 							{
 								path: '/limits/frontEnd/btn',
@@ -135,10 +135,10 @@ export const dynamicRoutes = [
 									isKeepAlive: true,
 									isAffix: false,
 									isIframe: false,
-                                auth: ['admin', 'test']
+									auth: ['admin', 'test'],
-                            }
+								},
-                        }
+							},
-                    ]
+						],
 					},
 					{
 						path: '/limits/backEnd',
@@ -151,7 +151,7 @@ export const dynamicRoutes = [
 							isKeepAlive: true,
 							isAffix: false,
 							isIframe: false,
-                        auth: ['admin', 'test']
+							auth: ['admin', 'test'],
 						},
 						children: [
 							{
@@ -165,12 +165,12 @@ export const dynamicRoutes = [
 									isKeepAlive: true,
 									isAffix: false,
 									isIframe: false,
-                                auth: ['admin', 'test']
+									auth: ['admin', 'test'],
-                            }
+								},
-                        }
+							},
-                    ]
+						],
-                }
+					},
-            ]
+				],
 			},
 			{
 				path: '/menu',
@@ -185,7 +185,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-caidan'
+					icon: 'iconfont icon-caidan',
 				},
 				children: [
 					{
@@ -201,7 +201,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-caidan'
+							icon: 'iconfont icon-caidan',
 						},
 						children: [
 							{
@@ -216,8 +216,8 @@ export const dynamicRoutes = [
 									isAffix: false,
 									isIframe: false,
 									auth: ['admin', 'test'],
-                                icon: 'iconfont icon-caidan'
+									icon: 'iconfont icon-caidan',
-                            }
+								},
 							},
 							{
 								path: '/menu/menu1/menu12',
@@ -232,7 +232,7 @@ export const dynamicRoutes = [
 									isAffix: false,
 									isIframe: false,
 									auth: ['admin', 'test'],
-                                icon: 'iconfont icon-caidan'
+									icon: 'iconfont icon-caidan',
 								},
 								children: [
 									{
@@ -247,8 +247,8 @@ export const dynamicRoutes = [
 											isAffix: false,
 											isIframe: false,
 											auth: ['admin', 'test'],
-                                        icon: 'iconfont icon-caidan'
+											icon: 'iconfont icon-caidan',
-                                    }
+										},
 									},
 									{
 										path: '/menu/menu1/menu12/menu122',
@@ -262,10 +262,10 @@ export const dynamicRoutes = [
 											isAffix: false,
 											isIframe: false,
 											auth: ['admin', 'test'],
-                                        icon: 'iconfont icon-caidan'
+											icon: 'iconfont icon-caidan',
-                                    }
+										},
-                                }
+									},
-                            ]
+								],
 							},
 							{
 								path: '/menu/menu1/menu13',
@@ -279,10 +279,10 @@ export const dynamicRoutes = [
 									isAffix: false,
 									isIframe: false,
 									auth: ['admin', 'test'],
-                                icon: 'iconfont icon-caidan'
+									icon: 'iconfont icon-caidan',
-                            }
+								},
-                        }
+							},
-                    ]
+						],
 					},
 					{
 						path: '/menu/menu2',
@@ -296,10 +296,10 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-caidan'
+							icon: 'iconfont icon-caidan',
-                    }
+						},
-                }
+					},
-            ]
+				],
 			},
 			{
 				path: '/fun',
@@ -314,7 +314,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-crew_feature'
+					icon: 'iconfont icon-crew_feature',
 				},
 				children: [
 					{
@@ -329,8 +329,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-thumb'
+							icon: 'el-icon-thumb',
-                    }
+						},
 					},
 					{
 						path: '/fun/countup',
@@ -344,8 +344,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-odometer'
+							icon: 'el-icon-odometer',
-                    }
+						},
 					},
 					{
 						path: '/fun/echartsTree',
@@ -359,8 +359,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-connection'
+							icon: 'el-icon-connection',
-                    }
+						},
 					},
 					{
 						path: '/fun/selector',
@@ -374,8 +374,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-xuanzeqi'
+							icon: 'iconfont icon-xuanzeqi',
-                    }
+						},
 					},
 					{
 						path: '/fun/wangEditor',
@@ -389,8 +389,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-fuwenbenkuang'
+							icon: 'iconfont icon-fuwenbenkuang',
-                    }
+						},
 					},
 					{
 						path: '/fun/cropper',
@@ -404,8 +404,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-caijian'
+							icon: 'iconfont icon-caijian',
-                    }
+						},
 					},
 					{
 						path: '/fun/mindMap',
@@ -419,8 +419,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-siweidaotu'
+							icon: 'iconfont icon-siweidaotu',
-                    }
+						},
 					},
 					{
 						path: '/fun/qrcode',
@@ -434,10 +434,25 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-ico'
+							icon: 'iconfont icon-ico',
-                    }
+						},
-                }
+					},
-            ]
+					{
+						path: '/fun/echartsMap',
+						name: 'echartsMap',
+						component: () => import('/@/views/fun/echartsMap/index.vue'),
+						meta: {
+							title: '地理坐标/地图',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-ditu',
+						},
+					},
+				],
 			},
 			{
 				path: '/pages',
@@ -452,7 +467,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-fuzhiyemian'
+					icon: 'iconfont icon-fuzhiyemian',
 				},
 				children: [
 					{
@@ -467,8 +482,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-sell'
+							icon: 'el-icon-sell',
-                    }
+						},
 					},
 					{
 						path: '/pages/iocnfont',
@@ -482,8 +497,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-present'
+							icon: 'el-icon-present',
-                    }
+						},
 					},
 					{
 						path: '/pages/element',
@@ -497,8 +512,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-platform-eleme'
+							icon: 'el-icon-platform-eleme',
-                    }
+						},
 					},
 					{
 						path: '/pages/awesome',
@@ -512,8 +527,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'el-icon-set-up'
+							icon: 'el-icon-set-up',
-                    }
+						},
 					},
 					{
 						path: '/pages/cityLinkage',
@@ -527,8 +542,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-jiliandongxuanzeqi'
+							icon: 'iconfont icon-jiliandongxuanzeqi',
-                    }
+						},
 					},
 					{
 						path: '/pages/formAdapt',
@@ -542,8 +557,8 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-biaodan'
+							icon: 'iconfont icon-biaodan',
-                    }
+						},
 					},
 					{
 						path: '/pages/listAdapt',
@@ -557,10 +572,10 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							auth: ['admin', 'test'],
-                        icon: 'iconfont icon-chazhaobiaodanliebiao'
+							icon: 'iconfont icon-chazhaobiaodanliebiao',
-                    }
 						},
-            ]
+					},
+				],
 			},
 			{
 				path: '/chart',
@@ -574,8 +589,8 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-ico_shuju'
+					icon: 'iconfont icon-ico_shuju',
-            }
+				},
 			},
 			{
 				path: '/personal',
@@ -589,8 +604,8 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-gerenzhongxin'
+					icon: 'iconfont icon-gerenzhongxin',
-            }
+				},
 			},
 			{
 				path: '/tools',
@@ -604,8 +619,8 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin', 'test'],
-                icon: 'iconfont icon-gongju'
+					icon: 'iconfont icon-gongju',
-            }
+				},
 			},
 			{
 				path: '/link',
@@ -619,8 +634,8 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					auth: ['admin'],
-                icon: 'iconfont icon-caozuo-wailian'
+					icon: 'iconfont icon-caozuo-wailian',
-            }
+				},
 			},
 			{
 				path: '/iframes',
@@ -630,15 +645,16 @@ export const dynamicRoutes = [
 					title: '内嵌 iframe',
 					isLink: 'https://gitee.com/lyt-top/vue-admin-wonderful',
 					isHide: false,
-                isKeepAlive: true,
+					isKeepAlive: false,
 					isAffix: true,
 					isIframe: true,
 					auth: ['admin'],
-                icon: 'iconfont icon-neiqianshujuchucun'
+					icon: 'iconfont icon-neiqianshujuchucun',
-            }
+				},
-        }]
+			},
-    }
+		],
-]
+	},
+];
 
 // 定义静态路由
 const staticRoutes: Array<RouteRecordRaw> = [
@@ -647,261 +663,266 @@ const staticRoutes: Array<RouteRecordRaw> = [
 		name: 'login',
 		component: () => import('/@/views/login/index.vue'),
 		meta: {
-            title: '登陆'
+			title: '登陆',
-        }
+		},
 	},
 	{
 		path: '/404',
 		name: 'notFound',
 		component: () => import('/@/views/error/404.vue'),
 		meta: {
-            title: '找不到此页面'
+			title: '找不到此页面',
-        }
+		},
 	},
 	{
 		path: '/401',
 		name: 'noPower',
 		component: () => import('/@/views/error/401.vue'),
 		meta: {
-            title: '没有权限'
+			title: '没有权限',
-        }
 		},
-]
+	},
+];
 
 // 定义404界面
 const pathMatch = {
 	path: '/:path(.*)*',
-    redirect: '/404'
+	redirect: '/404',
-}
+};
 
 // 获取目录下的 .vue 全部文件，参考 vite：import.meta.glob
-const dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}')
+const dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}');
 
 // 添加静态路由
 const router = createRouter({
 	history: createWebHashHistory(),
-    routes: staticRoutes
+	routes: staticRoutes,
-})
+});
 
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
 export function getBackEndControlRoutes(callback: any) {
-    const token = getSession('token')
+	const token = getSession('token');
-    if (!token) return false
+	if (!token) return false;
-    store.dispatch('setUserInfos')
+	store.dispatch('userInfos/setUserInfos');
-    const auth = store.state.userInfos.authPageList[0] // 模拟 admin 与 test
+	const auth = store.state.userInfos.userInfos.authPageList[0]; // 模拟 admin 与 test
 	if (auth === 'admin') {
-        getMenuAdmin().then((res: any) => {
+		getMenuAdmin()
-            callback(res)
+			.then((res: any) => {
+				callback(res);
 			})
+			.catch(() => {});
 	} else {
-        getMenuTest().then((res: any) => {
+		getMenuTest()
-            callback(res)
+			.then((res: any) => {
+				callback(res);
 			})
+			.catch(() => {});
 	}
 }
 
 // 后端控制路由，模拟执行路由数据初始化
 export function setBackEndControlRoutesFun(res: any, callback?: any) {
-    initBackEndControlRoutesFun(res)
+	initBackEndControlRoutesFun(res);
-    window.location.href = window.location.href // 防止页面刷新时，出现空白或404
+	window.location.href = window.location.href; // 防止页面刷新时，出现空白或404
-    callback(res)
+	callback(res);
 }
 
 // 后端控制路由，动态添加菜单时（刷新菜单）
 export function setBackEndControlRefreshRoutes() {
 	getBackEndControlRoutes((res: any) => {
-        initBackEndControlRoutesFun(res)
+		initBackEndControlRoutesFun(res);
-    })
+	});
 }
 
 // 后端控制路由，模拟执行路由数据初始化
 const initBackEndControlRoutesFun = (res: any) => {
-    const oldRoutes = JSON.parse(JSON.stringify(res.data))
+	const oldRoutes = JSON.parse(JSON.stringify(res.data));
-    store.dispatch('setBackEndControlRoutes', oldRoutes)
+	store.dispatch('requestOldRoutes/setBackEndControlRoutes', oldRoutes);
-    dynamicRoutes[0].children = backEndRouter(res.data)
+	dynamicRoutes[0].children = backEndRouter(res.data);
-    resetRoute() // 删除/重置路由
+	resetRoute(); // 删除/重置路由
-    router.addRoute(pathMatch) // 添加404界面
+	router.addRoute(pathMatch); // 添加404界面
-    setAddRoute() // 添加动态路由
+	setAddRoute(); // 添加动态路由
-    setFilterMenu() // 过滤权限菜单
+	setFilterMenu(); // 过滤权限菜单
-    setCacheTagsViewRoutes() // 添加 keepAlive 缓存
+	setCacheTagsViewRoutes(); // 添加 keepAlive 缓存
-}
+};
 
 // 后端控制路由，后端路由 component 转换
 export function backEndRouter(routes: any) {
-    if (!routes) return
+	if (!routes) return;
 	return routes.map((item: any) => {
-        const { component } = item
+		const { component } = item;
-        const { children } = item
+		const { children } = item;
-        if (component) item.component = dynamicImport(dynamicViewsModules, component as string)
+		if (component) item.component = dynamicImport(dynamicViewsModules, component as string);
-        children && backEndRouter(children)
+		children && backEndRouter(children);
-        return item
+		return item;
-    })
+	});
 }
 
 // 后端控制路由，后端路由 component 转换函数
-export function dynamicImport(
+export function dynamicImport(dynamicViewsModules: Record<string, () => Promise<{ [key: string]: any }>>, component: string) {
-    dynamicViewsModules: Record<string, () => Promise<{ [key: string]: any }>>,
+	const keys = Object.keys(dynamicViewsModules);
-    component: string
-) {
-    const keys = Object.keys(dynamicViewsModules)
 	const matchKeys = keys.filter((key) => {
-        const k = key.replace('../views', '')
+		const k = key.replace('../views', '');
-        return k.startsWith(`${component}`) || k.startsWith(`/${component}`)
+		return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
-    })
+	});
 	if (matchKeys?.length === 1) {
-        const matchKey = matchKeys[0]
+		const matchKey = matchKeys[0];
-        return dynamicViewsModules[matchKey]
+		return dynamicViewsModules[matchKey];
 	}
 	if (matchKeys?.length > 1) {
-        console.warn('Do not create files that do not end with. Vue')
+		console.warn('Do not create files that do not end with. Vue');
-        return false
+		return false;
 	}
 }
 
 // 多级嵌套数组处理成一维数组
 export function formatFlatteningRoutes(arr: any) {
-    if (arr.length < 0) return false
+	if (arr.length < 0) return false;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[i].children) {
-            arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1))
+			arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
 		}
 	}
-    return arr
+	return arr;
 }
 
 // 多级嵌套数组处理后的一维数组，再处理成 `定义动态路由` 的格式
 // 只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存
 // isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
 export function formatTwoStageRoutes(arr: any) {
-    if (arr.length < 0) return false
+	if (arr.length < 0) return false;
-    const newArr: any = []
+	const newArr: any = [];
-    const cacheList: Array<string> = []
+	const cacheList: Array<string> = [];
 	arr.map((v: any) => {
 		if (v.path === '/') {
-            newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] })
+			newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
 		} else {
-            newArr[0].children.push({ ...v })
+			newArr[0].children.push({ ...v });
 			if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
-                cacheList.push(v.name)
+				cacheList.push(v.name);
-                store.dispatch('setCacheKeepAlive', cacheList)
+				store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
 			}
 		}
-    })
+	});
-    return newArr
+	return newArr;
 }
 
 // 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide))
 export function setCacheTagsViewRoutes() {
 	// 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
-    let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.userInfos.authPageList)
+	let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.userInfos.userInfos.authPageList);
 	// 添加到 vuex setTagsViewRoutes 中
-    store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children)
+	store.dispatch('tagsViewRoutes/setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children);
 }
 
 // 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示
 export function setFilterMenu() {
-    store.dispatch("setRoutes", setFilterMenuFun(dynamicRoutes[0].children, store.state.userInfos.authPageList))
+	store.dispatch('routesList/setRoutesList', setFilterMenuFun(dynamicRoutes[0].children, store.state.userInfos.userInfos.authPageList));
 }
 
 // 判断路由 auth 中是否包含当前登录用户权限字段
 export function hasAuth(auths: any, route: any) {
-    if (route.meta && route.meta.auth) return auths.some((auth: any) => route.meta.auth.includes(auth))
+	if (route.meta && route.meta.auth) return auths.some((auth: any) => route.meta.auth.includes(auth));
-    else return true
+	else return true;
 }
 
 // 递归过滤有权限的路由
 export function setFilterMenuFun(routes: any, auth: any) {
-    const menu: any = []
+	const menu: any = [];
 	routes.map((route: any) => {
-        const item = { ...route }
+		const item = { ...route };
 		if (hasAuth(auth, item)) {
-            if (item.children) item.children = setFilterMenuFun(item.children, auth)
+			if (item.children) item.children = setFilterMenuFun(item.children, auth);
-            menu.push(item)
+			menu.push(item);
 		}
-    })
+	});
-    return menu
+	return menu;
 }
 
 // 获取当前用户的权限去比对路由表，用于动态路由的添加
 export function setFilterRoute() {
-    let filterRoute: any = []
+	let filterRoute: any = [];
 	formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => {
-        if (route.meta.auth) route.meta.auth.map((metaAuth: any) => {
+		if (route.meta.auth)
-            store.state.userInfos.authPageList.map((auth: any) => {
+			route.meta.auth.map((metaAuth: any) => {
-                if (metaAuth === auth) filterRoute.push({ ...route })
+				store.state.userInfos.userInfos.authPageList.map((auth: any) => {
-            })
+					if (metaAuth === auth) filterRoute.push({ ...route });
-        })
+				});
-    })
+			});
-    return filterRoute
+	});
+	return filterRoute;
 }
 
 // 比对后的路由表，进行重新赋值
 export function setFilterRouteEnd() {
-    let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))
+	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
-    filterRouteEnd[0].children = setFilterRoute()
+	filterRouteEnd[0].children = setFilterRoute();
-    return filterRouteEnd
+	return filterRouteEnd;
 }
 
 // 添加动态路由
 export function setAddRoute() {
 	setFilterRouteEnd().map((route: any) => {
-        router.addRoute((route as unknown) as RouteRecordRaw)
+		router.addRoute((route as unknown) as RouteRecordRaw);
-    })
+	});
 }
 
 // 删除/重置路由
 export function resetRoute() {
 	setFilterRouteEnd().map((route: any) => {
-        const { name } = route
+		const { name } = route;
-        router.hasRoute(name) && router.removeRoute(name)
+		router.hasRoute(name) && router.removeRoute(name);
-    })
+	});
 }
 
 // 初始化方法，防止刷新时丢失
 export function initAllFun() {
-    const token = getSession('token')
+	const token = getSession('token');
-    if (!token) return false
+	if (!token) return false;
-    store.dispatch('setUserInfos') // 触发初始化用户信息
+	store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
-    setAddRoute() // 添加动态路由
+	setAddRoute(); // 添加动态路由
-    router.addRoute(pathMatch) // 添加404界面
+	router.addRoute(pathMatch); // 添加404界面
-    setFilterMenu() // 过滤权限菜单
+	setFilterMenu(); // 过滤权限菜单
-    setCacheTagsViewRoutes() // 添加 keepAlive 缓存
+	setCacheTagsViewRoutes(); // 添加 keepAlive 缓存
 }
 
 // 初始化方法执行
-const requestRoutes = store.state.themeConfig.isRequestRoutes
+const requestRoutes = store.state.themeConfig.themeConfig.isRequestRoutes;
-if (!requestRoutes) initAllFun()
+if (!requestRoutes) initAllFun();
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-if (requestRoutes) getBackEndControlRoutes((res: any) => { setBackEndControlRoutesFun(res) })
+if (requestRoutes)
+	getBackEndControlRoutes((res: any) => {
+		setBackEndControlRoutesFun(res);
+	});
 
 // 路由加载前
 router.beforeEach((to, from, next) => {
-    document.title = `${to.meta.title} - ${themeConfig.globalTitle}` || themeConfig.globalTitle
+	document.title = `${to.meta.title} - ${store.state.themeConfig.themeConfig.globalTitle}` || store.state.themeConfig.themeConfig.globalTitle;
-    NProgress.configure({ showSpinner: false })
+	NProgress.configure({ showSpinner: false });
-    if (to.meta.title) NProgress.start()
+	if (to.meta.title) NProgress.start();
-    const token = getSession('token')
+	const token = getSession('token');
 	if (to.path === '/login' && !token) {
-        next()
+		next();
-        NProgress.done()
+		NProgress.done();
 	} else {
 		if (!token) {
-            next('/login')
+			next('/login');
-            clearSession()
+			clearSession();
-            resetRoute()
+			resetRoute();
-            NProgress.done()
+			NProgress.done();
 		} else if (token && to.path === '/login') {
-            next('/home')
+			next('/home');
-            NProgress.done()
+			NProgress.done();
 		} else {
-            next()
+			next();
 		}
 	}
-})
+});
 
 // 路由加载后
 router.afterEach(() => {
-    NProgress.done()
+	NProgress.done();
-})
+});
 
 // 导出路由
-export default router
+export default router;

src/store/index.ts

@@ -1,128 +1,25 @@
-import { InjectionKey } from 'vue'
+import { InjectionKey } from 'vue';
-import { createStore, useStore as baseUseStore, Store } from 'vuex'
+import { createStore, useStore as baseUseStore, Store } from 'vuex';
-import themeConfig from '/@/utils/themeConfig.ts'
+import themeConfig from '/@/store/modules/themeConfig.ts';
-import { getSession } from "/@/utils/storage.ts";
+import routesList from '/@/store/modules/routesList.ts';
-export interface RootStateTypes {
+import keepAliveNames from '/@/store/modules/keepAliveNames.ts';
-    themeConfig: {
+import tagsViewRoutes from '/@/store/modules/tagsViewRoutes.ts';
-        isDrawer: boolean,
+import userInfos from '/@/store/modules/userInfos.ts';
-        primary: string,
+import requestOldRoutes from '/@/store/modules/requestOldRoutes.ts';
-        success: string,
-        info: string,
-        warning: string,
-        danger: string,
-        topBar: string,
-        menuBar: string,
-        columnsMenuBar: string,
-        topBarColor: string,
-        menuBarColor: string,
-        columnsMenuBarColor: string,
-        isTopBarColorGradual: boolean,
-        isMenuBarColorGradual: boolean,
-        isMenuBarColorHighlight: boolean,
-        isCollapse: boolean,
-        isUniqueOpened: boolean,
-        isFixedHeader: boolean,
-        isFixedHeaderChange: boolean,
-        isClassicSplitMenu: boolean,
-        isLockScreen: boolean,
-        lockScreenTime: number,
-        isShowLogo: boolean,
-        isShowLogoChange: boolean,
-        isBreadcrumb: boolean,
-        isTagsview: boolean,
-        isBreadcrumbIcon: boolean,
-        isTagsviewIcon: boolean,
-        isCacheTagsView: boolean,
-        isSortableTagsView: boolean,
-        isFooter: boolean,
-        isGrayscale: boolean,
-        isInvert: boolean,
-        isWartermark: boolean,
-        wartermarkText: string,
-        tagsStyle: string,
-        animation: string,
-        columnsAsideStyle: string,
-        layout: string,
-        isRequestRoutes: boolean,
-        globalTitle: string,
-        globalViceTitle: string,
-    },
-    routes: Array<object>,
-    keepAliveNames: Array<string>,
-    tagsViewRoutes: Array<object>,
-    userInfos: object,
-    requestOldRoutes: Array<object>,
-}
 
-export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
+export const key: InjectionKey<Store<RootStateTypes>> = Symbol();
 
 export const store = createStore<RootStateTypes>({
-    state: {
+	modules: {
 		themeConfig,
-        routes: [],
+		routesList,
-        keepAliveNames: [],
+		keepAliveNames,
-        tagsViewRoutes: [],
+		tagsViewRoutes,
-        userInfos: {},
+		userInfos,
-        requestOldRoutes: []
+		requestOldRoutes,
 	},
-    mutations: {
+});
-        // 设置布局配置
-        getThemeConfig(state: any, data: object) {
-            state.themeConfig = Object.assign({}, data)
-        },
-        // 设置路由，菜单中使用到
-        getRoutes(state: any, data: Array<object>) {
-            state.routes = data
-        },
-        // 设置缓存（name字段）
-        getCacheKeepAlive(state: any, data: Array<string>) {
-            state.keepAliveNames = data
-        },
-        // 设置 TagsView 路由
-        getTagsViewRoutes(state: any, data: Array<string>) {
-            state.tagsViewRoutes = data
-        },
-        // 设置用户信息
-        getUserInfos(state: any, data: object) {
-            state.userInfos = data
-        },
-        // 后端控制路由
-        getBackEndControlRoutes(state: any, data: object) {
-            state.requestOldRoutes = data
-        },
-    },
-    actions: {
-        // 设置布局配置
-        setThemeConfig({ commit }, data: object) {
-            commit('getThemeConfig', data)
-        },
-        // 设置路由，菜单中使用到
-        async setRoutes({ commit }, data: any) {
-            commit('getRoutes', data)
-        },
-        // 设置缓存（name字段）
-        async setCacheKeepAlive({ commit }, data: Array<string>) {
-            commit('getCacheKeepAlive', data)
-        },
-        // 设置 TagsView 路由
-        async setTagsViewRoutes({ commit }, data: Array<string>) {
-            commit('getTagsViewRoutes', data)
-        },
-        // 设置用户信息
-        async setUserInfos({ commit }, data: object) {
-            if (data) {
-                commit('getUserInfos', data)
-            } else {
-                if (getSession('userInfo')) commit('getUserInfos', getSession('userInfo'))
-            }
-        },
-        // 后端控制路由
-        setBackEndControlRoutes({ commit }, routes: Array<string>) {
-            commit('getBackEndControlRoutes', routes)
-        }
-    }
-})
 
 export function useStore() {
-    return baseUseStore(key)
+	return baseUseStore(key);
 }

src/store/interface/index.ts

@@ -0,0 +1,84 @@
+// 接口类型声明
+
+// 布局配置
+declare interface ThemeConfigState {
+	themeConfig: {
+		isDrawer: boolean;
+		primary: string;
+		success: string;
+		info: string;
+		warning: string;
+		danger: string;
+		topBar: string;
+		menuBar: string;
+		columnsMenuBar: string;
+		topBarColor: string;
+		menuBarColor: string;
+		columnsMenuBarColor: string;
+		isTopBarColorGradual: boolean;
+		isMenuBarColorGradual: boolean;
+		isMenuBarColorHighlight: boolean;
+		isCollapse: boolean;
+		isUniqueOpened: boolean;
+		isFixedHeader: boolean;
+		isFixedHeaderChange: boolean;
+		isClassicSplitMenu: boolean;
+		isLockScreen: boolean;
+		lockScreenTime: number;
+		isShowLogo: boolean;
+		isShowLogoChange: boolean;
+		isBreadcrumb: boolean;
+		isTagsview: boolean;
+		isBreadcrumbIcon: boolean;
+		isTagsviewIcon: boolean;
+		isCacheTagsView: boolean;
+		isSortableTagsView: boolean;
+		isFooter: boolean;
+		isGrayscale: boolean;
+		isInvert: boolean;
+		isWartermark: boolean;
+		wartermarkText: string;
+		tagsStyle: string;
+		animation: string;
+		columnsAsideStyle: string;
+		layout: string;
+		isRequestRoutes: boolean;
+		globalTitle: string;
+		globalViceTitle: string;
+	};
+}
+
+// 路由列表
+declare interface RoutesListState {
+	routesList: Array<object>;
+}
+
+// 路由缓存列表
+declare interface KeepAliveNamesState {
+	keepAliveNames: Array<string>;
+}
+
+// TagsView 路由列表
+declare interface TagsViewRoutesState {
+	tagsViewRoutes: Array<object>;
+}
+
+// 用户信息
+declare interface UserInfosState {
+	userInfos: object;
+}
+
+// 后端返回原始路由(未处理时)
+declare interface RequestOldRoutesState {
+	requestOldRoutes: Array<object>;
+}
+
+// 主接口(顶级类型声明)
+declare interface RootStateTypes {
+	themeConfig: ThemeConfigState;
+	routesList: RoutesListState;
+	keepAliveNames: KeepAliveNamesState;
+	tagsViewRoutes: TagsViewRoutesState;
+	userInfos: UserInfosState;
+	requestOldRoutes: RequestOldRoutesState;
+}

src/store/modules/keepAliveNames.ts

@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+
+const keepAliveNamesModule: Module<KeepAliveNamesState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		keepAliveNames: [],
+	},
+	mutations: {
+		// 设置路由缓存（name字段）
+		getCacheKeepAlive(state: any, data: Array<string>) {
+			state.keepAliveNames = data;
+		},
+	},
+	actions: {
+		// 设置路由缓存（name字段）
+		async setCacheKeepAlive({ commit }, data: Array<string>) {
+			commit('getCacheKeepAlive', data);
+		},
+	},
+};
+
+export default keepAliveNamesModule;

src/store/modules/requestOldRoutes.ts

@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+
+const requestOldRoutesModule: Module<RequestOldRoutesState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		requestOldRoutes: [],
+	},
+	mutations: {
+		// 后端控制路由
+		getBackEndControlRoutes(state: any, data: object) {
+			state.requestOldRoutes = data;
+		},
+	},
+	actions: {
+		// 后端控制路由
+		setBackEndControlRoutes({ commit }, routes: Array<string>) {
+			commit('getBackEndControlRoutes', routes);
+		},
+	},
+};
+
+export default requestOldRoutesModule;

src/store/modules/routesList.ts

@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+
+const routesListModule: Module<RoutesListState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		routesList: [],
+	},
+	mutations: {
+		// 设置路由，菜单中使用到
+		getRoutesList(state: any, data: Array<object>) {
+			state.routesList = data;
+		},
+	},
+	actions: {
+		// 设置路由，菜单中使用到
+		async setRoutesList({ commit }, data: any) {
+			commit('getRoutesList', data);
+		},
+	},
+};
+
+export default routesListModule;

src/store/modules/tagsViewRoutes.ts

@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+
+const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		tagsViewRoutes: [],
+	},
+	mutations: {
+		// 设置 TagsView 路由
+		getTagsViewRoutes(state: any, data: Array<string>) {
+			state.tagsViewRoutes = data;
+		},
+	},
+	actions: {
+		// 设置 TagsView 路由
+		async setTagsViewRoutes({ commit }, data: Array<string>) {
+			commit('getTagsViewRoutes', data);
+		},
+	},
+};
+
+export default tagsViewRoutesModule;

src/store/modules/themeConfig.ts

@@ -0,0 +1,132 @@
+import { Module } from 'vuex';
+
+const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		themeConfig: {
+			// 是否开启布局配置抽屉
+			isDrawer: false,
+
+			/* 全局主题
+            ------------------------------- */
+			// 默认 primary 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			primary: '#409eff',
+			// 默认 success 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			success: '#67c23a',
+			// 默认 info 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			info: '#909399',
+			// 默认 warning 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			warning: '#e6a23c',
+			// 默认 danger 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			danger: '#f56c6c',
+
+			/* 菜单 / 顶栏
+            ------------------------------- */
+			// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			topBar: '#ffffff',
+			// 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			menuBar: '#545c64',
+			// 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			columnsMenuBar: '#545c64',
+			// 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			topBarColor: '#606266',
+			// 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			menuBarColor: '#eaeaea',
+			// 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
+			columnsMenuBarColor: '#e6e6e6',
+			// 是否开启顶栏背景颜色渐变
+			isTopBarColorGradual: false,
+			// 是否开启菜单背景颜色渐变
+			isMenuBarColorGradual: false,
+			// 是否开启菜单字体背景高亮
+			isMenuBarColorHighlight: false,
+			// 是否开启菜单字体背景高亮
+
+			/* 界面设置
+            ------------------------------- */
+			// 是否开启菜单水平折叠效果
+			isCollapse: false,
+			// 是否开启菜单手风琴效果
+			isUniqueOpened: false,
+			// 是否开启固定 Header
+			isFixedHeader: false,
+			// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
+			isFixedHeaderChange: false,
+			// 是否开启经典布局分割菜单（仅经典布局生效）
+			isClassicSplitMenu: false,
+			// 是否开启自动锁屏
+			isLockScreen: false,
+			// 开启自动锁屏倒计时(s/秒)
+			lockScreenTime: 30,
+
+			/* 界面显示
+            ------------------------------- */
+			// 是否开启侧边栏 Logo
+			isShowLogo: false,
+			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
+			isShowLogoChange: false,
+			// 是否开启 Breadcrumb
+			isBreadcrumb: true,
+			// 是否开启 Tagsview
+			isTagsview: true,
+			// 是否开启 Breadcrumb 图标
+			isBreadcrumbIcon: false,
+			// 是否开启 Tagsview 图标
+			isTagsviewIcon: false,
+			// 是否开启 TagsView 缓存
+			isCacheTagsView: false,
+			// 是否开启 TagsView 拖拽
+			isSortableTagsView: true,
+			// 是否开启 Footer 底部版权信息
+			isFooter: false,
+			// 是否开启灰色模式
+			isGrayscale: false,
+			// 是否开启色弱模式
+			isInvert: false,
+			// 是否开启水印
+			isWartermark: false,
+			// 水印文案
+			wartermarkText: 'small@小柒',
+
+			/* 其它设置
+            ------------------------------- */
+			// 默认 Tagsview 风格，可选 1、 tags-style-one 2、 tags-style-two 3、 tags-style-three 4、 tags-style-four
+			tagsStyle: 'tags-style-one',
+			// 默认主页面切换动画，可选 1、 slide-right 2、 slide-left 3、 opacitys
+			animation: 'slide-right',
+			// 默认分栏高亮风格，可选 1、 圆角 columns-round 2、 卡片 columns-card
+			columnsAsideStyle: 'columns-round',
+
+			/* 布局切换
+            ------------------------------- */
+			// 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
+			layout: 'defaults',
+
+			/* 后端控制路由
+            ------------------------------- */
+			// 是否开启后端控制路由
+			isRequestRoutes: false,
+
+			/* 全局网站标题 / 副标题
+            ------------------------------- */
+			// 网站主标题（菜单导航、浏览器当前网页标题）
+			globalTitle: 'vue-next-admin',
+			// 网站副标题（登录页顶部文字）
+			globalViceTitle: 'SMALL@小柒',
+		},
+	},
+	mutations: {
+		// 设置布局配置
+		getThemeConfig(state: any, data: object) {
+			state.themeConfig = data;
+		},
+	},
+	actions: {
+		// 设置布局配置
+		setThemeConfig({ commit }, data: object) {
+			commit('getThemeConfig', data);
+		},
+	},
+};
+
+export default themeConfigModule;

src/store/modules/userInfos.ts

@@ -0,0 +1,27 @@
+import { Module } from 'vuex';
+import { getSession } from '/@/utils/storage.ts';
+
+const userInfosModule: Module<UserInfosState, RootStateTypes> = {
+	namespaced: true,
+	state: {
+		userInfos: {},
+	},
+	mutations: {
+		// 设置用户信息
+		getUserInfos(state: any, data: object) {
+			state.userInfos = data;
+		},
+	},
+	actions: {
+		// 设置用户信息
+		async setUserInfos({ commit }, data: object) {
+			if (data) {
+				commit('getUserInfos', data);
+			} else {
+				if (getSession('userInfo')) commit('getUserInfos', getSession('userInfo'));
+			}
+		},
+	},
+};
+
+export default userInfosModule;

src/theme/app.scss

@@ -14,8 +14,7 @@ body,
   padding: 0;
   width: 100%;
   height: 100%;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-    Microsoft YaHei, SimSun, sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;

src/theme/element.scss

@@ -243,12 +243,8 @@
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */
 .el-input__inner:focus,
-.el-input-number__decrease:hover:not(.is-disabled)
+.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
-  ~ .el-input
+.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
-  .el-input__inner:not(.is-disabled),
-.el-input-number__increase:hover:not(.is-disabled)
-  ~ .el-input
-  .el-input__inner:not(.is-disabled),
 .el-textarea__inner:focus {
 	border-color: set-color(primary);
 }
@@ -813,9 +809,7 @@
 .el-tabs__item.is-active,
 .el-tabs__item:hover,
 .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
-.el-tabs--border-card
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
-  > .el-tabs__header
-  .el-tabs__item:not(.is-disabled):hover {
 	color: set-color(primary);
 }
 .el-tabs__active-bar {

src/utils/arrayOperation.ts

@@ -1,11 +1,11 @@
 // 判断两数组是否相同
 export function judementSameArr(news: Array<string>, old: Array<string>) {
-    let count = 0
+	let count = 0;
-    const leng = old.length
+	const leng = old.length;
 	for (let i in old) {
 		for (let j in news) {
-            if (old[i] === news[j]) count++
+			if (old[i] === news[j]) count++;
 		}
 	}
-    return count === leng ? true : false
+	return count === leng ? true : false;
 }

src/utils/authDirective.ts

@@ -1,31 +1,31 @@
-import type { App } from 'vue'
+import type { App } from 'vue';
-import { store } from "/@/store/index.ts";
+import { store } from '/@/store/index.ts';
-import { judementSameArr } from '/@/utils/arrayOperation.ts'
+import { judementSameArr } from '/@/utils/arrayOperation.ts';
 
 export function authDirective(app: App) {
 	// 单个权限验证（v-auth="xxx"）
 	app.directive('auth', {
 		mounted(el, binding) {
-            if (!store.state.userInfos.authBtnList.some((v: any) => v === binding.value)) el.parentNode.removeChild(el)
+			if (!store.state.userInfos.userInfos.authBtnList.some((v: any) => v === binding.value)) el.parentNode.removeChild(el);
-        }
+		},
-    })
+	});
 	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
 	app.directive('auths', {
 		mounted(el, binding) {
-            let flag = false
+			let flag = false;
-            store.state.userInfos.authBtnList.map((val: any) => {
+			store.state.userInfos.userInfos.authBtnList.map((val: any) => {
 				binding.value.map((v: any) => {
-                    if (val === v) flag = true
+					if (val === v) flag = true;
-                })
+				});
-            })
+			});
-            if (!flag) el.parentNode.removeChild(el)
+			if (!flag) el.parentNode.removeChild(el);
-        }
+		},
-    })
+	});
 	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
 	app.directive('auth-all', {
 		mounted(el, binding) {
-            const flag = judementSameArr(binding.value, store.state.userInfos.authBtnList)
+			const flag = judementSameArr(binding.value, store.state.userInfos.userInfos.authBtnList);
-            if (!flag) el.parentNode.removeChild(el)
+			if (!flag) el.parentNode.removeChild(el);
-        }
+		},
-    })
+	});
 }

src/utils/authFunction.ts

@@ -1,24 +1,23 @@
-import { store } from "/@/store/index.ts";
+import { store } from '/@/store/index.ts';
-import { judementSameArr } from '/@/utils/arrayOperation.ts'
+import { judementSameArr } from '/@/utils/arrayOperation.ts';
 
 // 单个权限验证
 export function auth(value: string) {
-    return store.state.userInfos.authBtnList.some((v: any) => v === value)
+	return store.state.userInfos.userInfos.authBtnList.some((v: any) => v === value);
 }
 
 // 多个权限验证，满足一个则为 true
 export function auths(value: Array<string>) {
-    let flag = false
+	let flag = false;
-    store.state.userInfos.authBtnList.map((val: any) => {
+	store.state.userInfos.userInfos.authBtnList.map((val: any) => {
 		value.map((v: any) => {
-            if (val === v) flag = true
+			if (val === v) flag = true;
-        })
+		});
-    })
+	});
-    return flag
+	return flag;
 }
 
 // 多个权限验证，全部满足则为 true
 export function authAll(value: Array<string>) {
-    return judementSameArr(value, store.state.userInfos.authBtnList)
+	return judementSameArr(value, store.state.userInfos.userInfos.authBtnList);
 }
-

src/utils/formatTime.ts

@@ -12,42 +12,43 @@
  * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW QQQQ")  // 2020-02-09 14:46:12 星期日 第一季度
  */
 export function formatDate(date: Date, format: string) {
-    let we = date.getDay() // 星期
+	let we = date.getDay(); // 星期
-    let qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度
+	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
 	const opt: any = {
-        "Y+": date.getFullYear().toString(), // 年
+		'Y+': date.getFullYear().toString(), // 年
-        "m+": (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
+		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
-        "d+": date.getDate().toString(), // 日
+		'd+': date.getDate().toString(), // 日
-        "H+": date.getHours().toString(), // 时
+		'H+': date.getHours().toString(), // 时
-        "M+": date.getMinutes().toString(), // 分
+		'M+': date.getMinutes().toString(), // 分
-        "S+": date.getSeconds().toString(), // 秒
+		'S+': date.getSeconds().toString(), // 秒
-        "q+": qut, // 季度
+		'q+': qut, // 季度
-    }
+	};
 	// 中文数字 (星期)
 	const week: any = {
-        "0": "日",
+		'0': '日',
-        "1": "一",
+		'1': '一',
-        "2": "二",
+		'2': '二',
-        "3": "三",
+		'3': '三',
-        "4": "四",
+		'4': '四',
-        "5": "五",
+		'5': '五',
-        "6": "六",
+		'6': '六',
-    }
+	};
 	// 中文数字（季度）
 	const quarter: any = {
-        "1": "一",
+		'1': '一',
-        "2": "二",
+		'2': '二',
-        "3": "三",
+		'3': '三',
-        "4": "四",
+		'4': '四',
-    }
+	};
-    if (/(W+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? RegExp.$1.length > 2 ? "星期" + week[we] : "周" + week[we] : week[we])
+	if (/(W+)/.test(format))
-    if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? "第" + quarter[qut] + "季度" : quarter[qut])
+		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
+	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
 	for (let k in opt) {
-        let r = new RegExp("(" + k + ")").exec(format);
+		let r = new RegExp('(' + k + ')').exec(format);
 		// 若输入的长度不为1，则前面补零
-        if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, "0"))
+		if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
 	}
-    return format
+	return format;
 }
 
 /**
@@ -67,37 +68,37 @@ export function formatDate(date: Date, format: string) {
  * formatPast("2020-06-01")                                   // 2020-06-01
  * formatPast("2020-06-01", "YYYY-mm-dd HH:MM:SS WWW QQQQ")   // 2020-06-01 08:00:00 星期一 第二季度
  */
-export function formatPast(param: any, format: string = "YYYY-mm-dd") {
+export function formatPast(param: any, format: string = 'YYYY-mm-dd') {
 	// 传入格式处理、存储转换值
-    let t: any, s: any
+	let t: any, s: any;
 	// 获取js 时间戳
-    let time: any = new Date().getTime()
+	let time: any = new Date().getTime();
 	// 是否是对象
-    typeof param === "string" || "object" ? (t = new Date(param).getTime()) : (t = param)
+	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
 	// 当前时间戳 - 传入时间戳
-    time = Number.parseInt(`${time - t}`)
+	time = Number.parseInt(`${time - t}`);
 	if (time < 10000) {
 		// 10秒内
-        return "刚刚"
+		return '刚刚';
 	} else if (time < 60000 && time >= 10000) {
 		// 超过10秒少于1分钟内
-        s = Math.floor(time / 1000)
+		s = Math.floor(time / 1000);
-        return `${s}秒前`
+		return `${s}秒前`;
 	} else if (time < 3600000 && time >= 60000) {
 		// 超过1分钟少于1小时
-        s = Math.floor(time / 60000)
+		s = Math.floor(time / 60000);
-        return `${s}分钟前`
+		return `${s}分钟前`;
 	} else if (time < 86400000 && time >= 3600000) {
 		// 超过1小时少于24小时
-        s = Math.floor(time / 3600000)
+		s = Math.floor(time / 3600000);
-        return `${s}小时前`
+		return `${s}小时前`;
 	} else if (time < 259200000 && time >= 86400000) {
 		// 超过1天少于3天内
-        s = Math.floor(time / 86400000)
+		s = Math.floor(time / 86400000);
-        return `${s}天前`
+		return `${s}天前`;
 	} else {
 		// 超过3天
-        let date = typeof param === "string" || "object" ? new Date(param) : param
+		let date = typeof param === 'string' || 'object' ? new Date(param) : param;
 		return formatDate(date, format);
 	}
 }
@@ -106,13 +107,13 @@ export function formatPast(param: any, format: string = "YYYY-mm-dd") {
  * formatAxis(new Date())   // 上午好
  */
 export function formatAxis(param: any) {
-    let hour: number = new Date(param).getHours()
+	let hour: number = new Date(param).getHours();
-    if (hour < 6) return "凌晨好"
+	if (hour < 6) return '凌晨好';
-    else if (hour < 9) return "早上好"
+	else if (hour < 9) return '早上好';
-    else if (hour < 12) return "上午好"
+	else if (hour < 12) return '上午好';
-    else if (hour < 14) return "中午好"
+	else if (hour < 14) return '中午好';
-    else if (hour < 17) return "下午好"
+	else if (hour < 17) return '下午好';
-    else if (hour < 19) return "傍晚好"
+	else if (hour < 19) return '傍晚好';
-    else if (hour < 22) return "晚上好"
+	else if (hour < 22) return '晚上好';
-    else return "夜里好"
+	else return '夜里好';
 }

src/utils/getStyleSheets.ts

@@ -1,111 +1,96 @@
-import { nextTick } from "vue"
+import { nextTick } from 'vue';
 
 // 获取阿里字体图标
 const getAlicdnIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-            const styles: any = document.styleSheets
+			const styles: any = document.styleSheets;
-            let sheetsList = []
+			let sheetsList = [];
-            let sheetsIconList = []
+			let sheetsIconList = [];
 			for (let i = 0; i < styles.length; i++) {
-                if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
+				if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
-                    sheetsList.push(styles[i])
+					sheetsList.push(styles[i]);
 				}
 			}
 			for (let i = 0; i < sheetsList.length; i++) {
 				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
-                    if (
+					if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
-                        sheetsList[i].cssRules[j].selectorText &&
-                        sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
-                    ) {
 						sheetsIconList.push(
-                            `${sheetsList[i].cssRules[j].selectorText
+							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
-                                .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+						);
-                                .replace(/\:\:before/gi, "")}`
-                        )
 					}
 				}
 			}
-            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
-            else reject('未获取到值，请刷新重试')
+			else reject('未获取到值，请刷新重试');
-        })
+		});
-    })
+	});
-}
+};
 
 // 初始化获取 css 样式，获取 element plus 自带图标
 const elementPlusIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-            const styles: any = document.styleSheets
+			const styles: any = document.styleSheets;
-            let sheetsIconList = []
+			let sheetsIconList = [];
 			for (let i = 0; i < styles.length; i++) {
 				for (let j = 0; j < styles[i].cssRules.length; j++) {
-                    if (
+					if (styles[i].cssRules[j].selectorText && styles[i].cssRules[j].selectorText.indexOf('.el-icon-') === 0) {
-                        styles[i].cssRules[j].selectorText &&
-                        styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
-                    ) {
 						sheetsIconList.push(
-                            `${styles[i].cssRules[j].selectorText
+							`${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
-                                .substring(1, styles[i].cssRules[j].selectorText.length)
+						);
-                                .replace(/\:\:before/gi, "")}`
-                        )
 					}
 				}
 			}
-            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
-            else reject('未获取到值，请刷新重试')
+			else reject('未获取到值，请刷新重试');
-        })
+		});
-    })
+	});
-}
+};
 
 // 初始化获取 css 样式，这里使用 fontawesome 的图标
 const awesomeIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-            const styles: any = document.styleSheets
+			const styles: any = document.styleSheets;
-            let sheetsList = []
+			let sheetsList = [];
-            let sheetsIconList = []
+			let sheetsIconList = [];
 			for (let i = 0; i < styles.length; i++) {
-                if (
+				if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
-                    styles[i].href &&
+					sheetsList.push(styles[i]);
-                    styles[i].href.indexOf("netdna.bootstrapcdn.com") > -1
-                ) {
-                    sheetsList.push(styles[i])
 				}
 			}
 			for (let i = 0; i < sheetsList.length; i++) {
 				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
 					if (
 						sheetsList[i].cssRules[j].selectorText &&
-                        sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
+						sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
-                        sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
+						sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
 					) {
 						sheetsIconList.push(
-                            `${sheetsList[i].cssRules[j].selectorText
+							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
-                                .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+						);
-                                .replace(/\:\:before/gi, "")}`
-                        )
 					}
 				}
 			}
-            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
-            else reject('未获取到值，请刷新重试')
+			else reject('未获取到值，请刷新重试');
-        })
+		});
-    })
+	});
-}
+};
 
 // 定义导出方法集合
 const initIconfont = {
 	ali: () => {
-        return getAlicdnIconfont()
+		return getAlicdnIconfont();
 	},
 	ele: () => {
-        return elementPlusIconfont()
+		return elementPlusIconfont();
 	},
 	awe: () => {
-        return awesomeIconfont()
+		return awesomeIconfont();
-    }
+	},
-}
+};
 
 // 导出方法
-export default initIconfont
+export default initIconfont;

src/utils/request.ts

@@ -1,27 +1,27 @@
-import axios from "axios"
+import axios from 'axios';
-import { ElMessage, ElMessageBox } from "element-plus"
+import { ElMessage, ElMessageBox } from 'element-plus';
-import { clearSession, getSession } from "/@/utils/storage.ts"
+import { clearSession, getSession } from '/@/utils/storage.ts';
-import router, { resetRoute } from "/@/router/index.ts"
+import router, { resetRoute } from '/@/router/index.ts';
 
 // 配置新建一个 axios 实例
 const service = axios.create({
 	baseURL: 'http://localhost:10000/',
 	timeout: 50000,
-	headers: { "Content-Type": "application/json" }
+	headers: { 'Content-Type': 'application/json' },
 });
 
 // 添加请求拦截器
 service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
-		if (getSession("token")) {
+		if (getSession('token')) {
-			config.headers.common["Authorization"] = `${getSession("token")}`
+			config.headers.common['Authorization'] = `${getSession('token')}`;
 		}
-		return config
+		return config;
 	},
 	(error) => {
 		// 对请求错误做些什么
-		return Promise.reject(error)
+		return Promise.reject(error);
 	}
 );
 
@@ -29,32 +29,34 @@ service.interceptors.request.use(
 service.interceptors.response.use(
 	(response) => {
 		// 对响应数据做点什么
-		const res = response.data
+		const res = response.data;
 		if (res.code && res.code !== 0) {
 			// `token` 过期或者账号已在别处登录
 			if (res.code === 401 || res.code === 4001) {
 				clearSession(); // 清除浏览器全部临时缓存
-				router.push("/login") // 去登录页面
+				router.push('/login'); // 去登录页面
-				resetRoute() // 删除/重置路由
+				resetRoute(); // 删除/重置路由
-				ElMessageBox.alert('你已被登出，请重新登录', '提示', {}).then(() => { }).catch(() => { })
+				ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
+					.then(() => {})
+					.catch(() => {});
 			}
-			return Promise.reject(service.interceptors.response)
+			return Promise.reject(service.interceptors.response);
 		} else {
-			return response.data
+			return response.data;
 		}
 	},
 	(error) => {
 		// 对响应错误做点什么
-		if (error.message.indexOf("timeout") != -1) {
+		if (error.message.indexOf('timeout') != -1) {
-			ElMessage.error("网络超时")
+			ElMessage.error('网络超时');
-		} else if (error.message == "Network Error") {
+		} else if (error.message == 'Network Error') {
-			ElMessage.error("网络连接错误")
+			ElMessage.error('网络连接错误');
 		} else {
-			if (error.response.data) ElMessage.error(error.response.statusText)
+			if (error.response.data) ElMessage.error(error.response.statusText);
-			else ElMessage.error('接口路径找不到')
+			else ElMessage.error('接口路径找不到');
 		}
-		return Promise.reject(error)
+		return Promise.reject(error);
 	}
 );
 
-export default service
+export default service;

src/utils/setIconfont.ts

@@ -1,45 +1,42 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-    '//at.alicdn.com/t/font_2298093_n459lh5kpoh.css',
+	'//at.alicdn.com/t/font_2298093_rwhkigmjh19.css',
-    '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
+	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
-]
+];
 // 第三方 js url
-const jsCdnUrlList: Array<string> = [
+const jsCdnUrlList: Array<string> = [];
-    'https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.8.1/dist/g6.min.js',
-    'https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js'
-]
 
 // 动态设置字体图标
 export function setCssCdn() {
-    if (cssCdnUrlList.length <= 0) return false
+	if (cssCdnUrlList.length <= 0) return false;
-    cssCdnUrlList.map(v => {
+	cssCdnUrlList.map((v) => {
-        let link = document.createElement('link')
+		let link = document.createElement('link');
-        link.rel = 'stylesheet'
+		link.rel = 'stylesheet';
-        link.href = v
+		link.href = v;
-        link.crossOrigin = 'anonymous'
+		link.crossOrigin = 'anonymous';
-        document.getElementsByTagName('head')[0].appendChild(link)
+		document.getElementsByTagName('head')[0].appendChild(link);
-    })
+	});
 }
 
 // 批量设置第三方js
 export function setJsCdn() {
-    if (jsCdnUrlList.length <= 0) return false
+	if (jsCdnUrlList.length <= 0) return false;
-    jsCdnUrlList.map(v => {
+	jsCdnUrlList.map((v) => {
-        let link = document.createElement('script')
+		let link = document.createElement('script');
-        link.src = v
+		link.src = v;
-        document.body.appendChild(link)
+		document.body.appendChild(link);
-    })
+	});
 }
 
 // 设置执行函数
 const setIntroduction = {
 	cssCdn: () => {
-        setCssCdn()
+		setCssCdn();
 	},
 	jsCdn: () => {
-        setJsCdn()
+		setJsCdn();
-    }
+	},
-}
+};
 
 // 导出函数方法
-export default setIntroduction
+export default setIntroduction;

src/utils/storage.ts

@@ -1,37 +1,37 @@
 // 1. localStorage
 // 设置永久缓存
 export function setLocal(key: string, val: any) {
-  window.localStorage.setItem(key, JSON.stringify(val))
+	window.localStorage.setItem(key, JSON.stringify(val));
 }
 // 获取永久缓存
 export function getLocal(key: string) {
-  let json: any = window.localStorage.getItem(key)
+	let json: any = window.localStorage.getItem(key);
-  return JSON.parse(json)
+	return JSON.parse(json);
 }
 // 移除永久缓存
 export function removeLocal(key: string) {
-  window.localStorage.removeItem(key)
+	window.localStorage.removeItem(key);
 }
 // 移除全部永久缓存
 export function clearLocal() {
-  window.localStorage.clear()
+	window.localStorage.clear();
 }
 
 // 2. sessionStorage
 // 设置临时缓存
 export function setSession(key: string, val: any) {
-  window.sessionStorage.setItem(key, JSON.stringify(val))
+	window.sessionStorage.setItem(key, JSON.stringify(val));
 }
 // 获取临时缓存
 export function getSession(key: string) {
-  let json: any = window.sessionStorage.getItem(key)
+	let json: any = window.sessionStorage.getItem(key);
-  return JSON.parse(json)
+	return JSON.parse(json);
 }
 // 移除临时缓存
 export function removeSession(key: string) {
-  window.sessionStorage.removeItem(key)
+	window.sessionStorage.removeItem(key);
 }
 // 移除全部临时缓存
 export function clearSession() {
-  window.sessionStorage.clear()
+	window.sessionStorage.clear();
 }

src/utils/theme.ts

@@ -1,39 +1,39 @@
-import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus';
 
 // hex颜色转rgb颜色
 export function hexToRgb(str: any) {
-    let hexs: any = ''
+	let hexs: any = '';
-    let reg = /^\#?[0-9A-Fa-f]{6}$/
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-    if (!reg.test(str)) return ElMessage({ type: 'warning', message: "输入错误的hex" })
+	if (!reg.test(str)) return ElMessage({ type: 'warning', message: '输入错误的hex' });
-    str = str.replace("#", "")
+	str = str.replace('#', '');
-    hexs = str.match(/../g)
+	hexs = str.match(/../g);
-    for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)
+	for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
-    return hexs
+	return hexs;
 }
 
 // rgb颜色转Hex颜色
 export function rgbToHex(r: any, g: any, b: any) {
-    let reg = /^\d{1,3}$/
+	let reg = /^\d{1,3}$/;
-    if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: "输入错误的rgb颜色值" })
+	if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: '输入错误的rgb颜色值' });
-    let hexs = [r.toString(16), g.toString(16), b.toString(16)]
+	let hexs = [r.toString(16), g.toString(16), b.toString(16)];
-    for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`
+	for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
-    return `#${hexs.join("")}`
+	return `#${hexs.join('')}`;
 }
 
 // 加深颜色值，level为加深的程度，限0-1之间
 export function getDarkColor(color: any, level: number) {
-    let reg = /^\#?[0-9A-Fa-f]{6}$/
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-    if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
+	if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
-    let rgb = hexToRgb(color)
+	let rgb = hexToRgb(color);
-    for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
+	for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
-    return rgbToHex(rgb[0], rgb[1], rgb[2])
+	return rgbToHex(rgb[0], rgb[1], rgb[2]);
 }
 
 // 变浅颜色值，level为加深的程度，限0-1之间
 export function getLightColor(color: any, level: number) {
-    let reg = /^\#?[0-9A-Fa-f]{6}$/
+	let reg = /^\#?[0-9A-Fa-f]{6}$/;
-    if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
+	if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
-    let rgb = hexToRgb(color)
+	let rgb = hexToRgb(color);
-    for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
+	for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
-    return rgbToHex(rgb[0], rgb[1], rgb[2])
+	return rgbToHex(rgb[0], rgb[1], rgb[2]);
 }

src/utils/themeConfig.ts

@@ -1,112 +0,0 @@
-// 布局配置
-export default {
-    // 是否开启布局配置抽屉
-    isDrawer: false,
-
-    /* 全局主题
-    ------------------------------- */
-    // 默认 primary 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    primary: "#409eff",
-    // 默认 success 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    success: "#67c23a",
-    // 默认 info 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    info: "#909399",
-    // 默认 warning 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    warning: "#e6a23c",
-    // 默认 danger 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    danger: "#f56c6c",
-
-    /* 菜单 / 顶栏
-    ------------------------------- */
-    // 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    topBar: "#ffffff",
-    // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    menuBar: "#545c64",
-    // 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    columnsMenuBar: '#545c64',
-    // 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    topBarColor: "#606266",
-    // 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    menuBarColor: "#eaeaea",
-    // 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-    columnsMenuBarColor: '#e6e6e6',
-    // 是否开启顶栏背景颜色渐变
-    isTopBarColorGradual: false,
-    // 是否开启菜单背景颜色渐变
-    isMenuBarColorGradual: false,
-    // 是否开启菜单字体背景高亮
-    isMenuBarColorHighlight: false,
-    // 是否开启菜单字体背景高亮
-
-    /* 界面设置
-    ------------------------------- */
-    // 是否开启菜单水平折叠效果
-    isCollapse: false,
-    // 是否开启菜单手风琴效果
-    isUniqueOpened: false,
-    // 是否开启固定 Header
-    isFixedHeader: false,
-    // 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
-    isFixedHeaderChange: false,
-    // 是否开启经典布局分割菜单（仅经典布局生效）
-    isClassicSplitMenu: false,
-    // 是否开启自动锁屏
-    isLockScreen: false,
-    // 开启自动锁屏倒计时(s/秒)
-    lockScreenTime: 30,
-
-    /* 界面显示
-    ------------------------------- */
-    // 是否开启侧边栏 Logo
-    isShowLogo: false,
-    // 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
-    isShowLogoChange: false,
-    // 是否开启 Breadcrumb
-    isBreadcrumb: true,
-    // 是否开启 Tagsview
-    isTagsview: true,
-    // 是否开启 Breadcrumb 图标
-    isBreadcrumbIcon: false,
-    // 是否开启 Tagsview 图标 
-    isTagsviewIcon: false,
-    // 是否开启 TagsView 缓存
-    isCacheTagsView: false,
-    // 是否开启 TagsView 拖拽
-    isSortableTagsView: true,
-    // 是否开启 Footer 底部版权信息
-    isFooter: false,
-    // 是否开启灰色模式
-    isGrayscale: false,
-    // 是否开启色弱模式
-    isInvert: false,
-    // 是否开启水印
-    isWartermark: false,
-    // 水印文案
-    wartermarkText: 'small@小柒',
-
-    /* 其它设置
-    ------------------------------- */
-    // 默认 Tagsview 风格，可选 1、 tagsStyleOne 2、 tagsStyleTwo 3、 tagsStyleThree 4、 tagsStyleFour
-    tagsStyle: 'tagsStyleOne',
-    // 默认主页面切换动画，可选 1、 slideRight 2、 slideLeft 3、 opacitys
-    animation: 'slideRight',
-    // 默认分栏高亮风格，可选 1、 圆角 columnsRound 2、 卡片 columnsCard
-    columnsAsideStyle: 'columnsRound',
-
-    /* 布局切换
-    ------------------------------- */
-    // 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
-    layout: 'defaults',
-
-    /* 后端控制路由
-    ------------------------------- */
-    // 是否开启后端控制路由
-    isRequestRoutes: false,
-
-    /* 全局网站标题 / 副标题
-    ------------------------------- */
-    // 网站主标题（菜单导航、浏览器当前网页标题）
-    globalTitle: 'vue-next-admin',
-    // 网站副标题（登录页顶部文字）
-    globalViceTitle: 'SMALL@小柒'
-}

src/utils/toolsValidate.js

@@ -1,219 +0,0 @@
-/**
- * 2020.11.29 lyt 整理
- * 工具类集合，适用于平时开发
- * 后期改成 xx.ts
- */
-
-// 小数或整数(不可以负数)
-export function verifyNumberIntegerAndFloat(val) {
-    // 匹配空格
-    let v = val.replace(/(^\s*)|(\s*$)/g, "")
-    // 只能是数字和小数点，不能是其他输入
-    v = v.replace(/[^\d.]/g, "")
-    // 以0开始只能输入一个
-    v = v.replace(/^0{2}$/g, "0")
-    // 保证第一位只能是数字，不能是点
-    v = v.replace(/^\./g, "")
-    // 小数只能出现1位
-    v = v.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
-    // 小数点后面保留2位
-    v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
-    // 返回结果
-    return v
-}
-
-// 正整数验证
-export function verifiyNumberInteger(val) {
-    // 匹配空格
-    let v = val.replace(/(^\s*)|(\s*$)/g, "")
-    // 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
-    v = v.replace(/[\.]*/g, "")
-    // 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
-    v = v.replace(/(^0[\d]*)$/g, "0")
-    // 首位是0,只能出现一次
-    v = v.replace(/^0\d$/g, "0")
-    // 只匹配数字
-    v = v.replace(/[^\d]/g, "")
-    // 返回结果
-    return v
-}
-
-// 去掉中文及空格
-export function verifyCnAndSpace(val) {
-    // 匹配中文与空格
-    let v = val.replace(/[\u4e00-\u9fa5\s]+/g, "")
-    // 匹配空格
-    v = v.replace(/(^\s*)|(\s*$)/g, "")
-    // 返回结果
-    return v
-}
-
-// 去掉英文及空格
-export function verifyEnAndSpace(val) {
-    // 匹配英文与空格
-    let v = val.replace(/[a-zA-Z]+/g, "")
-    // 匹配空格
-    v = v.replace(/(^\s*)|(\s*$)/g, "")
-    // 返回结果
-    return v
-}
-
-// 禁止输入空格
-export function verifyAndSpace(val) {
-    // 匹配空格
-    let v = val.replace(/(^\s*)|(\s*$)/g, "")
-    // 返回结果
-    return v
-}
-
-// 金额用 `,` 区分开
-export function verifyNumberComma(val) {
-    // 调用小数或整数(不可以负数)方法
-    let v = verifyNumberIntegerAndFloat(val)
-    // 字符串转成数组
-    v = v.toString().split(".")
-    // \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
-    v[0] = v[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    // 数组转字符串
-    v = v.join(".")
-    // 返回结果
-    return v
-}
-
-// 匹配文字变色（搜索时）
-export function verifyTextColor(val, text = '', color = 'red') {
-    // 返回内容，添加颜色
-    let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`)
-    // 返回结果
-    return v
-}
-
-// 数字转中文大写
-export function verifyNumberCnUppercase(val, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
-    // 当前内容字符串添加 2个0，为什么??
-    val += "00"
-    // 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
-    let lookup = val.indexOf('.')
-    // substring：不包含结束下标内容，substr：包含结束下标内容
-    if (lookup >= 0) val = val.substring(0, lookup) + val.substr(lookup + 1, 2)
-    // 根据内容 val 的长度，截取返回对应大写
-    unit = unit.substr(unit.length - val.length)
-    // 循环截取拼接大写
-    for (let i = 0; i < val.length; i++) {
-        v += '零壹贰叁肆伍陆柒捌玖'.substr(val.substr(i, 1), 1) + unit.substr(i, 1)
-    }
-    // 正则处理
-    v = v.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元")
-    // 返回结果
-    return v
-}
-
-// 手机号码
-export function verifyPhone(val) {
-    // false: 手机号码不正确
-    if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(val)) return false
-    // true: 手机号码正确
-    else return true
-}
-
-// 国内电话号码
-export function verifyTelPhone(val) {
-    // false: 国内电话号码不正确
-    if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false
-    // true: 国内电话号码正确
-    else return true
-}
-
-// 登录账号 (字母开头，允许5-16字节，允许字母数字下划线)
-export function verifyAccount(val) {
-    // false: 登录账号不正确
-    if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false
-    // true: 登录账号正确
-    else return true
-}
-
-// 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线)
-export function verifyPassword(val) {
-    // false: 密码不正确
-    if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false
-    // true: 密码正确
-    else return true
-}
-
-// 强密码 (字母+数字+特殊字符，长度在6-16之间)
-export function verifyPasswordPowerful(val) {
-    // false: 强密码不正确
-    if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) return false
-    // true: 强密码正确
-    else return true
-}
-
-// 密码强度
-export function verifyPasswordStrength(val) {
-    let v = ''
-    // 弱：纯数字，纯字母，纯特殊字符
-    if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱'
-    // 中：字母+数字，字母+特殊字符，数字+特殊字符
-    if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中'
-    // 强：字母+数字+特殊字符
-    if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '强'
-    // 返回结果
-    return v
-}
-
-// IP地址
-export function verifyIPAddress(val) {
-    // false: IP地址不正确
-    if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(val)) return false
-    // true: IP地址正确
-    else return true
-}
-
-// 邮箱
-export function verifyEmail(val) {
-    // false: 邮箱不正确
-    if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)) return false
-    // true: 邮箱正确
-    else return true
-}
-
-// 身份证
-export function verifyIdCard(val) {
-    // false: 身份证不正确
-    if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) return false
-    // true: 身份证正确
-    else return true
-}
-
-// 姓名
-export function verifyFullName(val) {
-    // false: 姓名不正确
-    if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false
-    // true: 姓名正确
-    else return true
-}
-
-// 邮政编码
-export function verifyPostalCode(val) {
-    // false: 邮政编码不正确
-    if (!/^[1-9][0-9]{5}$/.test(val)) return false
-    // true: 邮政编码正确
-    else return true
-}
-
-// url
-export function verifyUrl(val) {
-    // false: url不正确
-    if (!/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(val)) return false
-    // true: url正确
-    else return true
-}
-
-// 车牌号
-export function verifyCarNum(val) {
-    // false: 车牌号不正确
-    if (!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(val)) return false
-    // true：车牌号正确
-    else return true
-
-}

src/utils/toolsValidate.ts

@@ -0,0 +1,246 @@
+/**
+ * 2020.11.29 lyt 整理
+ * 工具类集合，适用于平时开发
+ */
+
+// 小数或整数(不可以负数)
+export function verifyNumberIntegerAndFloat(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d.]/g, '');
+	// 以0开始只能输入一个
+	v = v.replace(/^0{2}$/g, '0');
+	// 保证第一位只能是数字，不能是点
+	v = v.replace(/^\./g, '');
+	// 小数只能出现1位
+	v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+	// 小数点后面保留2位
+	v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+	// 返回结果
+	return v;
+}
+
+// 正整数验证
+export function verifiyNumberInteger(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
+	v = v.replace(/[\.]*/g, '');
+	// 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
+	v = v.replace(/(^0[\d]*)$/g, '0');
+	// 首位是0,只能出现一次
+	v = v.replace(/^0\d$/g, '0');
+	// 只匹配数字
+	v = v.replace(/[^\d]/g, '');
+	// 返回结果
+	return v;
+}
+
+// 去掉中文及空格
+export function verifyCnAndSpace(val: string) {
+	// 匹配中文与空格
+	let v = val.replace(/[\u4e00-\u9fa5\s]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+// 去掉英文及空格
+export function verifyEnAndSpace(val: string) {
+	// 匹配英文与空格
+	let v = val.replace(/[a-zA-Z]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+// 禁止输入空格
+export function verifyAndSpace(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+// 金额用 `,` 区分开
+export function verifyNumberComma(val: string) {
+	// 调用小数或整数(不可以负数)方法
+	let v: any = verifyNumberIntegerAndFloat(val);
+	// 字符串转成数组
+	v = v.toString().split('.');
+	// \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
+	v[0] = v[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+	// 数组转字符串
+	v = v.join('.');
+	// 返回结果
+	return v;
+}
+
+// 匹配文字变色（搜索时）
+export function verifyTextColor(val: string, text = '', color = 'red') {
+	// 返回内容，添加颜色
+	let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
+	// 返回结果
+	return v;
+}
+
+// 数字转中文大写
+export function verifyNumberCnUppercase(val: any, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
+	// 当前内容字符串添加 2个0，为什么??
+	val += '00';
+	// 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
+	let lookup = val.indexOf('.');
+	// substring：不包含结束下标内容，substr：包含结束下标内容
+	if (lookup >= 0) val = val.substring(0, lookup) + val.substr(lookup + 1, 2);
+	// 根据内容 val 的长度，截取返回对应大写
+	unit = unit.substr(unit.length - val.length);
+	// 循环截取拼接大写
+	for (let i = 0; i < val.length; i++) {
+		v += '零壹贰叁肆伍陆柒捌玖'.substr(val.substr(i, 1), 1) + unit.substr(i, 1);
+	}
+	// 正则处理
+	v = v
+		.replace(/零角零分$/, '整')
+		.replace(/零[仟佰拾]/g, '零')
+		.replace(/零{2,}/g, '零')
+		.replace(/零([亿|万])/g, '$1')
+		.replace(/零+元/, '元')
+		.replace(/亿零{0,3}万/, '亿')
+		.replace(/^元/, '零元');
+	// 返回结果
+	return v;
+}
+
+// 手机号码
+export function verifyPhone(val: string) {
+	// false: 手机号码不正确
+	if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(val)) return false;
+	// true: 手机号码正确
+	else return true;
+}
+
+// 国内电话号码
+export function verifyTelPhone(val: string) {
+	// false: 国内电话号码不正确
+	if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false;
+	// true: 国内电话号码正确
+	else return true;
+}
+
+// 登录账号 (字母开头，允许5-16字节，允许字母数字下划线)
+export function verifyAccount(val: string) {
+	// false: 登录账号不正确
+	if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false;
+	// true: 登录账号正确
+	else return true;
+}
+
+// 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线)
+export function verifyPassword(val: string) {
+	// false: 密码不正确
+	if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false;
+	// true: 密码正确
+	else return true;
+}
+
+// 强密码 (字母+数字+特殊字符，长度在6-16之间)
+export function verifyPasswordPowerful(val: string) {
+	// false: 强密码不正确
+	if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		return false;
+	// true: 强密码正确
+	else return true;
+}
+
+// 密码强度
+export function verifyPasswordStrength(val: string) {
+	let v = '';
+	// 弱：纯数字，纯字母，纯特殊字符
+	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
+	// 中：字母+数字，字母+特殊字符，数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
+	// 强：字母+数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		v = '强';
+	// 返回结果
+	return v;
+}
+
+// IP地址
+export function verifyIPAddress(val: string) {
+	// false: IP地址不正确
+	if (
+		!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+			val
+		)
+	)
+		return false;
+	// true: IP地址正确
+	else return true;
+}
+
+// 邮箱
+export function verifyEmail(val: string) {
+	// false: 邮箱不正确
+	if (
+		!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+			val
+		)
+	)
+		return false;
+	// true: 邮箱正确
+	else return true;
+}
+
+// 身份证
+export function verifyIdCard(val: string) {
+	// false: 身份证不正确
+	if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) return false;
+	// true: 身份证正确
+	else return true;
+}
+
+// 姓名
+export function verifyFullName(val: string) {
+	// false: 姓名不正确
+	if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false;
+	// true: 姓名正确
+	else return true;
+}
+
+// 邮政编码
+export function verifyPostalCode(val: string) {
+	// false: 邮政编码不正确
+	if (!/^[1-9][0-9]{5}$/.test(val)) return false;
+	// true: 邮政编码正确
+	else return true;
+}
+
+// url
+export function verifyUrl(val: string) {
+	// false: url不正确
+	if (
+		!/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+			val
+		)
+	)
+		return false;
+	// true: url正确
+	else return true;
+}
+
+// 车牌号
+export function verifyCarNum(val: string) {
+	// false: 车牌号不正确
+	if (
+		!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
+			val
+		)
+	)
+		return false;
+	// true：车牌号正确
+	else return true;
+}

src/utils/viteBuild.ts

@@ -0,0 +1,26 @@
+// vite 打包相关
+import dotenv from 'dotenv';
+export interface ViteEnv {
+	VITE_PORT: number;
+	VITE_OPEN: boolean;
+	VITE_PUBLIC_PATH: string;
+}
+
+export function loadEnv(): ViteEnv {
+	const env = process.env.NODE_ENV;
+	const ret: any = {};
+	const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,];
+	envList.forEach((e) => {
+		dotenv.config({ path: e });
+	});
+	for (const envName of Object.keys(process.env)) {
+		console.log(envName);
+		let realName = (process.env as any)[envName].replace(/\\n/g, '\n');
+		realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+		if (envName === 'VITE_PORT') realName = Number(realName);
+		if (envName === 'VITE_OPEN') realName = Boolean(realName);
+		ret[envName] = realName;
+		process.env[envName] = realName;
+	}
+	return ret;
+}

src/utils/wartermark.ts

@@ -1,42 +1,42 @@
 // 页面添加水印效果
 const setWatermark = (str: any) => {
-    const id = "1.23452384164.123412416"
+	const id = '1.23452384164.123412416';
-    if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any)
+	if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
-    const can = document.createElement("canvas")
+	const can = document.createElement('canvas');
-    can.width = 250
+	can.width = 250;
-    can.height = 180
+	can.height = 180;
-    const cans: any = can.getContext("2d")
+	const cans: any = can.getContext('2d');
-    cans.rotate((-20 * Math.PI) / 180)
+	cans.rotate((-20 * Math.PI) / 180);
-    cans.font = "12px Vedana"
+	cans.font = '12px Vedana';
-    cans.fillStyle = "rgba(200, 200, 200, 0.30)"
+	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
-    cans.textAlign = "center"
+	cans.textAlign = 'center';
-    cans.textBaseline = "Middle"
+	cans.textBaseline = 'Middle';
-    cans.fillText(str, can.width / 10, can.height / 2)
+	cans.fillText(str, can.width / 10, can.height / 2);
-    const div = document.createElement("div")
+	const div = document.createElement('div');
-    div.id = id
+	div.id = id;
-    div.style.pointerEvents = "none"
+	div.style.pointerEvents = 'none';
-    div.style.top = "35px"
+	div.style.top = '35px';
-    div.style.left = "0px"
+	div.style.left = '0px';
-    div.style.position = "fixed"
+	div.style.position = 'fixed';
-    div.style.zIndex = "10000000"
+	div.style.zIndex = '10000000';
-    div.style.width = document.documentElement.clientWidth + "px"
+	div.style.width = document.documentElement.clientWidth + 'px';
-    div.style.height = document.documentElement.clientHeight + "px"
+	div.style.height = document.documentElement.clientHeight + 'px';
-    div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`
+	div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
-    document.body.appendChild(div)
+	document.body.appendChild(div);
-    return id
+	return id;
 };
 
 const watermark = {
 	// 设置水印
 	set: (str: any) => {
-        let id = setWatermark(str)
+		let id = setWatermark(str);
-        if (document.getElementById(id) === null) id = setWatermark(str)
+		if (document.getElementById(id) === null) id = setWatermark(str);
 	},
 	// 删除水印
 	del: () => {
-        let id = '1.23452384164.123412416'
+		let id = '1.23452384164.123412416';
-        if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any)
+		if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
-    }
+	},
-}
+};
 
-export default watermark
+export default watermark;

src/views/chart/chart.scss

@@ -343,9 +343,7 @@
 										background-repeat: no-repeat;
 										background-size: 50% 50%, 50% 50%;
 										background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-                    background-image: linear-gradient(#19d4ae, #19d4ae),
+										background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
-                      linear-gradient(#5ab1ef, #5ab1ef),
-                      linear-gradient(#fa6e86, #fa6e86),
 											linear-gradient(#ffb980, #ffb980);
 										animation: rotate 2s linear infinite;
 									}

src/views/chart/chart.ts

@@ -1,78 +1,78 @@
 // sky 天气
 export const skyList = [
 	{
-        v1: "时间",
+		v1: '时间',
-        v2: "天气",
+		v2: '天气',
-        v3: "温度",
+		v3: '温度',
-        v5: "降水",
+		v5: '降水',
-        v7: "风力",
+		v7: '风力',
-        type: "title",
+		type: 'title',
 	},
 	{
-        v1: "今天",
+		v1: '今天',
-        v2: "el-icon-cloudy-and-sunny",
+		v2: 'el-icon-cloudy-and-sunny',
-        v3: "20°/26°",
+		v3: '20°/26°',
-        v5: "50%",
+		v5: '50%',
-        v7: "13m/s",
+		v7: '13m/s',
 	},
 	{
-        v1: "明天",
+		v1: '明天',
-        v2: "el-icon-lightning",
+		v2: 'el-icon-lightning',
-        v3: "20°/26°",
+		v3: '20°/26°',
-        v5: "50%",
+		v5: '50%',
-        v7: "13m/s",
+		v7: '13m/s',
 	},
 ];
 
 // 当前设置状态
 export const dBtnList = [
 	{
-        v2: "阳光玫瑰种植",
+		v2: '阳光玫瑰种植',
-        v3: "126天",
+		v3: '126天',
-        v4: "设备在线",
+		v4: '设备在线',
-    }
+	},
 ];
 
 // 当前设备监测
 export const chartData4List = [
 	{
-        label: "温度",
+		label: '温度',
 	},
 	{
-        label: "光照",
+		label: '光照',
 	},
 	{
-        label: "湿度",
+		label: '湿度',
 	},
 	{
-        label: "风力",
+		label: '风力',
-    }
+	},
 ];
 
 // 3DEarth 地图周围按钮组
 export const earth3DBtnList = [
 	{
-        topLevelClass: "fixed-top",
+		topLevelClass: 'fixed-top',
-        icon: "el-icon-s-marketing",
+		icon: 'el-icon-s-marketing',
-        label: "环境监测",
+		label: '环境监测',
 		type: 0,
 	},
 	{
-        topLevelClass: "fixed-right",
+		topLevelClass: 'fixed-right',
-        icon: "el-icon-s-cooperation",
+		icon: 'el-icon-s-cooperation',
-        label: "精准管理",
+		label: '精准管理',
 		type: 1,
 	},
 	{
-        topLevelClass: "fixed-bottom",
+		topLevelClass: 'fixed-bottom',
-        icon: "el-icon-s-order",
+		icon: 'el-icon-s-order',
-        label: "数据报表",
+		label: '数据报表',
 		type: 2,
 	},
 	{
-        topLevelClass: "fixed-left",
+		topLevelClass: 'fixed-left',
-        icon: "el-icon-s-claim",
+		icon: 'el-icon-s-claim',
-        label: "产品追溯",
+		label: '产品追溯',
 		type: 3,
 	},
 ];

src/views/chart/head.vue

@@ -10,35 +10,35 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
-import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue'
+import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue';
-import { formatDate } from "/@/utils/formatTime"
+import { formatDate } from '/@/utils/formatTime.ts';
 export default {
-  name: "chartHead",
+	name: 'chartHead',
 	setup() {
 		const state = reactive({
 			time: {
-        txt: "",
+				txt: '',
-        fun: null,
+				fun: 0,
-      }
+			},
-    })
+		});
 		// 初始化时间
 		const initTime = () => {
-      state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
+			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
-      state.time.fun = setInterval(() => {
+			state.time.fun = window.setInterval(() => {
-        state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
+				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
 			}, 1000);
-    }
+		};
 		// 页面加载前
 		onBeforeMount(() => {
-      initTime()
+			initTime();
-    })
+		});
 		// 页面卸载时
 		onUnmounted(() => {
-      clearInterval(state.time.fun)
+			window.clearInterval(state.time.fun);
-    })
+		});
 		return {
-      ...toRefs(state)
+			...toRefs(state),
 		};
 	},
 };
@@ -77,13 +77,7 @@ export default {
 		background-size: 200% 100%;
 		-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
 		animation: masked-animation-data-v-b02d8052 4s linear infinite;
-    -webkit-box-reflect: below -2px -webkit-gradient(
+		-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
-        linear,
-        left top,
-        left bottom,
-        from(transparent),
-        to(hsla(0, 0%, 100%, 0.1))
-      );
 		position: relative;
 		@keyframes masked-animation {
 			0% {
@@ -95,19 +89,14 @@ export default {
 		}
 		position: relative;
 		&::after {
-      content: "";
+			content: '';
 			width: 250px;
 			position: absolute;
 			bottom: -15px;
 			left: 50%;
 			transform: translateX(-50%);
 			border: 1px transparent solid;
-      border-image: linear-gradient(
+			border-image: linear-gradient(to right, var(--color-primary-light-9), var(--color-primary)) 1 10;
-          to right,
-          var(--color-primary-light-9),
-          var(--color-primary)
-        )
-        1 10;
 		}
 		span {
 			cursor: pointer;

src/views/chart/index.vue

@@ -83,7 +83,7 @@
 						<div class="flex-warp-item-box">
 							<div class="flex-title">近30天预警总数</div>
 							<div class="flex-content">
-                <div id="chartsWarning" style="height:100%;"></div>
+								<div style="height: 100%" ref="chartsWarningRef"></div>
 							</div>
 						</div>
 					</div>
@@ -93,7 +93,7 @@
 				<div class="big-data-down-center">
 					<div class="big-data-down-center-one">
 						<div class="big-data-down-center-one-content">
-              <div id="chartsCenterOne" style="height:100%;"></div>
+							<div style="height: 100%" ref="chartsCenterOneRef"></div>
 						</div>
 					</div>
 					<div class="big-data-down-center-two">
@@ -113,7 +113,7 @@
 									</div>
 								</div>
 								<div class="flex-content-right">
-                  <div id="chartsMonitor" style="height:100%;"></div>
+									<div style="height: 100%" ref="chartsMonitorRef"></div>
 								</div>
 							</div>
 						</div>
@@ -129,7 +129,7 @@
 								<span class="flex-title-small">单位：次</span>
 							</div>
 							<div class="flex-content">
-                <div id="chartsSevenDays" style="height:100%;"></div>
+								<div style="height: 100%" ref="chartsSevenDaysRef"></div>
 							</div>
 						</div>
 					</div>
@@ -191,7 +191,7 @@
 								<span class="flex-title-small">单位：件</span>
 							</div>
 							<div class="flex-content">
-                <div id="chartsInvestment" style="height:100%;"></div>
+								<div style="height: 100%" ref="chartsInvestmentRef"></div>
 							</div>
 						</div>
 					</div>
@@ -202,24 +202,20 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted } from "vue";
+import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import ChartHead from "/@/views/chart/head.vue";
+import ChartHead from '/@/views/chart/head.vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import "echarts-wordcloud";
+import 'echarts-wordcloud';
-import {
+import { skyList, dBtnList, chartData4List, earth3DBtnList } from '/@/views/chart/chart.ts';
-  skyList,
-  dBtnList,
-  chartData4List,
-  earth3DBtnList,
-} from "/@/views/chart/chart.ts";
 export default {
-  name: "chartIndex",
+	name: 'chartIndex',
 	components: { ChartHead },
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const state = reactive({
-      tagViewHeight: "",
+			tagViewHeight: '',
 			skyList,
 			dBtnList,
 			chartData4List,
@@ -227,13 +223,13 @@ export default {
 		});
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
-      let { isTagsview } = store.state.themeConfig;
+			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return `114px`;
 			else return `80px`;
 		});
 		// 初始化中间图表1
 		const initChartsCenterOne = () => {
-      const myChart = echarts.init(document.getElementById("chartsCenterOne"));
+			const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
 			const option = {
 				grid: {
 					top: 15,
@@ -244,63 +240,59 @@ export default {
 				tooltip: {},
 				series: [
 					{
-            type: "wordCloud",
+						type: 'wordCloud',
 						sizeRange: [12, 40],
 						rotationRange: [0, 0],
 						rotationStep: 45,
 						gridSize: Math.random() * 20 + 5,
-            shape: "circle",
+						shape: 'circle',
-            width: "100%",
+						width: '100%',
-            height: "100%",
+						height: '100%',
 						textStyle: {
-              fontFamily: "sans-serif",
+							fontFamily: 'sans-serif',
-              fontWeight: "bold",
+							fontWeight: 'bold',
 							color: function () {
-                return `rgb(${[
+								return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                ].join(",")})`;
 							},
 						},
 						data: [
-              { name: "vue-next-admin", value: 520 },
+							{ name: 'vue-next-admin', value: 520 },
-              { name: "lyt", value: 520 },
+							{ name: 'lyt', value: 520 },
-              { name: "next-admin", value: 500 },
+							{ name: 'next-admin', value: 500 },
-              { name: "更名", value: 420 },
+							{ name: '更名', value: 420 },
-              { name: "智慧农业", value: 520 },
+							{ name: '智慧农业', value: 520 },
-              { name: "男神", value: 2.64 },
+							{ name: '男神', value: 2.64 },
-              { name: "好身材", value: 4.03 },
+							{ name: '好身材', value: 4.03 },
-              { name: "校草", value: 24.95 },
+							{ name: '校草', value: 24.95 },
-              { name: "酷", value: 4.04 },
+							{ name: '酷', value: 4.04 },
-              { name: "时尚", value: 5.27 },
+							{ name: '时尚', value: 5.27 },
-              { name: "阳光活力", value: 5.8 },
+							{ name: '阳光活力', value: 5.8 },
-              { name: "初恋", value: 3.09 },
+							{ name: '初恋', value: 3.09 },
-              { name: "英俊潇洒", value: 24.71 },
+							{ name: '英俊潇洒', value: 24.71 },
-              { name: "霸气", value: 6.33 },
+							{ name: '霸气', value: 6.33 },
-              { name: "腼腆", value: 2.55 },
+							{ name: '腼腆', value: 2.55 },
-              { name: "蠢萌", value: 3.88 },
+							{ name: '蠢萌', value: 3.88 },
-              { name: "青春", value: 8.04 },
+							{ name: '青春', value: 8.04 },
-              { name: "网红", value: 5.87 },
+							{ name: '网红', value: 5.87 },
-              { name: "萌", value: 6.97 },
+							{ name: '萌', value: 6.97 },
-              { name: "认真", value: 2.53 },
+							{ name: '认真', value: 2.53 },
-              { name: "古典", value: 2.49 },
+							{ name: '古典', value: 2.49 },
-              { name: "温柔", value: 3.91 },
+							{ name: '温柔', value: 3.91 },
-              { name: "有个性", value: 3.25 },
+							{ name: '有个性', value: 3.25 },
-              { name: "可爱", value: 9.93 },
+							{ name: '可爱', value: 9.93 },
-              { name: "幽默诙谐", value: 3.65 },
+							{ name: '幽默诙谐', value: 3.65 },
 						],
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
 		// 初始化近7天产品追溯扫码统计
 		const initChartsSevenDays = () => {
-      const myChart = echarts.init(document.getElementById("chartsSevenDays"));
+			const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
 			const option = {
 				grid: {
 					top: 15,
@@ -309,45 +301,45 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "axis",
+					trigger: 'axis',
 				},
 				xAxis: {
-          type: "category",
+					type: 'category',
 					boundaryGap: false,
-          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
+					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
 				},
 				yAxis: {
-          type: "value",
+					type: 'value',
 				},
 				series: [
 					{
-            name: "邮件营销",
+						name: '邮件营销',
-            type: "line",
+						type: 'line',
-            stack: "总量",
+						stack: '总量',
 						data: [12, 32, 11, 34, 90, 23, 21],
 					},
 					{
-            name: "联盟广告",
+						name: '联盟广告',
-            type: "line",
+						type: 'line',
-            stack: "总量",
+						stack: '总量',
 						data: [22, 82, 91, 24, 90, 30, 30],
 					},
 					{
-            name: "视频广告",
+						name: '视频广告',
-            type: "line",
+						type: 'line',
-            stack: "总量",
+						stack: '总量',
 						data: [50, 32, 18, 14, 90, 30, 50],
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
 		// 初始化近30天预警总数
 		const initChartsWarning = () => {
-      const myChart = echarts.init(document.getElementById("chartsWarning"));
+			const myChart = echarts.init(proxy.$refs.chartsWarningRef);
 			const option = {
 				grid: {
 					top: 50,
@@ -356,35 +348,35 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "item",
+					trigger: 'item',
 				},
 				series: [
 					{
-            name: "面积模式",
+						name: '面积模式',
-            type: "pie",
+						type: 'pie',
 						radius: [20, 50],
-            center: ["50%", "50%"],
+						center: ['50%', '50%'],
-            roseType: "area",
+						roseType: 'area',
 						itemStyle: {
 							borderRadius: 8,
 						},
 						data: [
-              { value: 40, name: "监测设备预警" },
+							{ value: 40, name: '监测设备预警' },
-              { value: 38, name: "天气预警" },
+							{ value: 38, name: '天气预警' },
-              { value: 32, name: "任务预警" },
+							{ value: 32, name: '任务预警' },
-              { value: 30, name: "病虫害预警" },
+							{ value: 30, name: '病虫害预警' },
 						],
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
 		// 初始化当前设备监测
 		const initChartsMonitor = () => {
-      const myChart = echarts.init(document.getElementById("chartsMonitor"));
+			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
 			const option = {
 				grid: {
 					top: 15,
@@ -393,40 +385,40 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "axis",
+					trigger: 'axis',
 				},
 				xAxis: {
-          type: "category",
+					type: 'category',
 					boundaryGap: false,
-          data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"],
+					data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
 				},
 				yAxis: {
-          type: "value",
+					type: 'value',
 				},
 				series: [
 					{
 						itemStyle: {
-              color: "#289df5",
+							color: '#289df5',
-              borderColor: "#289df5",
+							borderColor: '#289df5',
 							areaStyle: {
-                type: "default",
+								type: 'default',
 								opacity: 0.1,
 							},
 						},
 						data: [20, 32, 31, 34, 12, 13, 20],
-            type: "line",
+						type: 'line',
 						areaStyle: {},
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
 		// 初始化近7天投入品记录
 		const initChartsInvestment = () => {
-      const myChart = echarts.init(document.getElementById("chartsInvestment"));
+			const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
 			const option = {
 				grid: {
 					top: 15,
@@ -435,24 +427,24 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "axis",
+					trigger: 'axis',
 				},
 				xAxis: {
-          type: "category",
+					type: 'category',
-          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
+					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
 				},
 				yAxis: {
-          type: "value",
+					type: 'value',
 				},
 				series: [
 					{
 						data: [10, 20, 15, 80, 70, 11, 30],
-            type: "bar",
+						type: 'bar',
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
@@ -473,5 +465,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "./chart.scss";
+@import './chart.scss';
 </style>

src/views/docs/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <p v-for="v in 100" :key="v">docs</p>
-</template>

src/views/error/401.vue

@@ -19,15 +19,15 @@
 </template>
 
 <script lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
-import { clearSession } from "/@/utils/storage.ts";
+import { clearSession } from '/@/utils/storage.ts';
 export default {
-  name: "401",
+	name: '401',
 	setup() {
 		const router = useRouter();
 		const onSetAuth = () => {
 			clearSession();
-      router.push("/login");
+			router.push('/login');
 		};
 		return {
 			onSetAuth,

src/views/error/404.vue

@@ -19,13 +19,13 @@
 </template>
 
 <script lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 export default {
-  name: "404",
+	name: '404',
 	setup() {
 		const router = useRouter();
 		const onGoHome = () => {
-      router.push("/");
+			router.push('/');
 		};
 		return {
 			onGoHome,

src/views/fun/countup/index.vue

@@ -1,8 +1,12 @@
 <template>
 	<div>
 		<el-card shadow="hover" header="数字滚动演示">
-      <el-alert title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js" type="success" :closable="false"
+			<el-alert
-        class="mb15"></el-alert>
+				title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
 			<el-row :gutter="20">
 				<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
 					<div class="countup-card-item countup-card-item-box" :style="{ background: v.color }">
@@ -12,15 +16,14 @@
 							<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
 							<div class="countup-card-item-tip-num" :id="`tipNum${k + 1}`"></div>
 						</div>
-            <i :class="v.icon" :style="{'color': v.iconColor}"></i>
+						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
 					</div>
 				</el-col>
 			</el-row>
 			<div class="flex-warp">
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrent">重置/刷新数值
+						<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrent">重置/刷新数值 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
@@ -29,62 +32,62 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted, nextTick } from "vue";
+import { reactive, toRefs, onMounted, nextTick } from 'vue';
-import { CountUp } from "countup.js";
+import { CountUp } from 'countup.js';
 export default {
-  name: "countup",
+	name: 'countup',
 	setup() {
 		const state = reactive({
 			topCardItemList: [
 				{
-          title: "今日访问人数",
+					title: '今日访问人数',
-          titleNum: "123",
+					titleNum: '123',
-          tip: "在场人数",
+					tip: '在场人数',
-          tipNum: "911",
+					tipNum: '911',
-          color: "#F95959",
+					color: '#F95959',
-          iconColor: "#F86C6B",
+					iconColor: '#F86C6B',
-          icon: "iconfont icon-jinridaiban",
+					icon: 'iconfont icon-jinridaiban',
 				},
 				{
-          title: "实验室总数",
+					title: '实验室总数',
-          titleNum: "123",
+					titleNum: '123',
-          tip: "使用中",
+					tip: '使用中',
-          tipNum: "611",
+					tipNum: '611',
-          color: "#8595F4",
+					color: '#8595F4',
-          iconColor: "#92A1F4",
+					iconColor: '#92A1F4',
-          icon: "iconfont icon-AIshiyanshi",
+					icon: 'iconfont icon-AIshiyanshi',
 				},
 				{
-          title: "申请人数（月）",
+					title: '申请人数（月）',
-          titleNum: "123",
+					titleNum: '123',
-          tip: "通过人数",
+					tip: '通过人数',
-          tipNum: "911",
+					tipNum: '911',
-          color: "#FEBB50",
+					color: '#FEBB50',
-          iconColor: "#FDC566",
+					iconColor: '#FDC566',
-          icon: "iconfont icon-shenqingkaiban",
+					icon: 'iconfont icon-shenqingkaiban',
 				},
 				{
-          title: "销售情况",
+					title: '销售情况',
-          titleNum: "123",
+					titleNum: '123',
-          tip: "销售数",
+					tip: '销售数',
-          tipNum: "911",
+					tipNum: '911',
-          color: "#41b3c5",
+					color: '#41b3c5',
-          iconColor: "#1dbcd5",
+					iconColor: '#1dbcd5',
-          icon: "el-icon-trophy-1",
+					icon: 'el-icon-trophy-1',
 				},
 			],
 		});
 		// 初始化数字滚动
 		const initNumCountUp = () => {
 			nextTick(() => {
-        new CountUp("titleNum1", Math.random() * 10000).start();
+				new CountUp('titleNum1', Math.random() * 10000).start();
-        new CountUp("titleNum2", Math.random() * 10000).start();
+				new CountUp('titleNum2', Math.random() * 10000).start();
-        new CountUp("titleNum3", Math.random() * 10000).start();
+				new CountUp('titleNum3', Math.random() * 10000).start();
-        new CountUp("titleNum4", Math.random() * 10000).start();
+				new CountUp('titleNum4', Math.random() * 10000).start();
-        new CountUp("tipNum1", Math.random() * 1000).start();
+				new CountUp('tipNum1', Math.random() * 1000).start();
-        new CountUp("tipNum2", Math.random() * 1000).start();
+				new CountUp('tipNum2', Math.random() * 1000).start();
-        new CountUp("tipNum3", Math.random() * 1000).start();
+				new CountUp('tipNum3', Math.random() * 1000).start();
-        new CountUp("tipNum4", Math.random() * 1000).start();
+				new CountUp('tipNum4', Math.random() * 1000).start();
 			});
 		};
 		// 重置/刷新数值

src/views/fun/cropper/index.vue

@@ -1,11 +1,15 @@
 <template>
 	<div class="croppers-container">
 		<el-card shadow="hover" header="cropper 图片裁剪">
-      <el-alert title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs" type="success"
+			<el-alert
-        :closable="false" class="mb15"></el-alert>
+				title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
 			<div class="cropper-img-warp">
 				<div class="mb15 mt15">
-          <img class="cropper-img" :src="cropperImg">
+					<img class="cropper-img" :src="cropperImg" />
 				</div>
 				<el-button type="primary" icon="el-icon-crop" size="small" @click="onCropperDialogOpen">更换头像</el-button>
 			</div>
@@ -15,16 +19,15 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive } from "vue";
+import { ref, toRefs, reactive } from 'vue';
-import CropperDialog from "/@/components/cropper/index.vue";
+import CropperDialog from '/@/components/cropper/index.vue';
 export default {
-  name: "cropper",
+	name: 'cropper',
 	components: { CropperDialog },
 	setup() {
 		const cropperDialogRef = ref();
 		const state = reactive({
-      cropperImg:
+			cropperImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
-        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg",
 		});
 		// 打开裁剪弹窗
 		const onCropperDialogOpen = () => {

src/views/fun/echartsMap/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div :style="{height: `calc(100vh - ${initTagViewHeight}`}">
+    <div class="layout-view-bg-white">
+      <div id="echartsMap" style="height:100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+import "echarts/extension/bmap/bmap";
+import { useStore } from "/@/store/index.ts";
+import { echartsMapList, echartsMapData } from "./mock.ts";
+export default {
+  name: "echartsMap",
+  setup() {
+    const store = useStore();
+    const state = reactive({
+      echartsMapList,
+      echartsMapData,
+    });
+    // 设置主内容的高度
+    const initTagViewHeight = computed(() => {
+      let { isTagsview } = store.state.themeConfig.themeConfig;
+      if (isTagsview) return `114px`;
+      else return `80px`;
+    });
+    // echartsMap 将坐标信息和对应物理量的值合在一起
+    const convertData = (data) => {
+      let res = [];
+      for (let i = 0; i < data.length; i++) {
+        let geoCoord = state.echartsMapData[data[i].name];
+        if (geoCoord) {
+          res.push({
+            name: data[i].name,
+            value: geoCoord.concat(data[i].value),
+          });
+        }
+      }
+      return res;
+    };
+    // 初始化 echartsMap
+    const initEchartsMap = () => {
+      const myChart = echarts.init(document.getElementById("echartsMap"));
+      const option = {
+        tooltip: {
+          trigger: "item",
+        },
+        color: ["#9a60b4", "#ea7ccc"],
+        bmap: {
+          center: [104.114129, 37.550339],
+          zoom: 5,
+          roam: true,
+          mapStyle: {},
+        },
+        series: [
+          {
+            name: "pm2.5",
+            type: "scatter",
+            coordinateSystem: "bmap",
+            data: convertData(state.echartsMapList),
+            symbolSize: function (val) {
+              return val[2] / 10;
+            },
+            encode: {
+              value: 2,
+            },
+            label: {
+              formatter: "{b}",
+              position: "right",
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: true,
+              },
+            },
+          },
+          {
+            name: "Top 5",
+            type: "effectScatter",
+            coordinateSystem: "bmap",
+            data: convertData(
+              state.echartsMapList
+                .sort(function (a, b) {
+                  return b.value - a.value;
+                })
+                .slice(0, 6)
+            ),
+            symbolSize: function (val) {
+              return val[2] / 10;
+            },
+            encode: {
+              value: 2,
+            },
+            showEffectOn: "render",
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            hoverAnimation: true,
+            label: {
+              formatter: "{b}",
+              position: "right",
+              show: true,
+            },
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: "#333",
+            },
+            zlevel: 1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initEchartsMap();
+    });
+    return {
+      initTagViewHeight,
+      ...toRefs(state),
+    };
+  },
+};
+</script>

src/views/fun/echartsMap/mock.ts

@@ -0,0 +1,387 @@
+// 地图模拟数据
+export const echartsMapList = [
+    { name: '海门', value: 9 },
+    { name: '鄂尔多斯', value: 12 },
+    { name: '招远', value: 12 },
+    { name: '舟山', value: 12 },
+    { name: '齐齐哈尔', value: 14 },
+    { name: '盐城', value: 15 },
+    { name: '赤峰', value: 16 },
+    { name: '青岛', value: 18 },
+    { name: '乳山', value: 18 },
+    { name: '金昌', value: 19 },
+    { name: '泉州', value: 21 },
+    { name: '莱西', value: 21 },
+    { name: '日照', value: 21 },
+    { name: '胶南', value: 22 },
+    { name: '南通', value: 23 },
+    { name: '拉萨', value: 24 },
+    { name: '云浮', value: 24 },
+    { name: '梅州', value: 25 },
+    { name: '文登', value: 25 },
+    { name: '上海', value: 25 },
+    { name: '攀枝花', value: 25 },
+    { name: '威海', value: 25 },
+    { name: '承德', value: 25 },
+    { name: '厦门', value: 26 },
+    { name: '汕尾', value: 26 },
+    { name: '潮州', value: 26 },
+    { name: '丹东', value: 27 },
+    { name: '太仓', value: 27 },
+    { name: '曲靖', value: 27 },
+    { name: '烟台', value: 28 },
+    { name: '福州', value: 29 },
+    { name: '瓦房店', value: 30 },
+    { name: '即墨', value: 30 },
+    { name: '抚顺', value: 31 },
+    { name: '玉溪', value: 31 },
+    { name: '张家口', value: 31 },
+    { name: '阳泉', value: 31 },
+    { name: '莱州', value: 32 },
+    { name: '湖州', value: 32 },
+    { name: '汕头', value: 32 },
+    { name: '昆山', value: 33 },
+    { name: '宁波', value: 33 },
+    { name: '湛江', value: 33 },
+    { name: '揭阳', value: 34 },
+    { name: '荣成', value: 34 },
+    { name: '连云港', value: 35 },
+    { name: '葫芦岛', value: 35 },
+    { name: '常熟', value: 36 },
+    { name: '东莞', value: 36 },
+    { name: '河源', value: 36 },
+    { name: '淮安', value: 36 },
+    { name: '泰州', value: 36 },
+    { name: '南宁', value: 37 },
+    { name: '营口', value: 37 },
+    { name: '惠州', value: 37 },
+    { name: '江阴', value: 37 },
+    { name: '蓬莱', value: 37 },
+    { name: '韶关', value: 38 },
+    { name: '嘉峪关', value: 38 },
+    { name: '广州', value: 38 },
+    { name: '延安', value: 38 },
+    { name: '太原', value: 39 },
+    { name: '清远', value: 39 },
+    { name: '中山', value: 39 },
+    { name: '昆明', value: 39 },
+    { name: '寿光', value: 40 },
+    { name: '盘锦', value: 40 },
+    { name: '长治', value: 41 },
+    { name: '深圳', value: 360 },
+    { name: '珠海', value: 42 },
+    { name: '宿迁', value: 43 },
+    { name: '咸阳', value: 43 },
+    { name: '铜川', value: 44 },
+    { name: '平度', value: 44 },
+    { name: '佛山', value: 44 },
+    { name: '海口', value: 44 },
+    { name: '江门', value: 45 },
+    { name: '章丘', value: 45 },
+    { name: '肇庆', value: 46 },
+    { name: '大连', value: 47 },
+    { name: '临汾', value: 47 },
+    { name: '吴江', value: 47 },
+    { name: '石嘴山', value: 49 },
+    { name: '沈阳', value: 50 },
+    { name: '苏州', value: 50 },
+    { name: '茂名', value: 50 },
+    { name: '嘉兴', value: 51 },
+    { name: '长春', value: 51 },
+    { name: '胶州', value: 52 },
+    { name: '银川', value: 52 },
+    { name: '张家港', value: 52 },
+    { name: '三门峡', value: 53 },
+    { name: '锦州', value: 54 },
+    { name: '南昌', value: 54 },
+    { name: '柳州', value: 54 },
+    { name: '三亚', value: 54 },
+    { name: '自贡', value: 56 },
+    { name: '吉林', value: 56 },
+    { name: '阳江', value: 57 },
+    { name: '泸州', value: 57 },
+    { name: '西宁', value: 57 },
+    { name: '宜宾', value: 58 },
+    { name: '呼和浩特', value: 58 },
+    { name: '成都', value: 58 },
+    { name: '大同', value: 58 },
+    { name: '镇江', value: 59 },
+    { name: '桂林', value: 59 },
+    { name: '张家界', value: 59 },
+    { name: '宜兴', value: 59 },
+    { name: '北海', value: 60 },
+    { name: '西安', value: 61 },
+    { name: '金坛', value: 62 },
+    { name: '东营', value: 62 },
+    { name: '牡丹江', value: 63 },
+    { name: '遵义', value: 63 },
+    { name: '绍兴', value: 63 },
+    { name: '扬州', value: 64 },
+    { name: '常州', value: 64 },
+    { name: '潍坊', value: 65 },
+    { name: '重庆', value: 66 },
+    { name: '台州', value: 67 },
+    { name: '南京', value: 67 },
+    { name: '滨州', value: 70 },
+    { name: '贵阳', value: 71 },
+    { name: '无锡', value: 71 },
+    { name: '本溪', value: 71 },
+    { name: '克拉玛依', value: 72 },
+    { name: '渭南', value: 72 },
+    { name: '马鞍山', value: 72 },
+    { name: '宝鸡', value: 72 },
+    { name: '焦作', value: 75 },
+    { name: '句容', value: 75 },
+    { name: '北京', value: 79 },
+    { name: '徐州', value: 79 },
+    { name: '衡水', value: 80 },
+    { name: '包头', value: 80 },
+    { name: '绵阳', value: 80 },
+    { name: '乌鲁木齐', value: 84 },
+    { name: '枣庄', value: 84 },
+    { name: '杭州', value: 84 },
+    { name: '淄博', value: 85 },
+    { name: '鞍山', value: 86 },
+    { name: '溧阳', value: 86 },
+    { name: '库尔勒', value: 86 },
+    { name: '安阳', value: 90 },
+    { name: '开封', value: 90 },
+    { name: '济南', value: 92 },
+    { name: '德阳', value: 93 },
+    { name: '温州', value: 95 },
+    { name: '九江', value: 96 },
+    { name: '邯郸', value: 98 },
+    { name: '临安', value: 99 },
+    { name: '兰州', value: 99 },
+    { name: '沧州', value: 100 },
+    { name: '临沂', value: 103 },
+    { name: '南充', value: 104 },
+    { name: '天津', value: 105 },
+    { name: '富阳', value: 106 },
+    { name: '泰安', value: 112 },
+    { name: '诸暨', value: 112 },
+    { name: '郑州', value: 113 },
+    { name: '哈尔滨', value: 114 },
+    { name: '聊城', value: 116 },
+    { name: '芜湖', value: 117 },
+    { name: '唐山', value: 119 },
+    { name: '平顶山', value: 119 },
+    { name: '邢台', value: 119 },
+    { name: '德州', value: 120 },
+    { name: '济宁', value: 120 },
+    { name: '荆州', value: 127 },
+    { name: '宜昌', value: 130 },
+    { name: '义乌', value: 132 },
+    { name: '丽水', value: 133 },
+    { name: '洛阳', value: 134 },
+    { name: '秦皇岛', value: 136 },
+    { name: '株洲', value: 143 },
+    { name: '石家庄', value: 147 },
+    { name: '莱芜', value: 148 },
+    { name: '常德', value: 152 },
+    { name: '保定', value: 153 },
+    { name: '湘潭', value: 154 },
+    { name: '金华', value: 157 },
+    { name: '岳阳', value: 169 },
+    { name: '长沙', value: 175 },
+    { name: '衢州', value: 177 },
+    { name: '廊坊', value: 93 },
+    { name: '菏泽', value: 194 },
+    { name: '合肥', value: 229 },
+    { name: '武汉', value: 273 },
+    { name: '大庆', value: 279 }
+]
+
+// 地图经纬度数据
+export const echartsMapData = {
+    '海门': [121.15, 31.89],
+    '鄂尔多斯': [109.781327, 39.608266],
+    '招远': [120.38, 37.35],
+    '舟山': [122.207216, 29.985295],
+    '齐齐哈尔': [123.97, 47.33],
+    '盐城': [120.13, 33.38],
+    '赤峰': [118.87, 42.28],
+    '青岛': [120.33, 36.07],
+    '乳山': [121.52, 36.89],
+    '金昌': [102.188043, 38.520089],
+    '泉州': [118.58, 24.93],
+    '莱西': [120.53, 36.86],
+    '日照': [119.46, 35.42],
+    '胶南': [119.97, 35.88],
+    '南通': [121.05, 32.08],
+    '拉萨': [91.11, 29.97],
+    '云浮': [112.02, 22.93],
+    '梅州': [116.1, 24.55],
+    '文登': [122.05, 37.2],
+    '上海': [121.48, 31.22],
+    '攀枝花': [101.718637, 26.582347],
+    '威海': [122.1, 37.5],
+    '承德': [117.93, 40.97],
+    '厦门': [118.1, 24.46],
+    '汕尾': [115.375279, 22.786211],
+    '潮州': [116.63, 23.68],
+    '丹东': [124.37, 40.13],
+    '太仓': [121.1, 31.45],
+    '曲靖': [103.79, 25.51],
+    '烟台': [121.39, 37.52],
+    '福州': [119.3, 26.08],
+    '瓦房店': [121.979603, 39.627114],
+    '即墨': [120.45, 36.38],
+    '抚顺': [123.97, 41.97],
+    '玉溪': [102.52, 24.35],
+    '张家口': [114.87, 40.82],
+    '阳泉': [113.57, 37.85],
+    '莱州': [119.942327, 37.177017],
+    '湖州': [120.1, 30.86],
+    '汕头': [116.69, 23.39],
+    '昆山': [120.95, 31.39],
+    '宁波': [121.56, 29.86],
+    '湛江': [110.359377, 21.270708],
+    '揭阳': [116.35, 23.55],
+    '荣成': [122.41, 37.16],
+    '连云港': [119.16, 34.59],
+    '葫芦岛': [120.836932, 40.711052],
+    '常熟': [120.74, 31.64],
+    '东莞': [113.75, 23.04],
+    '河源': [114.68, 23.73],
+    '淮安': [119.15, 33.5],
+    '泰州': [119.9, 32.49],
+    '南宁': [108.33, 22.84],
+    '营口': [122.18, 40.65],
+    '惠州': [114.4, 23.09],
+    '江阴': [120.26, 31.91],
+    '蓬莱': [120.75, 37.8],
+    '韶关': [113.62, 24.84],
+    '嘉峪关': [98.289152, 39.77313],
+    '广州': [113.23, 23.16],
+    '延安': [109.47, 36.6],
+    '太原': [112.53, 37.87],
+    '清远': [113.01, 23.7],
+    '中山': [113.38, 22.52],
+    '昆明': [102.73, 25.04],
+    '寿光': [118.73, 36.86],
+    '盘锦': [122.070714, 41.119997],
+    '长治': [113.08, 36.18],
+    '深圳': [114.07, 22.62],
+    '珠海': [113.52, 22.3],
+    '宿迁': [118.3, 33.96],
+    '咸阳': [108.72, 34.36],
+    '铜川': [109.11, 35.09],
+    '平度': [119.97, 36.77],
+    '佛山': [113.11, 23.05],
+    '海口': [110.35, 20.02],
+    '江门': [113.06, 22.61],
+    '章丘': [117.53, 36.72],
+    '肇庆': [112.44, 23.05],
+    '大连': [121.62, 38.92],
+    '临汾': [111.5, 36.08],
+    '吴江': [120.63, 31.16],
+    '石嘴山': [106.39, 39.04],
+    '沈阳': [123.38, 41.8],
+    '苏州': [120.62, 31.32],
+    '茂名': [110.88, 21.68],
+    '嘉兴': [120.76, 30.77],
+    '长春': [125.35, 43.88],
+    '胶州': [120.03336, 36.264622],
+    '银川': [106.27, 38.47],
+    '张家港': [120.555821, 31.875428],
+    '三门峡': [111.19, 34.76],
+    '锦州': [121.15, 41.13],
+    '南昌': [115.89, 28.68],
+    '柳州': [109.4, 24.33],
+    '三亚': [109.511909, 18.252847],
+    '自贡': [104.778442, 29.33903],
+    '吉林': [126.57, 43.87],
+    '阳江': [111.95, 21.85],
+    '泸州': [105.39, 28.91],
+    '西宁': [101.74, 36.56],
+    '宜宾': [104.56, 29.77],
+    '呼和浩特': [111.65, 40.82],
+    '成都': [104.06, 30.67],
+    '大同': [113.3, 40.12],
+    '镇江': [119.44, 32.2],
+    '桂林': [110.28, 25.29],
+    '张家界': [110.479191, 29.117096],
+    '宜兴': [119.82, 31.36],
+    '北海': [109.12, 21.49],
+    '西安': [108.95, 34.27],
+    '金坛': [119.56, 31.74],
+    '东营': [118.49, 37.46],
+    '牡丹江': [129.58, 44.6],
+    '遵义': [106.9, 27.7],
+    '绍兴': [120.58, 30.01],
+    '扬州': [119.42, 32.39],
+    '常州': [119.95, 31.79],
+    '潍坊': [119.1, 36.62],
+    '重庆': [106.54, 29.59],
+    '台州': [121.420757, 28.656386],
+    '南京': [118.78, 32.04],
+    '滨州': [118.03, 37.36],
+    '贵阳': [106.71, 26.57],
+    '无锡': [120.29, 31.59],
+    '本溪': [123.73, 41.3],
+    '克拉玛依': [84.77, 45.59],
+    '渭南': [109.5, 34.52],
+    '马鞍山': [118.48, 31.56],
+    '宝鸡': [107.15, 34.38],
+    '焦作': [113.21, 35.24],
+    '句容': [119.16, 31.95],
+    '北京': [116.46, 39.92],
+    '徐州': [117.2, 34.26],
+    '衡水': [115.72, 37.72],
+    '包头': [110, 40.58],
+    '绵阳': [104.73, 31.48],
+    '乌鲁木齐': [87.68, 43.77],
+    '枣庄': [117.57, 34.86],
+    '杭州': [120.19, 30.26],
+    '淄博': [118.05, 36.78],
+    '鞍山': [122.85, 41.12],
+    '溧阳': [119.48, 31.43],
+    '库尔勒': [86.06, 41.68],
+    '安阳': [114.35, 36.1],
+    '开封': [114.35, 34.79],
+    '济南': [117, 36.65],
+    '德阳': [104.37, 31.13],
+    '温州': [120.65, 28.01],
+    '九江': [115.97, 29.71],
+    '邯郸': [114.47, 36.6],
+    '临安': [119.72, 30.23],
+    '兰州': [103.73, 36.03],
+    '沧州': [116.83, 38.33],
+    '临沂': [118.35, 35.05],
+    '南充': [106.110698, 30.837793],
+    '天津': [117.2, 39.13],
+    '富阳': [119.95, 30.07],
+    '泰安': [117.13, 36.18],
+    '诸暨': [120.23, 29.71],
+    '郑州': [113.65, 34.76],
+    '哈尔滨': [126.63, 45.75],
+    '聊城': [115.97, 36.45],
+    '芜湖': [118.38, 31.33],
+    '唐山': [118.02, 39.63],
+    '平顶山': [113.29, 33.75],
+    '邢台': [114.48, 37.05],
+    '德州': [116.29, 37.45],
+    '济宁': [116.59, 35.38],
+    '荆州': [112.239741, 30.335165],
+    '宜昌': [111.3, 30.7],
+    '义乌': [120.06, 29.32],
+    '丽水': [119.92, 28.45],
+    '洛阳': [112.44, 34.7],
+    '秦皇岛': [119.57, 39.95],
+    '株洲': [113.16, 27.83],
+    '石家庄': [114.48, 38.03],
+    '莱芜': [117.67, 36.19],
+    '常德': [111.69, 29.05],
+    '保定': [115.48, 38.85],
+    '湘潭': [112.91, 27.87],
+    '金华': [119.64, 29.12],
+    '岳阳': [113.09, 29.37],
+    '长沙': [113, 28.21],
+    '衢州': [118.88, 28.97],
+    '廊坊': [116.7, 39.53],
+    '菏泽': [115.480656, 35.23375],
+    '合肥': [117.27, 31.86],
+    '武汉': [114.31, 30.52],
+    '大庆': [125.03, 46.58]
+}

src/views/fun/mindMap/index.vue

@@ -1,22 +1,24 @@
 <template>
 	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="layout-view-bg-white">
-      <div id="antvG6" style="height:100%;"></div>
+			<div id="antvG6" style="height: 100%" ref="antvG6Ref"></div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted, nextTick } from "vue";
+import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import G6 from '@antv/g6';
+import { useStore } from '/@/store/index.ts';
 export default {
-  name: "mindMap",
+	name: 'mindMap',
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const state = reactive({});
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
-      let { isTagsview } = store.state.themeConfig;
+			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return `114px`;
 			else return `80px`;
 		});
@@ -24,164 +26,164 @@ export default {
 		const initAntvG6 = () => {
 			const { Util } = G6;
 			const colorArr = [
-        "#5B8FF9",
+				'#5B8FF9',
-        "#5AD8A6",
+				'#5AD8A6',
-        "#5D7092",
+				'#5D7092',
-        "#F6BD16",
+				'#F6BD16',
-        "#6F5EF9",
+				'#6F5EF9',
-        "#6DC8EC",
+				'#6DC8EC',
-        "#D3EEF9",
+				'#D3EEF9',
-        "#DECFEA",
+				'#DECFEA',
-        "#FFE0C7",
+				'#FFE0C7',
-        "#1E9493",
+				'#1E9493',
-        "#BBDEDE",
+				'#BBDEDE',
-        "#FF99C3",
+				'#FF99C3',
-        "#FFE0ED",
+				'#FFE0ED',
-        "#CDDDFD",
+				'#CDDDFD',
-        "#CDF3E4",
+				'#CDF3E4',
-        "#CED4DE",
+				'#CED4DE',
-        "#FCEBB9",
+				'#FCEBB9',
-        "#D3CEFD",
+				'#D3CEFD',
-        "#945FB9",
+				'#945FB9',
-        "#FF9845",
+				'#FF9845',
 			];
 
 			const rawData = {
-        label: "vue-next-admin",
+				label: 'vue-next-admin',
-        id: "0",
+				id: '0',
 				children: [
 					{
-            label: "Classification",
+						label: 'Classification',
-            id: "0-1",
+						id: '0-1',
-            color: "#5AD8A6",
+						color: '#5AD8A6',
 						children: [
 							{
-                label: "Logistic regression",
+								label: 'Logistic regression',
-                id: "0-1-1",
+								id: '0-1-1',
 							},
 							{
-                label: "Linear discriminant analysis",
+								label: 'Linear discriminant analysis',
-                id: "0-1-2",
+								id: '0-1-2',
 							},
 							{
-                label: "Rules",
+								label: 'Rules',
-                id: "0-1-3",
+								id: '0-1-3',
 							},
 							{
-                label: "Decision trees",
+								label: 'Decision trees',
-                id: "0-1-4",
+								id: '0-1-4',
 							},
 							{
-                label: "Naive Bayes",
+								label: 'Naive Bayes',
-                id: "0-1-5",
+								id: '0-1-5',
 							},
 							{
-                label: "K nearest neighbor",
+								label: 'K nearest neighbor',
-                id: "0-1-6",
+								id: '0-1-6',
 							},
 							{
-                label: "Probabilistic neural network",
+								label: 'Probabilistic neural network',
-                id: "0-1-7",
+								id: '0-1-7',
 							},
 							{
-                label: "Support vector machine",
+								label: 'Support vector machine',
-                id: "0-1-8",
+								id: '0-1-8',
 							},
 						],
 					},
 					{
-            label: "Consensus",
+						label: 'Consensus',
-            id: "0-2",
+						id: '0-2',
-            color: "#F6BD16",
+						color: '#F6BD16',
 						children: [
 							{
-                label: "Models diversity",
+								label: 'Models diversity',
-                id: "0-2-1",
+								id: '0-2-1',
 								children: [
 									{
-                    label: "Different initializations",
+										label: 'Different initializations',
-                    id: "0-2-1-1",
+										id: '0-2-1-1',
 									},
 									{
-                    label: "Different parameter choices",
+										label: 'Different parameter choices',
-                    id: "0-2-1-2",
+										id: '0-2-1-2',
 									},
 									{
-                    label: "Different architectures",
+										label: 'Different architectures',
-                    id: "0-2-1-3",
+										id: '0-2-1-3',
 									},
 									{
-                    label: "Different modeling methods",
+										label: 'Different modeling methods',
-                    id: "0-2-1-4",
+										id: '0-2-1-4',
 									},
 									{
-                    label: "Different training sets",
+										label: 'Different training sets',
-                    id: "0-2-1-5",
+										id: '0-2-1-5',
 									},
 									{
-                    label: "Different feature sets",
+										label: 'Different feature sets',
-                    id: "0-2-1-6",
+										id: '0-2-1-6',
 									},
 								],
 							},
 							{
-                label: "Methods",
+								label: 'Methods',
-                id: "0-2-2",
+								id: '0-2-2',
 								children: [
 									{
-                    label: "Classifier selection",
+										label: 'Classifier selection',
-                    id: "0-2-2-1",
+										id: '0-2-2-1',
 									},
 									{
-                    label: "Classifier fusion",
+										label: 'Classifier fusion',
-                    id: "0-2-2-2",
+										id: '0-2-2-2',
 									},
 								],
 							},
 							{
-                label: "Common",
+								label: 'Common',
-                id: "0-2-3",
+								id: '0-2-3',
 								children: [
 									{
-                    label: "Bagging",
+										label: 'Bagging',
-                    id: "0-2-3-1",
+										id: '0-2-3-1',
 									},
 									{
-                    label: "Boosting",
+										label: 'Boosting',
-                    id: "0-2-3-2",
+										id: '0-2-3-2',
 									},
 									{
-                    label: "AdaBoost",
+										label: 'AdaBoost',
-                    id: "0-2-3-3",
+										id: '0-2-3-3',
 									},
 								],
 							},
 						],
 					},
 					{
-            label: "Regression",
+						label: 'Regression',
-            id: "0-3",
+						id: '0-3',
-            color: "#269A99",
+						color: '#269A99',
 						children: [
 							{
-                label: "Multiple linear regression",
+								label: 'Multiple linear regression',
-                id: "0-3-1",
+								id: '0-3-1',
 							},
 							{
-                label: "Partial least squares",
+								label: 'Partial least squares',
-                id: "0-3-2",
+								id: '0-3-2',
 							},
 							{
-                label: "Multi-layer feedforward neural network",
+								label: 'Multi-layer feedforward neural network',
-                id: "0-3-3",
+								id: '0-3-3',
 							},
 							{
-                label: "General regression neural network",
+								label: 'General regression neural network',
-                id: "0-3-4",
+								id: '0-3-4',
 							},
 							{
-                label: "Support vector regression",
+								label: 'Support vector regression',
-                id: "0-3-5",
+								id: '0-3-5',
 							},
 						],
 					},
@@ -189,22 +191,16 @@ export default {
 			};
 
 			G6.registerNode(
-        "dice-mind-map-root",
+				'dice-mind-map-root',
 				{
-          jsx: (cfg) => {
+					jsx: (cfg: any) => {
 						const width = Util.getTextSize(cfg.label, 16)[0] + 24;
-            const stroke = cfg.style.stroke || "#096dd9";
+						const stroke = cfg.style.stroke || '#096dd9';
-            const fill = cfg.style.fill;
-
 						return `
       <group>
         <rect draggable="true" style={{width: ${width}, height: 42, stroke: ${stroke}, radius: 4}} keyshape>
-          <text style={{ fontSize: 16, marginLeft: 12, marginTop: 12 }}>${
+          <text style={{ fontSize: 16, marginLeft: 12, marginTop: 12 }}>${cfg.label}</text>
-            cfg.label
+          <text style={{ marginLeft: ${width - 16}, marginTop: -20, stroke: '#66ccff', fill: '#000', cursor: 'pointer', opacity: ${
-          }</text>
-          <text style={{ marginLeft: ${
-            width - 16
-          }, marginTop: -20, stroke: '#66ccff', fill: '#000', cursor: 'pointer', opacity: ${
 							cfg.hover ? 0.75 : 0
 						} }} action="add">+</text>
         </rect>
@@ -218,38 +214,28 @@ export default {
 						];
 					},
 				},
-        "single-node"
+				'single-node'
 			);
 
 			G6.registerNode(
-        "dice-mind-map-sub",
+				'dice-mind-map-sub',
 				{
-          jsx: (cfg) => {
+					jsx: (cfg: any) => {
 						const width = Util.getTextSize(cfg.label, 14)[0] + 24;
 						const color = cfg.color || cfg.style.stroke;
 
 						return `
       <group>
-        <rect draggable="true" style={{width: ${
+        <rect draggable="true" style={{width: ${width + 24}, height: 22}} keyshape>
-          width + 24
+          <text draggable="true" style={{ fontSize: 14, marginLeft: 12, marginTop: 6 }}>${cfg.label}</text>
-        }, height: 22}} keyshape>
+          <text style={{ marginLeft: ${width - 8}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
-          <text draggable="true" style={{ fontSize: 14, marginLeft: 12, marginTop: 6 }}>${
-            cfg.label
-          }</text>
-          <text style={{ marginLeft: ${
-            width - 8
-          }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
 							cfg.hover ? 0.75 : 0
 						}, next: 'inline' }} action="add">+</text>
-          <text style={{ marginLeft: ${
+          <text style={{ marginLeft: ${width - 4}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
-            width - 4
-          }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
 							cfg.hover ? 0.75 : 0
 						}, next: 'inline' }} action="delete">-</text>
         </rect>
-        <rect style={{ fill: ${color}, width: ${
+        <rect style={{ fill: ${color}, width: ${width + 24}, height: 2, x: 0, y: 22 }} />
-              width + 24
-            }, height: 2, x: 0, y: 22 }} />
         
       </group>
     `;
@@ -261,38 +247,28 @@ export default {
 						];
 					},
 				},
-        "single-node"
+				'single-node'
 			);
 
 			G6.registerNode(
-        "dice-mind-map-leaf",
+				'dice-mind-map-leaf',
 				{
-          jsx: (cfg) => {
+					jsx: (cfg: any) => {
 						const width = Util.getTextSize(cfg.label, 12)[0] + 24;
 						const color = cfg.color || cfg.style.stroke;
 
 						return `
       <group>
-        <rect draggable="true" style={{width: ${
+        <rect draggable="true" style={{width: ${width + 20}, height: 26, fill: 'transparent' }}>
-          width + 20
+          <text style={{ fontSize: 12, marginLeft: 12, marginTop: 6 }}>${cfg.label}</text>
-        }, height: 26, fill: 'transparent' }}>
+              <text style={{ marginLeft: ${width - 8}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
-          <text style={{ fontSize: 12, marginLeft: 12, marginTop: 6 }}>${
-            cfg.label
-          }</text>
-              <text style={{ marginLeft: ${
-                width - 8
-              }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
 							cfg.hover ? 0.75 : 0
 						}, next: 'inline' }} action="add">+</text>
-              <text style={{ marginLeft: ${
+              <text style={{ marginLeft: ${width - 4}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
-                width - 4
-              }, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${
 							cfg.hover ? 0.75 : 0
 						}, next: 'inline' }} action="delete">-</text>
         </rect>
-        <rect style={{ fill: ${color}, width: ${
+        <rect style={{ fill: ${color}, width: ${width + 24}, height: 2, x: 0, y: 32 }} />
-              width + 24
-            }, height: 2, x: 0, y: 32 }} />
         
       </group>
     `;
@@ -304,29 +280,29 @@ export default {
 						];
 					},
 				},
-        "single-node"
+				'single-node'
 			);
 
-      G6.registerBehavior("dice-mindmap", {
+			G6.registerBehavior('dice-mindmap', {
 				getEvents() {
 					return {
-            "node:click": "clickNode",
+						'node:click': 'clickNode',
-            "node:dblclick": "editNode",
+						'node:dblclick': 'editNode',
-            "node:mouseenter": "hoverNode",
+						'node:mouseenter': 'hoverNode',
-            "node:mouseleave": "hoverNodeOut",
+						'node:mouseleave': 'hoverNodeOut',
 					};
 				},
-        clickNode(evt) {
+				clickNode(evt: any) {
-          const model = evt.item.get("model");
+					const model = evt.item.get('model');
-          const name = evt.target.get("action");
+					const name = evt.target.get('action');
 					switch (name) {
-            case "add":
+						case 'add':
 							const newId =
 								model.id +
-                "-" +
+								'-' +
 								(((model.children &&
-                  model.children.reduce((a, b) => {
+									model.children.reduce((a: any, b: any) => {
-                    const num = Number(b.id.split("-").pop());
+										const num = Number(b.id.split('-').pop());
 										return a < num ? num : a;
 									}, 0)) ||
 									0) +
@@ -335,115 +311,107 @@ export default {
 								children: (model.children || []).concat([
 									{
 										id: newId,
-                    direction:
+										direction: newId.charCodeAt(newId.length - 1) % 2 === 0 ? 'right' : 'left',
-                      newId.charCodeAt(newId.length - 1) % 2 === 0
+										label: 'New',
-                        ? "right"
+										type: 'dice-mind-map-leaf',
-                        : "left",
+										color: model.color || colorArr[Math.floor(Math.random() * colorArr.length)],
-                    label: "New",
-                    type: "dice-mind-map-leaf",
-                    color:
-                      model.color ||
-                      colorArr[Math.floor(Math.random() * colorArr.length)],
 									},
 								]),
 							});
 							evt.currentTarget.refreshLayout(false);
 							break;
-            case "delete":
+						case 'delete':
-              const parent = evt.item.get("parent");
+							const parent = evt.item.get('parent');
 							evt.currentTarget.updateItem(parent, {
-                children: (parent.get("model").children || []).filter(
+								children: (parent.get('model').children || []).filter((e: any) => e.id !== model.id),
-                  (e) => e.id !== model.id
-                ),
 							});
 							evt.currentTarget.refreshLayout(false);
 							break;
-            case "edit":
+						case 'edit':
 							break;
 						default:
 							return;
 					}
 				},
-        editNode(evt) {
+				editNode(evt: any) {
 					const item = evt.item;
-          const model = item.get("model");
+					const model = item.get('model');
 					const { x, y } = item.calculateBBox();
 					const graph = evt.currentTarget;
 					const realPosition = evt.currentTarget.getClientByPoint(x, y);
-          const el = document.createElement("div");
+					const el = document.createElement('div');
-          const fontSizeMap = {
+					const fontSizeMap: any = {
-            "dice-mind-map-root": 24,
+						'dice-mind-map-root': 24,
-            "dice-mind-map-sub": 18,
+						'dice-mind-map-sub': 18,
-            "dice-mind-map-leaf": 16,
+						'dice-mind-map-leaf': 16,
 					};
-          el.style.fontSize = fontSizeMap[model.type] + "px";
+					el.style.fontSize = fontSizeMap[model.type] + 'px';
-          el.style.position = "fixed";
+					el.style.position = 'fixed';
-          el.style.top = realPosition.y + "px";
+					el.style.top = realPosition.y + 'px';
-          el.style.left = realPosition.x + "px";
+					el.style.left = realPosition.x + 'px';
-          el.style.paddingLeft = "12px";
+					el.style.paddingLeft = '12px';
-          el.style.transformOrigin = "top left";
+					el.style.transformOrigin = 'top left';
 					el.style.transform = `scale(${evt.currentTarget.getZoom()})`;
-          const input = document.createElement("input");
+					const input = document.createElement('input');
-          input.style.border = "none";
+					input.style.border = 'none';
 					input.value = model.label;
-          input.style.width =
+					input.style.width = Util.getTextSize(model.label, fontSizeMap[model.type])[0] + 'px';
-            Util.getTextSize(model.label, fontSizeMap[model.type])[0] + "px";
+					input.className = 'dice-input';
-          input.className = "dice-input";
+					el.className = 'dice-input';
-          el.className = "dice-input";
 					el.appendChild(input);
 					document.body.appendChild(el);
 					const destroyEl = () => {
 						document.body.removeChild(el);
 					};
-          const clickEvt = (event) => {
+					const clickEvt = (event: any) => {
-            if (!event.target["className"].includes("dice-input")) {
+						if (!event.target['className'].includes('dice-input')) {
-              window.removeEventListener("mousedown", clickEvt);
+							window.removeEventListener('mousedown', clickEvt);
-              window.removeEventListener("scroll", clickEvt);
+							window.removeEventListener('scroll', clickEvt);
 							graph.updateItem(item, {
 								label: input.value,
 							});
 							graph.refreshLayout(false);
-              graph.off("wheelZoom", clickEvt);
+							graph.off('wheelZoom', clickEvt);
 							destroyEl();
 						}
 					};
-          graph.on("wheelZoom", clickEvt);
+					graph.on('wheelZoom', clickEvt);
-          window.addEventListener("mousedown", clickEvt);
+					window.addEventListener('mousedown', clickEvt);
-          window.addEventListener("scroll", clickEvt);
+					window.addEventListener('scroll', clickEvt);
-          input.addEventListener("keyup", (event) => {
+					input.addEventListener('keyup', (event) => {
-            if (event.key === "Enter") {
+						if (event.key === 'Enter') {
 							clickEvt({
 								target: {},
 							});
 						}
 					});
 				},
-        hoverNode(evt) {
+				hoverNode(evt: any) {
 					evt.currentTarget.updateItem(evt.item, {
 						hover: true,
 					});
 				},
-        hoverNodeOut(evt) {
+				hoverNodeOut(evt: any) {
 					evt.currentTarget.updateItem(evt.item, {
 						hover: false,
 					});
 				},
 			});
 
-      G6.registerBehavior("scroll-canvas", {
+			G6.registerBehavior('scroll-canvas', {
 				getEvents: function getEvents() {
 					return {
-            wheel: "onWheel",
+						wheel: 'onWheel',
 					};
 				},
 
-        onWheel: function onWheel(ev) {
+				onWheel: function onWheel(ev: any) {
-          const { graph } = this;
+					const { graph } = this as any;
 					if (!graph) {
 						return;
 					}
 					if (ev.ctrlKey) {
-            const canvas = graph.get("canvas");
+						const canvas = graph.get('canvas');
 						const point = canvas.getPointByClient(ev.clientX, ev.clientY);
 						let ratio = graph.getZoom();
 						if (ev.wheelDelta > 0) {
@@ -464,20 +432,21 @@ export default {
 				},
 			});
 
-      const dataTransform = (data) => {
+			const dataTransform = (data: any) => {
-        const changeData = (d, level = 0, color) => {
+				let level: any = 0;
+				const changeData = (d: any, level?: any, color?: any) => {
 					const data = {
 						...d,
 					};
 					switch (level) {
 						case 0:
-              data.type = "dice-mind-map-root";
+							data.type = 'dice-mind-map-root';
 							break;
 						case 1:
-              data.type = "dice-mind-map-sub";
+							data.type = 'dice-mind-map-sub';
 							break;
 						default:
-              data.type = "dice-mind-map-leaf";
+							data.type = 'dice-mind-map-leaf';
 							break;
 					}
 
@@ -489,40 +458,35 @@ export default {
 
 					if (level === 1 && !d.direction) {
 						if (!d.direction) {
-              data.direction =
+							data.direction = d.id.charCodeAt(d.id.length - 1) % 2 === 0 ? 'right' : 'left';
-                d.id.charCodeAt(d.id.length - 1) % 2 === 0 ? "right" : "left";
 						}
 					}
 
 					if (d.children) {
-            data.children = d.children.map((child) =>
+						data.children = d.children.map((child: any) => changeData(child, level + 1, data.color));
-              changeData(child, level + 1, data.color)
-            );
 					}
 					return data;
 				};
-        return changeData(data);
+				return changeData(data, level, data.color);
 			};
 
-      const container = document.getElementById("antvG6");
+			const container = proxy.$refs.antvG6Ref;
 			const width = container.scrollWidth;
 			const height = container.scrollHeight;
 			const tree = new G6.TreeGraph({
-        container: "antvG6",
+				container: 'antvG6',
 				width,
 				height,
 				fitView: true,
 				fitViewPadding: [10, 20],
 				layout: {
-          type: "mindmap",
+					type: 'mindmap',
-          direction: "H",
+					direction: 'H',
 					getHeight: () => {
 						return 16;
 					},
-          getWidth: (node) => {
+					getWidth: (node: any) => {
-            return node.level === 0
+						return node.level === 0 ? Util.getTextSize(node.label, 16)[0] + 12 : Util.getTextSize(node.label, 12)[0];
-              ? Util.getTextSize(node.label, 16)[0] + 12
-              : Util.getTextSize(node.label, 12)[0];
 					},
 					getVGap: () => {
 						return 10;
@@ -530,19 +494,19 @@ export default {
 					getHGap: () => {
 						return 60;
 					},
-          getSide: (node) => {
+					getSide: (node: any) => {
 						return node.data.direction;
 					},
 				},
 				defaultEdge: {
-          type: "cubic-horizontal",
+					type: 'cubic-horizontal',
 					style: {
 						lineWidth: 2,
 					},
 				},
 				minZoom: 0.5,
 				modes: {
-          default: ["drag-canvas", "zoom-canvas", "dice-mindmap"],
+					default: ['drag-canvas', 'zoom-canvas', 'dice-mindmap'],
 				},
 			});
 

src/views/fun/qrcode/index.vue

@@ -1,11 +1,15 @@
 <template>
 	<div class="qrcode-container">
 		<el-card shadow="hover" header="qrcodejs2 二维码生成">
-      <el-alert title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs" type="success" :closable="false"
+			<el-alert
-        class="mb15"></el-alert>
+				title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
 			<div class="qrcode-img-warp">
 				<div class="mb30 mt30 qrcode-img">
-          <div id="qrcode"></div>
+					<div class="qrcode" ref="qrcodeRef"></div>
 				</div>
 				<el-button type="primary" icon="el-icon-refresh" size="small" @click="onInitQrcode">重新生成</el-button>
 			</div>
@@ -14,26 +18,28 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted } from "vue";
+import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
 export default {
-  name: "qrcode",
+	name: 'qrcode',
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const state = reactive({
-      qrcode: "",
+			qrcode: '',
 		});
 		// 初始化生成二维码
 		const initQrcode = () => {
-      new QRCode(document.getElementById("qrcode"), {
+			new QRCode(proxy.$refs.qrcodeRef, {
 				text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
 				width: 125,
 				height: 125,
-        colorDark: "#000000",
+				colorDark: '#000000',
-        colorLight: "#ffffff",
+				colorLight: '#ffffff',
 			});
 		};
 		// 重新生成
 		const onInitQrcode = () => {
-      document.getElementById("qrcode").innerHTML = "";
+			proxy.$refs.qrcodeRef.innerHTML = '';
 			initQrcode();
 		};
 		// 页面加载时
@@ -56,7 +62,7 @@ export default {
 			display: flex;
 			width: 100%;
 			height: 125px;
-      #qrcode {
+			.qrcode {
 				margin: auto;
 				width: 125px;
 				height: 125px;

src/views/fun/selector/index.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive } from 'vue';
-import IconSelector from "/@/components/iconSelector/index.vue";
+import IconSelector from '/@/components/iconSelector/index.vue';
 export default {
-  name: "selector",
+	name: 'selector',
 	components: { IconSelector },
 	setup() {
 		const state = reactive({});
 		// 获取当前点击的 icon 图标
-    const ongetCurrentIcon = (v) => {
+		const ongetCurrentIcon = (v: string) => {
 			console.log(v);
 		};
 		return {

src/views/fun/tagsView/index.vue

@@ -6,8 +6,7 @@
 					<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4" class="tags-view-form-col">
 						<el-form-item label="功能">
 							<el-select v-model="formInline.selectId" placeholder="请选择" class="w100">
-                <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+								<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-                </el-option>
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -28,8 +27,7 @@
 			<div class="flex-warp">
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrentTagsView">刷新当前页
+						<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrentTagsView">刷新当前页 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item">
@@ -39,20 +37,17 @@
 				</div>
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="warning" size="small" icon="el-icon-circle-close" @click="closeOtherTagsView">关闭其它
+						<el-button type="warning" size="small" icon="el-icon-circle-close" @click="closeOtherTagsView">关闭其它 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="danger" size="small" icon="el-icon-folder-delete" @click="closeAllTagsView">全部关闭
+						<el-button type="danger" size="small" icon="el-icon-folder-delete" @click="closeAllTagsView">全部关闭 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="success" size="small" icon="el-icon-full-screen" @click="openCurrenFullscreen">当前页全屏
+						<el-button type="success" size="small" icon="el-icon-full-screen" @click="openCurrenFullscreen">当前页全屏 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
@@ -61,80 +56,80 @@
 </template>
 
 <script lang="ts">
-import { getCurrentInstance, reactive, toRefs } from "vue";
+import { getCurrentInstance, reactive, toRefs } from 'vue';
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router';
 export default {
-  name: "funTagsView",
+	name: 'funTagsView',
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
 		const state = reactive({
 			formInline: {
-        path: "",
+				path: '',
 				selectId: 0,
 			},
 			selectOptions: [
 				{
 					value: 0,
-          label: "刷新当前",
+					label: '刷新当前',
 				},
 				{
 					value: 1,
-          label: "关闭当前",
+					label: '关闭当前',
 				},
 				{
 					value: 2,
-          label: "关闭其它",
+					label: '关闭其它',
 				},
 				{
 					value: 3,
-          label: "关闭全部",
+					label: '关闭全部',
 				},
 				{
 					value: 4,
-          label: "当前页全屏",
+					label: '当前页全屏',
 				},
 			],
 		});
 		// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
 		// 1、刷新当前 tagsView
 		const refreshCurrentTagsView = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: 0,
 				path: route.path,
 			});
 		};
 		// 2、关闭当前 tagsView
 		const closeCurrentTagsView = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: 1,
 				path: route.path,
 			});
 		};
 		// 3、关闭其它 tagsView
 		const closeOtherTagsView = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: 2,
 				path: route.path,
 			});
 		};
 		// 4、关闭全部 tagsView
 		const closeAllTagsView = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: 3,
 				path: route.path,
 			});
 		};
 		// 5、开启当前页面全屏
 		const openCurrenFullscreen = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: 4,
 				path: route.path,
 			});
 		};
 		// 执行点击
 		const onImplementClick = () => {
-      proxy.mittBus.emit("onCurrentContextmenuClick", {
+			proxy.mittBus.emit('onCurrentContextmenuClick', {
 				id: state.formInline.selectId,
 				path: state.formInline.path,
 			});

src/views/fun/tree/index.vue

@@ -1,65 +1,66 @@
 <template>
 	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="layout-view-bg-white">
-      <div id="echartsTree" style="height:100%;"></div>
+			<div style="height: 100%" ref="echartsTreeRef"></div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted } from "vue";
+import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import { echartsTreeList } from "./mock.ts";
+import { echartsTreeList } from './mock.ts';
 export default {
-  name: "echartsTree",
+	name: 'echartsTree',
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const state = reactive({
-      tagViewHeight: "",
+			tagViewHeight: '',
 			echartsTreeList,
 		});
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
-      let { isTagsview } = store.state.themeConfig;
+			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return `114px`;
 			else return `80px`;
 		});
 		// 初始化数据
 		const initEchartsTree = () => {
-      const myChart = echarts.init(document.getElementById("echartsTree"));
+			const myChart = echarts.init(proxy.$refs.echartsTreeRef);
-      state.echartsTreeList.children.forEach((datum, index) => {
+			state.echartsTreeList.children.forEach((datum: any, index: number) => {
 				index % 2 === 0 && (datum.collapsed = true);
 			});
 			const option = {
 				tooltip: {
-          trigger: "item",
+					trigger: 'item',
-          triggerOn: "mousemove",
+					triggerOn: 'mousemove',
 				},
 				series: [
 					{
-            type: "tree",
+						type: 'tree',
 						data: [state.echartsTreeList],
-            top: "1%",
+						top: '1%',
-            left: "7%",
+						left: '7%',
-            bottom: "1%",
+						bottom: '1%',
-            right: "20%",
+						right: '20%',
 						symbolSize: 7,
 						label: {
-              position: "left",
+							position: 'left',
-              verticalAlign: "middle",
+							verticalAlign: 'middle',
-              align: "right",
+							align: 'right',
 							fontSize: 9,
 						},
 						leaves: {
 							label: {
-                position: "right",
+								position: 'right',
-                verticalAlign: "middle",
+								verticalAlign: 'middle',
-                align: "left",
+								align: 'left',
 							},
 						},
 						emphasis: {
-              focus: "descendant",
+							focus: 'descendant',
 						},
 						expandAndCollapse: true,
 						animationDuration: 550,
@@ -68,7 +69,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};

src/views/fun/tree/mock.ts

@@ -1,381 +1,377 @@
 // 模拟数据
 export const echartsTreeList = {
-    "name": "flare",
+	name: 'flare',
-    "children": [
+	children: [
 		{
-            "name": "analytics",
+			name: 'analytics',
-            "children": [
+			children: [
 				{
-                    "name": "cluster",
+					name: 'cluster',
-                    "children": [
+					children: [
-                        { "name": "AgglomerativeCluster", "value": 3938 },
+						{ name: 'AgglomerativeCluster', value: 3938 },
-                        { "name": "CommunityStructure", "value": 3812 },
+						{ name: 'CommunityStructure', value: 3812 },
-                        { "name": "HierarchicalCluster", "value": 6714 },
+						{ name: 'HierarchicalCluster', value: 6714 },
-                        { "name": "MergeEdge", "value": 743 }
+						{ name: 'MergeEdge', value: 743 },
-                    ]
+					],
 				},
 				{
-                    "name": "graph",
+					name: 'graph',
-                    "children": [
+					children: [
-                        { "name": "BetweennessCentrality", "value": 3534 },
+						{ name: 'BetweennessCentrality', value: 3534 },
-                        { "name": "LinkDistance", "value": 5731 },
+						{ name: 'LinkDistance', value: 5731 },
-                        { "name": "MaxFlowMinCut", "value": 7840 },
+						{ name: 'MaxFlowMinCut', value: 7840 },
-                        { "name": "ShortestPaths", "value": 5914 },
+						{ name: 'ShortestPaths', value: 5914 },
-                        { "name": "SpanningTree", "value": 3416 }
+						{ name: 'SpanningTree', value: 3416 },
-                    ]
+					],
 				},
 				{
-                    "name": "optimization",
+					name: 'optimization',
-                    "children": [
+					children: [{ name: 'AspectRatioBanker', value: 7074 }],
-                        { "name": "AspectRatioBanker", "value": 7074 }
+				},
-                    ]
+			],
-                }
-            ]
 		},
 		{
-            "name": "animate",
+			name: 'animate',
-            "children": [
+			children: [
-                { "name": "Easing", "value": 17010 },
+				{ name: 'Easing', value: 17010 },
-                { "name": "FunctionSequence", "value": 5842 },
+				{ name: 'FunctionSequence', value: 5842 },
 				{
-                    "name": "interpolate",
+					name: 'interpolate',
-                    "children": [
+					children: [
-                        { "name": "ArrayInterpolator", "value": 1983 },
+						{ name: 'ArrayInterpolator', value: 1983 },
-                        { "name": "ColorInterpolator", "value": 2047 },
+						{ name: 'ColorInterpolator', value: 2047 },
-                        { "name": "DateInterpolator", "value": 1375 },
+						{ name: 'DateInterpolator', value: 1375 },
-                        { "name": "Interpolator", "value": 8746 },
+						{ name: 'Interpolator', value: 8746 },
-                        { "name": "MatrixInterpolator", "value": 2202 },
+						{ name: 'MatrixInterpolator', value: 2202 },
-                        { "name": "NumberInterpolator", "value": 1382 },
+						{ name: 'NumberInterpolator', value: 1382 },
-                        { "name": "ObjectInterpolator", "value": 1629 },
+						{ name: 'ObjectInterpolator', value: 1629 },
-                        { "name": "PointInterpolator", "value": 1675 },
+						{ name: 'PointInterpolator', value: 1675 },
-                        { "name": "RectangleInterpolator", "value": 2042 }
+						{ name: 'RectangleInterpolator', value: 2042 },
-                    ]
+					],
 				},
-                { "name": "ISchedulable", "value": 1041 },
+				{ name: 'ISchedulable', value: 1041 },
-                { "name": "Parallel", "value": 5176 },
+				{ name: 'Parallel', value: 5176 },
-                { "name": "Pause", "value": 449 },
+				{ name: 'Pause', value: 449 },
-                { "name": "Scheduler", "value": 5593 },
+				{ name: 'Scheduler', value: 5593 },
-                { "name": "Sequence", "value": 5534 },
+				{ name: 'Sequence', value: 5534 },
-                { "name": "Transition", "value": 9201 },
+				{ name: 'Transition', value: 9201 },
-                { "name": "Transitioner", "value": 19975 },
+				{ name: 'Transitioner', value: 19975 },
-                { "name": "TransitionEvent", "value": 1116 },
+				{ name: 'TransitionEvent', value: 1116 },
-                { "name": "Tween", "value": 6006 }
+				{ name: 'Tween', value: 6006 },
-            ]
+			],
 		},
 		{
-            "name": "data",
+			name: 'data',
-            "children": [
+			children: [
 				{
-                    "name": "converters",
+					name: 'converters',
-                    "children": [
+					children: [
-                        { "name": "Converters", "value": 721 },
+						{ name: 'Converters', value: 721 },
-                        { "name": "DelimitedTextConverter", "value": 4294 },
+						{ name: 'DelimitedTextConverter', value: 4294 },
-                        { "name": "GraphMLConverter", "value": 9800 },
+						{ name: 'GraphMLConverter', value: 9800 },
-                        { "name": "IDataConverter", "value": 1314 },
+						{ name: 'IDataConverter', value: 1314 },
-                        { "name": "JSONConverter", "value": 2220 }
+						{ name: 'JSONConverter', value: 2220 },
-                    ]
+					],
 				},
-                { "name": "DataField", "value": 1759 },
+				{ name: 'DataField', value: 1759 },
-                { "name": "DataSchema", "value": 2165 },
+				{ name: 'DataSchema', value: 2165 },
-                { "name": "DataSet", "value": 586 },
+				{ name: 'DataSet', value: 586 },
-                { "name": "DataSource", "value": 3331 },
+				{ name: 'DataSource', value: 3331 },
-                { "name": "DataTable", "value": 772 },
+				{ name: 'DataTable', value: 772 },
-                { "name": "DataUtil", "value": 3322 }
+				{ name: 'DataUtil', value: 3322 },
-            ]
+			],
 		},
 		{
-            "name": "display",
+			name: 'display',
-            "children": [
+			children: [
-                { "name": "DirtySprite", "value": 8833 },
+				{ name: 'DirtySprite', value: 8833 },
-                { "name": "LineSprite", "value": 1732 },
+				{ name: 'LineSprite', value: 1732 },
-                { "name": "RectSprite", "value": 3623 },
+				{ name: 'RectSprite', value: 3623 },
-                { "name": "TextSprite", "value": 10066 }
+				{ name: 'TextSprite', value: 10066 },
-            ]
+			],
 		},
 		{
-            "name": "flex",
+			name: 'flex',
-            "children": [
+			children: [{ name: 'FlareVis', value: 4116 }],
-                { "name": "FlareVis", "value": 4116 }
-            ]
 		},
 		{
-            "name": "physics",
+			name: 'physics',
-            "children": [
+			children: [
-                { "name": "DragForce", "value": 1082 },
+				{ name: 'DragForce', value: 1082 },
-                { "name": "GravityForce", "value": 1336 },
+				{ name: 'GravityForce', value: 1336 },
-                { "name": "IForce", "value": 319 },
+				{ name: 'IForce', value: 319 },
-                { "name": "NBodyForce", "value": 10498 },
+				{ name: 'NBodyForce', value: 10498 },
-                { "name": "Particle", "value": 2822 },
+				{ name: 'Particle', value: 2822 },
-                { "name": "Simulation", "value": 9983 },
+				{ name: 'Simulation', value: 9983 },
-                { "name": "Spring", "value": 2213 },
+				{ name: 'Spring', value: 2213 },
-                { "name": "SpringForce", "value": 1681 }
+				{ name: 'SpringForce', value: 1681 },
-            ]
+			],
 		},
 		{
-            "name": "query",
+			name: 'query',
-            "children": [
+			children: [
-                { "name": "AggregateExpression", "value": 1616 },
+				{ name: 'AggregateExpression', value: 1616 },
-                { "name": "And", "value": 1027 },
+				{ name: 'And', value: 1027 },
-                { "name": "Arithmetic", "value": 3891 },
+				{ name: 'Arithmetic', value: 3891 },
-                { "name": "Average", "value": 891 },
+				{ name: 'Average', value: 891 },
-                { "name": "BinaryExpression", "value": 2893 },
+				{ name: 'BinaryExpression', value: 2893 },
-                { "name": "Comparison", "value": 5103 },
+				{ name: 'Comparison', value: 5103 },
-                { "name": "CompositeExpression", "value": 3677 },
+				{ name: 'CompositeExpression', value: 3677 },
-                { "name": "Count", "value": 781 },
+				{ name: 'Count', value: 781 },
-                { "name": "DateUtil", "value": 4141 },
+				{ name: 'DateUtil', value: 4141 },
-                { "name": "Distinct", "value": 933 },
+				{ name: 'Distinct', value: 933 },
-                { "name": "Expression", "value": 5130 },
+				{ name: 'Expression', value: 5130 },
-                { "name": "ExpressionIterator", "value": 3617 },
+				{ name: 'ExpressionIterator', value: 3617 },
-                { "name": "Fn", "value": 3240 },
+				{ name: 'Fn', value: 3240 },
-                { "name": "If", "value": 2732 },
+				{ name: 'If', value: 2732 },
-                { "name": "IsA", "value": 2039 },
+				{ name: 'IsA', value: 2039 },
-                { "name": "Literal", "value": 1214 },
+				{ name: 'Literal', value: 1214 },
-                { "name": "Match", "value": 3748 },
+				{ name: 'Match', value: 3748 },
-                { "name": "Maximum", "value": 843 },
+				{ name: 'Maximum', value: 843 },
 				{
-                    "name": "methods",
+					name: 'methods',
-                    "children": [
+					children: [
-                        { "name": "add", "value": 593 },
+						{ name: 'add', value: 593 },
-                        { "name": "and", "value": 330 },
+						{ name: 'and', value: 330 },
-                        { "name": "average", "value": 287 },
+						{ name: 'average', value: 287 },
-                        { "name": "count", "value": 277 },
+						{ name: 'count', value: 277 },
-                        { "name": "distinct", "value": 292 },
+						{ name: 'distinct', value: 292 },
-                        { "name": "div", "value": 595 },
+						{ name: 'div', value: 595 },
-                        { "name": "eq", "value": 594 },
+						{ name: 'eq', value: 594 },
-                        { "name": "fn", "value": 460 },
+						{ name: 'fn', value: 460 },
-                        { "name": "gt", "value": 603 },
+						{ name: 'gt', value: 603 },
-                        { "name": "gte", "value": 625 },
+						{ name: 'gte', value: 625 },
-                        { "name": "iff", "value": 748 },
+						{ name: 'iff', value: 748 },
-                        { "name": "isa", "value": 461 },
+						{ name: 'isa', value: 461 },
-                        { "name": "lt", "value": 597 },
+						{ name: 'lt', value: 597 },
-                        { "name": "lte", "value": 619 },
+						{ name: 'lte', value: 619 },
-                        { "name": "max", "value": 283 },
+						{ name: 'max', value: 283 },
-                        { "name": "min", "value": 283 },
+						{ name: 'min', value: 283 },
-                        { "name": "mod", "value": 591 },
+						{ name: 'mod', value: 591 },
-                        { "name": "mul", "value": 603 },
+						{ name: 'mul', value: 603 },
-                        { "name": "neq", "value": 599 },
+						{ name: 'neq', value: 599 },
-                        { "name": "not", "value": 386 },
+						{ name: 'not', value: 386 },
-                        { "name": "or", "value": 323 },
+						{ name: 'or', value: 323 },
-                        { "name": "orderby", "value": 307 },
+						{ name: 'orderby', value: 307 },
-                        { "name": "range", "value": 772 },
+						{ name: 'range', value: 772 },
-                        { "name": "select", "value": 296 },
+						{ name: 'select', value: 296 },
-                        { "name": "stddev", "value": 363 },
+						{ name: 'stddev', value: 363 },
-                        { "name": "sub", "value": 600 },
+						{ name: 'sub', value: 600 },
-                        { "name": "sum", "value": 280 },
+						{ name: 'sum', value: 280 },
-                        { "name": "update", "value": 307 },
+						{ name: 'update', value: 307 },
-                        { "name": "variance", "value": 335 },
+						{ name: 'variance', value: 335 },
-                        { "name": "where", "value": 299 },
+						{ name: 'where', value: 299 },
-                        { "name": "xor", "value": 354 },
+						{ name: 'xor', value: 354 },
-                        { "name": "-", "value": 264 }
+						{ name: '-', value: 264 },
-                    ]
+					],
 				},
-                { "name": "Minimum", "value": 843 },
+				{ name: 'Minimum', value: 843 },
-                { "name": "Not", "value": 1554 },
+				{ name: 'Not', value: 1554 },
-                { "name": "Or", "value": 970 },
+				{ name: 'Or', value: 970 },
-                { "name": "Query", "value": 13896 },
+				{ name: 'Query', value: 13896 },
-                { "name": "Range", "value": 1594 },
+				{ name: 'Range', value: 1594 },
-                { "name": "StringUtil", "value": 4130 },
+				{ name: 'StringUtil', value: 4130 },
-                { "name": "Sum", "value": 791 },
+				{ name: 'Sum', value: 791 },
-                { "name": "Variable", "value": 1124 },
+				{ name: 'Variable', value: 1124 },
-                { "name": "Variance", "value": 1876 },
+				{ name: 'Variance', value: 1876 },
-                { "name": "Xor", "value": 1101 }
+				{ name: 'Xor', value: 1101 },
-            ]
+			],
 		},
 		{
-            "name": "scale",
+			name: 'scale',
-            "children": [
+			children: [
-                { "name": "IScaleMap", "value": 2105 },
+				{ name: 'IScaleMap', value: 2105 },
-                { "name": "LinearScale", "value": 1316 },
+				{ name: 'LinearScale', value: 1316 },
-                { "name": "LogScale", "value": 3151 },
+				{ name: 'LogScale', value: 3151 },
-                { "name": "OrdinalScale", "value": 3770 },
+				{ name: 'OrdinalScale', value: 3770 },
-                { "name": "QuantileScale", "value": 2435 },
+				{ name: 'QuantileScale', value: 2435 },
-                { "name": "QuantitativeScale", "value": 4839 },
+				{ name: 'QuantitativeScale', value: 4839 },
-                { "name": "RootScale", "value": 1756 },
+				{ name: 'RootScale', value: 1756 },
-                { "name": "Scale", "value": 4268 },
+				{ name: 'Scale', value: 4268 },
-                { "name": "ScaleType", "value": 1821 },
+				{ name: 'ScaleType', value: 1821 },
-                { "name": "TimeScale", "value": 5833 }
+				{ name: 'TimeScale', value: 5833 },
-            ]
+			],
 		},
 		{
-            "name": "util",
+			name: 'util',
-            "children": [
+			children: [
-                { "name": "Arrays", "value": 8258 },
+				{ name: 'Arrays', value: 8258 },
-                { "name": "Colors", "value": 10001 },
+				{ name: 'Colors', value: 10001 },
-                { "name": "Dates", "value": 8217 },
+				{ name: 'Dates', value: 8217 },
-                { "name": "Displays", "value": 12555 },
+				{ name: 'Displays', value: 12555 },
-                { "name": "Filter", "value": 2324 },
+				{ name: 'Filter', value: 2324 },
-                { "name": "Geometry", "value": 10993 },
+				{ name: 'Geometry', value: 10993 },
 				{
-                    "name": "heap",
+					name: 'heap',
-                    "children": [
+					children: [
-                        { "name": "FibonacciHeap", "value": 9354 },
+						{ name: 'FibonacciHeap', value: 9354 },
-                        { "name": "HeapNode", "value": 1233 }
+						{ name: 'HeapNode', value: 1233 },
-                    ]
+					],
 				},
-                { "name": "IEvaluable", "value": 335 },
+				{ name: 'IEvaluable', value: 335 },
-                { "name": "IPredicate", "value": 383 },
+				{ name: 'IPredicate', value: 383 },
-                { "name": "IValueProxy", "value": 874 },
+				{ name: 'IValueProxy', value: 874 },
 				{
-                    "name": "math",
+					name: 'math',
-                    "children": [
+					children: [
-                        { "name": "DenseMatrix", "value": 3165 },
+						{ name: 'DenseMatrix', value: 3165 },
-                        { "name": "IMatrix", "value": 2815 },
+						{ name: 'IMatrix', value: 2815 },
-                        { "name": "SparseMatrix", "value": 3366 }
+						{ name: 'SparseMatrix', value: 3366 },
-                    ]
+					],
 				},
-                { "name": "Maths", "value": 17705 },
+				{ name: 'Maths', value: 17705 },
-                { "name": "Orientation", "value": 1486 },
+				{ name: 'Orientation', value: 1486 },
 				{
-                    "name": "palette",
+					name: 'palette',
-                    "children": [
+					children: [
-                        { "name": "ColorPalette", "value": 6367 },
+						{ name: 'ColorPalette', value: 6367 },
-                        { "name": "Palette", "value": 1229 },
+						{ name: 'Palette', value: 1229 },
-                        { "name": "ShapePalette", "value": 2059 },
+						{ name: 'ShapePalette', value: 2059 },
-                        { "name": "SizePalette", "value": 2291 }
+						{ name: 'SizePalette', value: 2291 },
-                    ]
+					],
 				},
-                { "name": "Property", "value": 5559 },
+				{ name: 'Property', value: 5559 },
-                { "name": "Shapes", "value": 19118 },
+				{ name: 'Shapes', value: 19118 },
-                { "name": "Sort", "value": 6887 },
+				{ name: 'Sort', value: 6887 },
-                { "name": "Stats", "value": 6557 },
+				{ name: 'Stats', value: 6557 },
-                { "name": "Strings", "value": 22026 }
+				{ name: 'Strings', value: 22026 },
-            ]
+			],
 		},
 		{
-            "name": "vis",
+			name: 'vis',
-            "children": [
+			children: [
 				{
-                    "name": "axis",
+					name: 'axis',
-                    "children": [
+					children: [
-                        { "name": "Axes", "value": 1302 },
+						{ name: 'Axes', value: 1302 },
-                        { "name": "Axis", "value": 24593 },
+						{ name: 'Axis', value: 24593 },
-                        { "name": "AxisGridLine", "value": 652 },
+						{ name: 'AxisGridLine', value: 652 },
-                        { "name": "AxisLabel", "value": 636 },
+						{ name: 'AxisLabel', value: 636 },
-                        { "name": "CartesianAxes", "value": 6703 }
+						{ name: 'CartesianAxes', value: 6703 },
-                    ]
+					],
 				},
 				{
-                    "name": "controls",
+					name: 'controls',
-                    "children": [
+					children: [
-                        { "name": "AnchorControl", "value": 2138 },
+						{ name: 'AnchorControl', value: 2138 },
-                        { "name": "ClickControl", "value": 3824 },
+						{ name: 'ClickControl', value: 3824 },
-                        { "name": "Control", "value": 1353 },
+						{ name: 'Control', value: 1353 },
-                        { "name": "ControlList", "value": 4665 },
+						{ name: 'ControlList', value: 4665 },
-                        { "name": "DragControl", "value": 2649 },
+						{ name: 'DragControl', value: 2649 },
-                        { "name": "ExpandControl", "value": 2832 },
+						{ name: 'ExpandControl', value: 2832 },
-                        { "name": "HoverControl", "value": 4896 },
+						{ name: 'HoverControl', value: 4896 },
-                        { "name": "IControl", "value": 763 },
+						{ name: 'IControl', value: 763 },
-                        { "name": "PanZoomControl", "value": 5222 },
+						{ name: 'PanZoomControl', value: 5222 },
-                        { "name": "SelectionControl", "value": 7862 },
+						{ name: 'SelectionControl', value: 7862 },
-                        { "name": "TooltipControl", "value": 8435 }
+						{ name: 'TooltipControl', value: 8435 },
-                    ]
+					],
 				},
 				{
-                    "name": "data",
+					name: 'data',
-                    "children": [
+					children: [
-                        { "name": "Data", "value": 20544 },
+						{ name: 'Data', value: 20544 },
-                        { "name": "DataList", "value": 19788 },
+						{ name: 'DataList', value: 19788 },
-                        { "name": "DataSprite", "value": 10349 },
+						{ name: 'DataSprite', value: 10349 },
-                        { "name": "EdgeSprite", "value": 3301 },
+						{ name: 'EdgeSprite', value: 3301 },
-                        { "name": "NodeSprite", "value": 19382 },
+						{ name: 'NodeSprite', value: 19382 },
 						{
-                            "name": "render",
+							name: 'render',
-                            "children": [
+							children: [
-                                { "name": "ArrowType", "value": 698 },
+								{ name: 'ArrowType', value: 698 },
-                                { "name": "EdgeRenderer", "value": 5569 },
+								{ name: 'EdgeRenderer', value: 5569 },
-                                { "name": "IRenderer", "value": 353 },
+								{ name: 'IRenderer', value: 353 },
-                                { "name": "ShapeRenderer", "value": 2247 }
+								{ name: 'ShapeRenderer', value: 2247 },
-                            ]
+							],
 						},
-                        { "name": "ScaleBinding", "value": 11275 },
+						{ name: 'ScaleBinding', value: 11275 },
-                        { "name": "Tree", "value": 7147 },
+						{ name: 'Tree', value: 7147 },
-                        { "name": "TreeBuilder", "value": 9930 }
+						{ name: 'TreeBuilder', value: 9930 },
-                    ]
+					],
 				},
 				{
-                    "name": "events",
+					name: 'events',
-                    "children": [
+					children: [
-                        { "name": "DataEvent", "value": 2313 },
+						{ name: 'DataEvent', value: 2313 },
-                        { "name": "SelectionEvent", "value": 1880 },
+						{ name: 'SelectionEvent', value: 1880 },
-                        { "name": "TooltipEvent", "value": 1701 },
+						{ name: 'TooltipEvent', value: 1701 },
-                        { "name": "VisualizationEvent", "value": 1117 }
+						{ name: 'VisualizationEvent', value: 1117 },
-                    ]
+					],
 				},
 				{
-                    "name": "legend",
+					name: 'legend',
-                    "children": [
+					children: [
-                        { "name": "Legend", "value": 20859 },
+						{ name: 'Legend', value: 20859 },
-                        { "name": "LegendItem", "value": 4614 },
+						{ name: 'LegendItem', value: 4614 },
-                        { "name": "LegendRange", "value": 10530 }
+						{ name: 'LegendRange', value: 10530 },
-                    ]
+					],
 				},
 				{
-                    "name": "operator",
+					name: 'operator',
-                    "children": [
+					children: [
 						{
-                            "name": "distortion",
+							name: 'distortion',
-                            "children": [
+							children: [
-                                { "name": "BifocalDistortion", "value": 4461 },
+								{ name: 'BifocalDistortion', value: 4461 },
-                                { "name": "Distortion", "value": 6314 },
+								{ name: 'Distortion', value: 6314 },
-                                { "name": "FisheyeDistortion", "value": 3444 }
+								{ name: 'FisheyeDistortion', value: 3444 },
-                            ]
+							],
 						},
 						{
-                            "name": "encoder",
+							name: 'encoder',
-                            "children": [
+							children: [
-                                { "name": "ColorEncoder", "value": 3179 },
+								{ name: 'ColorEncoder', value: 3179 },
-                                { "name": "Encoder", "value": 4060 },
+								{ name: 'Encoder', value: 4060 },
-                                { "name": "PropertyEncoder", "value": 4138 },
+								{ name: 'PropertyEncoder', value: 4138 },
-                                { "name": "ShapeEncoder", "value": 1690 },
+								{ name: 'ShapeEncoder', value: 1690 },
-                                { "name": "SizeEncoder", "value": 1830 }
+								{ name: 'SizeEncoder', value: 1830 },
-                            ]
+							],
 						},
 						{
-                            "name": "filter",
+							name: 'filter',
-                            "children": [
+							children: [
-                                { "name": "FisheyeTreeFilter", "value": 5219 },
+								{ name: 'FisheyeTreeFilter', value: 5219 },
-                                { "name": "GraphDistanceFilter", "value": 3165 },
+								{ name: 'GraphDistanceFilter', value: 3165 },
-                                { "name": "VisibilityFilter", "value": 3509 }
+								{ name: 'VisibilityFilter', value: 3509 },
-                            ]
+							],
 						},
-                        { "name": "IOperator", "value": 1286 },
+						{ name: 'IOperator', value: 1286 },
 						{
-                            "name": "label",
+							name: 'label',
-                            "children": [
+							children: [
-                                { "name": "Labeler", "value": 9956 },
+								{ name: 'Labeler', value: 9956 },
-                                { "name": "RadialLabeler", "value": 3899 },
+								{ name: 'RadialLabeler', value: 3899 },
-                                { "name": "StackedAreaLabeler", "value": 3202 }
+								{ name: 'StackedAreaLabeler', value: 3202 },
-                            ]
+							],
 						},
 						{
-                            "name": "layout",
+							name: 'layout',
-                            "children": [
+							children: [
-                                { "name": "AxisLayout", "value": 6725 },
+								{ name: 'AxisLayout', value: 6725 },
-                                { "name": "BundledEdgeRouter", "value": 3727 },
+								{ name: 'BundledEdgeRouter', value: 3727 },
-                                { "name": "CircleLayout", "value": 9317 },
+								{ name: 'CircleLayout', value: 9317 },
-                                { "name": "CirclePackingLayout", "value": 12003 },
+								{ name: 'CirclePackingLayout', value: 12003 },
-                                { "name": "DendrogramLayout", "value": 4853 },
+								{ name: 'DendrogramLayout', value: 4853 },
-                                { "name": "ForceDirectedLayout", "value": 8411 },
+								{ name: 'ForceDirectedLayout', value: 8411 },
-                                { "name": "IcicleTreeLayout", "value": 4864 },
+								{ name: 'IcicleTreeLayout', value: 4864 },
-                                { "name": "IndentedTreeLayout", "value": 3174 },
+								{ name: 'IndentedTreeLayout', value: 3174 },
-                                { "name": "Layout", "value": 7881 },
+								{ name: 'Layout', value: 7881 },
-                                { "name": "NodeLinkTreeLayout", "value": 12870 },
+								{ name: 'NodeLinkTreeLayout', value: 12870 },
-                                { "name": "PieLayout", "value": 2728 },
+								{ name: 'PieLayout', value: 2728 },
-                                { "name": "RadialTreeLayout", "value": 12348 },
+								{ name: 'RadialTreeLayout', value: 12348 },
-                                { "name": "RandomLayout", "value": 870 },
+								{ name: 'RandomLayout', value: 870 },
-                                { "name": "StackedAreaLayout", "value": 9121 },
+								{ name: 'StackedAreaLayout', value: 9121 },
-                                { "name": "TreeMapLayout", "value": 9191 }
+								{ name: 'TreeMapLayout', value: 9191 },
-                            ]
+							],
 						},
-                        { "name": "Operator", "value": 2490 },
+						{ name: 'Operator', value: 2490 },
-                        { "name": "OperatorList", "value": 5248 },
+						{ name: 'OperatorList', value: 5248 },
-                        { "name": "OperatorSequence", "value": 4190 },
+						{ name: 'OperatorSequence', value: 4190 },
-                        { "name": "OperatorSwitch", "value": 2581 },
+						{ name: 'OperatorSwitch', value: 2581 },
-                        { "name": "SortOperator", "value": 2023 }
+						{ name: 'SortOperator', value: 2023 },
-                    ]
+					],
 				},
-                { "name": "Visualization", "value": 16540 }
+				{ name: 'Visualization', value: 16540 },
-            ]
+			],
-        }
+		},
-    ]
+	],
-}
+};

src/views/fun/wangEditor/index.vue

@@ -1,26 +1,30 @@
 <template>
 	<div class="editor-container">
 		<el-card shadow="hover" header="wangeditor富文本编辑器">
-      <el-alert title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor" type="success"
+			<el-alert
-        :closable="false" class="mb15"></el-alert>
+				title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
 			<div id="wangeditor"></div>
 		</el-card>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted } from "vue";
+import { toRefs, reactive, onMounted } from 'vue';
-import wangeditor from "wangeditor";
+import wangeditor from 'wangeditor';
 export default {
-  name: "wangeditor",
+	name: 'wangeditor',
 	setup() {
 		const state = reactive({});
 		// 初始化富文本
 		// https://doc.wangeditor.com/
 		const initWangeditor = () => {
-      const editor = new wangeditor("#wangeditor");
+			const editor = new wangeditor('#wangeditor');
-      editor.config.placeholder = "请输入内容";
+			editor.config.placeholder = '请输入内容';
-      editor.config.onchange = (html) => {
+			editor.config.onchange = (html: string) => {
 				console.log(html);
 				// console.log(editor.txt.html());
 				// console.log(editor.txt.text());

src/views/home/index.vue

@@ -4,7 +4,7 @@
 			<el-col :sm="6" class="mb15">
 				<div class="home-card-item home-card-first">
 					<div class="flex-margin flex">
-            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg">
+						<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
 						<div class="home-card-first-right ml15">
 							<div class="flex-margin">
 								<div class="home-card-first-right-title">{{ currentTime }}，admin！</div>
@@ -22,14 +22,14 @@
 						<div class="home-card-item-tip pb3">{{ v.tip }}</div>
 						<div class="home-card-item-tip-num" :id="`tipNum${k + 1}`"></div>
 					</div>
-          <i :class="v.icon" :style="{'color': v.iconColor}"></i>
+					<i :class="v.icon" :style="{ color: v.iconColor }"></i>
 				</div>
 			</el-col>
 		</el-row>
 		<el-row :gutter="15">
 			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb15">
 				<el-card shadow="hover" header="商品销售情况">
-          <div id="homeLaboratory" style="height:200px;"></div>
+					<div style="height: 200px" ref="homeLaboratoryRef"></div>
 				</el-card>
 			</el-col>
 			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
@@ -51,7 +51,7 @@
 		<el-row :gutter="15">
 			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-warning-media">
 				<el-card shadow="hover" header="预警信息" class="home-warning-card">
-          <el-table :data="tableData.data" style="width: 100%;" stripe>
+					<el-table :data="tableData.data" style="width: 100%" stripe>
 						<el-table-column prop="date" label="时间"></el-table-column>
 						<el-table-column prop="name" label="实验室名称"></el-table-column>
 						<el-table-column prop="address" label="报警内容"></el-table-column>
@@ -86,7 +86,7 @@
 		<el-row>
 			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
 				<el-card shadow="hover" header="履约超时预警">
-          <div id="homeOvertime" style="height:200px;"></div>
+					<div style="height: 200px" ref="homeOvertimeRef"></div>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -94,14 +94,15 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, nextTick, computed } from "vue";
+import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-import { CountUp } from "countup.js";
+import { CountUp } from 'countup.js';
-import { formatAxis } from "/@/utils/formatTime";
+import { formatAxis } from '/@/utils/formatTime.ts';
-import { topCardItemList, environmentList, activitiesList } from "./mock.ts";
+import { topCardItemList, environmentList, activitiesList } from './mock.ts';
 export default {
-  name: "home",
+	name: 'home',
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const state = reactive({
 			topCardItemList,
 			environmentList,
@@ -109,19 +110,19 @@ export default {
 			tableData: {
 				data: [
 					{
-            date: "2016-05-02",
+						date: '2016-05-02',
-            name: "1号实验室",
+						name: '1号实验室',
-            address: "烟感2.1%OBS/M",
+						address: '烟感2.1%OBS/M',
 					},
 					{
-            date: "2016-05-04",
+						date: '2016-05-04',
-            name: "2号实验室",
+						name: '2号实验室',
-            address: "温度30℃",
+						address: '温度30℃',
 					},
 					{
-            date: "2016-05-01",
+						date: '2016-05-01',
-            name: "3号实验室",
+						name: '3号实验室',
-            address: "湿度57%RH",
+						address: '湿度57%RH',
 					},
 				],
 			},
@@ -133,17 +134,17 @@ export default {
 		// 初始化数字滚动
 		const initNumCountUp = () => {
 			nextTick(() => {
-        new CountUp("titleNum1", Math.random() * 10000).start();
+				new CountUp('titleNum1', Math.random() * 10000).start();
-        new CountUp("titleNum2", Math.random() * 10000).start();
+				new CountUp('titleNum2', Math.random() * 10000).start();
-        new CountUp("titleNum3", Math.random() * 10000).start();
+				new CountUp('titleNum3', Math.random() * 10000).start();
-        new CountUp("tipNum1", Math.random() * 1000).start();
+				new CountUp('tipNum1', Math.random() * 1000).start();
-        new CountUp("tipNum2", Math.random() * 1000).start();
+				new CountUp('tipNum2', Math.random() * 1000).start();
-        new CountUp("tipNum3", Math.random() * 1000).start();
+				new CountUp('tipNum3', Math.random() * 1000).start();
 			});
 		};
 		// 实验室使用情况
 		const initHomeLaboratory = () => {
-      const myChart = echarts.init(document.getElementById("homeLaboratory"));
+			const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
 			const option = {
 				grid: {
 					top: 50,
@@ -152,42 +153,42 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "axis",
+					trigger: 'axis',
 				},
 				legend: {
-          data: ["预购队列", "最新成交价"],
+					data: ['预购队列', '最新成交价'],
 					right: 13,
 				},
 				xAxis: {
-          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
 				},
 				yAxis: [
 					{
-            type: "value",
+						type: 'value',
-            name: "价格",
+						name: '价格',
 					},
 				],
 				series: [
 					{
-            name: "预购队列",
+						name: '预购队列',
-            type: "bar",
+						type: 'bar',
 						data: [5, 20, 36, 10, 10, 20],
 					},
 					{
-            name: "最新成交价",
+						name: '最新成交价',
-            type: "line",
+						type: 'line',
 						data: [15, 20, 16, 20, 30, 8],
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};
 		// 履约超时预警
 		const initHomeOvertime = () => {
-      const myChart = echarts.init(document.getElementById("homeOvertime"));
+			const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
 			const option = {
 				grid: {
 					top: 50,
@@ -196,59 +197,46 @@ export default {
 					left: 30,
 				},
 				tooltip: {
-          trigger: "axis",
+					trigger: 'axis',
 				},
 				legend: {
-          data: ["订单数量", "超时数量", "在线数量", "预警数量"],
+					data: ['订单数量', '超时数量', '在线数量', '预警数量'],
 					right: 13,
 				},
 				xAxis: {
-          data: [
+					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-            "1月",
-            "2月",
-            "3月",
-            "4月",
-            "5月",
-            "6月",
-            "7月",
-            "8月",
-            "9月",
-            "10月",
-            "11月",
-            "12月",
-          ],
 				},
 				yAxis: [
 					{
-            type: "value",
+						type: 'value',
-            name: "数量",
+						name: '数量',
 					},
 				],
 				series: [
 					{
-            name: "订单数量",
+						name: '订单数量',
-            type: "bar",
+						type: 'bar',
 						data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
 					},
 					{
-            name: "超时数量",
+						name: '超时数量',
-            type: "bar",
+						type: 'bar',
 						data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
 					},
 					{
-            name: "在线数量",
+						name: '在线数量',
-            type: "line",
+						type: 'line',
 						data: [15, 20, 16, 20, 30, 8, 16, 19, 12, 18, 19, 14],
 					},
 					{
-            name: "预警数量",
+						name: '预警数量',
-            type: "line",
+						type: 'line',
 						data: [10, 10, 13, 12, 15, 18, 19, 10, 12, 15, 11, 17],
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};

src/views/home/mock.ts

@@ -7,7 +7,7 @@ export const topCardItemList = [
 		tipNum: '911',
 		color: '#F95959',
 		iconColor: '#F86C6B',
-        icon: 'iconfont icon-jinridaiban'
+		icon: 'iconfont icon-jinridaiban',
 	},
 	{
 		title: '实验室总数',
@@ -16,7 +16,7 @@ export const topCardItemList = [
 		tipNum: '611',
 		color: '#8595F4',
 		iconColor: '#92A1F4',
-        icon: 'iconfont icon-AIshiyanshi'
+		icon: 'iconfont icon-AIshiyanshi',
 	},
 	{
 		title: '申请人数（月）',
@@ -25,9 +25,9 @@ export const topCardItemList = [
 		tipNum: '911',
 		color: '#FEBB50',
 		iconColor: '#FDC566',
-        icon: 'iconfont icon-shenqingkaiban'
+		icon: 'iconfont icon-shenqingkaiban',
-    }
+	},
-]
+];
 
 // 环境监测
 export const environmentList = [
@@ -35,27 +35,27 @@ export const environmentList = [
 		icon: 'iconfont icon-yangan',
 		label: '烟感',
 		value: '2.1%OBS/M',
-        iconColor: '#F72B3F'
+		iconColor: '#F72B3F',
 	},
 	{
 		icon: 'iconfont icon-wendu',
 		label: '温度',
 		value: '30℃',
-        iconColor: '#91BFF8'
+		iconColor: '#91BFF8',
 	},
 	{
 		icon: 'iconfont icon-shidu',
 		label: '湿度',
 		value: '57%RH',
-        iconColor: '#88D565'
+		iconColor: '#88D565',
 	},
 	{
 		icon: 'iconfont icon-zaosheng',
 		label: '噪声',
 		value: '57DB',
-        iconColor: '#FBD4A0'
+		iconColor: '#FBD4A0',
-    }
+	},
-]
+];
 
 // 动态信息
 export const activitiesList = [
@@ -63,18 +63,18 @@ export const activitiesList = [
 		time1: '今天',
 		time2: '12:20:30',
 		title: '更名',
-        label: '正式更名为 vue-next-admin'
+		label: '正式更名为 vue-next-admin',
 	},
 	{
 		time1: '02-17',
 		time2: '12:20:30',
 		title: '页面',
-        label: '完成对首页的开发'
+		label: '完成对首页的开发',
 	},
 	{
 		time1: '02-14',
 		time2: '12:20:30',
 		title: '页面',
-        label: '新增个人中心'
+		label: '新增个人中心',
-    }
+	},
-]
+];

src/views/layout/component/aside.vue

@@ -16,79 +16,59 @@
 </template>
 
 <script lang="ts">
-import {
+import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-  toRefs,
+import { useStore } from '/@/store/index.ts';
-  reactive,
+import Logo from '/@/views/layout/logo/index.vue';
-  computed,
+import Vertical from '/@/views/layout/navMenu/vertical.vue';
-  watch,
-  getCurrentInstance,
-  ref,
-  onBeforeMount,
-  onUnmounted,
-  nextTick,
-} from "vue";
-import { useStore } from "/@/store/index.ts";
-import Logo from "/@/views/layout/logo/index.vue";
-import Vertical from "/@/views/layout/navMenu/vertical.vue";
-import { stat } from "fs";
 export default {
-  name: "layoutAside",
+	name: 'layoutAside',
 	components: { Logo, Vertical },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
-    const state = reactive({
+		const state: any = reactive({
 			menuList: [],
-      clientWidth: "",
+			clientWidth: '',
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 设置菜单展开/收起时的宽度
 		const setCollapseWidth = computed(() => {
-      let { layout, isCollapse, menuBar } = store.state.themeConfig;
+			let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
-      let asideBrColor =
+			let asideBrColor = menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
-        menuBar === "#FFFFFF" ||
+			if (layout === 'columns') {
-        menuBar === "#FFF" ||
-        menuBar === "#fff" ||
-        menuBar === "#ffffff"
-          ? "layout-el-aside-br-color"
-          : "";
-      if (layout === "columns") {
 				// 分栏布局，菜单收起时宽度给 1px
 				if (isCollapse) {
-          return ["layout-aside-width1", asideBrColor];
+					return ['layout-aside-width1', asideBrColor];
 				} else {
-          return ["layout-aside-width-default", asideBrColor];
+					return ['layout-aside-width-default', asideBrColor];
 				}
 			} else {
 				// 其它布局给 64px
 				if (isCollapse) {
-          return ["layout-aside-width64", asideBrColor];
+					return ['layout-aside-width64', asideBrColor];
 				} else {
-          return ["layout-aside-width-default", asideBrColor];
+					return ['layout-aside-width-default', asideBrColor];
 				}
 			}
 		});
 		// 设置显示/隐藏 logo
 		const setShowLogo = computed(() => {
-      let { layout, isShowLogo } = store.state.themeConfig;
+			let { layout, isShowLogo } = store.state.themeConfig.themeConfig;
-      return (
+			return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
-        (isShowLogo && layout === "defaults") ||
-        (isShowLogo && layout === "columns")
-      );
 		});
 		// 设置/过滤路由（非静态路由/是否显示在菜单中）
 		const setFilterRoutes = () => {
-      if (store.state.themeConfig.layout === "columns") return false;
+			if (store.state.themeConfig.themeConfig.layout === 'columns') return false;
-      state.menuList = filterRoutesFun(store.state.routes);
+			state.menuList = filterRoutesFun(store.state.routesList.routesList);
 		};
 		// 路由过滤递归函数
 		const filterRoutesFun = (arr: Array<object>) => {
 			return arr
-        .filter((item) => !item.meta.isHide)
+				.filter((item: any) => !item.meta.isHide)
-        .map((item) => {
+				.map((item: any) => {
 					item = Object.assign({}, item);
 					if (item.children) item.children = filterRoutesFun(item.children);
 					return item;
@@ -99,7 +79,7 @@ export default {
 			state.clientWidth = clientWidth;
 		};
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-    watch(store.state.themeConfig, (val) => {
+		watch(store.state.themeConfig.themeConfig, (val) => {
 			if (val.isShowLogoChange !== val.isShowLogo) {
 				if (!proxy.$refs.layoutAsideScrollbarRef) return false;
 				proxy.$refs.layoutAsideScrollbarRef.update();
@@ -107,38 +87,38 @@ export default {
 		});
 		// 监听路由的变化，动态赋值给菜单中
 		watch(store.state, (val) => {
-      if (val.routes.length === state.menuList.length) return false;
+			if (val.routesList.routesList.length === state.menuList.length) return false;
-      let { layout, isClassicSplitMenu } = val.themeConfig;
+			let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
-      if (layout === "classic" && isClassicSplitMenu) return false;
+			if (layout === 'classic' && isClassicSplitMenu) return false;
 			setFilterRoutes();
 		});
 		// 页面加载前
 		onBeforeMount(() => {
 			initMenuFixed(document.body.clientWidth);
 			setFilterRoutes();
-      proxy.mittBus.on("setSendColumnsChildren", (res) => {
+			proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
 				state.menuList = res.children;
 			});
-      proxy.mittBus.on("setSendClassicChildren", (res) => {
+			proxy.mittBus.on('setSendClassicChildren', (res: any) => {
-        let { layout, isClassicSplitMenu } = store.state.themeConfig;
+				let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-        if (layout === "classic" && isClassicSplitMenu) {
+				if (layout === 'classic' && isClassicSplitMenu) {
 					state.menuList = [];
 					state.menuList = res.children;
 				}
 			});
-      proxy.mittBus.on("getBreadcrumbIndexSetFilterRoutes", () => {
+			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
 				setFilterRoutes();
 			});
-      proxy.mittBus.on("layoutMobileResize", (res) => {
+			proxy.mittBus.on('layoutMobileResize', (res: any) => {
 				initMenuFixed(res.clientWidth);
 			});
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      proxy.mittBus.off("setSendColumnsChildren");
+			proxy.mittBus.off('setSendColumnsChildren');
-      proxy.mittBus.off("setSendClassicChildren");
+			proxy.mittBus.off('setSendClassicChildren');
-      proxy.mittBus.off("getBreadcrumbIndexSetFilterRoutes");
+			proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
-      proxy.mittBus.off("layoutMobileResize");
+			proxy.mittBus.off('layoutMobileResize');
 		});
 		return {
 			setCollapseWidth,

src/views/layout/component/columnsAside.vue

@@ -2,10 +2,19 @@
 	<div class="layout-columns-aside">
 		<el-scrollbar>
 			<ul>
-        <li v-for="(v,k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v,k)"
+				<li
-          :ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active':liIndex === k}"
+					v-for="(v, k) in columnsAsideList"
-          :title="v.meta.title">
+					:key="k"
-          <div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || v.meta.isLink && v.meta.isIframe">
+					@click="onColumnsAsideMenuClick(v, k)"
+					:ref="
+						(el) => {
+							if (el) columnsAsideOffsetTopRefs[k] = el;
+						}
+					"
+					:class="{ 'layout-columns-active': liIndex === k }"
+					:title="v.meta.title"
+				>
+					<div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
 						<i :class="v.meta.icon"></i>
 						<div class="layout-columns-aside-li-box-title font12">
 							{{ v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0, 4) : v.meta.title }}
@@ -27,28 +36,19 @@
 </template>
 
 <script lang="ts">
-import {
+import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch } from 'vue';
-  reactive,
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
-  toRefs,
+import { useStore } from '/@/store/index.ts';
-  ref,
-  computed,
-  onMounted,
-  nextTick,
-  getCurrentInstance,
-  watch,
-} from "vue";
-import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
-import { useStore } from "/@/store/index.ts";
 export default {
-  name: "layoutColumnsAside",
+	name: 'layoutColumnsAside',
 	setup() {
-    const columnsAsideOffsetTopRefs = ref([]);
+		const columnsAsideOffsetTopRefs: any = ref([]);
 		const columnsAsideActiveRef = ref();
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const router = useRouter();
-    const state = reactive({
+		const state: any = reactive({
 			columnsAsideList: [],
 			liIndex: 0,
 			difference: 0,
@@ -56,26 +56,17 @@ export default {
 		});
 		// 设置高亮样式
 		const setColumnsAsideStyle = computed(() => {
-      let { columnsAsideStyle } = store.state.themeConfig;
+			return store.state.themeConfig.themeConfig.columnsAsideStyle;
-      columnsAsideStyle === "columnsRound"
-        ? (state.difference = 3)
-        : (state.difference = 0);
-      if (columnsAsideStyle === "columnsRound")
-        return "layout-columns-round-active";
-      else if (columnsAsideStyle === "columnsCard")
-        return "layout-columns-card-active";
 		});
 		// 设置菜单高亮位置移动
 		const setColumnsAsideMove = (k: number) => {
 			state.liIndex = k;
-      columnsAsideActiveRef.value.style.top = `${
+			columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
-        columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference
-      }px`;
 		};
 		// 菜单高亮点击事件
 		const onColumnsAsideMenuClick = (v: Object, k: number) => {
 			setColumnsAsideMove(k);
-      let { path, redirect } = v;
+			let { path, redirect } = v as any;
 			if (redirect) router.push(redirect);
 			else router.push(path);
 		};
@@ -87,21 +78,21 @@ export default {
 		};
 		// 设置/过滤路由（非静态路由/是否显示在菜单中）
 		const setFilterRoutes = () => {
-      state.columnsAsideList = filterRoutesFun(store.state.routes);
+			state.columnsAsideList = filterRoutesFun(store.state.routesList.routesList);
-      const resData = setSendChildren(route.path);
+			const resData: any = setSendChildren(route.path);
 			onColumnsAsideDown(resData.item[0].k);
-      proxy.mittBus.emit("setSendColumnsChildren", resData);
+			proxy.mittBus.emit('setSendColumnsChildren', resData);
 		};
 		// 传送当前子级数据到菜单中
 		const setSendChildren = (path: string) => {
-      const currentPathSplit = path.split("/");
+			const currentPathSplit = path.split('/');
-      let currentData: object = {};
+			let currentData: any = {};
-      state.columnsAsideList.map((v, k) => {
+			state.columnsAsideList.map((v: any, k: number) => {
 				if (v.path === `/${currentPathSplit[1]}`) {
-          v["k"] = k;
+					v['k'] = k;
-          currentData["item"] = [{ ...v }];
+					currentData['item'] = [{ ...v }];
-          currentData["children"] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
-          if (v.children) currentData["children"] = v.children;
+					if (v.children) currentData['children'] = v.children;
 				}
 			});
 			return currentData;
@@ -109,21 +100,19 @@ export default {
 		// 路由过滤递归函数
 		const filterRoutesFun = (arr: Array<object>) => {
 			return arr
-        .filter((item) => !item.meta.isHide)
+				.filter((item: any) => !item.meta.isHide)
-        .map((item) => {
+				.map((item: any) => {
 					item = Object.assign({}, item);
 					if (item.children) item.children = filterRoutesFun(item.children);
 					return item;
 				});
 		};
 		// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
-    const setColumnsMenuHighlight = (path) => {
+		const setColumnsMenuHighlight = (path: string) => {
-      state.routeSplit = path.split("/");
+			state.routeSplit = path.split('/');
 			state.routeSplit.shift();
 			const routeFirst = `/${state.routeSplit[0]}`;
-      const currentSplitRoute = state.columnsAsideList.find(
+			const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
-        (v) => v.path === routeFirst
-      );
 			// 延迟拿值，防止取不到
 			setTimeout(() => {
 				onColumnsAsideDown(currentSplitRoute.k);
@@ -131,7 +120,8 @@ export default {
 		};
 		// 监听路由的变化，动态赋值给菜单中
 		watch(store.state, (val) => {
-      if (val.routes.length === state.columnsAsideList.length) return false;
+			val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
+			if (val.routesList.routesList.length === state.columnsAsideList.length) return false;
 			setFilterRoutes();
 		});
 		// 页面加载时
@@ -141,7 +131,7 @@ export default {
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
 			setColumnsMenuHighlight(to.path);
-      proxy.mittBus.emit("setSendColumnsChildren", setSendChildren(to.path));
+			proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
 		});
 		return {
 			columnsAsideOffsetTopRefs,
@@ -186,7 +176,7 @@ export default {
 			color: #ffffff;
 			transition: 0.3s ease-in-out;
 		}
-    .layout-columns-round-active {
+		.columns-round {
 			background: var(--color-primary);
 			color: #ffffff;
 			position: absolute;
@@ -199,8 +189,8 @@ export default {
 			transition: 0.3s ease-in-out;
 			border-radius: 5px;
 		}
-    .layout-columns-card-active {
+		.columns-card {
-      @extend .layout-columns-round-active;
+			@extend .columns-round;
 			top: 0;
 			height: 50px;
 			width: 100%;

src/views/layout/component/header.vue

@@ -5,19 +5,19 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import NavBarsIndex from "/@/views/layout/navBars/index.vue";
+import NavBarsIndex from '/@/views/layout/navBars/index.vue';
 export default {
-  name: "layoutHeader",
+	name: 'layoutHeader',
 	components: { NavBarsIndex },
 	setup() {
 		const store = useStore();
 		// 设置 header 的高度
 		const setHeaderHeight = computed(() => {
-      let { isTagsview, layout } = store.state.themeConfig;
+			let { isTagsview, layout } = store.state.themeConfig.themeConfig;
-      if (isTagsview && layout !== "classic") return "84px";
+			if (isTagsview && layout !== 'classic') return '84px';
-      else return "50px";
+			else return '50px';
 		});
 		return {
 			setHeaderHeight,

src/views/layout/component/main.vue

@@ -1,56 +1,63 @@
 <template>
 	<el-main class="layout-main">
-    <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
+		<el-scrollbar
+			class="layout-scrollbar"
+			ref="layoutScrollbarRef"
 			v-show="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
-      :style="{minHeight: `calc(100vh - ${headerHeight}`}">
+			:style="{ minHeight: `calc(100vh - ${headerHeight}` }"
+		>
 			<LayoutParentView />
 			<Footer v-if="getThemeConfig.isFooter" />
 		</el-scrollbar>
-    <Link :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
+		<Link :style="{ height: `calc(100vh - ${headerHeight}` }" :meta="currentRouteMeta" v-if="currentRouteMeta.isLink && !currentRouteMeta.isIframe" />
-      v-if="currentRouteMeta.isLink && !currentRouteMeta.isIframe" />
+		<Iframes
-    <Iframes :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
+			:style="{ height: `calc(100vh - ${headerHeight}` }"
-      v-if="currentRouteMeta.isLink && currentRouteMeta.isIframe" />
+			:meta="currentRouteMeta"
+			v-if="currentRouteMeta.isLink && currentRouteMeta.isIframe && isShowLink"
+			@getCurrentRouteMeta="onGetCurrentRouteMeta"
+		/>
 	</el-main>
 </template>
 
 <script lang="ts">
-import {
+import { computed, defineComponent, toRefs, reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
-  computed,
+import { useRoute } from 'vue-router';
-  defineComponent,
+import { useStore } from '/@/store/index.ts';
-  toRefs,
+import LayoutParentView from '/@/views/layout/routerView/parent.vue';
-  reactive,
+import Footer from '/@/views/layout/footer/index.vue';
-  getCurrentInstance,
+import Link from '/@/views/layout/routerView/link.vue';
-  watch,
+import Iframes from '/@/views/layout/routerView/iframes.vue';
-  onBeforeMount,
-} from "vue";
-import { useRoute } from "vue-router";
-import { useStore } from "/@/store/index.ts";
-import LayoutParentView from "/@/views/layout/routerView/parent.vue";
-import Footer from "/@/views/layout/footer/index.vue";
-import Link from "/@/views/layout/routerView/link.vue";
-import Iframes from "/@/views/layout/routerView/iframes.vue";
 export default defineComponent({
-  name: "layoutMain",
+	name: 'layoutMain',
 	components: { LayoutParentView, Footer, Link, Iframes },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const state = reactive({
-      headerHeight: "",
+			headerHeight: '',
 			currentRouteMeta: {},
+			isShowLink: false,
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
+		// 子组件触发更新
+		const onGetCurrentRouteMeta = () => {
+			initCurrentRouteMeta(route.meta);
+		};
 		// 初始化当前路由 meta 信息
 		const initCurrentRouteMeta = (meta: object) => {
+			state.isShowLink = false;
 			state.currentRouteMeta = meta;
+			setTimeout(() => {
+				state.isShowLink = true;
+			}, 100);
 		};
 		// 设置 main 的高度
 		const initHeaderHeight = () => {
-      let { isTagsview } = store.state.themeConfig;
+			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return (state.headerHeight = `84px`);
 			else return (state.headerHeight = `50px`);
 		};
@@ -60,8 +67,8 @@ export default defineComponent({
 			initHeaderHeight();
 		});
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-    watch(store.state.themeConfig, (val) => {
+		watch(store.state.themeConfig.themeConfig, (val) => {
-      state.headerHeight = val.isTagsview ? "84px" : "50px";
+			state.headerHeight = val.isTagsview ? '84px' : '50px';
 			if (val.isFixedHeaderChange !== val.isFixedHeader) {
 				if (!proxy.$refs.layoutScrollbarRef) return false;
 				proxy.$refs.layoutScrollbarRef.update();
@@ -78,6 +85,7 @@ export default defineComponent({
 		return {
 			getThemeConfig,
 			initCurrentRouteMeta,
+			onGetCurrentRouteMeta,
 			...toRefs(state),
 		};
 	},

src/views/layout/footer/index.vue

@@ -2,22 +2,22 @@
 	<div class="layout-footer mt15" v-show="isDelayFooter">
 		<div class="layout-footer-warp">
 			<div>vue-next-admin，Made by lyt with ❤️</div>
-      <div class="mt5">Copyright &copy 深圳市 xxx 软件科技有限公司</div>
+			<div class="mt5">Copyright 深圳市 xxx 软件科技有限公司</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive } from 'vue';
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteUpdate } from 'vue-router';
 export default {
-  name: "layoutFooter",
+	name: 'layoutFooter',
 	setup() {
 		const state = reactive({
 			isDelayFooter: true,
 		});
 		// 路由改变时，等主界面动画加载完毕再显示 footer
-    onBeforeRouteUpdate((to, from) => {
+		onBeforeRouteUpdate(() => {
 			state.isDelayFooter = false;
 			setTimeout(() => {
 				state.isDelayFooter = true;

src/views/layout/index.vue

@@ -6,50 +6,36 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, onBeforeMount, onUnmounted, getCurrentInstance, defineAsyncComponent } from 'vue';
-  computed,
+import { useStore } from '/@/store/index.ts';
-  onBeforeMount,
+import { getLocal } from '/@/utils/storage.ts';
-  onUnmounted,
-  getCurrentInstance,
-  defineAsyncComponent,
-} from "vue";
-import { useStore } from "/@/store/index.ts";
-import { getLocal } from "/@/utils/storage.ts";
 export default {
-  name: "layout",
+	name: 'layout',
 	components: {
-    Defaults: defineAsyncComponent(
+		Defaults: defineAsyncComponent(() => import('/@/views/layout/main/defaults.vue')),
-      () => import("/@/views/layout/main/defaults.vue")
+		Classic: defineAsyncComponent(() => import('/@/views/layout/main/classic.vue')),
-    ),
+		Transverse: defineAsyncComponent(() => import('/@/views/layout/main/transverse.vue')),
-    Classic: defineAsyncComponent(
+		Columns: defineAsyncComponent(() => import('/@/views/layout/main/columns.vue')),
-      () => import("/@/views/layout/main/classic.vue")
-    ),
-    Transverse: defineAsyncComponent(
-      () => import("/@/views/layout/main/transverse.vue")
-    ),
-    Columns: defineAsyncComponent(
-      () => import("/@/views/layout/main/columns.vue")
-    ),
 	},
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 窗口大小改变时(适配移动端)
 		const onLayoutResize = () => {
 			const clientWidth = document.body.clientWidth;
 			if (clientWidth < 1000) {
 				getThemeConfig.value.isCollapse = false;
-        proxy.mittBus.emit("layoutMobileResize", {
+				proxy.mittBus.emit('layoutMobileResize', {
-          layout: "defaults",
+					layout: 'defaults',
 					clientWidth,
 				});
 			} else {
-        proxy.mittBus.emit("layoutMobileResize", {
+				proxy.mittBus.emit('layoutMobileResize', {
-          layout: getLocal("oldLayout") ? getLocal("oldLayout") : "defaults",
+					layout: getLocal('oldLayout') ? getLocal('oldLayout') : 'defaults',
 					clientWidth,
 				});
 			}
@@ -57,11 +43,11 @@ export default {
 		// 页面加载前
 		onBeforeMount(() => {
 			onLayoutResize();
-      window.addEventListener("resize", onLayoutResize);
+			window.addEventListener('resize', onLayoutResize);
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      window.removeEventListener("resize", onLayoutResize);
+			window.removeEventListener('resize', onLayoutResize);
 		});
 		return {
 			getThemeConfig,

src/views/layout/lockScreen/index.vue

@@ -3,11 +3,20 @@
 		<div class="layout-lock-screen-mask"></div>
 		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': isShowLoockLogin }"></div>
 		<div class="layout-lock-screen">
-      <div class="layout-lock-screen-date" @mousedown="onDown" @mousemove="onMove" @mouseup="onEnd"
+			<div
-        @touchstart.stop="onDown" @touchmove.stop="onMove" @touchend.stop="onEnd">
+				class="layout-lock-screen-date"
+				ref="layoutLockScreenDateRef"
+				@mousedown="onDown"
+				@mousemove="onMove"
+				@mouseup="onEnd"
+				@touchstart.stop="onDown"
+				@touchmove.stop="onMove"
+				@touchend.stop="onEnd"
+			>
 				<div class="layout-lock-screen-date-box">
-          <div class="layout-lock-screen-date-box-time">{{time.hm}}<span
+					<div class="layout-lock-screen-date-box-time">
-              class="layout-lock-screen-date-box-minutes">{{time.s}}</span></div>
+						{{ time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ time.s }}</span>
+					</div>
 					<div class="layout-lock-screen-date-box-info">{{ time.mdq }}</div>
 				</div>
 			</div>
@@ -15,13 +24,16 @@
 				<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
 					<div class="layout-lock-screen-login-box">
 						<div class="layout-lock-screen-login-box-img">
-              <img
+							<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
-                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
 						</div>
 						<div class="layout-lock-screen-login-box-name">Administrator</div>
 						<div class="layout-lock-screen-login-box-value">
-              <el-input placeholder="请输入密码" ref="layoutLockScreenInputRef" v-model="lockScreenPassword"
+							<el-input
-                @keyup.enter.native.stop="onLockScreenSubmit()">
+								placeholder="请输入密码"
+								ref="layoutLockScreenInputRef"
+								v-model="lockScreenPassword"
+								@keyup.enter.native.stop="onLockScreenSubmit()"
+							>
 								<template #append>
 									<el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
 								</template>
@@ -40,39 +52,40 @@
 </template>
 
 <script lang="ts">
-import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
+import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import { formatDate } from "/@/utils/formatTime.ts";
+import { formatDate } from '/@/utils/formatTime.ts';
-import { setLocal } from "/@/utils/storage.ts";
+import { setLocal } from '/@/utils/storage.ts';
 export default {
-  name: "layoutLockScreen",
+	name: 'layoutLockScreen',
 	setup() {
+		const { proxy } = getCurrentInstance() as any;
 		const layoutLockScreenInputRef = ref();
 		const store = useStore();
-    const state = reactive({
+		const state: any = reactive({
 			transparency: 1,
 			downClientY: 0,
 			moveDifference: 0,
 			isShowLoockLogin: false,
 			isFlags: false,
-      querySelectorEl: null,
+			querySelectorEl: '',
 			time: {
-        hm: "",
+				hm: '',
-        s: "",
+				s: '',
-        mdq: "",
+				mdq: '',
 			},
-      setIntervalTime: null,
+			setIntervalTime: 0,
 			isShowLockScreen: false,
-      isShowLockScreenIntervalTime: null,
+			isShowLockScreenIntervalTime: 0,
-      lockScreenPassword: "",
+			lockScreenPassword: '',
 		});
 		// 鼠标按下
-    const onDown = (down) => {
+		const onDown = (down: any) => {
 			state.isFlags = true;
 			state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
 		};
 		// 鼠标移动
-    const onMove = (move) => {
+		const onMove = (move: any) => {
 			if (state.isFlags) {
 				const el = state.querySelectorEl;
 				const opacitys = (state.transparency -= 1 / 200);
@@ -82,15 +95,9 @@ export default {
 					state.moveDifference = move.clientY - state.downClientY;
 				}
 				if (state.moveDifference >= 0) return false;
-        el.setAttribute(
+				el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
-          "style",
-          `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`
-        );
 				if (state.moveDifference < -400) {
-          el.setAttribute(
+					el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
-            "style",
-            `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`
-          );
 					state.moveDifference = -el.clientHeight;
 					setTimeout(() => {
 						el.remove();
@@ -107,43 +114,38 @@ export default {
 			state.isFlags = false;
 			state.transparency = 1;
 			if (state.moveDifference >= -400) {
-        state.querySelectorEl.setAttribute(
+				state.querySelectorEl.setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
-          "style",
-          `top:0px;opacity:1;transition:all 0.3s ease;`
-        );
 			}
 		};
 		// 获取要拖拽的初始元素
 		const initGetElement = () => {
 			nextTick(() => {
-        state.querySelectorEl = document.querySelector(
+				state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
-          ".layout-lock-screen-date"
-        );
 			});
 		};
 		// 时间初始化
 		const initTime = () => {
-      state.time.hm = formatDate(new Date(), "HH:MM");
+			state.time.hm = formatDate(new Date(), 'HH:MM');
-      state.time.s = formatDate(new Date(), "SS");
+			state.time.s = formatDate(new Date(), 'SS');
-      state.time.mdq = formatDate(new Date(), "mm月dd日，WWW");
+			state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
 		};
 		// 时间初始化定时器
 		const initSetTime = () => {
 			initTime();
-      state.setIntervalTime = setInterval(() => {
+			state.setIntervalTime = window.setInterval(() => {
 				initTime();
 			}, 1000);
 		};
 		// 锁屏时间定时器
 		const initLockScreen = () => {
-      if (store.state.themeConfig.isLockScreen) {
+			if (store.state.themeConfig.themeConfig.isLockScreen) {
-        state.isShowLockScreenIntervalTime = setInterval(() => {
+				state.isShowLockScreenIntervalTime = window.setInterval(() => {
-          if (store.state.themeConfig.lockScreenTime <= 0) {
+					if (store.state.themeConfig.themeConfig.lockScreenTime <= 0) {
 						state.isShowLockScreen = true;
 						setLocalThemeConfig();
 						return false;
 					}
-          store.state.themeConfig.lockScreenTime--;
+					store.state.themeConfig.themeConfig.lockScreenTime--;
 				}, 1000);
 			} else {
 				clearInterval(state.isShowLockScreenIntervalTime);
@@ -151,13 +153,13 @@ export default {
 		};
 		// 存储布局配置
 		const setLocalThemeConfig = () => {
-      store.state.themeConfig.isDrawer = false;
+			store.state.themeConfig.themeConfig.isDrawer = false;
-      setLocal("themeConfig", store.state.themeConfig);
+			setLocal('themeConfig', store.state.themeConfig.themeConfig);
 		};
 		// 密码输入点击事件
 		const onLockScreenSubmit = () => {
-      store.state.themeConfig.isLockScreen = false;
+			store.state.themeConfig.themeConfig.isLockScreen = false;
-      store.state.themeConfig.lockScreenTime = 30;
+			store.state.themeConfig.themeConfig.lockScreenTime = 30;
 			setLocalThemeConfig();
 		};
 		// 页面加载时
@@ -168,8 +170,8 @@ export default {
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      clearInterval(state.setIntervalTime);
+			window.clearInterval(state.setIntervalTime);
-      clearInterval(state.isShowLockScreenIntervalTime);
+			window.clearInterval(state.isShowLockScreenIntervalTime);
 		});
 		return {
 			layoutLockScreenInputRef,
@@ -201,7 +203,7 @@ export default {
 }
 .layout-lock-screen-img {
 	@extend .layout-lock-screen-fixed;
-  background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG");
+	background-image: url('https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG');
 	background-size: 100% 100%;
 	z-index: 9999991;
 }

src/views/layout/logo/index.vue

@@ -1,44 +1,40 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-    <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/logo/logo-mini.svg"
+		<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/logo/logo-mini.svg" class="layout-logo-medium-img" />
-      class="layout-logo-medium-img" />
+		<span>{{ getThemeConfig.globalTitle }}</span>
-    <span>{{config.globalTitle}}</span>
 	</div>
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-    <img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/logo/logo-mini.svg"
+		<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/logo/logo-mini.svg" class="layout-logo-size-img" />
-      class="layout-logo-size-img" />
 	</div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, computed, getCurrentInstance } from "vue";
+import { computed, getCurrentInstance } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import config from "/@/utils/themeConfig.ts";
 export default {
-  name: "layoutLogo",
+	name: 'layoutLogo',
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
-    const state = reactive({
+		// 获取布局配置信息
-      config,
+		const getThemeConfig = computed(() => {
+			return store.state.themeConfig.themeConfig;
 		});
 		// 设置 logo 的显示。classic 经典布局默认显示 logo
 		const setShowLogo = computed(() => {
-      let { isCollapse, layout } = store.state.themeConfig;
+			let { isCollapse, layout } = store.state.themeConfig.themeConfig;
-      return (
+			return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
-        !isCollapse || layout === "classic" || document.body.clientWidth < 1000
-      );
 		});
 		// logo 点击实现菜单展开/收起
 		const onThemeConfigChange = () => {
-      if (store.state.themeConfig.layout === "transverse") return false;
+			if (store.state.themeConfig.themeConfig.layout === 'transverse') return false;
-      proxy.mittBus.emit("onMenuClick");
+			proxy.mittBus.emit('onMenuClick');
-      store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
+			store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
 		};
 		return {
 			setShowLogo,
+			getThemeConfig,
 			onThemeConfigChange,
-      ...toRefs(state),
 		};
 	},
 };

src/views/layout/main/classic.vue

@@ -16,9 +16,9 @@
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
-import TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
+import TagsView from '/@/views/layout/navBars/tagsView/tagsView.vue';
 export default {
 	name: 'layoutClassic',
-  components: { Aside, Header, Main, TagsView }
+	components: { Aside, Header, Main, TagsView },
-}
+};
 </script>

src/views/layout/main/columns.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
@@ -28,11 +28,11 @@ export default {
 	setup() {
 		const store = useStore();
 		const isFixedHeader = computed(() => {
-      return store.state.themeConfig.isFixedHeader;
+			return store.state.themeConfig.themeConfig.isFixedHeader;
 		});
 		return {
-      isFixedHeader
+			isFixedHeader,
-    }
+		};
-  }
+	},
-}
+};
 </script>

src/views/layout/main/defaults.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script>
-import { computed, getCurrentInstance, watch } from 'vue'
+import { computed, getCurrentInstance, watch } from 'vue';
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
@@ -27,7 +27,7 @@ export default {
 		const store = useStore();
 		const route = useRoute();
 		const isFixedHeader = computed(() => {
-      return store.state.themeConfig.isFixedHeader;
+			return store.state.themeConfig.themeConfig.isFixedHeader;
 		});
 		// 监听路由的变化
 		watch(
@@ -37,8 +37,8 @@ export default {
 			}
 		);
 		return {
-      isFixedHeader
+			isFixedHeader,
-    }
+		};
-  }
+	},
-}
+};
 </script>

src/views/layout/main/transverse.vue

@@ -11,6 +11,6 @@ import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
 export default {
 	name: 'layoutTransverse',
-  components: { Header, Main }
+	components: { Header, Main },
-}
+};
 </script>

src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -1,17 +1,18 @@
 <template>
 	<div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
-    <i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+		<i
-      @click="onThemeConfigChange"></i>
+			class="layout-navbars-breadcrumb-icon"
+			:class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+			@click="onThemeConfigChange"
+		></i>
 		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
 			<transition-group name="breadcrumb" mode="out-in">
 				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta.title">
 					<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-            <i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ v.meta.title }}
-              v-if="getThemeConfig.isBreadcrumbIcon"></i>{{v.meta.title}}
 					</span>
 					<a v-else @click.prevent="onBreadcrumbClick(v)">
-            <i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ v.meta.title }}
-              v-if="getThemeConfig.isBreadcrumbIcon"></i>{{v.meta.title}}
 					</a>
 				</el-breadcrumb-item>
 			</transition-group>
@@ -20,41 +21,41 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, getCurrentInstance, onMounted } from "vue";
+import { toRefs, reactive, computed, getCurrentInstance, onMounted } from 'vue';
-import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 export default {
-  name: "layoutBreadcrumb",
+	name: 'layoutBreadcrumb',
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const router = useRouter();
-    const state = reactive({
+		const state: any = reactive({
 			breadcrumbList: [],
 			routeSplit: [],
-      routeSplitFirst: "",
+			routeSplitFirst: '',
 			routeSplitIndex: 1,
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 面包屑点击时
-    const onBreadcrumbClick = (v: object) => {
+		const onBreadcrumbClick = (v: any) => {
 			const { redirect, path } = v;
 			if (redirect) router.push(redirect);
 			else router.push(path);
 		};
 		// 展开/收起左侧菜单点击
 		const onThemeConfigChange = () => {
-      proxy.mittBus.emit("onMenuClick");
+			proxy.mittBus.emit('onMenuClick');
-      store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
+			store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
 		};
 		// 处理面包屑数据
 		const getBreadcrumbList = (arr: Array<object>) => {
-      arr.map((item) => {
+			arr.map((item: any) => {
-        state.routeSplit.map((v, k, arrs) => {
+				state.routeSplit.map((v: any, k: number, arrs: any) => {
 					if (state.routeSplitFirst === item.path) {
 						state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
 						state.breadcrumbList.push(item);
@@ -66,13 +67,13 @@ export default {
 		};
 		// 当前路由字符串切割成数组，并删除第一项空内容
 		const initRouteSplit = (path: string) => {
-      if (!store.state.themeConfig.isBreadcrumb) return false;
+			if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
-      state.breadcrumbList = [store.state.routes[0]];
+			state.breadcrumbList = [store.state.routesList.routesList[0]];
-      state.routeSplit = path.split("/");
+			state.routeSplit = path.split('/');
 			state.routeSplit.shift();
 			state.routeSplitFirst = `/${state.routeSplit[0]}`;
 			state.routeSplitIndex = 1;
-      getBreadcrumbList(store.state.routes);
+			getBreadcrumbList(store.state.routesList.routesList);
 		};
 		// 页面加载时
 		onMounted(() => {

src/views/layout/navBars/breadcrumb/index.vue

@@ -8,66 +8,51 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, watch } from 'vue';
-  computed,
+import { useRoute } from 'vue-router';
-  reactive,
+import { useStore } from '/@/store/index.ts';
-  toRefs,
+import Breadcrumb from '/@/views/layout/navBars/breadcrumb/breadcrumb.vue';
-  onMounted,
+import User from '/@/views/layout/navBars/breadcrumb/user.vue';
-  onUnmounted,
+import Logo from '/@/views/layout/logo/index.vue';
-  getCurrentInstance,
+import Horizontal from '/@/views/layout/navMenu/horizontal.vue';
-  watch,
-} from "vue";
-import { useRoute } from "vue-router";
-import { useStore } from "/@/store/index.ts";
-import Breadcrumb from "/@/views/layout/navBars/breadcrumb/breadcrumb.vue";
-import User from "/@/views/layout/navBars/breadcrumb/user.vue";
-import Logo from "/@/views/layout/logo/index.vue";
-import Horizontal from "/@/views/layout/navMenu/horizontal.vue";
 export default {
-  name: "layoutBreadcrumbIndex",
+	name: 'layoutBreadcrumbIndex',
 	components: { Breadcrumb, User, Logo, Horizontal },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
-    const state = reactive({
+		const state: any = reactive({
 			menuList: [],
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 设置 logo 显示/隐藏
 		const setIsShowLogo = computed(() => {
-      let { isShowLogo, layout } = store.state.themeConfig;
+			let { isShowLogo, layout } = store.state.themeConfig.themeConfig;
-      return (
+			return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
-        (isShowLogo && layout === "classic") ||
-        (isShowLogo && layout === "transverse")
-      );
 		});
 		// 设置是否显示横向导航菜单
 		const isLayoutTransverse = computed(() => {
-      let { layout, isClassicSplitMenu } = store.state.themeConfig;
+			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-      return (
+			return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
-        layout === "transverse" || (isClassicSplitMenu && layout === "classic")
-      );
 		});
 		// 设置/过滤路由（非静态路由/是否显示在菜单中）
 		const setFilterRoutes = () => {
-      let { layout, isClassicSplitMenu } = store.state.themeConfig;
+			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-      if (layout === "classic" && isClassicSplitMenu) {
+			if (layout === 'classic' && isClassicSplitMenu) {
-        state.menuList = delClassicChildren(
+				state.menuList = delClassicChildren(filterRoutesFun(store.state.routesList.routesList));
-          filterRoutesFun(store.state.routes)
-        );
 				const resData = setSendClassicChildren(route.path);
-        proxy.mittBus.emit("setSendClassicChildren", resData);
+				proxy.mittBus.emit('setSendClassicChildren', resData);
 			} else {
-        state.menuList = filterRoutesFun(store.state.routes);
+				state.menuList = filterRoutesFun(store.state.routesList.routesList);
 			}
 		};
 		// 设置了分割菜单时，删除底下 children
 		const delClassicChildren = (arr: Array<object>) => {
-      arr.map((v) => {
+			arr.map((v: any) => {
 				if (v.children) delete v.children;
 			});
 			return arr;
@@ -75,8 +60,8 @@ export default {
 		// 路由过滤递归函数
 		const filterRoutesFun = (arr: Array<object>) => {
 			return arr
-        .filter((item) => !item.meta.isHide)
+				.filter((item: any) => !item.meta.isHide)
-        .map((item) => {
+				.map((item: any) => {
 					item = Object.assign({}, item);
 					if (item.children) item.children = filterRoutesFun(item.children);
 					return item;
@@ -84,33 +69,33 @@ export default {
 		};
 		// 传送当前子级数据到菜单中
 		const setSendClassicChildren = (path: string) => {
-      const currentPathSplit = path.split("/");
+			const currentPathSplit = path.split('/');
-      let currentData: object = {};
+			let currentData: any = {};
-      filterRoutesFun(store.state.routes).map((v, k) => {
+			filterRoutesFun(store.state.routesList.routesList).map((v, k) => {
 				if (v.path === `/${currentPathSplit[1]}`) {
-          v["k"] = k;
+					v['k'] = k;
-          currentData["item"] = [{ ...v }];
+					currentData['item'] = [{ ...v }];
-          currentData["children"] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
-          if (v.children) currentData["children"] = v.children;
+					if (v.children) currentData['children'] = v.children;
 				}
 			});
 			return currentData;
 		};
 		// 监听路由的变化，动态赋值给菜单中
 		watch(store.state, (val) => {
-      if (val.routes.length === state.menuList.length) return false;
+			if (val.routesList.routesList.length === state.menuList.length) return false;
 			setFilterRoutes();
 		});
 		// 页面加载时
 		onMounted(() => {
 			setFilterRoutes();
-      proxy.mittBus.on("getBreadcrumbIndexSetFilterRoutes", () => {
+			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
 				setFilterRoutes();
 			});
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      proxy.mittBus.off("getBreadcrumbIndexSetFilterRoutes");
+			proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
 		});
 		return {
 			getThemeConfig,

src/views/layout/navBars/breadcrumb/search.vue

@@ -1,8 +1,15 @@
 <template>
 	<div class="layout-search-dialog">
 		<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
-      <el-autocomplete v-model="menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索：支持中文、路由路径"
+			<el-autocomplete
-        prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur">
+				v-model="menuQuery"
+				:fetch-suggestions="menuSearch"
+				placeholder="菜单搜索：支持中文、路由路径"
+				prefix-icon="el-icon-search"
+				ref="layoutMenuAutocompleteRef"
+				@select="onHandleSelect"
+				@blur="onSearchBlur"
+			>
 				<template #default="{ item }">
 					<div><i :class="item.meta.icon" class="mr10"></i>{{ item.meta.title }}</div>
 				</template>
@@ -12,23 +19,23 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref, nextTick } from "vue";
+import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
 export default defineComponent({
-  name: "layoutBreadcrumbSearch",
+	name: 'layoutBreadcrumbSearch',
 	setup() {
 		const layoutMenuAutocompleteRef = ref();
 		const store = useStore();
 		const router = useRouter();
-    const state = reactive({
+		const state: any = reactive({
 			isShowSearch: false,
-      menuQuery: "",
+			menuQuery: '',
 			tagsViewList: [],
 		});
 		// 搜索弹窗打开
 		const openSearch = () => {
-      state.menuQuery = "";
+			state.menuQuery = '';
 			state.isShowSearch = true;
 			initTageView();
 			nextTick(() => {
@@ -40,36 +47,30 @@ export default defineComponent({
 			state.isShowSearch = false;
 		};
 		// 菜单搜索数据过滤
-    const menuSearch = (queryString, cb) => {
+		const menuSearch = (queryString: any, cb: any) => {
-      let results = queryString
+			let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
-        ? state.tagsViewList.filter(createFilter(queryString))
-        : state.tagsViewList;
 			cb(results);
 		};
 		// 菜单搜索过滤
-    const createFilter = (queryString) => {
+		const createFilter = (queryString: any) => {
-      return (restaurant) => {
+			return (restaurant: any) => {
 				return (
-          restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) >
+					restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
-            -1 ||
+					restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
-          restaurant.meta.title
-            .toLowerCase()
-            .indexOf(queryString.toLowerCase()) > -1
 				);
 			};
 		};
 		// 初始化菜单数据
 		const initTageView = () => {
 			if (state.tagsViewList.length > 0) return false;
-      store.state.tagsViewRoutes.map((v) => {
+			store.state.tagsViewRoutes.tagsViewRoutes.map((v: any) => {
 				if (!v.meta.isHide) state.tagsViewList.push({ ...v });
 			});
 		};
 		// 当前菜单选中时
-    const onHandleSelect = (item) => {
+		const onHandleSelect = (item: any) => {
 			let { path, redirect } = item;
-      if (item.meta.isLink && !item.meta.isIframe)
+			if (item.meta.isLink && !item.meta.isIframe) window.open(item.meta.isLink);
-        window.open(item.meta.isLink);
 			else if (redirect) router.push(redirect);
 			else router.push(path);
 			closeSearch();

src/views/layout/navBars/breadcrumb/setings.vue

@@ -1,43 +1,37 @@
 <template>
 	<div class="layout-breadcrumb-seting">
-    <el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
+		<el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
-      @close="onDrawerClose">
 			<el-scrollbar class="layout-breadcrumb-seting-bar">
 				<!-- 全局主题 -->
 				<el-divider content-position="left">全局主题</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.primary" size="small" @change="onColorPickerChange('primary')">
+						<el-color-picker v-model="getThemeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.success" size="small" @change="onColorPickerChange('success')">
+						<el-color-picker v-model="getThemeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.info" size="small" @change="onColorPickerChange('info')">
+						<el-color-picker v-model="getThemeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.warning" size="small" @change="onColorPickerChange('warning')">
+						<el-color-picker v-model="getThemeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.danger" size="small" @change="onColorPickerChange('danger')">
+						<el-color-picker v-model="getThemeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 
@@ -46,46 +40,38 @@
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')">
+						<el-color-picker v-model="getThemeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')">
+						<el-color-picker v-model="getThemeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.columnsMenuBar" size="small"
+						<el-color-picker v-model="getThemeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')">
-              @change="onBgColorPickerChange('columnsMenuBar')">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.topBarColor" size="small"
+						<el-color-picker v-model="getThemeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
-              @change="onBgColorPickerChange('topBarColor')">
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.menuBarColor" size="small"
+						<el-color-picker v-model="getThemeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
-              @change="onBgColorPickerChange('menuBarColor')">
-            </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="small"
+						<el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
-              @change="onBgColorPickerChange('columnsMenuBarColor')">
 						</el-color-picker>
 					</div>
 				</div>
@@ -128,12 +114,10 @@
 						<el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
 					</div>
 				</div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15"
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
-          :style="{opacity:getThemeConfig.layout !== 'classic' ? 0.5 : 1}">
 					<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'"
+						<el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
-              @change="onClassicSplitMenuChange">
 						</el-switch>
 					</div>
 				</div>
@@ -146,8 +130,15 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt11">
 					<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
+						<el-input-number
-              @change="setLocalThemeConfig" size="mini" style="width:90px;">
+							v-model="getThemeConfig.lockScreenTime"
+							controls-position="right"
+							:min="0"
+							:max="9999"
+							@change="setLocalThemeConfig"
+							size="mini"
+							style="width: 90px"
+						>
 						</el-input-number>
 					</div>
 				</div>
@@ -160,12 +151,14 @@
 						<el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
 					</div>
 				</div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15"
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
-          :style="{opacity:getThemeConfig.layout === 'transverse' ? 0.5 : 1}">
 					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Breadcrumb</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isBreadcrumb" :disabled="getThemeConfig.layout === 'transverse'"
+						<el-switch
-              @change="onIsBreadcrumbChange"></el-switch>
+							v-model="getThemeConfig.isBreadcrumb"
+							:disabled="getThemeConfig.layout === 'transverse'"
+							@change="onIsBreadcrumbChange"
+						></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -225,8 +218,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
 					<div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input v-model="getThemeConfig.wartermarkText" size="mini" style="width:90px;"
+						<el-input v-model="getThemeConfig.wartermarkText" size="mini" style="width: 90px" @input="onWartermarkTextInput($event)"></el-input>
-              @input="onWartermarkTextInput($event)"></el-input>
 					</div>
 				</div>
 
@@ -235,22 +227,20 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
 					<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;"
+						<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
-              @change="setLocalThemeConfig">
+							<el-option label="风格1" value="tags-style-one"></el-option>
-              <el-option label="风格1" value="tagsStyleOne"></el-option>
+							<el-option label="风格2" value="tags-style-two"></el-option>
-              <el-option label="风格2" value="tagsStyleTwo"></el-option>
+							<el-option label="风格3" value="tags-style-three"></el-option>
-              <el-option label="风格3" value="tagsStyleThree"></el-option>
+							<el-option label="风格4" value="tags-style-four"></el-option>
-              <el-option label="风格4" value="tagsStyleFour"></el-option>
 						</el-select>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
 					<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;"
+						<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
-              @change="setLocalThemeConfig">
+							<el-option label="slide-right" value="slide-right"></el-option>
-              <el-option label="slideRight" value="slideRight"></el-option>
+							<el-option label="slide-left" value="slide-left"></el-option>
-              <el-option label="slideLeft" value="slideLeft"></el-option>
 							<el-option label="opacitys" value="opacitys"></el-option>
 						</el-select>
 					</div>
@@ -258,10 +248,9 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
 					<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;"
+						<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
-              @change="setLocalThemeConfig">
+							<el-option label="圆角" value="columns-round"></el-option>
-              <el-option label="圆角" value="columnsRound"></el-option>
+							<el-option label="卡片" value="columns-card"></el-option>
-              <el-option label="卡片" value="columnsCard"></el-option>
 						</el-select>
 					</div>
 				</div>
@@ -271,8 +260,7 @@
 				<div class="layout-drawer-content-flex">
 					<!-- defaults 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
-            <section class="el-container el-circular"
+						<section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }">
-              :class="{'drawer-layout-active': getThemeConfig.layout === 'defaults'}">
 							<aside class="el-aside" style="width: 20px"></aside>
 							<section class="el-container is-vertical">
 								<header class="el-header" style="height: 10px"></header>
@@ -287,8 +275,7 @@
 					</div>
 					<!-- classic 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
-            <section class="el-container is-vertical el-circular"
+						<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }">
-              :class="{'drawer-layout-active': getThemeConfig.layout === 'classic'}">
 							<header class="el-header" style="height: 10px"></header>
 							<section class="el-container">
 								<aside class="el-aside" style="width: 20px"></aside>
@@ -305,8 +292,7 @@
 					</div>
 					<!-- transverse 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
-            <section class="el-container is-vertical el-circular"
+						<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }">
-              :class="{'drawer-layout-active': getThemeConfig.layout === 'transverse'}">
 							<header class="el-header" style="height: 10px"></header>
 							<section class="el-container">
 								<section class="el-container is-vertical">
@@ -322,8 +308,7 @@
 					</div>
 					<!-- columns 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
-            <section class="el-container el-circular"
+						<section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }">
-              :class="{'drawer-layout-active': getThemeConfig.layout === 'columns'}">
 							<aside class="el-aside-dark" style="width: 10px"></aside>
 							<aside class="el-aside" style="width: 20px"></aside>
 							<section class="el-container is-vertical">
@@ -339,10 +324,15 @@
 					</div>
 				</div>
 				<div class="copy-config">
-          <el-alert title="点击下方按钮，复制布局配置去 `src/utils/themeConfig.ts` 中修改。" type="warning" :closable="false">
+					<el-alert title="点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。" type="warning" :closable="false"> </el-alert>
-          </el-alert>
+					<el-button
-          <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
+						size="small"
-            ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
+						class="copy-config-btn"
+						icon="el-icon-document-copy"
+						type="primary"
+						ref="copyConfigBtnRef"
+						@click="onCopyConfigClick($event.target)"
+						>一键复制配置
 					</el-button>
 				</div>
 			</el-scrollbar>
@@ -351,31 +341,23 @@
 </template>
 
 <script lang="ts">
-import {
+import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, ref } from 'vue';
-  nextTick,
+import { ElMessage } from 'element-plus';
-  onUnmounted,
+import ClipboardJS from 'clipboard';
-  onMounted,
+import { useStore } from '/@/store/index.ts';
-  getCurrentInstance,
+import { getLightColor } from '/@/utils/theme.ts';
-  defineComponent,
+import Watermark from '/@/utils/wartermark.ts';
-  computed,
+import { verifyAndSpace } from '/@/utils/toolsValidate.ts';
-  ref,
+import { setLocal, getLocal, removeLocal } from '/@/utils/storage.ts';
-} from "vue";
-import { ElMessage } from "element-plus";
-import ClipboardJS from "clipboard";
-import { useStore } from "/@/store/index.ts";
-import { getLightColor } from "/@/utils/theme.ts";
-import Watermark from "/@/utils/wartermark.ts";
-import { verifyAndSpace } from "/@/utils/toolsValidate.js";
-import { setLocal, getLocal } from "/@/utils/storage.ts";
 export default defineComponent({
-  name: "layoutBreadcrumbSeting",
+	name: 'layoutBreadcrumbSeting',
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const copyConfigBtnRef = ref();
 		const store = useStore();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 1、全局主题
 		const onColorPickerChange = (color: string) => {
@@ -386,73 +368,49 @@ export default defineComponent({
 		const setPropertyFun = (color: string, targetVal: any) => {
 			document.documentElement.style.setProperty(color, targetVal);
 			for (let i = 1; i <= 9; i++) {
-        document.documentElement.style.setProperty(
+				document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
-          `${color}-light-${i}`,
-          getLightColor(targetVal, i / 10)
-        );
 			}
 		};
 		// 2、菜单 / 顶栏
 		const onBgColorPickerChange = (bg: string) => {
-      document.documentElement.style.setProperty(
+			document.documentElement.style.setProperty(`--bg-${bg}`, getThemeConfig.value[bg]);
-        `--bg-${bg}`,
-        getThemeConfig.value[bg]
-      );
 			onTopBarGradualChange();
 			onMenuBarGradualChange();
 			setDispatchThemeConfig();
 		};
 		// 2、菜单 / 顶栏 --> 顶栏背景渐变
 		const onTopBarGradualChange = () => {
-      setGraduaFun(
+			setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
-        ".layout-navbars-breadcrumb-index",
-        getThemeConfig.value.isTopBarColorGradual,
-        getThemeConfig.value.topBar
-      );
 		};
 		// 2、菜单 / 顶栏 --> 菜单背景渐变
 		const onMenuBarGradualChange = () => {
-      setGraduaFun(
+			setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
-        ".layout-container .el-aside",
-        getThemeConfig.value.isMenuBarColorGradual,
-        getThemeConfig.value.menuBar
-      );
 		};
 		// 2、菜单 / 顶栏 --> 背景渐变函数
 		const setGraduaFun = (el: string, bool: boolean, color: string) => {
 			nextTick(() => {
 				let els = document.querySelector(el);
 				if (!els) return false;
-        if (bool)
+				if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
-          els.setAttribute(
+				else els.setAttribute('style', `background-image:${color}`);
-            "style",
-            `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(
-              color,
-              0.6
-            )})`
-          );
-        else els.setAttribute("style", `background-image:${color}`);
 				setLocalThemeConfig();
-        const elNavbars = document.querySelector(
+				const elNavbars: any = document.querySelector('.layout-navbars-breadcrumb-index');
-          ".layout-navbars-breadcrumb-index"
+				const elAside: any = document.querySelector('.layout-container .el-aside');
-        );
+				if (elNavbars) setLocal('navbarsBgStyle', elNavbars.style.cssText);
-        const elAside = document.querySelector(".layout-container .el-aside");
+				if (elAside) setLocal('asideBgStyle', elAside.style.cssText);
-        if (elNavbars) setLocal("navbarsBgStyle", elNavbars.style.cssText);
-        if (elAside) setLocal("asideBgStyle", elAside.style.cssText);
 			});
 		};
 		// 2、菜单 / 顶栏 --> 菜单字体背景高亮
 		const onMenuBarHighlightChange = () => {
 			nextTick(() => {
 				setTimeout(() => {
-          let els = document.querySelector(".el-menu-item.is-active");
+					let els = document.querySelector('.el-menu-item.is-active');
 					if (!els) return false;
-          let attr = "el-menu-item is-active";
+					let attr = 'el-menu-item is-active';
-          if (getThemeConfig.value.isMenuBarColorHighlight)
+					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('class', `${attr} add-is-active`);
-            els.setAttribute("class", `${attr} add-is-active`);
+					else els.setAttribute('class', `${attr}`);
-          else els.setAttribute("class", `${attr}`);
 					setLocalThemeConfig();
-          setLocal("menuBarHighlightClass", els.getAttribute("class"));
+					setLocal('menuBarHighlightClass', els.getAttribute('class'));
 				}, 0);
 			});
 		};
@@ -463,74 +421,61 @@ export default defineComponent({
 		};
 		// 3、界面设置 --> 固定 Header
 		const onIsFixedHeaderChange = () => {
-      getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
+			getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
-        .isFixedHeader
-        ? false
-        : true;
 			setLocalThemeConfig();
 		};
 		// 3、界面设置 --> 经典布局分割菜单
 		const onClassicSplitMenuChange = () => {
 			getThemeConfig.value.isBreadcrumb = false;
 			setLocalThemeConfig();
-      proxy.mittBus.emit("getBreadcrumbIndexSetFilterRoutes");
+			proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
 		};
 		// 4、界面显示 --> 侧边栏 Logo
 		const onIsShowLogoChange = () => {
-      getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
+			getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
-        ? false
-        : true;
 			setLocalThemeConfig();
 		};
 		// 4、界面显示 --> 面包屑 Breadcrumb
 		const onIsBreadcrumbChange = () => {
-      if (getThemeConfig.value.layout === "classic") {
+			if (getThemeConfig.value.layout === 'classic') {
 				getThemeConfig.value.isClassicSplitMenu = false;
 			}
 			setLocalThemeConfig();
 		};
 		// 4、界面显示 --> 开启 TagsView 拖拽
 		const onSortableTagsViewChange = () => {
-      proxy.mittBus.emit("openOrCloseSortable");
+			proxy.mittBus.emit('openOrCloseSortable');
 			setLocalThemeConfig();
 		};
 		// 4、界面显示 --> 灰色模式/色弱模式
 		const onAddFilterChange = (attr: string) => {
-      if (attr === "grayscale") {
+			if (attr === 'grayscale') {
-        if (getThemeConfig.value.isGrayscale)
+				if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
-          getThemeConfig.value.isInvert = false;
 			} else {
-        if (getThemeConfig.value.isInvert)
+				if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
-          getThemeConfig.value.isGrayscale = false;
 			}
 			const cssAttr =
-        attr === "grayscale"
+				attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
-          ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})`
+			const appEle: any = document.querySelector('#app');
-          : `invert(${getThemeConfig.value.isInvert ? "80%" : "0%"})`;
+			appEle.setAttribute('style', `filter: ${cssAttr}`);
-      document
-        .getElementById("app")
-        .setAttribute("style", `filter: ${cssAttr}`);
 			setLocalThemeConfig();
-      setLocal("appFilterStyle", document.querySelector("#app").style.cssText);
+			setLocal('appFilterStyle', appEle.style.cssText);
 		};
 		// 4、界面显示 --> 开启水印
 		const onWartermarkChange = () => {
-      getThemeConfig.value.isWartermark
+			getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
-        ? Watermark.set(getThemeConfig.value.wartermarkText)
-        : Watermark.del();
 			setLocalThemeConfig();
 		};
 		// 4、界面显示 --> 水印文案
 		const onWartermarkTextInput = (val: string) => {
 			getThemeConfig.value.wartermarkText = verifyAndSpace(val);
-      if (getThemeConfig.value.wartermarkText === "") return false;
+			if (getThemeConfig.value.wartermarkText === '') return false;
-      if (getThemeConfig.value.isWartermark)
+			if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
-        Watermark.set(getThemeConfig.value.wartermarkText);
 			setLocalThemeConfig();
 		};
 		// 5、布局切换
 		const onSetLayout = (layout: string) => {
-      setLocal("oldLayout", layout);
+			setLocal('oldLayout', layout);
 			if (getThemeConfig.value.layout === layout) return false;
 			getThemeConfig.value.layout = layout;
 			getThemeConfig.value.isDrawer = false;
@@ -539,36 +484,36 @@ export default defineComponent({
 		};
 		// 设置布局切换，重置主题样式
 		const initSetLayoutChange = () => {
-      if (getThemeConfig.value.layout === "classic") {
+			if (getThemeConfig.value.layout === 'classic') {
 				getThemeConfig.value.isShowLogo = true;
 				getThemeConfig.value.isBreadcrumb = false;
 				getThemeConfig.value.isCollapse = false;
 				getThemeConfig.value.isClassicSplitMenu = false;
-        getThemeConfig.value.menuBar = "#FFFFFF";
+				getThemeConfig.value.menuBar = '#FFFFFF';
-        getThemeConfig.value.menuBarColor = "#606266";
+				getThemeConfig.value.menuBarColor = '#606266';
-        getThemeConfig.value.topBar = "#ffffff";
+				getThemeConfig.value.topBar = '#ffffff';
-        getThemeConfig.value.topBarColor = "#606266";
+				getThemeConfig.value.topBarColor = '#606266';
 				initLayoutChangeFun();
-      } else if (getThemeConfig.value.layout === "transverse") {
+			} else if (getThemeConfig.value.layout === 'transverse') {
 				getThemeConfig.value.isShowLogo = true;
 				getThemeConfig.value.isBreadcrumb = false;
 				getThemeConfig.value.isCollapse = false;
 				getThemeConfig.value.isTagsview = false;
 				getThemeConfig.value.isClassicSplitMenu = false;
-        getThemeConfig.value.menuBarColor = "#FFFFFF";
+				getThemeConfig.value.menuBarColor = '#FFFFFF';
-        getThemeConfig.value.topBar = "#545c64";
+				getThemeConfig.value.topBar = '#545c64';
-        getThemeConfig.value.topBarColor = "#FFFFFF";
+				getThemeConfig.value.topBarColor = '#FFFFFF';
 				initLayoutChangeFun();
-      } else if (getThemeConfig.value.layout === "columns") {
+			} else if (getThemeConfig.value.layout === 'columns') {
 				getThemeConfig.value.isShowLogo = true;
 				getThemeConfig.value.isBreadcrumb = true;
 				getThemeConfig.value.isCollapse = false;
 				getThemeConfig.value.isTagsview = true;
 				getThemeConfig.value.isClassicSplitMenu = false;
-        getThemeConfig.value.menuBar = "#FFFFFF";
+				getThemeConfig.value.menuBar = '#FFFFFF';
-        getThemeConfig.value.menuBarColor = "#606266";
+				getThemeConfig.value.menuBarColor = '#606266';
-        getThemeConfig.value.topBar = "#ffffff";
+				getThemeConfig.value.topBar = '#ffffff';
-        getThemeConfig.value.topBarColor = "#606266";
+				getThemeConfig.value.topBarColor = '#606266';
 				initLayoutChangeFun();
 			} else {
 				getThemeConfig.value.isShowLogo = false;
@@ -576,19 +521,19 @@ export default defineComponent({
 				getThemeConfig.value.isCollapse = false;
 				getThemeConfig.value.isTagsview = true;
 				getThemeConfig.value.isClassicSplitMenu = false;
-        getThemeConfig.value.menuBar = "#545c64";
+				getThemeConfig.value.menuBar = '#545c64';
-        getThemeConfig.value.menuBarColor = "#eaeaea";
+				getThemeConfig.value.menuBarColor = '#eaeaea';
-        getThemeConfig.value.topBar = "#FFFFFF";
+				getThemeConfig.value.topBar = '#FFFFFF';
-        getThemeConfig.value.topBarColor = "#606266";
+				getThemeConfig.value.topBarColor = '#606266';
 				initLayoutChangeFun();
 			}
 		};
 		// 设置布局切换函数
 		const initLayoutChangeFun = () => {
-      onBgColorPickerChange("menuBar");
+			onBgColorPickerChange('menuBar');
-      onBgColorPickerChange("menuBarColor");
+			onBgColorPickerChange('menuBarColor');
-      onBgColorPickerChange("topBar");
+			onBgColorPickerChange('topBar');
-      onBgColorPickerChange("topBarColor");
+			onBgColorPickerChange('topBarColor');
 		};
 		// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
 		const onDrawerClose = () => {
@@ -612,37 +557,38 @@ export default defineComponent({
 		};
 		// 存储布局配置
 		const setLocalThemeConfig = () => {
-      setLocal("themeConfig", getThemeConfig.value);
+			removeLocal('themeConfig');
+			setLocal('themeConfig', getThemeConfig.value);
 		};
 		// 存储布局配置全局主题样式（html根标签）
 		const setLocalThemeConfigStyle = () => {
-      setLocal("themeConfigStyle", document.documentElement.style.cssText);
+			setLocal('themeConfigStyle', document.documentElement.style.cssText);
 		};
 		// 一键复制配置
 		const onCopyConfigClick = (target: any) => {
-      let copyThemeConfig = getLocal("themeConfig");
+			let copyThemeConfig = getLocal('themeConfig');
 			copyThemeConfig.isDrawer = false;
 			const clipboard = new ClipboardJS(target, {
 				text: () => JSON.stringify(copyThemeConfig),
 			});
-      clipboard.on("success", () => {
+			clipboard.on('success', () => {
 				getThemeConfig.value.isDrawer = false;
-        ElMessage.success("复制成功！");
+				ElMessage.success('复制成功！');
 				clipboard.destroy();
 			});
-      clipboard.on("error", () => {
+			clipboard.on('error', () => {
-        ElMessage.error("复制失败！");
+				ElMessage.error('复制失败！');
 				clipboard.destroy();
 			});
 		};
 		onMounted(() => {
 			nextTick(() => {
 				// 监听菜单点击，菜单字体背景高亮
-        proxy.mittBus.on("onMenuClick", () => {
+				proxy.mittBus.on('onMenuClick', () => {
 					onMenuBarHighlightChange();
 				});
 				// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
-        proxy.mittBus.on("layoutMobileResize", (res) => {
+				proxy.mittBus.on('layoutMobileResize', (res: any) => {
 					if (getThemeConfig.value.layout === res.layout) return false;
 					getThemeConfig.value.layout = res.layout;
 					getThemeConfig.value.isDrawer = false;
@@ -653,28 +599,25 @@ export default defineComponent({
 				// 刷新页面时，设置了值，直接取缓存中的值进行初始化
 				setTimeout(() => {
 					// 顶栏背景渐变
-          if (getLocal("navbarsBgStyle")) {
+					if (getLocal('navbarsBgStyle')) {
-            document.querySelector(
+						const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
-              ".layout-navbars-breadcrumb-index"
+						breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
-            ).style.cssText = getLocal("navbarsBgStyle");
 					}
 					// 菜单背景渐变
-          if (getLocal("asideBgStyle")) {
+					if (getLocal('asideBgStyle')) {
-            document.querySelector(
+						const asideEl: any = document.querySelector('.layout-container .el-aside');
-              ".layout-container .el-aside"
+						asideEl.style.cssText = getLocal('asideBgStyle');
-            ).style.cssText = getLocal("asideBgStyle");
 					}
 					// 菜单字体背景高亮
-          if (getLocal("menuBarHighlightClass")) {
+					if (getLocal('menuBarHighlightClass')) {
-            let els = document.querySelector(".el-menu-item.is-active");
+						let els = document.querySelector('.el-menu-item.is-active');
 						if (!els) return false;
-            els.setAttribute("class", getLocal("menuBarHighlightClass"));
+						els.setAttribute('class', getLocal('menuBarHighlightClass'));
 					}
 					// 灰色模式/色弱模式
-          if (getLocal("appFilterStyle")) {
+					if (getLocal('appFilterStyle')) {
-            document.querySelector("#app").style.cssText = getLocal(
+						const appEl: any = document.querySelector('#app');
-              "appFilterStyle"
+						appEl.style.cssText = getLocal('appFilterStyle');
-            );
 					}
 					// 开启水印
 					onWartermarkChange();
@@ -683,8 +626,8 @@ export default defineComponent({
 		});
 		onUnmounted(() => {
 			// 取消监听菜单点击，菜单字体背景高亮
-      proxy.mittBus.off("onMenuClick");
+			proxy.mittBus.off('onMenuClick');
-      proxy.mittBus.off("layoutMobileResize");
+			proxy.mittBus.off('layoutMobileResize');
 		});
 		return {
 			openDrawer,

src/views/layout/navBars/breadcrumb/user.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-navbars-breadcrumb-user" :style="setFlexAutoStyle">
+	<div class="layout-navbars-breadcrumb-user" :style="{ flex: setFlexAutoStyle }">
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
 			<i class="el-icon-search" title="菜单搜索"></i>
 		</div>
@@ -7,10 +7,9 @@
 			<i class="icon-skin iconfont" title="布局配置"></i>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon">
-      <el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300"
+			<el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
-        popper-class="el-popover-pupop-user-news">
 				<template #reference>
-          <el-badge :is-dot="true">
+					<el-badge :is-dot="true" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
 						<i class="el-icon-bell" title="消息"></i>
 					</el-badge>
 				</template>
@@ -19,8 +18,9 @@
 				</transition>
 			</el-popover>
 		</div>
-    <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"><i class="iconfont"
+		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
-        :title="isScreenfull ? '开全屏' : '关全屏'" :class="!isScreenfull?'icon-fullscreen':'icon-tuichuquanping'"></i></div>
+			<i class="iconfont" :title="isScreenfull ? '开全屏' : '关全屏'" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
+		</div>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
 				<img :src="getUserInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
@@ -42,28 +42,20 @@
 </template>
 
 <script lang="ts">
-import {
+import { ref, getCurrentInstance, computed, reactive, toRefs } from 'vue';
-  ref,
+import { useRouter } from 'vue-router';
-  getCurrentInstance,
+import { ElMessageBox, ElMessage } from 'element-plus';
-  computed,
+import screenfull from 'screenfull';
-  reactive,
+import { resetRoute } from '/@/router/index.ts';
-  toRefs,
+import { useStore } from '/@/store/index.ts';
-  toRef,
+import { clearSession } from '/@/utils/storage.ts';
-  ref,
+import UserNews from '/@/views/layout/navBars/breadcrumb/userNews.vue';
-} from "vue";
+import Search from '/@/views/layout/navBars/breadcrumb/search.vue';
-import { useRouter } from "vue-router";
-import { ElMessageBox, ElMessage } from "element-plus";
-import screenfull from "screenfull";
-import { resetRoute } from "/@/router/index.ts";
-import { useStore } from "/@/store/index.ts";
-import { getSession, clearSession } from "/@/utils/storage.ts";
-import UserNews from "/@/views/layout/navBars/breadcrumb/userNews.vue";
-import Search from "/@/views/layout/navBars/breadcrumb/search.vue";
 export default {
-  name: "layoutBreadcrumbUser",
+	name: 'layoutBreadcrumbUser',
 	components: { UserNews, Search },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const router = useRouter();
 		const store = useStore();
 		const searchRef = ref();
@@ -73,21 +65,17 @@ export default {
 		});
 		// 设置布局
 		const setFlexAutoStyle = computed(() => {
-      if (
+			let { isBreadcrumb, layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-        !store.state.themeConfig.isBreadcrumb &&
+			return !isBreadcrumb && layout !== 'transverse' && isClassicSplitMenu ? 1 : '';
-        store.state.themeConfig.layout !== "transverse" &&
-        !store.state.themeConfig.isClassicSplitMenu
-      )
-        return { flex: 1 };
 		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
-      return store.state.userInfos;
+			return store.state.userInfos.userInfos;
 		});
 		// 全屏点击时
 		const onScreenfullClick = () => {
 			if (!screenfull.isEnabled) {
-        ElMessage.warning("暂不不支持全屏");
+				ElMessage.warning('暂不不支持全屏');
 				return false;
 			}
 			screenfull.toggle();
@@ -95,23 +83,23 @@ export default {
 		};
 		// 布局配置 icon 点击时
 		const onLayoutSetingClick = () => {
-      proxy.mittBus.emit("openSetingsDrawer");
+			proxy.mittBus.emit('openSetingsDrawer');
 		};
 		// 下拉菜单点击时
-    const onHandleCommandClick = (path) => {
+		const onHandleCommandClick = (path: string) => {
-      if (path === "logOut") {
+			if (path === 'logOut') {
 				ElMessageBox({
 					closeOnClickModal: false,
 					closeOnPressEscape: false,
-          title: "提示",
+					title: '提示',
-          message: "此操作将退出登录, 是否继续?",
+					message: '此操作将退出登录, 是否继续?',
 					showCancelButton: true,
-          confirmButtonText: "确定",
+					confirmButtonText: '确定',
-          cancelButtonText: "取消",
+					cancelButtonText: '取消',
 					beforeClose: (action, instance, done) => {
-            if (action === "confirm") {
+						if (action === 'confirm') {
 							instance.confirmButtonLoading = true;
-              instance.confirmButtonText = "退出中";
+							instance.confirmButtonText = '退出中';
 							setTimeout(() => {
 								done();
 								setTimeout(() => {
@@ -123,12 +111,12 @@ export default {
 						}
 					},
 				})
-          .then((action) => {
+					.then(() => {
 						clearSession(); // 清除缓存/token等
 						resetRoute(); // 删除/重置路由
-            router.push("/login");
+						router.push('/login');
 						setTimeout(() => {
-              ElMessage.success("安全退出成功！");
+							ElMessage.success('安全退出成功！');
 						}, 300);
 					})
 					.catch(() => {});

src/views/layout/navBars/breadcrumb/userNews.vue

@@ -9,7 +9,8 @@
 				<div class="content-box-item" v-for="(v, k) in newsList" :key="k">
 					<div>{{ v.label }}</div>
 					<div class="content-box-msg">
-            {{v.value}}</div>
+						{{ v.value }}
+					</div>
 					<div class="content-box-time">{{ v.time }}</div>
 				</div>
 			</template>
@@ -20,22 +21,21 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs } from 'vue';
 export default {
-  name: "layoutBreadcrumbUserNews",
+	name: 'layoutBreadcrumbUserNews',
 	setup() {
 		const state = reactive({
 			newsList: [
 				{
-          label: "关于版本发布的通知",
+					label: '关于版本发布的通知',
-          value:
+					value: 'vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！',
-            "vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！",
+					time: '2020-12-08',
-          time: "2020-12-08",
 				},
 				{
-          label: "关于学习交流的通知",
+					label: '关于学习交流的通知',
-          value: "QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！",
+					value: 'QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！',
-          time: "2020-12-08",
+					time: '2020-12-08',
 				},
 			],
 		});
@@ -45,7 +45,7 @@ export default {
 		};
 		// 前往通知中心点击
 		const onGoToGiteeClick = () => {
-      window.open("https://gitee.com/lyt-top/vue-next-admin");
+			window.open('https://gitee.com/lyt-top/vue-next-admin');
 		};
 		return {
 			onAllReadClick,

src/views/layout/navBars/index.vue

@@ -6,19 +6,19 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';
-import { useStore } from "/@/store/index.ts";
+import { useStore } from '/@/store/index.ts';
-import BreadcrumbIndex from "/@/views/layout/navBars/breadcrumb/index.vue";
+import BreadcrumbIndex from '/@/views/layout/navBars/breadcrumb/index.vue';
-import TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
+import TagsView from '/@/views/layout/navBars/tagsView/tagsView.vue';
 export default {
-  name: "layoutNavBars",
+	name: 'layoutNavBars',
 	components: { BreadcrumbIndex, TagsView },
 	setup() {
 		const store = useStore();
 		// 是否显示 tagsView
 		const setShowTagsView = computed(() => {
-      let { layout, isTagsview } = store.state.themeConfig;
+			let { layout, isTagsview } = store.state.themeConfig.themeConfig;
-      return layout !== "classic" && isTagsview;
+			return layout !== 'classic' && isTagsview;
 		});
 		return {
 			setShowTagsView,

src/views/layout/navBars/tagsView/contextmenu.vue

@@ -1,12 +1,17 @@
 <template>
 	<transition name="el-zoom-in-center">
-    <div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
+		<div
-      data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" :key="Math.random()"
+			aria-hidden="true"
-      v-show="isShow">
+			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+			role="tooltip"
+			data-popper-placement="bottom"
+			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+			:key="Math.random()"
+			v-show="isShow"
+		>
 			<ul class="el-dropdown-menu">
-        <template v-for="(v,k) in dropdownList" :key="k">
+				<template v-for="(v, k) in dropdownList">
-          <li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" v-if="!v.affix"
+					<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" :key="k" v-if="!v.affix" @click="onCurrentContextmenuClick(v.id)">
-            @click="onCurrentContextmenuClick(v.id)">
 						<i :class="v.icon"></i>
 						<span>{{ v.txt }}</span>
 					</li>
@@ -18,16 +23,9 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
-  computed,
-  defineComponent,
-  reactive,
-  toRefs,
-  onMounted,
-  onUnmounted,
-} from "vue";
 export default defineComponent({
-  name: "layoutTagsViewContextmenu",
+	name: 'layoutTagsViewContextmenu',
 	props: {
 		dropdown: {
 			type: Object,
@@ -37,33 +35,31 @@ export default defineComponent({
 		const state = reactive({
 			isShow: false,
 			dropdownList: [
-        { id: 0, txt: "刷新", affix: false, icon: "el-icon-refresh-right" },
+				{ id: 0, txt: '刷新', affix: false, icon: 'el-icon-refresh-right' },
-        { id: 1, txt: "关闭", affix: false, icon: "el-icon-close" },
+				{ id: 1, txt: '关闭', affix: false, icon: 'el-icon-close' },
-        { id: 2, txt: "关闭其它", affix: false, icon: "el-icon-circle-close" },
+				{ id: 2, txt: '关闭其它', affix: false, icon: 'el-icon-circle-close' },
-        { id: 3, txt: "全部关闭", affix: false, icon: "el-icon-folder-delete" },
+				{ id: 3, txt: '全部关闭', affix: false, icon: 'el-icon-folder-delete' },
 				{
 					id: 4,
-          txt: "当前页全屏",
+					txt: '当前页全屏',
 					affix: false,
-          icon: "iconfont icon-fullscreen",
+					icon: 'iconfont icon-fullscreen',
 				},
 			],
 			path: {},
 		});
 		// 父级传过来的坐标 x,y 值
-    const dropdown = computed(() => {
+		const dropdowns = computed(() => {
 			return props.dropdown;
 		});
 		// 当前项菜单点击
 		const onCurrentContextmenuClick = (id: number) => {
-      emit("currentContextmenuClick", { id, path: state.path });
+			emit('currentContextmenuClick', { id, path: state.path });
 		};
 		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
-    const openContextmenu = (item: object) => {
+		const openContextmenu = (item: any) => {
 			state.path = item.path;
-      item.meta.isAffix
+			item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
-        ? (state.dropdownList[1].affix = true)
-        : (state.dropdownList[1].affix = false);
 			closeContextmenu();
 			setTimeout(() => {
 				state.isShow = true;
@@ -75,14 +71,14 @@ export default defineComponent({
 		};
 		// 监听页面监听进行右键菜单的关闭
 		onMounted(() => {
-      document.body.addEventListener("click", closeContextmenu);
+			document.body.addEventListener('click', closeContextmenu);
 		});
 		// 页面卸载时，移除右键菜单监听事件
 		onUnmounted(() => {
-      document.body.removeEventListener("click", closeContextmenu);
+			document.body.removeEventListener('click', closeContextmenu);
 		});
 		return {
-      dropdown,
+			dropdowns,
 			openContextmenu,
 			closeContextmenu,
 			onCurrentContextmenuClick,

src/views/layout/navBars/tagsView/tagsView.vue

@@ -2,52 +2,56 @@
 	<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
 		<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
 			<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
-        <li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
+				<li
-          :class="{'is-active':isActive(v.path)}" @contextmenu.prevent="onContextmenu(v,$event)"
+					v-for="(v, k) in tagsViewList"
-          @click="onTagsClick(v,k)" :ref="el => { if (el) tagsRefs[k] = el }">
+					:key="k"
+					class="layout-navbars-tagsview-ul-li"
+					:data-name="v.name"
+					:class="{ 'is-active': isActive(v.path) }"
+					@contextmenu.prevent="onContextmenu(v, $event)"
+					@click="onTagsClick(v, k)"
+					:ref="
+						(el) => {
+							if (el) tagsRefs[k] = el;
+						}
+					"
+				>
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v.path)"></i>
-          <i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon"
+					<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
-            v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
 					<span>{{ v.meta.title }}</span>
 					<template v-if="isActive(v.path)">
 						<i class="el-icon-refresh-right ml5" @click="refreshCurrentTagsView(v.path)"></i>
-            <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active" v-if="!v.meta.isAffix"
+						<i
-              @click="closeCurrentTagsView(v.path)"></i>
+							class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"
+							v-if="!v.meta.isAffix"
+							@click="closeCurrentTagsView(v.path)"
+						></i>
 					</template>
-          <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three" v-if="!v.meta.isAffix"
+					<i
-            @click="closeCurrentTagsView(v.path)"></i>
+						class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"
+						v-if="!v.meta.isAffix"
+						@click="closeCurrentTagsView(v.path)"
+					></i>
 				</li>
 			</ul>
 		</el-scrollbar>
-  </div>
 		<Contextmenu :dropdown="dropdown" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
+	</div>
 </template>
 
 <script lang="ts">
-import {
+import { toRefs, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
-  toRefs,
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
-  reactive,
+import screenfull from 'screenfull';
-  onMounted,
+import { useStore } from '/@/store/index.ts';
-  computed,
+import { setSession, getSession, removeSession } from '/@/utils/storage.ts';
-  ref,
+import Sortable from 'sortablejs';
-  nextTick,
+import Contextmenu from '/@/views/layout/navBars/tagsView/contextmenu.vue';
-  onBeforeUpdate,
-  onBeforeMount,
-  onUnmounted,
-  getCurrentInstance,
-  watch,
-} from "vue";
-import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
-import screenfull from "screenfull";
-import { useStore } from "/@/store/index.ts";
-import { setSession, getSession, removeSession } from "/@/utils/storage.ts";
-import Sortable from "sortablejs";
-import Contextmenu from "/@/views/layout/navBars/tagsView/contextmenu.vue";
 export default {
-  name: "layoutTagsView",
+	name: 'layoutTagsView',
 	components: { Contextmenu },
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const tagsRefs = ref([]);
 		const scrollbarRef = ref();
 		const contextmenuRef = ref();
@@ -55,51 +59,41 @@ export default {
 		const store = useStore();
 		const route = useRoute();
 		const router = useRouter();
-    const state = reactive({
+		const state: any = reactive({
 			routePath: route.path,
-      dropdown: { x: "", y: "" },
+			dropdown: { x: '', y: '' },
 			tagsRefsIndex: 0,
 			tagsViewList: [],
-      sortable: "",
+			sortable: '',
 			tagsViewRoutesList: [],
 		});
 		// 动态设置 tagsView 风格样式
 		const setTagsStyle = computed(() => {
-      let { tagsStyle } = store.state.themeConfig;
+			return store.state.themeConfig.themeConfig.tagsStyle;
-      if (tagsStyle === "tagsStyleTwo") return "layout-navbars-tagsview-ul-two";
-      else if (tagsStyle === "tagsStyleThree")
-        return "layout-navbars-tagsview-ul-three";
-      else if (tagsStyle === "tagsStyleFour")
-        return "layout-navbars-tagsview-ul-four";
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
 		const addBrowserSetSession = (tagsViewList: Array<object>) => {
-      setSession("tagsViewList", tagsViewList);
+			setSession('tagsViewList', tagsViewList);
 		};
 		// 获取 vuex 中的 tagsViewRoutes 列表
 		const getTagsViewRoutes = () => {
 			state.routePath = route.path;
 			state.tagsViewList = [];
-      if (!store.state.themeConfig.isCacheTagsView)
+			if (!store.state.themeConfig.themeConfig.isCacheTagsView) removeSession('tagsViewList');
-        removeSession("tagsViewList");
+			state.tagsViewRoutesList = store.state.tagsViewRoutes.tagsViewRoutes;
-      state.tagsViewRoutesList = store.state.tagsViewRoutes;
 			initTagsView();
 		};
 		// vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
 		const initTagsView = () => {
-      if (
+			if (getSession('tagsViewList') && store.state.themeConfig.themeConfig.isCacheTagsView) {
-        getSession("tagsViewList") &&
+				state.tagsViewList = getSession('tagsViewList');
-        store.state.themeConfig.isCacheTagsView
-      ) {
-        state.tagsViewList = getSession("tagsViewList");
 			} else {
-        state.tagsViewRoutesList.map((v) => {
+				state.tagsViewRoutesList.map((v: any) => {
-          if (v.meta.isAffix && !v.meta.isHide)
+					if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
-            state.tagsViewList.push({ ...v });
 				});
 				addTagsView(route.path);
 			}
@@ -110,19 +104,19 @@ export default {
 		};
 		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
 		const addTagsView = (path: string) => {
-      if (state.tagsViewList.some((v) => v.path === path)) return false;
+			if (state.tagsViewList.some((v: any) => v.path === path)) return false;
-      const item = state.tagsViewRoutesList.find((v) => v.path === path);
+			const item = state.tagsViewRoutesList.find((v: any) => v.path === path);
 			if (item.meta.isLink && !item.meta.isIframe) return false;
 			if (!item.meta.isHide) state.tagsViewList.push({ ...item });
 			addBrowserSetSession(state.tagsViewList);
 		};
 		// 2、刷新当前 tagsView：
 		const refreshCurrentTagsView = (path: string) => {
-      proxy.mittBus.emit("onTagsViewRefreshRouterView", path);
+			proxy.mittBus.emit('onTagsViewRefreshRouterView', path);
 		};
 		// 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
 		const closeCurrentTagsView = (path: string) => {
-      state.tagsViewList.map((v, k, arr) => {
+			state.tagsViewList.map((v: any, k: number, arr: any) => {
 				if (!v.meta.isAffix) {
 					if (v.path === path) {
 						state.tagsViewList.splice(k, 1);
@@ -137,7 +131,7 @@ export default {
 		// 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
 		const closeOtherTagsView = (path: string) => {
 			state.tagsViewList = [];
-      state.tagsViewRoutesList.map((v) => {
+			state.tagsViewRoutesList.map((v: any) => {
 				if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
 			});
 			addTagsView(path);
@@ -145,11 +139,10 @@ export default {
 		// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
 		const closeAllTagsView = (path: string) => {
 			state.tagsViewList = [];
-      state.tagsViewRoutesList.map((v) => {
+			state.tagsViewRoutesList.map((v: any) => {
 				if (v.meta.isAffix && !v.meta.isHide) {
 					state.tagsViewList.push({ ...v });
-          if (state.tagsViewList.some((v) => v.path === path))
+					if (state.tagsViewList.some((v: any) => v.path === path)) router.push(path);
-            router.push(path);
 					else router.push(v.path);
 				}
 			});
@@ -159,12 +152,13 @@ export default {
 		const openCurrenFullscreen = (path: string) => {
 			nextTick(() => {
 				router.push(path);
-        const element = document.querySelector(".layout-main");
+				const element = document.querySelector('.layout-main');
-        screenfull.request(element);
+				const screenfulls: any = screenfull;
+				screenfulls.request(element);
 			});
 		};
 		// 当前项右键菜单点击
-    const onCurrentContextmenuClick = (data: object) => {
+		const onCurrentContextmenuClick = (data: any) => {
 			let { id, path } = data;
 			switch (id) {
 				case 0:
@@ -191,14 +185,14 @@ export default {
 			return path === state.routePath;
 		};
 		// 右键点击时：传 x,y 坐标值到子组件中（props）
-    const onContextmenu = (v: object, e: object) => {
+		const onContextmenu = (v: any, e: any) => {
 			const { clientX, clientY } = e;
 			state.dropdown.x = clientX;
 			state.dropdown.y = clientY;
 			contextmenuRef.value.openContextmenu(v);
 		};
 		// 当前的 tagsView 项点击时
-    const onTagsClick = (v: object, k: number) => {
+		const onTagsClick = (v: any, k: number) => {
 			state.routePath = v.path;
 			state.tagsRefsIndex = k;
 			router.push(v.path);
@@ -208,15 +202,13 @@ export default {
 			proxy.$refs.scrollbarRef.update();
 		};
 		// 鼠标滚轮滚动
-    const onHandleScroll = (e: object) => {
+		const onHandleScroll = (e: any) => {
 			proxy.$refs.scrollbarRef.$refs.wrap.scrollLeft += e.wheelDelta / 4;
 		};
 		// tagsView 横向滚动
 		const tagsViewmoveToCurrentTag = () => {
 			nextTick(() => {
 				if (tagsRefs.value.length <= 0) return false;
-        // ul 宽度
-        let ulWidth = tagsUlRef.value.offsetWidth;
 				// 当前 li 元素
 				let liDom = tagsRefs.value[state.tagsRefsIndex];
 				// 当前 li 元素下标
@@ -224,9 +216,9 @@ export default {
 				// 当前 ul 下 li 元素总长度
 				let liLength = tagsRefs.value.length;
 				// 最前 li
-        let liFirst = tagsRefs.value[0];
+				let liFirst: any = tagsRefs.value[0];
 				// 最后 li
-        let liLast = tagsRefs.value[tagsRefs.value.length - 1];
+				let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
 				// 当前滚动条的值
 				let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap;
 				// 当前滚动条滚动宽度
@@ -236,13 +228,13 @@ export default {
 				// 当前滚动条偏移距离
 				let scrollL = scrollRefs.scrollLeft;
 				// 上一个 tags li dom
-        let liPrevTag = tagsRefs.value[state.tagsRefsIndex - 1];
+				let liPrevTag: any = tagsRefs.value[state.tagsRefsIndex - 1];
 				// 下一个 tags li dom
-        let liNextTag = tagsRefs.value[state.tagsRefsIndex + 1];
+				let liNextTag: any = tagsRefs.value[state.tagsRefsIndex + 1];
 				// 上一个 tags li dom 的偏移距离
-        let beforePrevL = "";
+				let beforePrevL: any = '';
 				// 下一个 tags li dom 的偏移距离
-        let afterNextL = "";
+				let afterNextL: any = '';
 				if (liDom === liFirst) {
 					// 头部
 					scrollRefs.scrollLeft = 0;
@@ -253,8 +245,7 @@ export default {
 					// 非头/尾部
 					if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
 					else beforePrevL = liPrevTag.offsetLeft - 5;
-          if (liIndex === liLength)
+					if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
-            afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
 					else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
 					if (afterNextL > scrollL + offsetW) {
 						scrollRefs.scrollLeft = afterNextL - offsetW;
@@ -269,25 +260,22 @@ export default {
 		// 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
 		const getTagsRefsIndex = (path: string) => {
 			if (state.tagsViewList.length > 0) {
-        state.tagsRefsIndex = state.tagsViewList.findIndex(
+				state.tagsRefsIndex = state.tagsViewList.findIndex((item: any) => item.path === path);
-          (item) => item.path === path
-        );
 			}
 		};
 		// 设置 tagsView 可以进行拖拽
 		const initSortable = () => {
-      const el = document.querySelector(".layout-navbars-tagsview-ul");
+			const el: any = document.querySelector('.layout-navbars-tagsview-ul');
 			if (!el) return false;
-      if (!getThemeConfig.value.isSortableTagsView)
+			if (!getThemeConfig.value.isSortableTagsView) state.sortable && state.sortable.destroy();
-        state.sortable && state.sortable.destroy();
 			if (getThemeConfig.value.isSortableTagsView) {
 				state.sortable = Sortable.create(el, {
 					animation: 300,
-          dataIdAttr: "data-name",
+					dataIdAttr: 'data-name',
 					onEnd: () => {
-            const sortEndList = [];
+						const sortEndList: any = [];
-            state.sortable.toArray().map((val) => {
+						state.sortable.toArray().map((val: any) => {
-              state.tagsViewList.map((v) => {
+							state.tagsViewList.map((v: any) => {
 								if (v.name === val) sortEndList.push({ ...v });
 							});
 						});
@@ -298,27 +286,26 @@ export default {
 		};
 		// 监听路由的变化，动态赋值给 tagsView
 		watch(store.state, (val) => {
-      if (val.tagsViewRoutes.length === state.tagsViewRoutesList.length)
+			if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
-        return false;
 			getTagsViewRoutes();
 		});
 		// 页面加载前
 		onBeforeMount(() => {
 			// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
-      proxy.mittBus.on("onCurrentContextmenuClick", (data: object) => {
+			proxy.mittBus.on('onCurrentContextmenuClick', (data: object) => {
 				onCurrentContextmenuClick(data);
 			});
 			// 监听布局配置界面开启/关闭拖拽
-      proxy.mittBus.on("openOrCloseSortable", () => {
+			proxy.mittBus.on('openOrCloseSortable', () => {
 				initSortable();
 			});
 		});
 		// 页面卸载时
 		onUnmounted(() => {
 			// 取消非本页面调用监听
-      proxy.mittBus.off("onCurrentContextmenuClick");
+			proxy.mittBus.off('onCurrentContextmenuClick');
 			// 取消监听布局配置界面开启/关闭拖拽
-      proxy.mittBus.off("openOrCloseSortable");
+			proxy.mittBus.off('openOrCloseSortable');
 		});
 		// 页面更新时
 		onBeforeUpdate(() => {
@@ -427,7 +414,7 @@ export default {
 		}
 	}
 	// 风格2
-  &-ul-two {
+	.tags-style-two {
 		.layout-navbars-tagsview-ul-li {
 			height: 34px !important;
 			line-height: 34px !important;
@@ -451,7 +438,7 @@ export default {
 		}
 	}
 	// 风格3
-  &-ul-three {
+	.tags-style-three {
 		.layout-navbars-tagsview-ul-li {
 			height: 34px !important;
 			line-height: 34px !important;
@@ -479,7 +466,7 @@ export default {
 		}
 	}
 	// 风格4
-  &-ul-four {
+	.tags-style-four {
 		.layout-navbars-tagsview-ul-li {
 			margin-right: 0 !important;
 			border: none !important;

src/views/layout/navMenu/horizontal.vue

@@ -1,9 +1,8 @@
 <template>
 	<div class="el-menu-horizontal-warp">
 		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-      <el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal"
+			<el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal" @select="onHorizontalSelect">
-        @select="onHorizontalSelect">
+				<template v-for="val in menuLists">
-        <template v-for="val in menuList">
 					<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>
@@ -12,7 +11,7 @@
 						<SubItem :chil="val.children" />
 					</el-submenu>
 					<el-menu-item :index="val.path" :key="val.path" v-else>
-            <template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
+						<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 							{{ val.meta.title }}
 						</template>
@@ -30,62 +29,47 @@
 </template>
 
 <script lang="ts">
-import {
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick } from 'vue';
-  toRefs,
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-  reactive,
+import { useStore } from '/@/store/index.ts';
-  computed,
+import SubItem from '/@/views/layout/navMenu/subItem.vue';
-  defineComponent,
-  getCurrentInstance,
-  onMounted,
-  nextTick,
-} from "vue";
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { useStore } from "/@/store/index.ts";
-import SubItem from "/@/views/layout/navMenu/subItem.vue";
 export default defineComponent({
-  name: "navMenuHorizontal",
+	name: 'navMenuHorizontal',
 	components: { SubItem },
 	props: {
 		menuList: {
 			type: Array,
-      default() {
+			default: () => [],
-        return [];
-      },
 		},
 	},
 	setup(props) {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
 		const store = useStore();
-    const state = reactive({
+		const state: any = reactive({
 			defaultActive: null,
 		});
 		// 获取父级菜单数据
-    const menuList = computed(() => {
+		const menuLists = computed(() => {
 			return props.menuList;
 		});
 		// 设置横向滚动条可以鼠标滚轮滚动
-    const onElMenuHorizontalScroll = (e: object) => {
+		const onElMenuHorizontalScroll = (e: any) => {
 			const eventDelta = e.wheelDelta || -e.deltaY * 40;
-      proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
+			proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;
-        proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft +
-        eventDelta / 4;
 		};
 		// 初始化数据，页面刷新时，滚动条滚动到对应位置
 		const initElMenuOffsetLeft = () => {
 			nextTick(() => {
-        let els = document.querySelector(
+				let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
-          ".el-menu.el-menu--horizontal li.is-active"
-        );
 				if (!els) return false;
-        proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
+				proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
-          els.offsetLeft;
 			});
 		};
 		// 设置页面当前路由高亮
 		const setCurrentRouterHighlight = (path: string) => {
-      const currentPathSplit = path.split("/");
+			const currentPathSplit = path.split('/');
-      if (store.state.themeConfig.layout === "classic") {
+			if (store.state.themeConfig.themeConfig.layout === 'classic') {
 				state.defaultActive = `/${currentPathSplit[1]}`;
 			} else {
 				state.defaultActive = path;
@@ -94,8 +78,8 @@ export default defineComponent({
 		// 路由过滤递归函数
 		const filterRoutesFun = (arr: Array<object>) => {
 			return arr
-        .filter((item) => !item.meta.isHide)
+				.filter((item: any) => !item.meta.isHide)
-        .map((item) => {
+				.map((item: any) => {
 					item = Object.assign({}, item);
 					if (item.children) item.children = filterRoutesFun(item.children);
 					return item;
@@ -103,24 +87,21 @@ export default defineComponent({
 		};
 		// 传送当前子级数据到菜单中
 		const setSendClassicChildren = (path: string) => {
-      const currentPathSplit = path.split("/");
+			const currentPathSplit = path.split('/');
-      let currentData: object = {};
+			let currentData: any = {};
-      filterRoutesFun(store.state.routes).map((v, k) => {
+			filterRoutesFun(store.state.routesList.routesList).map((v, k) => {
 				if (v.path === `/${currentPathSplit[1]}`) {
-          v["k"] = k;
+					v['k'] = k;
-          currentData["item"] = [{ ...v }];
+					currentData['item'] = [{ ...v }];
-          currentData["children"] = [{ ...v }];
+					currentData['children'] = [{ ...v }];
-          if (v.children) currentData["children"] = v.children;
+					if (v.children) currentData['children'] = v.children;
 				}
 			});
 			return currentData;
 		};
 		// 菜单激活回调
-    const onHorizontalSelect = (path) => {
+		const onHorizontalSelect = (path: string) => {
-      proxy.mittBus.emit(
+			proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(path));
-        "setSendClassicChildren",
-        setSendClassicChildren(path)
-      );
 		};
 		// 页面加载时
 		onMounted(() => {
@@ -130,10 +111,10 @@ export default defineComponent({
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
 			setCurrentRouterHighlight(to.path);
-      proxy.mittBus.emit("onMenuClick");
+			proxy.mittBus.emit('onMenuClick');
 		});
 		return {
-      menuList,
+			menuLists,
 			onElMenuHorizontalScroll,
 			onHorizontalSelect,
 			...toRefs(state),

src/views/layout/navMenu/subItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="val in chil">
+	<template v-for="val in chils">
 		<el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<i :class="val.meta.icon"></i>
@@ -8,7 +8,7 @@
 			<sub-item :chil="val.children" />
 		</el-submenu>
 		<el-menu-item :index="val.path" :key="val.path" v-else>
-      <template v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
+			<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 				<span>{{ val.meta.title }}</span>
 			</template>
@@ -23,24 +23,22 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent } from 'vue';
 export default defineComponent({
-  name: "navMenuSubItem",
+	name: 'navMenuSubItem',
 	props: {
 		chil: {
 			type: Array,
-      default() {
+			default: () => [],
-        return [];
-      },
 		},
 	},
 	setup(props) {
 		// 获取父级菜单数据
-    const chil = computed(() => {
+		const chils = computed(() => {
 			return props.chil;
 		});
 		return {
-      chil,
+			chils,
 		};
 	},
 });

src/views/layout/navMenu/vertical.vue

@@ -1,7 +1,13 @@
 <template>
-  <el-menu router :default-active="defaultActive" background-color="transparent" :collapse="setIsCollapse"
+	<el-menu
-    :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
+		router
-    <template v-for="val in menuList">
+		:default-active="defaultActive"
+		background-color="transparent"
+		:collapse="setIsCollapse"
+		:unique-opened="getThemeConfig.isUniqueOpened"
+		:collapse-transition="false"
+	>
+		<template v-for="val in menuLists">
 			<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<i :class="val.meta.icon ? val.meta.icon : ''"></i>
@@ -11,68 +17,59 @@
 			</el-submenu>
 			<el-menu-item :index="val.path" :key="val.path" v-else>
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-        <template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
+				<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 					<span>{{ val.meta.title }}</span>
 				</template>
-        <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+				<template #title v-else>
+					<a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template
+				>
 			</el-menu-item>
 		</template>
 	</el-menu>
 </template>
 
 <script lang="ts">
-import {
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance } from 'vue';
-  toRefs,
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-  reactive,
+import { useStore } from '/@/store/index.ts';
-  computed,
+import SubItem from '/@/views/layout/navMenu/subItem.vue';
-  defineComponent,
-  getCurrentInstance,
-  onBeforeMount,
-} from "vue";
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { useStore } from "/@/store/index.ts";
-import SubItem from "/@/views/layout/navMenu/subItem.vue";
 export default defineComponent({
-  name: "navMenuVertical",
+	name: 'navMenuVertical',
 	components: { SubItem },
 	props: {
 		menuList: {
 			type: Array,
-      default() {
+			default: () => [],
-        return [];
-      },
 		},
 	},
 	setup(props) {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const state = reactive({
 			defaultActive: route.path,
 		});
 		// 获取父级菜单数据
-    const menuList = computed(() => {
+		const menuLists = computed(() => {
 			return props.menuList;
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 设置菜单的收起/展开
 		const setIsCollapse = computed(() => {
-      return document.body.clientWidth < 1000
+			return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
-        ? false
-        : getThemeConfig.value.isCollapse;
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
 			state.defaultActive = to.path;
-      proxy.mittBus.emit("onMenuClick");
+			proxy.mittBus.emit('onMenuClick');
 			const clientWidth = document.body.clientWidth;
 			if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
 		});
 		return {
-      menuList,
+			menuLists,
 			getThemeConfig,
 			setIsCollapse,
 			...toRefs(state),

src/views/layout/routerView/iframes.vue

@@ -7,38 +7,28 @@
 </template>
 
 <script lang="ts">
-import {
+import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
-  defineComponent,
+import { useRoute } from 'vue-router';
-  computed,
-  reactive,
-  toRefs,
-  onMounted,
-  onBeforeMount,
-  onUnmounted,
-  nextTick,
-  getCurrentInstance,
-} from "vue";
-import { useRoute } from "vue-router";
 export default defineComponent({
-  name: "layoutIfameView",
+	name: 'layoutIfameView',
 	props: {
 		meta: {
 			type: Object,
 			default: () => {},
 		},
 	},
-  setup(props) {
+	setup(props, { emit }) {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
 		const state = reactive({
 			iframeLoading: true,
-      iframeUrl: "",
+			iframeUrl: '',
 		});
 		// 初始化页面加载 loading
 		const initIframeLoad = () => {
 			nextTick(() => {
 				state.iframeLoading = true;
-        const iframe = document.getElementById("iframe");
+				const iframe = document.getElementById('iframe');
 				if (!iframe) return false;
 				iframe.onload = () => {
 					state.iframeLoading = false;
@@ -48,10 +38,9 @@ export default defineComponent({
 		// 页面加载前
 		onBeforeMount(() => {
 			state.iframeUrl = props.meta.isLink;
-      proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => {
+			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
 				if (route.path !== path) return false;
-        state.iframeUrl = `${props.meta.isLink}?key=${Math.random()}`;
+				emit('getCurrentRouteMeta');
-        initIframeLoad();
 			});
 		});
 		// 页面加载时
@@ -60,9 +49,7 @@ export default defineComponent({
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      proxy.mittBus.off("onTagsViewRefreshRouterView", () => {
+			proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
-        console.log(1111);
-      });
 		});
 		return {
 			...toRefs(state),

src/views/layout/routerView/link.vue

@@ -1,16 +1,15 @@
 <template>
 	<div class="layout-scrollbar">
 		<div class="layout-view-bg-white flex layout-view-link">
-      <a :href="currentRouteMeta.isLink" target="_blank"
+			<a :href="currentRouteMeta.isLink" target="_blank" class="flex-margin">{{ currentRouteMeta.title }}：{{ currentRouteMeta.isLink }}</a>
-        class="flex-margin">{{currentRouteMeta.title}}：{{currentRouteMeta.isLink}}</a>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed } from 'vue';
 export default defineComponent({
-  name: "layoutLinkView",
+	name: 'layoutLinkView',
 	props: {
 		meta: {
 			type: Object,

src/views/layout/routerView/parent.vue

@@ -11,51 +11,33 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick } from 'vue';
-  computed,
+import { useRoute } from 'vue-router';
-  defineComponent,
+import { useStore } from '/@/store/index.ts';
-  toRefs,
-  reactive,
-  getCurrentInstance,
-  watch,
-  onBeforeMount,
-  onUnmounted,
-  nextTick,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useStore } from "/@/store/index.ts";
 export default defineComponent({
-  name: "layoutParentView",
+	name: 'layoutParentView',
 	setup() {
-    const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
-    const router = useRouter();
 		const store = useStore();
-    const state = reactive({
+		const state: any = reactive({
-      transitionName: "slide-right",
 			refreshRouterViewKey: null,
 		});
 		// 设置主界面切换动画
 		const setTransitionName = computed(() => {
-      let { animation } = store.state.themeConfig;
+			return store.state.themeConfig.themeConfig.animation;
-      if (animation === "slideRight")
-        return (state.transitionName = "slide-right");
-      else if (animation === "slideLeft")
-        return (state.transitionName = "slide-left");
-      else if (animation === "opacitys")
-        return (state.transitionName = "opacitys");
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+			return store.state.themeConfig.themeConfig;
 		});
 		// 获取组件缓存列表(name值)
 		const getKeepAliveNames = computed(() => {
-      return store.state.keepAliveNames;
+			return store.state.keepAliveNames.keepAliveNames;
 		});
 		// 页面加载前
 		onBeforeMount(() => {
-      proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => {
+			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
 				if (route.path !== path) return false;
 				state.refreshRouterViewKey = route.path;
 				nextTick(() => {
@@ -65,7 +47,7 @@ export default defineComponent({
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-      proxy.mittBus.off("onTagsViewRefreshRouterView");
+			proxy.mittBus.off('onTagsViewRefreshRouterView');
 		});
 		return {
 			getThemeConfig,
@@ -76,5 +58,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-  

src/views/limits/backEnd/page/index.vue

@@ -1,23 +1,26 @@
 <template>
 	<div>
-    <el-alert title="温馨提示：1、此页面无法模拟后端控制路由，因为 `gitee` 上所请求的 `json` 菜单数据线上会出现跨域的情况（json地址：
+		<el-alert
+			title="温馨提示：1、此页面无法模拟后端控制路由，因为 `gitee` 上所请求的 `json` 菜单数据线上会出现跨域的情况（json地址：
       https://gitee.com/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json）。2、本地接口请求文件位置：`/src/api/menu/index.ts`。
-      3、拉取代码后本地请求查看后端控制页面路由效果：`/src/utils/themeConfig.ts`中开启（isRequestRoutes 为 true，则开启后端控制路由）。
+      3、拉取代码后本地请求查看后端控制页面路由效果：`/src/store/modules/themeConfig.ts`中开启（isRequestRoutes 为 true，则开启后端控制路由）。
-      4、此页面效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。5、默认启用的是 `前端控制路由`。" type="warning" :closable="false"></el-alert>
+      4、此页面效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。5、默认启用的是 `前端控制路由`。"
-    <el-button type="primary" size="small" class="mt15" icon="el-icon-position" @click="onGoToFrontEndPage">立即前往前端控制路由
+			type="warning"
-    </el-button>
+			:closable="false"
+		></el-alert>
+		<el-button type="primary" size="small" class="mt15" icon="el-icon-position" @click="onGoToFrontEndPage">立即前往前端控制路由 </el-button>
 	</div>
 </template>
 
 <script lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 export default {
-  name: "limitsBackEndEndPage",
+	name: 'limitsBackEndEndPage',
 	setup() {
 		const router = useRouter();
 		// 立即前往前端控制路由
 		const onGoToFrontEndPage = () => {
-      router.push("/limits/frontEnd/page");
+			router.push('/limits/frontEnd/page');
 		};
 		return {
 			onGoToFrontEndPage,

src/views/limits/frontEnd/btn/index.vue

@@ -3,13 +3,12 @@
 		<LimitsFrontEndPage />
 		<!-- 演示1：组件方式 -->
 		<el-card shadow="hover" header="演示1：组件方式" class="mt15">
-      <el-row class="mb10" style="color:#808080;">单个权限验证（:value="xxx"）：</el-row>
+			<el-row class="mb10" style="color: #808080">单个权限验证（:value="xxx"）：</el-row>
 			<div class="flex-warp">
 				<Auth :value="'btn.add'">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="primary" size="small" icon="el-icon-document-add">新增
+							<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auth>
@@ -23,28 +22,25 @@
 				<Auth :value="'btn.del'">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="danger" size="small" icon="el-icon-delete">删除
+							<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auth>
 				<Auth :value="'btn.link'">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="success" size="small" icon="el-icon-link">跳转
+							<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auth>
 			</div>
 
-      <el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
+			<el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
 			<div class="flex-warp">
 				<Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="primary" size="small" icon="el-icon-document-add">新增
+							<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auths>
@@ -58,28 +54,25 @@
 				<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="danger" size="small" icon="el-icon-delete">删除
+							<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auths>
 				<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="success" size="small" icon="el-icon-link">跳转
+							<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</Auths>
 			</div>
 
-      <el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
+			<el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
 			<div class="flex-warp">
 				<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="primary" size="small" icon="el-icon-document-add">新增
+							<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</AuthAll>
@@ -93,16 +86,14 @@
 				<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="danger" size="small" icon="el-icon-delete">删除
+							<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</AuthAll>
 				<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item">
 						<div class="flex-warp-item-box">
-              <el-button type="success" size="small" icon="el-icon-link">跳转
+							<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-              </el-button>
 						</div>
 					</div>
 				</AuthAll>
@@ -111,12 +102,11 @@
 
 		<!-- 演示2：指令方式 -->
 		<el-card shadow="hover" header="演示2：指令方式（页面初始化时执行）" class="mt15">
-      <el-row class="mb10" style="color:#808080;">单个权限验证（v-auth="xxx"）：</el-row>
+			<el-row class="mb10" style="color: #808080">单个权限验证（v-auth="xxx"）：</el-row>
 			<div class="flex-warp">
 				<div class="flex-warp-item" v-auth="'btn.add'">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-document-add">新增
+						<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auth="'btn.edit'">
@@ -126,24 +116,21 @@
 				</div>
 				<div class="flex-warp-item" v-auth="'btn.del'">
 					<div class="flex-warp-item-box">
-            <el-button type="danger" size="small" icon="el-icon-delete">删除
+						<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auth="'btn.link'">
 					<div class="flex-warp-item-box">
-            <el-button type="success" size="small" icon="el-icon-link">跳转
+						<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
 
-      <el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
+			<el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
 			<div class="flex-warp">
 				<div class="flex-warp-item" v-auths="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-document-add">新增
+						<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
@@ -153,24 +140,21 @@
 				</div>
 				<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item-box">
-            <el-button type="danger" size="small" icon="el-icon-delete">删除
+						<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item-box">
-            <el-button type="success" size="small" icon="el-icon-link">跳转
+						<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
 
-      <el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
+			<el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
 			<div class="flex-warp">
 				<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-document-add">新增
+						<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
@@ -180,14 +164,12 @@
 				</div>
 				<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item-box">
-            <el-button type="danger" size="small" icon="el-icon-delete">删除
+						<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
 					<div class="flex-warp-item-box">
-            <el-button type="success" size="small" icon="el-icon-link">跳转
+						<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
@@ -195,12 +177,11 @@
 
 		<!-- 演示3：函数方式 -->
 		<el-card shadow="hover" header="演示3：函数方式（点击按钮查看有无权限，用于判断）" class="mt15">
-      <el-row class="mb10" style="color:#808080;">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
+			<el-row class="mb10" style="color: #808080">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
 			<div class="flex-warp">
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="primary" size="small" icon="el-icon-document-add" @click="onAuthClick">新增
+						<el-button type="primary" size="small" icon="el-icon-document-add" @click="onAuthClick">新增 </el-button>
-            </el-button>
 					</div>
 				</div>
 				<div class="flex-warp-item">
@@ -210,8 +191,7 @@
 				</div>
 				<div class="flex-warp-item">
 					<div class="flex-warp-item-box">
-            <el-button type="danger" size="small" icon="el-icon-delete" @click="onAuthAllClick">删除
+						<el-button type="danger" size="small" icon="el-icon-delete" @click="onAuthAllClick">删除 </el-button>
-            </el-button>
 					</div>
 				</div>
 			</div>
@@ -220,32 +200,30 @@
 </template>
 
 <script lang="ts">
-import { ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus';
-import LimitsFrontEndPage from "/@/views/limits/frontEnd/page/index.vue";
+import LimitsFrontEndPage from '/@/views/limits/frontEnd/page/index.vue';
-import Auth from "/@/components/auth/auth.vue";
+import Auth from '/@/components/auth/auth.vue';
-import Auths from "/@/components/auth/auths.vue";
+import Auths from '/@/components/auth/auths.vue';
-import AuthAll from "/@/components/auth/authAll.vue";
+import AuthAll from '/@/components/auth/authAll.vue';
-import { auth, auths, authAll } from "/@/utils/authFunction.ts";
+import { auth, auths, authAll } from '/@/utils/authFunction.ts';
 export default {
-  name: "limitsFrontEndBtn",
+	name: 'limitsFrontEndBtn',
 	components: { LimitsFrontEndPage, Auth, Auths, AuthAll },
 	setup() {
 		// 单个权限验证
 		const onAuthClick = () => {
-      if (!auth("btn.add")) ElMessage.error("抱歉，您没有权限！");
+			if (!auth('btn.add')) ElMessage.error('抱歉，您没有权限！');
-      else ElMessage.success("恭喜，您有权限！");
+			else ElMessage.success('恭喜，您有权限！');
 		};
 		// 多个权限验证，满足一个则为 true
 		const onAuthsClick = () => {
-      if (!auths(["btn.add", "btn.edit", "btn.del", "btn.link"]))
+			if (!auths(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！');
-        ElMessage.error("抱歉，您没有权限！");
+			else ElMessage.success('恭喜，您有权限！');
-      else ElMessage.success("恭喜，您有权限！");
 		};
 		// 多个权限验证，全部满足则为 true
 		const onAuthAllClick = () => {
-      if (!authAll(["btn.add", "btn.edit", "btn.del", "btn.link"]))
+			if (!authAll(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！');
-        ElMessage.error("抱歉，您没有权限！");
+			else ElMessage.success('恭喜，您有权限！');
-      else ElMessage.success("恭喜，您有权限！");
 		};
 		return {
 			onAuthClick,

src/views/limits/frontEnd/page/index.vue

@@ -1,10 +1,18 @@
 <template>
 	<div>
-    <el-alert title="温馨提示：此权限页面代码及效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。若实际项目中非要实现此用户权限切换功能，
+		<el-alert
+			title="温馨提示：此权限页面代码及效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。若实际项目中非要实现此用户权限切换功能，
       请在切换方法 `onRadioChange` 最后面添加刷新代码 `window.location.reload()`。 请注意：按钮权限页面中的演示2（指令模式）、演示3（函数模式）
-      切换用户时无法动态演示，想要动态演示，请按 `F5` 或者添加 `window.location.reload()`。" type="warning" :closable="false"></el-alert>
+      切换用户时无法动态演示，想要动态演示，请按 `F5` 或者添加 `window.location.reload()`。"
-    <el-alert :title="`当前用户页面权限：[${getAuthPageList}]，当前用户按钮权限：[${getAuthBtnList}]`" type="success" :closable="false"
+			type="warning"
-      class="mt15"></el-alert>
+			:closable="false"
+		></el-alert>
+		<el-alert
+			:title="`当前用户页面权限：[${getAuthPageList}]，当前用户按钮权限：[${getAuthBtnList}]`"
+			type="success"
+			:closable="false"
+			class="mt15"
+		></el-alert>
 		<el-card shadow="hover" header="切换用户演示，前端控制不同用户显示不同页面、按钮权限" class="mt15">
 			<el-radio-group v-model="userAuth" size="small" @change="onRadioChange">
 				<el-radio-button label="admin"></el-radio-button>
@@ -15,36 +23,29 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted } from "vue";
+import { toRefs, reactive, computed, onMounted } from 'vue';
-import { useRouter } from "vue-router";
+import { useStore } from '/@/store/index.ts';
-import { useStore } from "/@/store/index.ts";
+import { resetRoute, setAddRoute, setFilterMenu, setCacheTagsViewRoutes } from '/@/router/index.ts';
-import {
+import { setSession } from '/@/utils/storage.ts';
-  resetRoute,
-  setAddRoute,
-  setFilterMenu,
-  setCacheTagsViewRoutes,
-} from "/@/router/index.ts";
-import { setSession } from "/@/utils/storage.ts";
 export default {
-  name: "limitsFrontEndPage",
+	name: 'limitsFrontEndPage',
 	setup() {
 		const store = useStore();
-    const router = useRouter();
 		const state = reactive({
-      val: "",
+			val: '',
-      userAuth: "",
+			userAuth: '',
 		});
 		// 获取用户页面权限信息
 		const getAuthPageList = computed(() => {
-      return store.state.userInfos.authPageList;
+			return store.state.userInfos.userInfos.authPageList;
 		});
 		// 获取用户按钮权限信息
 		const getAuthBtnList = computed(() => {
-      return store.state.userInfos.authBtnList;
+			return store.state.userInfos.userInfos.authBtnList;
 		});
 		// 初始化用户权限
 		const initUserAuth = () => {
-      state.userAuth = store.state.userInfos.authPageList[0];
+			state.userAuth = store.state.userInfos.userInfos.authPageList[0];
 		};
 		// 重新执行添加动态路由、过滤权限菜单、缓存等方法
 		const initAllFun = () => {
@@ -58,19 +59,14 @@ export default {
 			let defaultAuthPageList: Array<string> = [];
 			let defaultAuthBtnList: Array<string> = [];
 			// admin 页面权限标识，对应路由 meta.auth
-      let adminAuthPageList: Array<string> = ["admin"];
+			let adminAuthPageList: Array<string> = ['admin'];
 			// admin 按钮权限标识
-      let adminAuthBtnList: Array<string> = [
+			let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
-        "btn.add",
-        "btn.del",
-        "btn.edit",
-        "btn.link",
-      ];
 			// test 页面权限标识，对应路由 meta.auth
-      let testAuthPageList: Array<string> = ["test"];
+			let testAuthPageList: Array<string> = ['test'];
 			// test 按钮权限标识
-      let testAuthBtnList: Array<string> = ["btn.add", "btn.link"];
+			let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
-      if (state.userAuth === "admin") {
+			if (state.userAuth === 'admin') {
 				defaultAuthPageList = adminAuthPageList;
 				defaultAuthBtnList = adminAuthBtnList;
 			} else {
@@ -80,15 +76,15 @@ export default {
 			const userInfos = {
 				userName: state.userAuth,
 				photo:
-          state.userAuth === "admin"
+					state.userAuth === 'admin'
-            ? "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
+						? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
-            : "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg",
+						: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
 				time: new Date().getTime(),
 				authPageList: defaultAuthPageList,
 				authBtnList: defaultAuthBtnList,
 			};
-      setSession("userInfo", userInfos);
+			setSession('userInfo', userInfos);
-      store.dispatch("setUserInfos", userInfos); // 请注意执行顺序(存储用户信息vuex)
+			store.dispatch('userInfos/setUserInfos', userInfos); // 请注意执行顺序(存储用户信息vuex)
 			initAllFun(); // 请注意执行顺序
 		};
 		// 页面加载时

src/views/login/component/account.vue

@@ -1,20 +1,32 @@
 <template>
 	<el-form class="login-content-form">
 		<el-form-item>
-      <el-input type="text" placeholder="用户名 admin 或不输均为 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
+			<el-input
-        clearable autocomplete="off">
+				type="text"
+				placeholder="用户名 admin 或不输均为 test"
+				prefix-icon="el-icon-user"
+				v-model="ruleForm.userName"
+				clearable
+				autocomplete="off"
+			>
 			</el-input>
 		</el-form-item>
 		<el-form-item>
-      <el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
+			<el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password" autocomplete="off" show-password>
-        autocomplete="off" show-password>
 			</el-input>
 		</el-form-item>
 		<el-form-item>
 			<el-row :gutter="15">
 				<el-col :span="16">
-          <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
+					<el-input
-            v-model="ruleForm.code" clearable autocomplete="off"></el-input>
+						type="text"
+						maxlength="4"
+						placeholder="请输入验证码"
+						prefix-icon="el-icon-position"
+						v-model="ruleForm.code"
+						clearable
+						autocomplete="off"
+					></el-input>
 				</el-col>
 				<el-col :span="8">
 					<div class="login-content-code">
@@ -32,31 +44,23 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from "vue";
+import { toRefs, reactive, defineComponent, computed } from 'vue';
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
-import { ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus';
-import {
+import { setAddRoute, setFilterMenu, setCacheTagsViewRoutes, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
-  setAddRoute,
+import { useStore } from '/@/store/index.ts';
-  setFilterMenu,
+import { setSession } from '/@/utils/storage.ts';
-  setCacheTagsViewRoutes,
+import { formatAxis } from '/@/utils/formatTime.ts';
-  getBackEndControlRoutes,
-  setBackEndControlRoutesFun,
-} from "/@/router/index.ts";
-import { useStore } from "/@/store/index.ts";
-import { setSession } from "/@/utils/storage.ts";
-import { formatAxis } from "/@/utils/formatTime";
-
-import themeConfig from "/@/utils/themeConfig.ts";
 export default defineComponent({
-  name: "login",
+	name: 'login',
 	setup() {
 		const store = useStore();
 		const router = useRouter();
 		const state = reactive({
 			ruleForm: {
-        userName: "admin",
+				userName: 'admin',
-        password: "123456",
+				password: '123456',
-        code: "1234",
+				code: '1234',
 			},
 		});
 		// 时间获取
@@ -74,19 +78,14 @@ export default defineComponent({
 			let defaultAuthPageList: Array<string> = [];
 			let defaultAuthBtnList: Array<string> = [];
 			// admin 页面权限标识，对应路由 meta.auth
-      let adminAuthPageList: Array<string> = ["admin"];
+			let adminAuthPageList: Array<string> = ['admin'];
 			// admin 按钮权限标识
-      let adminAuthBtnList: Array<string> = [
+			let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
-        "btn.add",
-        "btn.del",
-        "btn.edit",
-        "btn.link",
-      ];
 			// test 页面权限标识，对应路由 meta.auth
-      let testAuthPageList: Array<string> = ["test"];
+			let testAuthPageList: Array<string> = ['test'];
 			// test 按钮权限标识
-      let testAuthBtnList: Array<string> = ["btn.add", "btn.link"];
+			let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
-      if (state.ruleForm.userName === "admin") {
+			if (state.ruleForm.userName === 'admin') {
 				defaultAuthPageList = adminAuthPageList;
 				defaultAuthBtnList = adminAuthBtnList;
 			} else {
@@ -96,28 +95,28 @@ export default defineComponent({
 			const userInfos = {
 				userName: state.ruleForm.userName,
 				photo:
-          state.ruleForm.userName === "admin"
+					state.ruleForm.userName === 'admin'
-            ? "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
+						? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
-            : "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg",
+						: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
 				time: new Date().getTime(),
 				authPageList: defaultAuthPageList,
 				authBtnList: defaultAuthBtnList,
 			};
 			// 存储 token 到浏览器缓存
-      setSession("token", Math.random().toString(36).substr(0));
+			setSession('token', Math.random().toString(36).substr(0));
 			// 存储用户信息到浏览器缓存
-      setSession("userInfo", userInfos);
+			setSession('userInfo', userInfos);
 			// 1、请注意执行顺序(存储用户信息到vuex)
-      store.dispatch("setUserInfos", userInfos);
+			store.dispatch('userInfos/setUserInfos', userInfos);
 			// 前端控制路由，2、请注意执行顺序
-      if (!store.state.themeConfig.isRequestRoutes) {
+			if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
 				initAllFun();
 				signInSuccess();
 			}
 			// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
 			else {
-        getBackEndControlRoutes((res) => {
+				getBackEndControlRoutes((res: any) => {
-          setBackEndControlRoutesFun(res, (cb) => {
+					setBackEndControlRoutesFun(res, () => {
 						signInSuccess();
 					});
 				});
@@ -128,7 +127,7 @@ export default defineComponent({
 			// 初始化登录成功时间问候语
 			let currentTimeInfo = currentTime.value;
 			// 登录成功，跳到转首页
-      router.push("/");
+			router.push('/');
 			// 登录成功提示
 			setTimeout(() => {
 				ElMessage.success(`${currentTimeInfo}，欢迎回来！`);

src/views/login/component/mobile.vue

@@ -1,15 +1,21 @@
 <template>
 	<el-form class="login-content-form">
 		<el-form-item>
-      <el-input type="text" placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="ruleForm.userName" clearable
+			<el-input type="text" placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="ruleForm.userName" clearable autocomplete="off">
-        autocomplete="off">
 			</el-input>
 		</el-form-item>
 		<el-form-item>
 			<el-row :gutter="15">
 				<el-col :span="16">
-          <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
+					<el-input
-            v-model="ruleForm.code" clearable autocomplete="off"></el-input>
+						type="text"
+						maxlength="4"
+						placeholder="请输入验证码"
+						prefix-icon="el-icon-position"
+						v-model="ruleForm.code"
+						clearable
+						autocomplete="off"
+					></el-input>
 				</el-col>
 				<el-col :span="8">
 					<el-button class="login-content-form-btn">获取验证码</el-button>
@@ -25,14 +31,14 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, defineComponent } from "vue";
+import { toRefs, reactive, defineComponent } from 'vue';
 export default defineComponent({
-  name: "login",
+	name: 'login',
 	setup() {
 		const state = reactive({
 			ruleForm: {
-        userName: "",
+				userName: '',
-        code: "",
+				code: '',
 			},
 		});
 		return {

src/views/login/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="login-container">
 		<div class="login-logo">
-      <span>{{themeConfig.globalViceTitle}}</span>
+			<span>{{ getThemeConfig.globalViceTitle }}</span>
 		</div>
 		<div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
 			<div class="login-content-main">
-        <h4 class="login-content-title">{{themeConfig.globalTitle}}后台模板</h4>
+				<h4 class="login-content-title">{{ getThemeConfig.globalTitle }}后台模板</h4>
 				<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
 					<el-tab-pane label="账号密码登录" name="account">
 						<transition name="el-zoom-in-center">
@@ -32,25 +32,31 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive, computed } from 'vue';
-import Account from "/@/views/login/component/account.vue";
+import Account from '/@/views/login/component/account.vue';
-import Mobile from "/@/views/login/component/mobile.vue";
+import Mobile from '/@/views/login/component/mobile.vue';
-import themeConfig from "/@/utils/themeConfig.ts";
+import { useStore } from '/@/store/index.ts';
 
 export default {
-  name: "login",
+	name: 'login',
 	components: { Account, Mobile },
 	setup() {
+		const store = useStore();
 		const state = reactive({
-      tabsActiveName: "account",
+			tabsActiveName: 'account',
 			isTabPaneShow: false,
-      themeConfig,
 		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return store.state.themeConfig.themeConfig;
+		});
+		// 切换密码、手机登录
 		const onTabsClick = () => {
 			state.isTabPaneShow = !state.isTabPaneShow;
 		};
 		return {
 			onTabsClick,
+			getThemeConfig,
 			...toRefs(state),
 		};
 	},
@@ -61,8 +67,7 @@ export default {
 .login-container {
 	width: 100%;
 	height: 100%;
-  background: url("https://gitee.com/lyt-top/vue-next-admin-images/raw/master/login/bg-login.png")
+	background: url('https://gitee.com/lyt-top/vue-next-admin-images/raw/master/login/bg-login.png') no-repeat;
-    no-repeat;
 	background-size: 100% 100%;
 	.login-logo {
 		position: absolute;

src/views/menu/menu1/menu11/index.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive } from 'vue';
 export default {
-  name: "menu11",
+	name: 'menu11',
 	setup() {
 		const state = reactive({
-      val: "",
+			val: '',
 		});
 		return {
 			...toRefs(state),

src/views/menu/menu1/menu12/menu121/index.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive } from 'vue';
 export default {
-  name: "menu121",
+	name: 'menu121',
 	setup() {
 		const state = reactive({
-      val: "",
+			val: '',
 		});
 		return {
 			...toRefs(state),

src/views/menu/menu1/menu12/menu122/index.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { toRefs, reactive } from 'vue';
 export default {
-  name: "menu122",
+	name: 'menu122',
 	setup() {
 		const state = reactive({
-      val: "",
+			val: '',
 		});
 		return {
 			...toRefs(state),

src/views/menu/menu1/menu13/index.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onActivated, onMounted } from "vue";
+import { toRefs, reactive, onActivated, onMounted } from 'vue';
 export default {
-  name: "menu13",
+	name: 'menu13',
 	setup() {
 		const state = reactive({
-      val: "",
+			val: '',
 		});
 		onMounted(() => {
 			console.log(2222);