'admin-23.04.12:同步master分支v2.4.33版本内容'

Signed-off-by: lyt-Top <1105290566@qq.com>

.env

@@ -4,7 +4,7 @@ VITE_PORT = 8888
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false
 
-# 打包是否开启 cdn（源文件 utils/build.js），可自行修改
+# 打包是否开启 cdn（源文件 utils/build.ts），可自行修改
 VITE_OPEN_CDN = false
 
 # public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可

CHANGELOG.md

@@ -1,73 +1,94 @@
-# <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin-template-js（不带国际化） 更新日志</a>
+# <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin-template（不带国际化） 更新日志</a>
 
-🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.33 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+🎉🎉🔥 `vue-next-admin-template` 基于 （vue-next-admin-v2.4.33 版本） vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
 ## 2.4.33
 
 `2023.04.12`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.33 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.33 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.32
 
 `2023.03.26`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.32 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.32 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.31
 
 `2023.03.10`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.31 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.31 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.3
 
-`2023.02.23`
+`2023.02.22`
 
 🚩🚩🚩 感谢 [驰骋工作流引擎-表单引擎-低代码开发平台](http://www.ccflow.org/) 赞助商的赞助。驰骋公司为社会提供流程引擎+表单引擎+低代码开发平台一体的开源软件解决方案，欢迎广大开发者前去体验！
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.3 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.3 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.21
 
 `2022.12.12`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.21 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.21 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.2
 
 `2022.12.10`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.2 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.2 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.4.1
 
-`2022.12.01`
+`2022.11.30`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.1 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.4.1 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.3.0
 
 `2022.11.16`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.3.0 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.3.0 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.2.0
 
 `2022.07.11`
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.2.0 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.2.0 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.1.1
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.1.1 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.1.1 版本内容，具体查看 [master CHANGELOG.md](https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md)
 
 ## 2.0.2
 
-- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.0.2 版本内容，具体查看 master 分支 CHANGELOG.md
+- 🎉 同步 master 分支 v2.0.2 版本内容，具体查看 master CHANGELOG.md
+
+## 0.2.2
+
+`2021.12.21`
+
+- 🎉 同步 master 分支 v1.2.2 版本内容，具体查看 master CHANGELOG.md
+
+## 0.2.1
+
+`2021.12.12`
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 浏览器标题问题
+- 🐞 修复 element plus svg 图标引入
+- 🐞 修复 默认显示英文问题，改成默认显示中文
+
+## 0.2.0
+
+`2021.12.04`
+
+- 🎉 同步 master 分支 v1.2.0 版本内容，具体查看 master CHANGELOG.md
 
 ## 0.1.0
 
-`2021.12.27`
+`2021.10.17`
 
-- 🎉 新增 vue-next-admin-template 基础版本（不带国际化），切换 `vue-next-admin-template-js` 分支
+- 🎉 新增 vue-next-admin-template 基础版本（不带国际化），切换 `vue-next-admin-template` 分支

README.md

@@ -26,7 +26,7 @@
 	<img src="./src/assets/ccflowRightNextAdmin.png" width="50%" height="70px">
 </a>
 
-#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.33 版，setup 语法糖）
+#### 🌈 介绍 基础版 ts（不带国际化）
 
 基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
 
@@ -68,7 +68,7 @@ git clone https://gitee.com/lyt-top/vue-next-admin.git
 cd vue-next-admin
 
 # 切换分支
-git checkout vue-next-admin-template-js
+git checkout vue-next-admin-template
 
 # 安装依赖
 cnpm install

index.html

@@ -26,6 +26,6 @@
 				s.parentNode.insertBefore(hm, s);
 			})();
 		</script>
-		<script type="module" src="/src/main.js"></script>
+		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>

jsconfig.json

@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"module": "esnext",
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-		"jsx": "preserve",
-		"isolatedModules": true,
-		"strict": true,
-		"allowSyntheticDefaultImports": true,
-		"esModuleInterop": true,
-		"experimentalDecorators": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node",
-		"baseUrl": ".",
-		"types": ["vite/client"],
-		"paths": {
-			"/@/*": ["src/*"]
-		}
-	}
-}

package.json

@@ -1,7 +1,7 @@
 {
-	"name": "vue-next-admin-template-js",
+	"name": "vue-next-admin-template",
 	"version": "2.4.33",
-	"description": "vue3 vite next admin template js setup",
+	"description": "vue3 vite next admin template",
 	"author": "lyt_20201208",
 	"license": "MIT",
 	"scripts": {
@@ -28,12 +28,17 @@
 		"vue-router": "^4.1.6"
 	},
 	"devDependencies": {
+		"@types/node": "^18.15.11",
+		"@types/nprogress": "^0.2.0",
+		"@typescript-eslint/eslint-plugin": "^5.58.0",
+		"@typescript-eslint/parser": "^5.58.0",
 		"@vitejs/plugin-vue": "^4.1.0",
 		"@vue/compiler-sfc": "^3.2.47",
 		"eslint": "^8.38.0",
 		"eslint-plugin-vue": "^9.10.0",
 		"prettier": "^2.8.7",
-		"sass": "^1.62.0",
+		"sass": "^1.61.0",
+		"typescript": "^5.0.4",
 		"vite": "^4.2.1",
 		"vite-plugin-cdn-import": "^0.3.5",
 		"vite-plugin-compression": "^0.5.1",
@@ -57,7 +62,6 @@
 		"vue3",
 		"vuejs/vue-next",
 		"vuejs/vue-next-template",
-		"vuejs/vue-next-template-js",
 		"element-ui",
 		"element-plus",
 		"vue-next-admin",

src/App.vue

@@ -9,7 +9,7 @@
 	</el-config-provider>
 </template>
 
-<script setup name="app">
+<script setup lang="ts" name="app">
 import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
@@ -18,8 +18,8 @@ import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import { Local, Session } from '/@/utils/storage';
+import mittBus from '/@/utils/mitt';
 import setIntroduction from '/@/utils/setIconfont';
-import mittBus from './utils/mitt';
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
@@ -45,6 +45,7 @@ const setLockScreen = computed(() => {
 const getVersion = computed(() => {
 	let isVersion = false;
 	if (route.path !== '/login') {
+		// @ts-ignore
 		if ((Local.get('version') && Local.get('version') !== __NEXT_VERSION__) || !Local.get('version')) isVersion = true;
 	}
 	return isVersion;
@@ -63,7 +64,7 @@ onBeforeMount(() => {
 // 页面加载时
 onMounted(() => {
 	nextTick(() => {
-		// 监听布局配置弹窗点击打开
+		// 监听布局配'置弹窗点击打开
 		mittBus.on('openSetingsDrawer', () => {
 			setingsRef.value.openDrawer();
 		});

src/api/login/index.ts

@@ -9,14 +9,14 @@ import request from '/@/utils/request';
  */
 export function useLoginApi() {
 	return {
-		signIn: (data) => {
+		signIn: (data: object) => {
 			return request({
 				url: '/user/signIn',
 				method: 'post',
 				data,
 			});
 		},
-		signOut: (data) => {
+		signOut: (data: object) => {
 			return request({
 				url: '/user/signOut',
 				method: 'post',

src/api/menu/index.ts

@@ -12,14 +12,14 @@ import request from '/@/utils/request';
  */
 export function useMenuApi() {
 	return {
-		getAdminMenu: (params) => {
+		getAdminMenu: (params?: object) => {
 			return request({
 				url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json',
 				method: 'get',
 				params,
 			});
 		},
-		getTestMenu: (params) => {
+		getTestMenu: (params?: object) => {
 			return request({
 				url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/testMenu.json',
 				method: 'get',

src/components/iconSelector/index.vue

@@ -49,8 +49,9 @@
 	</div>
 </template>
 
-<script setup name="iconSelector">
+<script setup lang="ts" name="iconSelector">
 import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
 import initIconfont from '/@/utils/getStyleSheets';
 import '/@/theme/iconSelector.scss';
 
@@ -128,7 +129,7 @@ const onIconFocus = () => {
 const onIconBlur = () => {
 	const list = fontIconTabNameList();
 	setTimeout(() => {
-		const icon = list.filter((icon) => icon === state.fontIconSearch);
+		const icon = list.filter((icon: string) => icon === state.fontIconSearch);
 		if (icon.length <= 0) state.fontIconSearch = '';
 	}, 300);
 };
@@ -137,13 +138,13 @@ const fontIconSheetsFilterList = computed(() => {
 	const list = fontIconTabNameList();
 	if (!state.fontIconSearch) return list;
 	let search = state.fontIconSearch.trim().toLowerCase();
-	return list.filter((item) => {
+	return list.filter((item: string) => {
 		if (item.toLowerCase().indexOf(search) !== -1) return item;
 	});
 });
 // 根据 tab name 类型设置图标
 const fontIconTabNameList = () => {
-	let iconList = [];
+	let iconList: any = [];
 	if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
 	else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
 	else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
@@ -151,39 +152,39 @@ const fontIconTabNameList = () => {
 };
 // 处理 icon 双向绑定数值回显
 const initModeValueEcho = () => {
-	if (props.modelValue === '') return (state.fontIconPlaceholder = props.placeholder);
-	state.fontIconPlaceholder = props.modelValue;
-	state.fontIconPrefix = props.modelValue;
+	if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
+	(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
+	(<string | undefined>state.fontIconPrefix) = props.modelValue;
 };
 // 处理 icon 类型，用于回显时，tab 高亮与初始化数据
 const initFontIconName = () => {
 	let name = 'ali';
-	if (props.modelValue.indexOf('iconfont') > -1) name = 'ali';
-	else if (props.modelValue.indexOf('ele-') > -1) name = 'ele';
-	else if (props.modelValue.indexOf('fa') > -1) name = 'awe';
+	if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
+	else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
+	else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
 	// 初始化 tab 高亮回显
 	state.fontIconTabActive = name;
 	return name;
 };
 // 初始化数据
-const initFontIconData = async (name) => {
+const initFontIconData = async (name: string) => {
 	if (name === 'ali') {
 		// 阿里字体图标使用 `iconfont xxx`
 		if (state.fontIconList.ali.length > 0) return;
-		await initIconfont.ali().then((res) => {
-			state.fontIconList.ali = res.map((i) => `iconfont ${i}`);
+		await initIconfont.ali().then((res: any) => {
+			state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
 		});
 	} else if (name === 'ele') {
 		// element plus 图标
 		if (state.fontIconList.ele.length > 0) return;
-		await initIconfont.ele().then((res) => {
+		await initIconfont.ele().then((res: any) => {
 			state.fontIconList.ele = res;
 		});
 	} else if (name === 'awe') {
 		// fontawesome字体图标使用 `fa xxx`
 		if (state.fontIconList.awe.length > 0) return;
-		await initIconfont.awe().then((res) => {
-			state.fontIconList.awe = res.map((i) => `fa ${i}`);
+		await initIconfont.awe().then((res: any) => {
+			state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
 		});
 	}
 	// 初始化 input 的 placeholder
@@ -193,12 +194,12 @@ const initFontIconData = async (name) => {
 	initModeValueEcho();
 };
 // 图标点击切换
-const onIconClick = (pane) => {
-	initFontIconData(pane.paneName);
+const onIconClick = (pane: TabsPaneContext) => {
+	initFontIconData(pane.paneName as string);
 	inputWidthRef.value.focus();
 };
 // 获取当前点击的 icon 图标
-const onColClick = (v) => {
+const onColClick = (v: string) => {
 	state.fontIconPlaceholder = v;
 	state.fontIconPrefix = v;
 	emit('get', state.fontIconPrefix);

src/components/iconSelector/list.vue

@@ -13,7 +13,7 @@
 	</div>
 </template>
 
-<script setup name="iconSelectorList">
+<script setup lang="ts" name="iconSelectorList">
 // 定义父组件传过来的值
 const props = defineProps({
 	// 图标列表数据
@@ -37,7 +37,7 @@ const props = defineProps({
 const emit = defineEmits(['get-icon']);
 
 // 当前 icon 图标点击时
-const onColClick = (v) => {
+const onColClick = (v: unknown | string) => {
 	emit('get-icon', v);
 };
 </script>

src/components/svgIcon/index.vue

@@ -8,7 +8,7 @@
 	<i v-else :class="getIconName" :style="setIconSvgStyle" />
 </template>
 
-<script setup name="svgIcon">
+<script setup lang="ts" name="svgIcon">
 import { computed } from 'vue';
 
 // 定义父组件传过来的值
@@ -55,8 +55,8 @@ const setIconImgOutStyle = computed(() => {
 // 设置图片样式
 // https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
 const setIconSvgInsStyle = computed(() => {
-	const filterStyle = [];
-	const compatibles = ['-webkit', '-ms', '-o', '-moz'];
+	const filterStyle: string[] = [];
+	const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
 	compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
 	return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
 });

src/directive/authDirective.ts

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

src/directive/customDirective.ts

@@ -1,21 +1,23 @@
+import type { App } from 'vue';
+
 /**
  * 按钮波浪指令
  * @directive 默认方式：v-waves，如 `<div v-waves></div>`
  * @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
  */
-export function wavesDirective(app) {
+export function wavesDirective(app: App) {
 	app.directive('waves', {
 		mounted(el, binding) {
 			el.classList.add('waves-effect');
 			binding.value && el.classList.add(`waves-${binding.value}`);
-			function setConvertStyle(obj) {
-				let style = '';
+			function setConvertStyle(obj: { [key: string]: unknown }) {
+				let style: string = '';
 				for (let i in obj) {
 					if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
 				}
 				return style;
 			}
-			function onCurrentClick(e) {
+			function onCurrentClick(e: { [key: string]: unknown }) {
 				let elDiv = document.createElement('div');
 				elDiv.classList.add('waves-ripple');
 				el.appendChild(elDiv);
@@ -58,17 +60,17 @@ export function wavesDirective(app) {
  * @link 注意：https://github.com/element-plus/element-plus/issues/522
  * @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242
  */
-export function dragDirective(app) {
+export function dragDirective(app: App) {
 	app.directive('drag', {
 		mounted(el, binding) {
 			if (!binding.value) return false;
 
-			const dragDom = document.querySelector(binding.value[0]);
-			const dragHeader = document.querySelector(binding.value[1]);
+			const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
+			const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
 
 			dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
 
-			function down(e, type) {
+			function down(e: any, type: string) {
 				// 鼠标按下，计算当前元素距离可视区的距离
 				const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
 				const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
@@ -90,8 +92,8 @@ export function dragDirective(app) {
 				const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
 
 				// 获取到的值带px 正则匹配替换
-				let styL = getComputedStyle(dragDom).left;
-				let styT = getComputedStyle(dragDom).top;
+				let styL: any = getComputedStyle(dragDom).left;
+				let styT: any = getComputedStyle(dragDom).top;
 
 				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
 				if (styL.includes('%')) {
@@ -114,7 +116,7 @@ export function dragDirective(app) {
 				};
 			}
 
-			function move(e, type, obj) {
+			function move(e: any, type: string, obj: any) {
 				let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
 
 				// 通过事件委托，计算移动的距离

src/directive/index.ts

@@ -1,4 +1,5 @@
-import { authDirective } from './authDirective';
+import type { App } from 'vue';
+import { authDirective } from '/@/directive/authDirective';
 import { wavesDirective, dragDirective } from '/@/directive/customDirective';
 
 /**
@@ -7,7 +8,7 @@ import { wavesDirective, dragDirective } from '/@/directive/customDirective';
  * @methods wavesDirective 按钮波浪指令，用法：v-waves
  * @methods dragDirective 自定义拖动指令，用法：v-drag
  */
-export function directive(app) {
+export function directive(app: App) {
 	// 用户权限指令
 	authDirective(app);
 	// 按钮波浪指令

src/layout/component/aside.vue

@@ -9,7 +9,7 @@
 	</div>
 </template>
 
-<script setup name="layoutAside">
+<script setup lang="ts" name="layoutAside">
 import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
@@ -29,7 +29,7 @@ const storesTagsViewRoutes = useTagsViewRoutes();
 const { routesList } = storeToRefs(stores);
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-const state = reactive({
+const state = reactive<AsideState>({
 	menuList: [],
 	clientWidth: 0,
 });
@@ -43,7 +43,7 @@ const setCollapseStyle = computed(() => {
 	if (state.clientWidth <= 1000) {
 		if (isCollapse) {
 			document.body.setAttribute('class', 'el-popup-parent--hidden');
-			const asideEle = document.querySelector('.layout-container');
+			const asideEle = document.querySelector('.layout-container') as HTMLElement;
 			const modeDivs = document.createElement('div');
 			modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
 			asideEle.appendChild(modeDivs);
@@ -88,21 +88,21 @@ const setFilterRoutes = () => {
 	state.menuList = filterRoutesFun(routesList.value);
 };
 // 路由过滤递归函数
-const filterRoutesFun = (arr) => {
+const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
 	return arr
-		.filter((item) => !item.meta?.isHide)
-		.map((item) => {
+		.filter((item: T) => !item.meta?.isHide)
+		.map((item: T) => {
 			item = Object.assign({}, item);
 			if (item.children) item.children = filterRoutesFun(item.children);
 			return item;
 		});
 };
 // 设置菜单导航是否固定（移动端）
-const initMenuFixed = (clientWidth) => {
+const initMenuFixed = (clientWidth: number) => {
 	state.clientWidth = clientWidth;
 };
 // 鼠标移入、移出
-const onAsideEnterLeave = (bool) => {
+const onAsideEnterLeave = (bool: Boolean) => {
 	const { layout, isColumnsMenuHoverPreload } = themeConfig.value;
 	if (layout !== 'columns') return false;
 	if (!bool) mittBus.emit('restoreDefault');
@@ -115,11 +115,11 @@ onBeforeMount(() => {
 	setFilterRoutes();
 	// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
 	// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
-	mittBus.on('setSendColumnsChildren', (res) => {
+	mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
 		state.menuList = res.children;
 	});
 	// 开启经典布局分割菜单时，设置菜单数据
-	mittBus.on('setSendClassicChildren', (res) => {
+	mittBus.on('setSendClassicChildren', (res: MittMenu) => {
 		let { layout, isClassicSplitMenu } = themeConfig.value;
 		if (layout === 'classic' && isClassicSplitMenu) {
 			// 经典布局分割菜单只要一项子级时，收起左侧导航菜单
@@ -133,7 +133,7 @@ onBeforeMount(() => {
 		setFilterRoutes();
 	});
 	// 监听窗口大小改变时(适配移动端)
-	mittBus.on('layoutMobileResize', (res) => {
+	mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
 		initMenuFixed(res.clientWidth);
 		closeLayoutAsideMobileMode();
 	});

src/layout/component/columnsAside.vue

@@ -44,16 +44,16 @@
 	</div>
 </template>
 
-<script setup name="layoutColumnsAside">
+<script setup lang="ts" name="layoutColumnsAside">
 import { reactive, ref, onMounted, nextTick, watch, onUnmounted } from 'vue';
-import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import mittBus from '/@/utils/mitt';
 
 // 定义变量内容
-const columnsAsideOffsetTopRefs = ref([]);
+const columnsAsideOffsetTopRefs = ref<RefType>([]);
 const columnsAsideActiveRef = ref();
 const stores = useRoutesList();
 const storesThemeConfig = useThemeConfig();
@@ -61,7 +61,7 @@ const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
 const router = useRouter();
-const state = reactive({
+const state = reactive<ColumnsAsideState>({
 	columnsAsideList: [],
 	liIndex: 0,
 	liOldIndex: null,
@@ -72,14 +72,14 @@ const state = reactive({
 });
 
 // 设置菜单高亮位置移动
-const setColumnsAsideMove = (k) => {
+const setColumnsAsideMove = (k: number) => {
 	if (k === undefined) return false;
 	state.liIndex = k;
 	columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
 };
 // 菜单高亮点击事件
-const onColumnsAsideMenuClick = (v) => {
-	const { path, redirect } = v;
+const onColumnsAsideMenuClick = (v: RouteItem) => {
+	let { path, redirect } = v;
 	if (redirect) {
 		onColumnsAsideDown(v.k);
 		if (route.path.startsWith(redirect)) mittBus.emit('setSendColumnsChildren', setSendChildren(redirect));
@@ -89,7 +89,7 @@ const onColumnsAsideMenuClick = (v) => {
 			router.push(path);
 		} else {
 			// 显示子级菜单
-			const resData = setSendChildren(path);
+			const resData: MittMenu = setSendChildren(path);
 			if (Object.keys(resData).length <= 0) return false;
 			onColumnsAsideDown(resData.item?.k);
 			mittBus.emit('setSendColumnsChildren', resData);
@@ -101,7 +101,7 @@ const onColumnsAsideMenuClick = (v) => {
 	else if (v.children.length > 1) themeConfig.value.isCollapse = false;
 };
 // 鼠标移入时，显示当前的子级菜单
-const onColumnsAsideMenuMouseenter = (v, k) => {
+const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
 	if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
 	let { path } = v;
 	state.liOldPath = path;
@@ -121,15 +121,15 @@ const onColumnsAsideMenuMouseleave = async () => {
 	}, 100);
 };
 // 设置高亮动态位置
-const onColumnsAsideDown = (k) => {
+const onColumnsAsideDown = (k: number) => {
 	nextTick(() => {
 		setColumnsAsideMove(k);
 	});
 };
 // 设置只有一个路由时设置自动收起菜单
 // https://gitee.com/lyt-top/vue-next-admin/issues/I6UW2I
-const setMenuAutoCollaps = (path) => {
-	const resData = setSendChildren(path);
+const setMenuAutoCollaps = (path: string) => {
+	const resData: MittMenu = setSendChildren(path);
 	// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
 	resData.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
 	return resData;
@@ -137,7 +137,7 @@ const setMenuAutoCollaps = (path) => {
 // 设置/过滤路由（非静态路由/是否显示在菜单中）
 const setFilterRoutes = () => {
 	state.columnsAsideList = filterRoutesFun(routesList.value);
-	const resData = setMenuAutoCollaps(route.path);
+	const resData: MittMenu = setMenuAutoCollaps(route.path);
 	onColumnsAsideDown(resData.item?.k);
 	// 延迟 500 毫秒更新，防止 aside.vue 组件 setSendColumnsChildren 还没有注册
 	setTimeout(() => {
@@ -145,10 +145,10 @@ const setFilterRoutes = () => {
 	}, 500);
 };
 // 传送当前子级数据到菜单中
-const setSendChildren = (path) => {
+const setSendChildren = (path: string) => {
 	const currentPathSplit = path.split('/');
-	let currentData = { children: [] };
-	state.columnsAsideList.map((v, k) => {
+	let currentData: MittMenu = { children: [] };
+	state.columnsAsideList.map((v: RouteItem, k: number) => {
 		if (v.path === `/${currentPathSplit[1]}`) {
 			v['k'] = k;
 			currentData['item'] = { ...v };
@@ -159,21 +159,21 @@ const setSendChildren = (path) => {
 	return currentData;
 };
 // 路由过滤递归函数
-const filterRoutesFun = (arr) => {
+const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
 	return arr
-		.filter((item) => !item.meta?.isHide)
-		.map((item) => {
+		.filter((item: T) => !item.meta?.isHide)
+		.map((item: T) => {
 			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.shift();
 	const routeFirst = `/${state.routeSplit[0]}`;
-	const currentSplitRoute = state.columnsAsideList.find((v) => v.path === routeFirst);
+	const currentSplitRoute = state.columnsAsideList.find((v: RouteItem) => v.path === routeFirst);
 	if (!currentSplitRoute) return false;
 	// 延迟拿值，防止取不到
 	setTimeout(() => {

src/layout/component/header.vue

@@ -4,7 +4,7 @@
 	</el-header>
 </template>
 
-<script setup name="layoutHeader">
+<script setup lang="ts" name="layoutHeader">
 import { defineAsyncComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

src/layout/component/main.vue

@@ -13,7 +13,7 @@
 	</el-main>
 </template>
 
-<script setup name="layoutMain">
+<script setup lang="ts" name="layoutMain">
 import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';

src/layout/footer/index.vue

@@ -7,7 +7,7 @@
 	</div>
 </template>
 
-<script setup name="layoutFooter">
+<script setup lang="ts" name="layoutFooter">
 // 此处需有内容（注释也得），否则缓存将失败
 </script>
 

src/layout/index.vue

@@ -2,7 +2,7 @@
 	<component :is="layouts[themeConfig.layout]" />
 </template>
 
-<script setup name="layout">
+<script setup lang="ts" name="layout">
 import { onBeforeMount, onUnmounted, defineAsyncComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -10,7 +10,7 @@ import { Local } from '/@/utils/storage';
 import mittBus from '/@/utils/mitt';
 
 // 引入组件
-const layouts = {
+const layouts: any = {
 	defaults: defineAsyncComponent(() => import('/@/layout/main/defaults.vue')),
 	classic: defineAsyncComponent(() => import('/@/layout/main/classic.vue')),
 	transverse: defineAsyncComponent(() => import('/@/layout/main/transverse.vue')),

src/layout/lockScreen/index.vue

@@ -59,7 +59,7 @@
 	</div>
 </template>
 
-<script setup name="layoutLockScreen">
+<script setup lang="ts" name="layoutLockScreen">
 import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
 import { formatDate } from '/@/utils/formatTime';
 import { Local } from '/@/utils/storage';
@@ -67,7 +67,7 @@ import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 
 // 定义变量内容
-const layoutLockScreenDateRef = ref();
+const layoutLockScreenDateRef = ref<HtmlType>();
 const layoutLockScreenInputRef = ref();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -77,7 +77,7 @@ const state = reactive({
 	moveDifference: 0,
 	isShowLoockLogin: false,
 	isFlags: false,
-	querySelectorEl: '',
+	querySelectorEl: '' as HtmlType,
 	time: {
 		hm: '',
 		s: '',
@@ -90,29 +90,29 @@ const state = reactive({
 });
 
 // 鼠标按下 pc
-const onDownPc = (down) => {
+const onDownPc = (down: MouseEvent) => {
 	state.isFlags = true;
 	state.downClientY = down.clientY;
 };
 // 鼠标按下 app
-const onDownApp = (down) => {
+const onDownApp = (down: TouchEvent) => {
 	state.isFlags = true;
 	state.downClientY = down.touches[0].clientY;
 };
 // 鼠标移动 pc
-const onMovePc = (move) => {
+const onMovePc = (move: MouseEvent) => {
 	state.moveDifference = move.clientY - state.downClientY;
 	onMove();
 };
 // 鼠标移动 app
-const onMoveApp = (move) => {
+const onMoveApp = (move: TouchEvent) => {
 	state.moveDifference = move.touches[0].clientY - state.downClientY;
 	onMove();
 };
 // 鼠标移动事件
 const onMove = () => {
 	if (state.isFlags) {
-		const el = state.querySelectorEl;
+		const el = <HTMLElement>state.querySelectorEl;
 		const opacitys = (state.transparency -= 1 / 200);
 		if (state.moveDifference >= 0) return false;
 		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
@@ -134,7 +134,7 @@ const onEnd = () => {
 	state.isFlags = false;
 	state.transparency = 1;
 	if (state.moveDifference >= -400) {
-		state.querySelectorEl.setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
+		(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
 	}
 };
 // 获取要拖拽的初始元素

src/layout/logo/index.vue

@@ -8,7 +8,7 @@
 	</div>
 </template>
 
-<script setup name="layoutLogo">
+<script setup lang="ts" name="layoutLogo">
 import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';

src/layout/main/classic.vue

@@ -11,7 +11,7 @@
 	</el-container>
 </template>
 
-<script setup name="layoutClassic">
+<script setup lang="ts" name="layoutClassic">
 import { defineAsyncComponent, computed, ref, watch, nextTick, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -24,7 +24,7 @@ const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.v
 const LayoutTagsView = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue'));
 
 // 定义变量内容
-const layoutMainRef = ref();
+const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
 const route = useRoute();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -42,7 +42,8 @@ const initScrollBarHeight = () => {
 	nextTick(() => {
 		setTimeout(() => {
 			updateScrollbar();
-			if (layoutMainRef.value) layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
+			// '!' not null 断言操作符，不执行运行时检查
+			if (layoutMainRef.value) layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
 		}, 500);
 	});
 };
@@ -57,7 +58,7 @@ watch(
 		initScrollBarHeight();
 	}
 );
-// 监听 themeConfig isTagsview 配置文件的变化，更新菜单 el-scrollbar 的高度
+// 监听 themeConfig  isTagsview 配置文件的变化，更新菜单 el-scrollbar 的高度
 watch(
 	() => themeConfig.value.isTagsview,
 	() => {

src/layout/main/columns.vue

@@ -11,7 +11,7 @@
 	</el-container>
 </template>
 
-<script setup name="layoutColumns">
+<script setup lang="ts" name="layoutColumns">
 import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -24,8 +24,8 @@ const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.v
 const ColumnsAside = defineAsyncComponent(() => import('/@/layout/component/columnsAside.vue'));
 
 // 定义变量内容
-const layoutScrollbarRef = ref('');
-const layoutMainRef = ref();
+const layoutScrollbarRef = ref<RefType>('');
+const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
 const route = useRoute();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -35,7 +35,7 @@ const updateScrollbar = () => {
 	// 更新父级 scrollbar
 	layoutScrollbarRef.value.update();
 	// 更新子级 scrollbar
-	layoutMainRef.value && layoutMainRef.value.layoutMainScrollbarRef.update();
+	layoutMainRef.value && layoutMainRef.value!.layoutMainScrollbarRef.update();
 };
 // 重置滚动条高度，由于组件是异步引入的
 const initScrollBarHeight = () => {
@@ -43,7 +43,7 @@ const initScrollBarHeight = () => {
 		setTimeout(() => {
 			updateScrollbar();
 			layoutScrollbarRef.value.wrapRef.scrollTop = 0;
-			layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
+			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
 		}, 500);
 	});
 };

src/layout/main/defaults.vue

@@ -10,7 +10,7 @@
 	</el-container>
 </template>
 
-<script setup name="layoutDefaults">
+<script setup lang="ts" name="layoutDefaults">
 import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -23,8 +23,8 @@ const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/head
 const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
 
 // 定义变量内容
-const layoutScrollbarRef = ref('');
-const layoutMainRef = ref();
+const layoutScrollbarRef = ref<RefType>('');
+const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
 const route = useRoute();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -34,7 +34,7 @@ const updateScrollbar = () => {
 	// 更新父级 scrollbar
 	layoutScrollbarRef.value.update();
 	// 更新子级 scrollbar
-	layoutMainRef.value.layoutMainScrollbarRef.update();
+	layoutMainRef.value!.layoutMainScrollbarRef.update();
 };
 // 重置滚动条高度，由于组件是异步引入的
 const initScrollBarHeight = () => {
@@ -42,7 +42,7 @@ const initScrollBarHeight = () => {
 		setTimeout(() => {
 			updateScrollbar();
 			layoutScrollbarRef.value.wrapRef.scrollTop = 0;
-			layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
+			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
 		}, 500);
 	});
 };

src/layout/main/transverse.vue

@@ -5,7 +5,7 @@
 	</el-container>
 </template>
 
-<script setup name="layoutTransverse">
+<script setup lang="ts" name="layoutTransverse">
 import { defineAsyncComponent, ref, watch, nextTick, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -16,21 +16,21 @@ const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/head
 const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
 
 // 定义变量内容
-const layoutMainRef = ref();
+const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
 
 // 重置滚动条高度，更新子级 scrollbar
 const updateScrollbar = () => {
-	layoutMainRef.value.layoutMainScrollbarRef.update();
+	layoutMainRef.value!.layoutMainScrollbarRef.update();
 };
 // 重置滚动条高度，由于组件是异步引入的
 const initScrollBarHeight = () => {
 	nextTick(() => {
 		setTimeout(() => {
 			updateScrollbar();
-			layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
+			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
 		}, 500);
 	});
 };

src/layout/navBars/index.vue

@@ -5,7 +5,7 @@
 	</div>
 </template>
 
-<script setup name="layoutNavBars">
+<script setup lang="ts" name="layoutNavBars">
 import { defineAsyncComponent, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';

src/layout/navBars/tagsView/contextmenu.vue

@@ -29,7 +29,7 @@
 	</transition>
 </template>
 
-<script setup name="layoutTagsViewContextmenu">
+<script setup lang="ts" name="layoutTagsViewContextmenu">
 import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
 
 // 定义父组件传过来的值
@@ -75,11 +75,11 @@ const dropdowns = computed(() => {
 	}
 });
 // 当前项菜单点击
-const onCurrentContextmenuClick = (contextMenuClickId) => {
+const onCurrentContextmenuClick = (contextMenuClickId: number) => {
 	emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
 };
 // 打开右键菜单：判断是否固定，固定则不显示关闭按钮
-const openContextmenu = (item) => {
+const openContextmenu = (item: RouteItem) => {
 	state.item = item;
 	item.meta?.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
 	closeContextmenu();

src/layout/navBars/tagsView/tagsView.vue

@@ -46,7 +46,7 @@
 	</div>
 </template>
 
-<script setup name="layoutTagsView">
+<script setup lang="ts" name="layoutTagsView">
 import { defineAsyncComponent, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import Sortable from 'sortablejs';
@@ -65,7 +65,7 @@ import mittBus from '/@/utils/mitt';
 const Contextmenu = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/contextmenu.vue'));
 
 // 定义变量内容
-const tagsRefs = ref([]);
+const tagsRefs = ref<RefType>([]);
 const scrollbarRef = ref();
 const contextmenuRef = ref();
 const tagsUlRef = ref();
@@ -79,7 +79,7 @@ const { routesList } = storeToRefs(storesRoutesList);
 const storesKeepALiveNames = useKeepALiveNames();
 const route = useRoute();
 const router = useRouter();
-const state = reactive({
+const state = reactive<TagsViewState>({
 	routeActive: '',
 	routePath: route.path,
 	dropdown: { x: '', y: '' },
@@ -99,12 +99,12 @@ const getThemeConfig = computed(() => {
 });
 // 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
 const setTagsViewNameI18n = computed(() => {
-	return (v) => {
+	return (v: RouteItem) => {
 		return other.setTagsViewNameI18n(v);
 	};
 });
 // 设置 tagsView 高亮
-const isActive = (v) => {
+const isActive = (v: RouteItem) => {
 	if (getThemeConfig.value.isShareTagsView) {
 		return v.path === state.routePath;
 	} else {
@@ -119,7 +119,7 @@ const isActive = (v) => {
 	}
 };
 // 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
-const addBrowserSetSession = (tagsViewList) => {
+const addBrowserSetSession = (tagsViewList: Array<object>) => {
 	Session.set('tagsViewList', tagsViewList);
 };
 // 获取 pinia 中的 tagsViewRoutes 列表
@@ -135,23 +135,23 @@ const initTagsView = async () => {
 	if (Session.get('tagsViewList') && getThemeConfig.value.isCacheTagsView) {
 		state.tagsViewList = await Session.get('tagsViewList');
 	} else {
-		await state.tagsViewRoutesList.map((v) => {
+		await state.tagsViewRoutesList.map((v: RouteItem) => {
 			if (v.meta?.isAffix && !v.meta.isHide) {
 				v.url = setTagsViewHighlight(v);
 				state.tagsViewList.push({ ...v });
 				storesKeepALiveNames.addCachedView(v);
 			}
 		});
-		await addTagsView(route.path, route);
+		await addTagsView(route.path, <RouteToFrom>route);
 	}
 	// 初始化当前元素(li)的下标
 	getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
 };
 // 处理可开启多标签详情，单标签详情（动态路由（xxx/:id/:name"），普通路由处理）
-const solveAddTagsView = async (path, to) => {
+const solveAddTagsView = async (path: string, to?: RouteToFrom) => {
 	let isDynamicPath = to?.meta?.isDynamic ? to.meta.isDynamicPath : path;
 	let current = state.tagsViewList.filter(
-		(v) =>
+		(v: RouteItem) =>
 			v.path === isDynamicPath &&
 			isObjectValueEqual(
 				to?.meta?.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
@@ -160,7 +160,7 @@ const solveAddTagsView = async (path, to) => {
 	);
 	if (current.length <= 0) {
 		// 防止：Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
-		let findItem = state.tagsViewRoutesList.find((v) => v.path === isDynamicPath);
+		let findItem = state.tagsViewRoutesList.find((v: RouteItem) => v.path === isDynamicPath);
 		if (!findItem) return false;
 		if (findItem.meta.isAffix) return false;
 		if (findItem.meta.isLink && !findItem.meta.isIframe) return false;
@@ -172,7 +172,7 @@ const solveAddTagsView = async (path, to) => {
 	}
 };
 // 处理单标签时，第二次的值未覆盖第一次的 tagsViewList 值（Session Storage）
-const singleAddTagsView = (path, to) => {
+const singleAddTagsView = (path: string, to?: RouteToFrom) => {
 	let isDynamicPath = to?.meta?.isDynamic ? to.meta.isDynamicPath : path;
 	state.tagsViewList.forEach((v) => {
 		if (
@@ -189,31 +189,31 @@ const singleAddTagsView = (path, to) => {
 	});
 };
 // 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中（可开启多标签详情，单标签详情）
-const addTagsView = (path, to) => {
+const addTagsView = (path: string, to?: RouteToFrom) => {
 	// 防止拿取不到路由信息
 	nextTick(async () => {
 		// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-		let item;
+		let item: RouteItem;
 		if (to?.meta?.isDynamic) {
 			// 动态路由（xxx/:id/:name"）：参数不同，开启多个 tagsview
 			if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
 			else await singleAddTagsView(path, to);
-			if (state.tagsViewList.some((v) => v.path === to?.meta?.isDynamicPath)) {
+			if (state.tagsViewList.some((v: RouteItem) => v.path === to?.meta?.isDynamicPath)) {
 				// 防止首次进入界面时(登录进入) tagsViewList 不存浏览器中
 				addBrowserSetSession(state.tagsViewList);
 				return false;
 			}
-			item = state.tagsViewRoutesList.find((v) => v.path === to?.meta?.isDynamicPath);
+			item = state.tagsViewRoutesList.find((v: RouteItem) => v.path === to?.meta?.isDynamicPath);
 		} else {
 			// 普通路由：参数不同，开启多个 tagsview
 			if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
 			else await singleAddTagsView(path, to);
-			if (state.tagsViewList.some((v) => v.path === path)) {
+			if (state.tagsViewList.some((v: RouteItem) => v.path === path)) {
 				// 防止首次进入界面时(登录进入) tagsViewList 不存浏览器中
 				addBrowserSetSession(state.tagsViewList);
 				return false;
 			}
-			item = state.tagsViewRoutesList.find((v) => v.path === path);
+			item = state.tagsViewRoutesList.find((v: RouteItem) => v.path === path);
 		}
 		if (!item) return false;
 		if (item?.meta?.isLink && !item.meta.isIframe) return false;
@@ -226,10 +226,10 @@ const addTagsView = (path, to) => {
 	});
 };
 // 2、刷新当前 tagsView：
-const refreshCurrentTagsView = async (fullPath) => {
+const refreshCurrentTagsView = async (fullPath: string) => {
 	const decodeURIPath = decodeURI(fullPath);
-	let item = {};
-	state.tagsViewList.forEach((v) => {
+	let item: RouteToFrom = {};
+	state.tagsViewList.forEach((v: RouteItem) => {
 		v.transUrl = transUrlParams(v);
 		if (v.transUrl) {
 			if (v.transUrl === transUrlParams(v)) item = v;
@@ -243,8 +243,8 @@ const refreshCurrentTagsView = async (fullPath) => {
 	if (item.meta?.isKeepAlive) storesKeepALiveNames.addCachedView(item);
 };
 // 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
-const closeCurrentTagsView = (path) => {
-	state.tagsViewList.map((v, k, arr) => {
+const closeCurrentTagsView = (path: string) => {
+	state.tagsViewList.map((v: RouteItem, k: number, arr: RouteItems) => {
 		if (!v.meta?.isAffix) {
 			if (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path) {
 				storesKeepALiveNames.delCachedView(v);
@@ -280,17 +280,17 @@ const closeCurrentTagsView = (path) => {
 	addBrowserSetSession(state.tagsViewList);
 };
 // 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
-const closeOtherTagsView = (path) => {
+const closeOtherTagsView = (path: string) => {
 	if (Session.get('tagsViewList')) {
 		state.tagsViewList = [];
-		Session.get('tagsViewList').map((v) => {
+		Session.get('tagsViewList').map((v: RouteItem) => {
 			if (v.meta?.isAffix && !v.meta.isHide) {
 				v.url = setTagsViewHighlight(v);
 				storesKeepALiveNames.delOthersCachedViews(v);
 				state.tagsViewList.push({ ...v });
 			}
 		});
-		addTagsView(path, route);
+		addTagsView(path, <RouteToFrom>route);
 		addBrowserSetSession(state.tagsViewList);
 	}
 };
@@ -299,7 +299,7 @@ const closeAllTagsView = () => {
 	if (Session.get('tagsViewList')) {
 		storesKeepALiveNames.delAllCachedViews();
 		state.tagsViewList = [];
-		Session.get('tagsViewList').map((v) => {
+		Session.get('tagsViewList').map((v: RouteItem) => {
 			if (v.meta?.isAffix && !v.meta.isHide) {
 				v.url = setTagsViewHighlight(v);
 				state.tagsViewList.push({ ...v });
@@ -310,8 +310,8 @@ const closeAllTagsView = () => {
 	}
 };
 // 6、开启当前页面全屏
-const openCurrenFullscreen = async (path) => {
-	const item = state.tagsViewList.find((v) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
+const openCurrenFullscreen = async (path: string) => {
+	const item = state.tagsViewList.find((v: RouteItem) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
 	if (item.meta.isDynamic) await router.push({ name: item.name, params: item.params });
 	else await router.push({ name: item.name, query: item.query });
 	stores.setCurrenFullscreen(true);
@@ -319,9 +319,9 @@ const openCurrenFullscreen = async (path) => {
 // 当前项右键菜单点击，拿 `当前点击的路由路径` 对比 `tagsView 路由数组`，取当前点击项的详细路由信息
 // 防止 tagsView 非当前页演示时，操作异常
 // https://gitee.com/lyt-top/vue-next-admin/issues/I61VS9
-const getCurrentRouteItem = (item) => {
-	let resItem = {};
-	state.tagsViewList.forEach((v) => {
+const getCurrentRouteItem = (item: RouteItem): any => {
+	let resItem: RouteToFrom = {};
+	state.tagsViewList.forEach((v: RouteItem) => {
 		v.transUrl = transUrlParams(v);
 		if (v.transUrl) {
 			// 动态路由、普通路由带参数
@@ -335,7 +335,7 @@ const getCurrentRouteItem = (item) => {
 	else return resItem;
 };
 // 当前项右键菜单点击
-const onCurrentContextmenuClick = async (item) => {
+const onCurrentContextmenuClick = async (item: RouteItem) => {
 	item.commonUrl = transUrlParams(item);
 	if (!getCurrentRouteItem(item)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
 	const { path, name, params, query, meta, url } = getCurrentRouteItem(item);
@@ -367,33 +367,33 @@ const onCurrentContextmenuClick = async (item) => {
 	}
 };
 // 右键点击时：传 x,y 坐标值到子组件中（props）
-const onContextmenu = (v, e) => {
+const onContextmenu = (v: RouteItem, e: MouseEvent) => {
 	const { clientX, clientY } = e;
 	state.dropdown.x = clientX;
 	state.dropdown.y = clientY;
 	contextmenuRef.value.openContextmenu(v);
 };
 // 鼠标按下时，判断是鼠标中键就关闭当前 tasgview
-const onMousedownMenu = (v, e) => {
+const onMousedownMenu = (v: RouteItem, e: MouseEvent) => {
 	if (!v.meta?.isAffix && e.button === 1) {
 		const item = Object.assign({}, { contextMenuClickId: 1, ...v });
 		onCurrentContextmenuClick(item);
 	}
 };
 // 当前的 tagsView 项点击时
-const onTagsClick = (v, k) => {
+const onTagsClick = (v: RouteItem, k: number) => {
 	state.tagsRefsIndex = k;
 	router.push(v);
 	// 分栏布局时，收起/展开菜单
 	if (getThemeConfig.value.layout === 'columns') {
-		const item = routesList.value.find((r) => r.path.indexOf(`/${v.path.split('/')[1]}`) > -1);
+		const item: RouteItem = routesList.value.find((r: RouteItem) => r.path.indexOf(`/${v.path.split('/')[1]}`) > -1);
 		!item.children ? (getThemeConfig.value.isCollapse = true) : (getThemeConfig.value.isCollapse = false);
 	}
 };
 // 处理 url，地址栏链接有参数时，tagsview 右键菜单刷新功能失效问题，感谢 @ZzZz-RIPPER、@dejavuuuuu
 // https://gitee.com/lyt-top/vue-next-admin/issues/I5K3YO
 // https://gitee.com/lyt-top/vue-next-admin/issues/I61VS9
-const transUrlParams = (v) => {
+const transUrlParams = (v: RouteItem) => {
 	let params = v.query && Object.keys(v.query).length > 0 ? v.query : v.params;
 	if (!params) return '';
 	let path = '';
@@ -418,7 +418,7 @@ const transUrlParams = (v) => {
 	}
 };
 // 处理 tagsView 高亮（多标签详情时使用，单标签详情未使用）
-const setTagsViewHighlight = (v) => {
+const setTagsViewHighlight = (v: RouteToFrom) => {
 	let params = v.query && Object.keys(v.query).length > 0 ? v.query : v.params;
 	if (!params || Object.keys(params).length <= 0) return v.path;
 	let path = '';
@@ -429,7 +429,7 @@ const setTagsViewHighlight = (v) => {
 	return `${v.meta?.isDynamic ? v.meta.isDynamicPath : v.path}-${path}`;
 };
 // 鼠标滚轮滚动
-const onHandleScroll = (e) => {
+const onHandleScroll = (e: WheelEventType) => {
 	scrollbarRef.value.$refs.wrapRef.scrollLeft += e.wheelDelta / 4;
 };
 // tagsView 横向滚动
@@ -485,11 +485,11 @@ const tagsViewmoveToCurrentTag = () => {
 	});
 };
 // 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
-const getTagsRefsIndex = (path) => {
+const getTagsRefsIndex = (path: string | unknown) => {
 	nextTick(async () => {
 		// await 使用该写法，防止拿取不到 tagsViewList 列表数据不完整
 		let tagsViewList = await state.tagsViewList;
-		state.tagsRefsIndex = tagsViewList.findIndex((v) => {
+		state.tagsRefsIndex = tagsViewList.findIndex((v: RouteItem) => {
 			if (getThemeConfig.value.isShareTagsView) {
 				return v.path === path;
 			} else {
@@ -502,7 +502,7 @@ const getTagsRefsIndex = (path) => {
 };
 // 设置 tagsView 可以进行拖拽
 const initSortable = async () => {
-	const el = document.querySelector('.layout-navbars-tagsview-ul');
+	const el = <HTMLElement>document.querySelector('.layout-navbars-tagsview-ul');
 	if (!el) return false;
 	state.sortable.el && state.sortable.destroy();
 	state.sortable = Sortable.create(el, {
@@ -510,9 +510,9 @@ const initSortable = async () => {
 		dataIdAttr: 'data-url',
 		disabled: getThemeConfig.value.isSortableTagsView ? false : true,
 		onEnd: () => {
-			const sortEndList = [];
-			state.sortable.toArray().map((val) => {
-				state.tagsViewList.map((v) => {
+			const sortEndList: RouteItem[] = [];
+			state.sortable.toArray().map((val: string) => {
+				state.tagsViewList.map((v: RouteItem) => {
 					if (v.url === val) sortEndList.push({ ...v });
 				});
 			});
@@ -532,7 +532,7 @@ onBeforeMount(() => {
 	// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
 	window.addEventListener('resize', onSortableResize);
 	// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
-	mittBus.on('onCurrentContextmenuClick', (data) => {
+	mittBus.on('onCurrentContextmenuClick', (data: RouteItem) => {
 		// 通过方法点击关闭 tagsView
 		data.isFnClick = true;
 		onCurrentContextmenuClick(data);
@@ -546,7 +546,7 @@ onBeforeMount(() => {
 		if (getThemeConfig.value.isShareTagsView) {
 			router.push('/home');
 			state.tagsViewList = [];
-			state.tagsViewRoutesList.map((v) => {
+			state.tagsViewRoutesList.map((v: RouteItem) => {
 				if (v.meta?.isAffix && !v.meta.isHide) {
 					v.url = setTagsViewHighlight(v);
 					state.tagsViewList.push({ ...v });
@@ -580,7 +580,7 @@ onMounted(() => {
 onBeforeRouteUpdate(async (to) => {
 	state.routeActive = setTagsViewHighlight(to);
 	state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
-	await addTagsView(to.path, to);
+	await addTagsView(to.path, <RouteToFrom>to);
 	getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
 });
 // 监听路由的变化，动态赋值给 tagsView

src/layout/navBars/topBar/breadcrumb.vue

@@ -23,7 +23,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumb">
+<script setup lang="ts" name="layoutBreadcrumb">
 import { reactive, computed, onMounted } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { Local } from '/@/utils/storage';
@@ -39,7 +39,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
 const { routesList } = storeToRefs(stores);
 const route = useRoute();
 const router = useRouter();
-const state = reactive({
+const state = reactive<BreadcrumbState>({
 	breadcrumbList: [],
 	routeSplit: [],
 	routeSplitFirst: '',
@@ -54,7 +54,7 @@ const isShowBreadcrumb = computed(() => {
 	else return isBreadcrumb ? true : false;
 });
 // 面包屑点击时
-const onBreadcrumbClick = (v) => {
+const onBreadcrumbClick = (v: RouteItem) => {
 	const { redirect, path } = v;
 	if (redirect) router.push(redirect);
 	else router.push(path);
@@ -70,9 +70,9 @@ const setLocalThemeConfig = () => {
 	Local.set('themeConfig', themeConfig.value);
 };
 // 处理面包屑数据
-const getBreadcrumbList = (arr) => {
-	arr.forEach((item) => {
-		state.routeSplit.forEach((v, k, arrs) => {
+const getBreadcrumbList = (arr: RouteItems) => {
+	arr.forEach((item: RouteItem) => {
+		state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
 			if (state.routeSplitFirst === item.path) {
 				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
 				state.breadcrumbList.push(item);
@@ -83,7 +83,7 @@ const getBreadcrumbList = (arr) => {
 	});
 };
 // 当前路由字符串切割成数组，并删除第一项空内容
-const initRouteSplit = (path) => {
+const initRouteSplit = (path: string) => {
 	if (!themeConfig.value.isBreadcrumb) return false;
 	state.breadcrumbList = [routesList.value[0]];
 	state.routeSplit = path.split('/');
@@ -92,7 +92,8 @@ const initRouteSplit = (path) => {
 	state.routeSplitIndex = 1;
 	getBreadcrumbList(routesList.value);
 	if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
-	if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
+	if (state.breadcrumbList.length > 0)
+		state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
 };
 // 页面加载时
 onMounted(() => {

src/layout/navBars/topBar/closeFull.vue

@@ -6,7 +6,7 @@
 	</div>
 </template>
 
-<script setup name="layoutCloseFull">
+<script setup lang="ts" name="layoutCloseFull">
 import { storeToRefs } from 'pinia';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 

src/layout/navBars/topBar/index.vue

@@ -7,7 +7,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumbIndex">
+<script setup lang="ts" name="layoutBreadcrumbIndex">
 import { defineAsyncComponent, computed, reactive, onMounted, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -28,7 +28,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
 const { routesList } = storeToRefs(stores);
 const route = useRoute();
 const state = reactive({
-	menuList: [],
+	menuList: [] as RouteItems,
 });
 
 // 设置 logo 显示/隐藏
@@ -53,27 +53,27 @@ const setFilterRoutes = () => {
 	}
 };
 // 设置了分割菜单时，删除底下 children
-const delClassicChildren = (arr) => {
-	arr.map((v) => {
+const delClassicChildren = <T extends ChilType>(arr: T[]): T[] => {
+	arr.map((v: T) => {
 		if (v.children) delete v.children;
 	});
 	return arr;
 };
 // 路由过滤递归函数
-const filterRoutesFun = (arr) => {
+const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
 	return arr
-		.filter((item) => !item.meta?.isHide)
-		.map((item) => {
+		.filter((item: T) => !item.meta?.isHide)
+		.map((item: T) => {
 			item = Object.assign({}, item);
 			if (item.children) item.children = filterRoutesFun(item.children);
 			return item;
 		});
 };
 // 传送当前子级数据到菜单中
-const setSendClassicChildren = (path) => {
+const setSendClassicChildren = (path: string) => {
 	const currentPathSplit = path.split('/');
-	let currentData = { children: [] };
-	filterRoutesFun(routesList.value).map((v, k) => {
+	let currentData: MittMenu = { children: [] };
+	filterRoutesFun(routesList.value).map((v: RouteItem, k: number) => {
 		if (v.path === `/${currentPathSplit[1]}`) {
 			v['k'] = k;
 			currentData['item'] = { ...v };

src/layout/navBars/topBar/search.vue

@@ -27,7 +27,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumbSearch">
+<script setup lang="ts" name="layoutBreadcrumbSearch">
 import { reactive, ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -38,7 +38,7 @@ const storesTagsViewRoutes = useTagsViewRoutes();
 const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
 const layoutMenuAutocompleteRef = ref();
 const router = useRouter();
-const state = reactive({
+const state = reactive<SearchState>({
 	isShowSearch: false,
 	menuQuery: '',
 	tagsViewList: [],
@@ -60,29 +60,29 @@ const closeSearch = () => {
 	state.isShowSearch = false;
 };
 // 菜单搜索数据过滤
-const menuSearch = (queryString, cb) => {
+const menuSearch = (queryString: string, cb: Function) => {
 	let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
 	cb(results);
 };
 // 菜单搜索过滤
-const createFilter = (queryString) => {
-	return (restaurant) => {
+const createFilter = (queryString: string) => {
+	return (restaurant: RouteItem) => {
 		return (
 			restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
-			restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
-			restaurant.meta.title.indexOf(queryString.toLowerCase()) > -1
+			restaurant.meta!.title!.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+			restaurant.meta!.title!.indexOf(queryString.toLowerCase()) > -1
 		);
 	};
 };
 // 初始化菜单数据
 const initTageView = () => {
 	if (state.tagsViewList.length > 0) return false;
-	tagsViewRoutes.value.map((v) => {
+	tagsViewRoutes.value.map((v: RouteItem) => {
 		if (!v.meta?.isHide) state.tagsViewList.push({ ...v });
 	});
 };
 // 当前菜单选中时
-const onHandleSelect = (item) => {
+const onHandleSelect = (item: RouteItem) => {
 	let { path, redirect } = item;
 	if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
 	else if (redirect) router.push(redirect);

src/layout/navBars/topBar/setings.vue

@@ -420,7 +420,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumbSeting">
+<script setup lang="ts" name="layoutBreadcrumbSeting">
 import { nextTick, onUnmounted, onMounted, computed, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
@@ -459,7 +459,7 @@ const onColorPickerChange = () => {
 	setDispatchThemeConfig();
 };
 // 2、菜单 / 顶栏
-const onBgColorPickerChange = (bg) => {
+const onBgColorPickerChange = (bg: string) => {
 	document.documentElement.style.setProperty(`--next-bg-${bg}`, themeConfig.value[bg]);
 	if (bg === 'menuBar') {
 		document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, getLightColor(getThemeConfig.value.menuBar, 0.05));
@@ -482,7 +482,7 @@ const onColumnsMenuBarGradualChange = () => {
 	setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
 };
 // 2、菜单 / 顶栏 --> 背景渐变函数
-const setGraduaFun = (el, bool, color) => {
+const setGraduaFun = (el: string, bool: boolean, color: string) => {
 	nextTick(() => {
 		setTimeout(() => {
 			let els = document.querySelector(el);
@@ -536,7 +536,7 @@ const onShareTagsViewChange = () => {
 	setLocalThemeConfig();
 };
 // 4、界面显示 --> 灰色模式/色弱模式
-const onAddFilterChange = (attr) => {
+const onAddFilterChange = (attr: string) => {
 	if (attr === 'grayscale') {
 		if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
 	} else {
@@ -550,7 +550,7 @@ const onAddFilterChange = (attr) => {
 };
 // 4、界面显示 --> 深色模式
 const onAddDarkChange = () => {
-	const body = document.documentElement;
+	const body = document.documentElement as HTMLElement;
 	if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
 	else body.setAttribute('data-theme', '');
 };
@@ -560,14 +560,14 @@ const onWartermarkChange = () => {
 	setLocalThemeConfig();
 };
 // 4、界面显示 --> 水印文案
-const onWartermarkTextInput = (val) => {
+const onWartermarkTextInput = (val: string) => {
 	getThemeConfig.value.wartermarkText = verifyAndSpace(val);
 	if (getThemeConfig.value.wartermarkText === '') return false;
 	if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
 	setLocalThemeConfig();
 };
 // 5、布局切换
-const onSetLayout = (layout) => {
+const onSetLayout = (layout: string) => {
 	Local.set('oldLayout', layout);
 	if (getThemeConfig.value.layout === layout) return false;
 	if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
@@ -640,7 +640,7 @@ onMounted(() => {
 		if (!Local.get('frequency')) initLayoutChangeFun();
 		Local.set('frequency', 1);
 		// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
-		mittBus.on('layoutMobileResize', (res) => {
+		mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
 			getThemeConfig.value.layout = res.layout;
 			getThemeConfig.value.isDrawer = false;
 			initLayoutChangeFun();

src/layout/navBars/topBar/user.vue

@@ -55,8 +55,8 @@
 				</el-icon>
 			</span>
 			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item command="/home">首页</el-dropdown-item>
+				<el-dropdown-menu
+					><el-dropdown-item command="/home">首页</el-dropdown-item>
 					<el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item>
 					<el-dropdown-item command="/404">404</el-dropdown-item>
 					<el-dropdown-item command="/401">401</el-dropdown-item>
@@ -68,7 +68,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumbUser">
+<script setup lang="ts" name="layoutBreadcrumbUser">
 import { defineAsyncComponent, ref, unref, computed, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage, ClickOutside as vClickOutside } from 'element-plus';
@@ -99,9 +99,9 @@ const state = reactive({
 
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
-	let num = '';
+	let num: string | number = '';
 	const { layout, isClassicSplitMenu } = themeConfig.value;
-	const layoutArr = ['defaults', 'columns'];
+	const layoutArr: string[] = ['defaults', 'columns'];
 	if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
 	else num = '';
 	return num;
@@ -127,7 +127,7 @@ const onLayoutSetingClick = () => {
 	mittBus.emit('openSetingsDrawer');
 };
 // 下拉菜单点击时
-const onHandleCommandClick = (path) => {
+const onHandleCommandClick = (path: string) => {
 	if (path === 'logOut') {
 		ElMessageBox({
 			closeOnClickModal: false,
@@ -171,7 +171,7 @@ const onSearchClick = () => {
 	searchRef.value.openSearch();
 };
 // 组件大小改变
-const onComponentSizeChange = (size) => {
+const onComponentSizeChange = (size: string) => {
 	Local.remove('themeConfig');
 	themeConfig.value.globalComponentSize = size;
 	Local.set('themeConfig', themeConfig.value);
@@ -179,8 +179,8 @@ const onComponentSizeChange = (size) => {
 	window.location.reload();
 };
 // 初始化组件大小/i18n
-const initI18nOrSize = (value, attr) => {
-	state[attr] = Local.get('themeConfig')[value];
+const initI18nOrSize = (value: string, attr: string) => {
+	(<any>state)[attr] = Local.get('themeConfig')[value];
 };
 // 页面加载时
 onMounted(() => {

src/layout/navBars/topBar/userNews.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script setup name="layoutBreadcrumbUserNews">
+<script setup lang="ts" name="layoutBreadcrumbUserNews">
 import { reactive } from 'vue';
 
 // 定义变量内容

src/layout/navMenu/horizontal.vue

@@ -28,9 +28,9 @@
 	</div>
 </template>
 
-<script setup name="navMenuHorizontal">
+<script setup lang="ts" name="navMenuHorizontal">
 import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -44,7 +44,7 @@ const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue
 const props = defineProps({
 	// 菜单列表
 	menuList: {
-		type: Array,
+		type: Array<RouteRecordRaw>,
 		default: () => [],
 	},
 });
@@ -56,27 +56,27 @@ const { routesList } = storeToRefs(stores);
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
 const state = reactive({
-	defaultActive: '',
+	defaultActive: '' as string | undefined,
 });
 
 // 获取父级菜单数据
 const menuLists = computed(() => {
-	return props.menuList;
+	return <RouteItems>props.menuList;
 });
 // 路由过滤递归函数
-const filterRoutesFun = (arr) => {
+const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
 	return arr
-		.filter((item) => !item.meta?.isHide)
-		.map((item) => {
+		.filter((item: T) => !item.meta?.isHide)
+		.map((item: T) => {
 			item = Object.assign({}, item);
 			if (item.children) item.children = filterRoutesFun(item.children);
 			return item;
 		});
 };
 // 传送当前子级数据到菜单中
-const setSendClassicChildren = (path) => {
+const setSendClassicChildren = (path: string) => {
 	const currentPathSplit = path.split('/');
-	let currentData = { children: [] };
+	let currentData: MittMenu = { children: [] };
 	filterRoutesFun(routesList.value).map((v, k) => {
 		if (v.path === `/${currentPathSplit[1]}`) {
 			v['k'] = k;
@@ -88,18 +88,18 @@ const setSendClassicChildren = (path) => {
 	return currentData;
 };
 // 设置页面当前路由高亮
-const setCurrentRouterHighlight = (currentRoute) => {
+const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
 	const { path, meta } = currentRoute;
 	if (themeConfig.value.layout === 'classic') {
 		state.defaultActive = `/${path?.split('/')[1]}`;
 	} else {
-		const pathSplit = meta?.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
+		const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
 		if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
 		else state.defaultActive = path;
 	}
 };
 // 打开外部链接
-const onALinkClick = (val) => {
+const onALinkClick = (val: RouteItem) => {
 	other.handleOpenLink(val);
 };
 // 页面加载前

src/layout/navMenu/subItem.vue

@@ -24,25 +24,26 @@
 	</template>
 </template>
 
-<script setup name="navMenuSubItem">
+<script setup lang="ts" name="navMenuSubItem">
 import { computed } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
 import other from '/@/utils/other';
 
 // 定义父组件传过来的值
 const props = defineProps({
 	// 菜单列表
 	chil: {
-		type: Array,
+		type: Array<RouteRecordRaw>,
 		default: () => [],
 	},
 });
 
 // 获取父级菜单数据
 const chils = computed(() => {
-	return props.chil;
+	return <RouteItems>props.chil;
 });
 // 打开外部链接
-const onALinkClick = (val) => {
+const onALinkClick = (val: RouteItem) => {
 	other.handleOpenLink(val);
 };
 </script>

src/layout/navMenu/vertical.vue

@@ -30,9 +30,9 @@
 	</el-menu>
 </template>
 
-<script setup name="navMenuVertical">
+<script setup lang="ts" name="navMenuVertical">
 import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
@@ -44,7 +44,7 @@ const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue
 const props = defineProps({
 	// 菜单列表
 	menuList: {
-		type: Array,
+		type: Array<RouteRecordRaw>,
 		default: () => [],
 	},
 });
@@ -61,21 +61,21 @@ const state = reactive({
 
 // 获取父级菜单数据
 const menuLists = computed(() => {
-	return props.menuList;
+	return <RouteItems>props.menuList;
 });
 // 获取布局配置信息
 const getThemeConfig = computed(() => {
 	return themeConfig.value;
 });
 // 菜单高亮（详情时，父级高亮）
-const setParentHighlight = (currentRoute) => {
+const setParentHighlight = (currentRoute: RouteToFrom) => {
 	const { path, meta } = currentRoute;
-	const pathSplit = meta?.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
+	const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
 	if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
 	else return path;
 };
 // 打开外部链接
-const onALinkClick = (val) => {
+const onALinkClick = (val: RouteItem) => {
 	other.handleOpenLink(val);
 };
 // 页面加载时

src/layout/routerView/iframes.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script setup name="layoutIframeView">
+<script setup lang="ts" name="layoutIframeView">
 import { computed, watch, ref, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -49,17 +49,17 @@ const route = useRoute();
 
 // 处理 list 列表，当打开时，才进行加载
 const setIframeList = computed(() => {
-	return props.list.filter((v) => v.meta?.isIframeOpen);
+	return (<RouteItems>props.list).filter((v: RouteItem) => v.meta?.isIframeOpen);
 });
 // 获取 iframe 当前路由 path
 const getRoutePath = computed(() => {
 	return route.path;
 });
 // 关闭 iframe loading
-const closeIframeLoading = (val, item) => {
+const closeIframeLoading = (val: string, item: RouteItem) => {
 	nextTick(() => {
 		if (!iframeRef.value) return false;
-		iframeRef.value.forEach((v) => {
+		iframeRef.value.forEach((v: HTMLElement) => {
 			if (v.dataset.url === val) {
 				v.onload = () => {
 					if (item.meta?.isIframeOpen && item.meta.loading) item.meta.loading = false;
@@ -72,7 +72,7 @@ const closeIframeLoading = (val, item) => {
 watch(
 	() => route.fullPath,
 	(val) => {
-		const item = props.list.find((v) => v.path === val);
+		const item: any = props.list.find((v: any) => v.path === val);
 		if (!item) return false;
 		if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
 		closeIframeLoading(val, item);
@@ -85,7 +85,7 @@ watch(
 watch(
 	() => props.refreshKey,
 	() => {
-		const item = props.list.find((v) => v.path === route.path);
+		const item: any = props.list.find((v: any) => v.path === route.path);
 		if (!item) return false;
 		if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
 		setTimeout(() => {

src/layout/routerView/link.vue

@@ -13,14 +13,14 @@
 	</div>
 </template>
 
-<script setup name="layoutLinkView">
+<script setup lang="ts" name="layoutLinkView">
 import { reactive, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { verifyUrl } from '/@/utils/toolsValidate';
 
 // 定义变量内容
 const route = useRoute();
-const state = reactive({
+const state = reactive<LinkViewState>({
 	title: '',
 	isLink: '',
 });
@@ -28,15 +28,15 @@ const state = reactive({
 // 立即前往
 const onGotoFullPage = () => {
 	const { origin, pathname } = window.location;
-	if (verifyUrl(state.isLink)) window.open(state.isLink);
+	if (verifyUrl(<string>state.isLink)) window.open(state.isLink);
 	else window.open(`${origin}${pathname}#${state.isLink}`);
 };
 // 监听路由的变化，设置内容
 watch(
 	() => route.path,
 	() => {
-		state.title = route.meta.title;
-		state.isLink = route.meta.isLink;
+		state.title = <string>route.meta.title;
+		state.isLink = <string>route.meta.isLink;
 	},
 	{
 		immediate: true,

src/layout/routerView/parent.vue

@@ -13,7 +13,7 @@
 	</div>
 </template>
 
-<script setup name="layoutParentView">
+<script setup lang="ts" name="layoutParentView">
 import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -32,7 +32,7 @@ const storesKeepAliveNames = useKeepALiveNames();
 const storesThemeConfig = useThemeConfig();
 const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
 const { themeConfig } = storeToRefs(storesThemeConfig);
-const state = reactive({
+const state = reactive<ParentViewState>({
 	refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
 	iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
 	keepAliveNameList: [],
@@ -64,8 +64,8 @@ const getIframeListRoutes = async () => {
 // 页面加载前，处理缓存，页面刷新时路由缓存处理
 onBeforeMount(() => {
 	state.keepAliveNameList = keepAliveNames.value;
-	mittBus.on('onTagsViewRefreshRouterView', (fullPath) => {
-		state.keepAliveNameList = keepAliveNames.value.filter((name) => route.name !== name);
+	mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
+		state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
 		state.refreshRouterViewKey = '';
 		state.iframeRefreshKey = '';
 		nextTick(() => {
@@ -84,8 +84,8 @@ onMounted(() => {
 	nextTick(() => {
 		setTimeout(() => {
 			if (themeConfig.value.isCacheTagsView) {
-				let tagsViewArr = Session.get('tagsViewList') || [];
-				cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name);
+				let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
+				cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
 			}
 		}, 0);
 	});

src/layout/sponsors/index.vue

@@ -12,7 +12,7 @@
 	</div>
 </template>
 
-<script setup name="layoutSponsors">
+<script setup lang="ts" name="layoutSponsors">
 import { reactive, computed, onMounted } from 'vue';
 import sponsorsOne from '/@/assets/ccflowRightNextAdmin.png';
 
@@ -40,7 +40,7 @@ const onCloseSponsors = () => {
 	state.sponsors.isShow = false;
 };
 // 轮播图改变时
-const onCarouselChange = (e) => {
+const onCarouselChange = (e: number) => {
 	state.sponsors.index = e;
 };
 // 当前项内容点击

src/layout/upgrade/index.vue

@@ -31,7 +31,7 @@
 	</div>
 </template>
 
-<script setup name="layoutUpgrade">
+<script setup lang="ts" name="layoutUpgrade">
 import { reactive, computed, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -42,6 +42,7 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const state = reactive({
 	isUpgrade: false,
+	// @ts-ignore
 	version: __NEXT_VERSION__,
 	isLoading: false,
 	btnTxt: '',

src/router/backEnd.ts

@@ -1,3 +1,4 @@
+import { RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import pinia from '/@/stores/index';
 import { useUserInfo } from '/@/stores/userInfo';
@@ -20,9 +21,9 @@ const menuApi = useMenuApi();
  * @method import.meta.glob
  * @link 参考：https://cn.vitejs.dev/guide/features.html#json
  */
-const layouModules = import.meta.glob('../layout/routerView/*.{vue,tsx}');
-const viewsModules = import.meta.glob('../views/**/*.{vue,tsx}');
-const dynamicViewsModules = Object.assign({}, { ...layouModules }, { ...viewsModules });
+const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
+const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
+const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });
 
 /**
  * 后端控制路由：初始化方法，防止刷新时路由丢失
@@ -62,7 +63,7 @@ export async function initBackEndControlRoutes() {
  */
 export async function setFilterMenuAndCacheTagsViewRoutes() {
 	const storesRoutesList = useRoutesList(pinia);
-	storesRoutesList.setRoutesList(dynamicRoutes[0].children);
+	storesRoutesList.setRoutesList(dynamicRoutes[0].children as any);
 	setCacheTagsViewRoutes();
 }
 
@@ -81,7 +82,7 @@ export function setCacheTagsViewRoutes() {
  * @returns 返回替换后的路由数组
  */
 export function setFilterRouteEnd() {
-	let filterRouteEnd = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
+	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
 	// notFoundAndNoPower 防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示
 	// 关联问题 No match found for location with path 'xxx'
 	filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower];
@@ -95,7 +96,7 @@ export function setFilterRouteEnd() {
  * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
  */
 export async function setAddRoute() {
-	await setFilterRouteEnd().forEach((route) => {
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
 		router.addRoute(route);
 	});
 }
@@ -130,10 +131,10 @@ export async function setBackEndControlRefreshRoutes() {
  * @param routes 后端返回的路由表数组
  * @returns 返回处理成函数后的 component
  */
-export function backEndComponent(routes) {
+export function backEndComponent(routes: any) {
 	if (!routes) return;
-	return routes.map((item) => {
-		if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component);
+	return routes.map((item: any) => {
+		if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
 		item.children && backEndComponent(item.children);
 		return item;
 	});
@@ -145,7 +146,7 @@ export function backEndComponent(routes) {
  * @param component 当前要处理项 component
  * @returns 返回处理成函数后的 component
  */
-export function dynamicImport(dynamicViewsModules, component) {
+export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
 	const keys = Object.keys(dynamicViewsModules);
 	const matchKeys = keys.filter((key) => {
 		const k = key.replace(/..\/views|../, '');

src/router/frontEnd.ts

@@ -1,3 +1,4 @@
+import { RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
 import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
@@ -41,7 +42,7 @@ export async function initFrontEndControlRoutes() {
  * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
  */
 export async function setAddRoute() {
-	await setFilterRouteEnd().forEach((route) => {
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
 		router.addRoute(route);
 	});
 }
@@ -53,8 +54,8 @@ export async function setAddRoute() {
  * @link 参考：https://next.router.vuejs.org/zh/api/#push
  */
 export async function frontEndsResetRoute() {
-	await setFilterRouteEnd().forEach((route) => {
-		const routeName = route.name;
+	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
+		const routeName: any = route.name;
 		router.hasRoute(routeName) && router.removeRoute(routeName);
 	});
 }
@@ -65,7 +66,7 @@ export async function frontEndsResetRoute() {
  * @returns 返回替换后的路由数组
  */
 export function setFilterRouteEnd() {
-	let filterRouteEnd = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
+	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
 	// notFoundAndNoPower 防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示
 	// 关联问题 No match found for location with path 'xxx'
 	filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
@@ -79,14 +80,14 @@ export function setFilterRouteEnd() {
  * @param chil dynamicRoutes（/@/router/route）第一个顶级 children 的下路由集合
  * @returns 返回有当前用户权限标识的路由数组
  */
-export function setFilterRoute(chil) {
+export function setFilterRoute(chil: any) {
 	const stores = useUserInfo(pinia);
 	const { userInfos } = storeToRefs(stores);
-	let filterRoute = [];
-	chil.forEach((route) => {
+	let filterRoute: any = [];
+	chil.forEach((route: any) => {
 		if (route.meta.roles) {
-			route.meta.roles.forEach((metaRoles) => {
-				userInfos.value.roles.forEach((roles) => {
+			route.meta.roles.forEach((metaRoles: any) => {
+				userInfos.value.roles.forEach((roles: any) => {
 					if (metaRoles === roles) filterRoute.push({ ...route });
 				});
 			});
@@ -128,8 +129,8 @@ export function setFilterMenuAndCacheTagsViewRoutes() {
  * @param route 当前循环时的路由项
  * @returns 返回对比后有权限的路由项
  */
-export function hasRoles(roles, route) {
-	if (route.meta && route.meta.roles) return roles.some((role) => route.meta.roles.includes(role));
+export function hasRoles(roles: any, route: any) {
+	if (route.meta && route.meta.roles) return roles.some((role: any) => route.meta.roles.includes(role));
 	else return true;
 }
 
@@ -139,9 +140,9 @@ export function hasRoles(roles, route) {
  * @param roles 用户权限标识，在 userInfos（用户信息）的 roles（登录页登录时缓存到浏览器）数组
  * @returns 返回有权限的路由数组 `meta.roles` 中控制
  */
-export function setFilterHasRolesMenu(routes, roles) {
-	const menu = [];
-	routes.forEach((route) => {
+export function setFilterHasRolesMenu(routes: any, roles: any) {
+	const menu: any = [];
+	routes.forEach((route: any) => {
 		const item = { ...route };
 		if (hasRoles(roles, item)) {
 			if (item.children) item.children = setFilterHasRolesMenu(item.children, roles);

src/router/index.ts

@@ -46,7 +46,7 @@ export const router = createRouter({
  * @param arr 传入路由菜单数据数组
  * @returns 返回处理后的一维路由菜单数组
  */
-export function formatFlatteningRoutes(arr) {
+export function formatFlatteningRoutes(arr: any) {
 	if (arr.length <= 0) return false;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[i].children) {
@@ -63,11 +63,11 @@ export function formatFlatteningRoutes(arr) {
  * @param arr 处理后的一维路由菜单数组
  * @returns 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式
  */
-export function formatTwoStageRoutes(arr) {
+export function formatTwoStageRoutes(arr: any) {
 	if (arr.length <= 0) return false;
-	const newArr = [];
-	const cacheList = [];
-	arr.forEach((v) => {
+	const newArr: any = [];
+	const cacheList: Array<string> = [];
+	arr.forEach((v: any) => {
 		if (v.path === '/') {
 			newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
 		} else {

src/router/route.ts

@@ -1,4 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+
 /**
+ * 建议：路由 path 路径与文件夹名称相同，找文件可浏览器地址找，方便定位文件位置
+ *
  * 路由meta对象参数说明
  * meta: {
  *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
@@ -12,13 +16,28 @@
  * }
  */
 
+// 扩展 RouteMeta 接口
+declare module 'vue-router' {
+	interface RouteMeta {
+		title?: string;
+		isLink?: string;
+		isHide?: boolean;
+		isKeepAlive?: boolean;
+		isAffix?: boolean;
+		isIframe?: boolean;
+		roles?: string[];
+		icon?: string;
+	}
+}
+
 /**
  * 定义动态路由
+ * 前端添加路由，请在顶级节点的 `children 数组` 里添加
  * @description 未开启 isRequestRoutes 为 true 时使用（前端控制路由），开启时第一个顶级 children 的路由将被替换成接口请求回来的路由数据
  * @description 各字段请查看 `/@/views/system/menu/component/addMenu.vue 下的 ruleForm`
  * @returns 返回路由菜单数据
  */
-export const dynamicRoutes = [
+export const dynamicRoutes: Array<RouteRecordRaw> = [
 	{
 		path: '/',
 		name: '/',
@@ -150,7 +169,7 @@ export const notFoundAndNoPower = [
 		name: 'notFound',
 		component: () => import('/@/views/error/404.vue'),
 		meta: {
-			title: '页面找不到',
+			title: '找不到此页面',
 			isHide: true,
 		},
 	},
@@ -159,7 +178,7 @@ export const notFoundAndNoPower = [
 		name: 'noPower',
 		component: () => import('/@/views/error/401.vue'),
 		meta: {
-			title: '页面无权限',
+			title: '没有权限',
 			isHide: true,
 		},
 	},
@@ -171,7 +190,7 @@ export const notFoundAndNoPower = [
  * @description 前端控制直接改 dynamicRoutes 中的路由，后端控制不需要修改，请求接口路由数据时，会覆盖 dynamicRoutes 第一个顶级 children 的内容（全屏，不包含 layout 中的路由出口）
  * @returns 返回路由菜单数据
  */
-export const staticRoutes = [
+export const staticRoutes: Array<RouteRecordRaw> = [
 	{
 		path: '/login',
 		name: 'login',

src/stores/keepAliveNames.ts

@@ -9,22 +9,22 @@ import { defineStore } from 'pinia';
  * @methods delAllCachedViews 右键菜单`全部关闭`，删除要缓存的路由 names（关闭 Tagsview）
  */
 export const useKeepALiveNames = defineStore('keepALiveNames', {
-	state: () => ({
+	state: (): KeepAliveNamesState => ({
 		keepAliveNames: [],
 		cachedViews: [],
 	}),
 	actions: {
-		async setCacheKeepAlive(data) {
+		async setCacheKeepAlive(data: Array<string>) {
 			this.keepAliveNames = data;
 		},
-		async addCachedView(view) {
+		async addCachedView(view: any) {
 			if (view.meta.isKeepAlive) this.cachedViews?.push(view.name);
 		},
-		async delCachedView(view) {
+		async delCachedView(view: any) {
 			const index = this.cachedViews.indexOf(view.name);
 			index > -1 && this.cachedViews.splice(index, 1);
 		},
-		async delOthersCachedViews(view) {
+		async delOthersCachedViews(view: any) {
 			if (view.meta.isKeepAlive) this.cachedViews = [view.name];
 			else this.cachedViews = [];
 		},

src/stores/requestOldRoutes.ts

@@ -5,11 +5,11 @@ import { defineStore } from 'pinia';
  * @methods setCacheKeepAlive 设置接口原始路由数据
  */
 export const useRequestOldRoutes = defineStore('requestOldRoutes', {
-	state: () => ({
+	state: (): RequestOldRoutesState => ({
 		requestOldRoutes: [],
 	}),
 	actions: {
-		async setRequestOldRoutes(routes) {
+		async setRequestOldRoutes(routes: Array<string>) {
 			this.requestOldRoutes = routes;
 		},
 	},

src/stores/routesList.ts

@@ -7,19 +7,19 @@ import { defineStore } from 'pinia';
  * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
  */
 export const useRoutesList = defineStore('routesList', {
-	state: () => ({
+	state: (): RoutesListState => ({
 		routesList: [],
 		isColumnsMenuHover: false,
 		isColumnsNavHover: false,
 	}),
 	actions: {
-		async setRoutesList(data) {
+		async setRoutesList(data: Array<string>) {
 			this.routesList = data;
 		},
-		async setColumnsMenuHover(bool) {
+		async setColumnsMenuHover(bool: Boolean) {
 			this.isColumnsMenuHover = bool;
 		},
-		async setColumnsNavHover(bool) {
+		async setColumnsNavHover(bool: Boolean) {
 			this.isColumnsNavHover = bool;
 		},
 	},

src/stores/tagsViewRoutes.ts

@@ -7,15 +7,15 @@ import { Session } from '/@/utils/storage';
  * @methods setCurrenFullscreen 设置开启/关闭全屏时的 boolean 状态
  */
 export const useTagsViewRoutes = defineStore('tagsViewRoutes', {
-	state: () => ({
+	state: (): TagsViewRoutesState => ({
 		tagsViewRoutes: [],
 		isTagsViewCurrenFull: false,
 	}),
 	actions: {
-		async setTagsViewRoutes(data) {
+		async setTagsViewRoutes(data: Array<string>) {
 			this.tagsViewRoutes = data;
 		},
-		setCurrenFullscreen(bool) {
+		setCurrenFullscreen(bool: Boolean) {
 			Session.set('isTagsViewCurrenFull', bool);
 			this.isTagsViewCurrenFull = bool;
 		},

src/stores/themeConfig.ts

@@ -9,7 +9,7 @@ import { defineStore } from 'pinia';
  * 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
  */
 export const useThemeConfig = defineStore('themeConfig', {
-	state: () => ({
+	state: (): ThemeConfigState => ({
 		themeConfig: {
 			// 是否开启布局配置抽屉
 			isDrawer: false,
@@ -149,7 +149,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 		},
 	}),
 	actions: {
-		setThemeConfig(data) {
+		setThemeConfig(data: ThemeConfigState) {
 			this.themeConfig = data.themeConfig;
 		},
 	},

src/stores/userInfo.ts

@@ -7,7 +7,7 @@ import { Session } from '/@/utils/storage';
  * @methods setUserInfos 设置用户信息
  */
 export const useUserInfo = defineStore('userInfo', {
-	state: () => ({
+	state: (): UserInfosState => ({
 		userInfos: {
 			userName: '',
 			photo: '',
@@ -22,7 +22,7 @@ export const useUserInfo = defineStore('userInfo', {
 			if (Session.get('userInfo')) {
 				this.userInfos = Session.get('userInfo');
 			} else {
-				const userInfos = await this.getApiUserInfo();
+				const userInfos = <UserInfos>await this.getApiUserInfo();
 				this.userInfos = userInfos;
 			}
 		},
@@ -34,16 +34,16 @@ export const useUserInfo = defineStore('userInfo', {
 					// 模拟数据，请求接口时，记得删除多余代码及对应依赖的引入
 					const userName = Cookies.get('userName');
 					// 模拟数据
-					let defaultRoles = [];
-					let defaultAuthBtnList = [];
+					let defaultRoles: Array<string> = [];
+					let defaultAuthBtnList: Array<string> = [];
 					// admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
-					let adminRoles = ['admin'];
+					let adminRoles: Array<string> = ['admin'];
 					// admin 按钮权限标识
-					let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
+					let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
 					// test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
-					let testRoles = ['common'];
+					let testRoles: Array<string> = ['common'];
 					// test 按钮权限标识
-					let testAuthBtnList = ['btn.add', 'btn.link'];
+					let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
 					// 不同用户模拟不同的用户权限
 					if (userName === 'admin') {
 						defaultRoles = adminRoles;

src/types/axios.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as axios from 'axios';
+
+// 扩展 axios 数据返回类型，可自行扩展
+declare module 'axios' {
+	export interface AxiosResponse<T = any> {
+		code: number;
+		data: T;
+		message: string;
+		type?: string;
+		[key: string]: T;
+	}
+}

src/types/global.d.ts

@@ -0,0 +1,112 @@
+// 申明外部 npm 插件模块
+declare module 'vue-grid-layout';
+declare module 'qrcodejs2-fixes';
+declare module 'splitpanes';
+declare module 'js-cookie';
+declare module '@wangeditor/editor-for-vue';
+declare module 'js-table2excel';
+declare module 'qs';
+declare module 'sortablejs';
+
+// 声明一个模块，防止引入文件时报错
+declare module '*.json';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.scss';
+declare module '*.ts';
+declare module '*.js';
+
+// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+// 声明文件，定义全局变量
+/* eslint-disable */
+declare interface Window {
+	nextLoading: boolean;
+}
+
+// 声明路由当前项类型
+declare type RouteItem<T = any> = {
+	path: string;
+	name?: string | symbol | undefined | null;
+	redirect?: string;
+	k?: T;
+	meta?: {
+		title?: string;
+		isLink?: string;
+		isHide?: boolean;
+		isKeepAlive?: boolean;
+		isAffix?: boolean;
+		isIframe?: boolean;
+		roles?: string[];
+		icon?: string;
+		isDynamic?: boolean;
+		isDynamicPath?: string;
+		isIframeOpen?: string;
+		loading?: boolean;
+	};
+	children: T[];
+	query?: { [key: string]: T };
+	params?: { [key: string]: T };
+	contextMenuClickId?: string | number;
+	commonUrl?: string;
+	isFnClick?: boolean;
+	url?: string;
+	transUrl?: string;
+	title?: string;
+	id?: string | number;
+};
+
+// 声明路由 to from
+declare interface RouteToFrom<T = any> extends RouteItem {
+	path?: string;
+	children?: T[];
+}
+
+// 声明路由当前项类型集合
+declare type RouteItems<T extends RouteItem = any> = T[];
+
+// 声明 ref
+declare type RefType<T = any> = T | null;
+
+// 声明 HTMLElement
+declare type HtmlType = HTMLElement | string | undefined | null;
+
+// 申明 children 可选
+declare type ChilType<T = any> = {
+	children?: T[];
+};
+
+// 申明 数组
+declare type EmptyArrayType<T = any> = T[];
+
+// 申明 对象
+declare type EmptyObjectType<T = any> = {
+	[key: string]: T;
+};
+
+// 申明 select option
+declare type SelectOptionType = {
+	value: string | number;
+	label: string | number;
+};
+
+// 鼠标滚轮滚动类型
+declare interface WheelEventType extends WheelEvent {
+	wheelDelta: number;
+}
+
+// table 数据格式公共类型
+declare interface TableType<T = any> {
+	total: number;
+	loading: boolean;
+	param: {
+		pageNum: number;
+		pageSize: number;
+		[key: string]: T;
+	};
+}

src/types/layout.d.ts

@@ -0,0 +1,59 @@
+// aside
+declare type AsideState = {
+	menuList: RouteRecordRaw[];
+	clientWidth: number;
+};
+
+// columnsAside
+declare type ColumnsAsideState<T = any> = {
+	columnsAsideList: T[];
+	liIndex: number;
+	liOldIndex: null | number;
+	liHoverIndex: null | number;
+	liOldPath: null | string;
+	difference: number;
+	routeSplit: string[];
+};
+
+// navBars breadcrumb
+declare type BreadcrumbState<T = any> = {
+	breadcrumbList: T[];
+	routeSplit: string[];
+	routeSplitFirst: string;
+	routeSplitIndex: number;
+};
+
+// navBars search
+declare type SearchState<T = any> = {
+	isShowSearch: boolean;
+	menuQuery: string;
+	tagsViewList: T[];
+};
+
+// navBars tagsView
+declare type TagsViewState<T = any> = {
+	routeActive: string | T;
+	routePath: string | unknown;
+	dropdown: {
+		x: string | number;
+		y: string | number;
+	};
+	sortable: T;
+	tagsRefsIndex: number;
+	tagsViewList: T[];
+	tagsViewRoutesList: T[];
+};
+
+// navBars parent
+declare type ParentViewState<T = any> = {
+	refreshRouterViewKey: string;
+	iframeRefreshKey: string;
+	keepAliveNameList: string[];
+	iframeList: T[];
+};
+
+// navBars link
+declare type LinkViewState = {
+	title: string;
+	isLink: string;
+};

src/types/mitt.d.ts

@@ -0,0 +1,38 @@
+/**
+ * mitt 事件类型定义
+ *
+ * @method openSetingsDrawer 打开布局设置弹窗
+ * @method restoreDefault 分栏布局，鼠标移入、移出数据显示
+ * @method setSendColumnsChildren 分栏布局，鼠标移入、移出菜单数据传入到 navMenu 下的菜单中
+ * @method setSendClassicChildren 经典布局，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+ * @method getBreadcrumbIndexSetFilterRoutes 布局设置弹窗，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+ * @method layoutMobileResize 浏览器窗口改变时，用于适配移动端界面显示
+ * @method openOrCloseSortable 布局设置弹窗，开启 TagsView 拖拽
+ * @method openShareTagsView 布局设置弹窗，开启 TagsView 共用
+ * @method onTagsViewRefreshRouterView tagsview 刷新界面
+ * @method onCurrentContextmenuClick tagsview 右键菜单每项点击时
+ */
+declare type MittType<T = any> = {
+	openSetingsDrawer?: string;
+	restoreDefault?: string;
+	setSendColumnsChildren: T;
+	setSendClassicChildren: T;
+	getBreadcrumbIndexSetFilterRoutes?: string;
+	layoutMobileResize: T;
+	openOrCloseSortable?: string;
+	openShareTagsView?: string;
+	onTagsViewRefreshRouterView?: T;
+	onCurrentContextmenuClick?: T;
+};
+
+// mitt 参数类型定义
+declare type LayoutMobileResize = {
+	layout: string;
+	clientWidth: number;
+};
+
+// mitt 参数菜单类型
+declare type MittMenu = {
+	children: RouteRecordRaw[];
+	item?: RouteItem;
+};

src/types/pinia.d.ts

@@ -0,0 +1,92 @@
+/**
+ * pinia 类型定义
+ */
+
+// 用户信息
+declare interface UserInfos<T = any> {
+	authBtnList: string[];
+	photo: string;
+	roles: string[];
+	time: number;
+	userName: string;
+	[key: string]: T;
+}
+declare interface UserInfosState {
+	userInfos: UserInfos;
+}
+
+// 路由缓存列表
+declare interface KeepAliveNamesState {
+	keepAliveNames: string[];
+	cachedViews: string[];
+}
+
+// 后端返回原始路由(未处理时)
+declare interface RequestOldRoutesState {
+	requestOldRoutes: string[];
+}
+
+// TagsView 路由列表
+declare interface TagsViewRoutesState<T = any> {
+	tagsViewRoutes: T[];
+	isTagsViewCurrenFull: Boolean;
+}
+
+// 路由列表
+declare interface RoutesListState<T = any> {
+	routesList: T[];
+	isColumnsMenuHover: Boolean;
+	isColumnsNavHover: Boolean;
+}
+
+// 布局配置
+declare interface ThemeConfigState {
+	themeConfig: {
+		isDrawer: boolean;
+		primary: string;
+		topBar: string;
+		topBarColor: string;
+		isTopBarColorGradual: boolean;
+		menuBar: string;
+		menuBarColor: string;
+		menuBarActiveColor: string;
+		isMenuBarColorGradual: boolean;
+		columnsMenuBar: string;
+		columnsMenuBarColor: string;
+		isColumnsMenuBarColorGradual: boolean;
+		isColumnsMenuHoverPreload: 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;
+		isShareTagsView: boolean;
+		isFooter: boolean;
+		isGrayscale: boolean;
+		isInvert: boolean;
+		isIsDark: boolean;
+		isWartermark: boolean;
+		wartermarkText: string;
+		tagsStyle: string;
+		animation: string;
+		columnsAsideStyle: string;
+		columnsAsideLayout: string;
+		layout: string;
+		isRequestRoutes: boolean;
+		globalTitle: string;
+		globalViceTitle: string;
+		globalViceTitleMsg: string;
+		globalI18n: string;
+		globalComponentSize: string;
+	};
+}

src/types/views.d.ts

@@ -0,0 +1,330 @@
+/**
+ * views personal
+ */
+type NewInfo = {
+	title: string;
+	date: string;
+	link: string;
+};
+type Recommend = {
+	title: string;
+	msg: string;
+	icon: string;
+	bg: string;
+	iconColor: string;
+};
+declare type PersonalState = {
+	newsInfoList: NewInfo[];
+	recommendList: Recommend[];
+	personalForm: {
+		name: string;
+		email: string;
+		autograph: string;
+		occupation: string;
+		phone: string;
+		sex: string;
+	};
+};
+
+/**
+ * views visualizing
+ */
+declare type Demo2State<T = any> = {
+	time: {
+		txt: string;
+		fun: number;
+	};
+	dropdownList: T[];
+	dropdownActive: string;
+	skyList: T[];
+	dBtnList: T[];
+	chartData4Index: number;
+	dBtnActive: number;
+	earth3DBtnList: T[];
+	chartData4List: T[];
+	myCharts: T[];
+};
+
+/**
+ * views params
+ */
+declare type ParamsState = {
+	value: string;
+	tagsViewName: string;
+	tagsViewNameIsI18n: boolean;
+};
+
+/**
+ * views system
+ */
+// role
+declare interface RowRoleType {
+	roleName: string;
+	roleSign: string;
+	describe: string;
+	sort: number;
+	status: boolean;
+	createTime: string;
+}
+
+interface SysRoleTableType extends TableType {
+	data: RowRoleType[];
+}
+
+declare interface SysRoleState {
+	tableData: SysRoleTableType;
+}
+
+declare type TreeType = {
+	id: number;
+	label: string;
+	children?: TreeType[];
+};
+
+// user
+declare type RowUserType<T = any> = {
+	userName: string;
+	userNickname: string;
+	roleSign: string;
+	department: string[];
+	phone: string;
+	email: string;
+	sex: string;
+	password: string;
+	overdueTime: T;
+	status: boolean;
+	describe: string;
+	createTime: T;
+};
+
+interface SysUserTableType extends TableType {
+	data: RowUserType[];
+}
+
+declare interface SysUserState {
+	tableData: SysUserTableType;
+}
+
+declare type DeptTreeType = {
+	deptName: string;
+	createTime: string;
+	status: boolean;
+	sort: number;
+	describe: string;
+	id: number | string;
+	children?: DeptTreeType[];
+};
+
+// dept
+declare interface RowDeptType extends DeptTreeType {
+	deptLevel: string[];
+	person: string;
+	phone: string;
+	email: string;
+}
+
+interface SysDeptTableType extends TableType {
+	data: DeptTreeType[];
+}
+
+declare interface SysDeptState {
+	tableData: SysDeptTableType;
+}
+
+// dic
+type ListType = {
+	id: number;
+	label: string;
+	value: string;
+};
+
+declare interface RowDicType {
+	dicName: string;
+	fieldName: string;
+	describe: string;
+	status: boolean;
+	createTime: string;
+	list: ListType[];
+}
+
+interface SysDicTableType extends TableType {
+	data: RowDicType[];
+}
+
+declare interface SysDicState {
+	tableData: SysDicTableType;
+}
+
+/**
+ * views pages
+ */
+//  filtering
+declare type FilteringChilType = {
+	id: number | string;
+	label: string;
+	active: boolean;
+};
+
+declare type FilterListType = {
+	img: string;
+	title: string;
+	evaluate: string;
+	collection: string;
+	price: string;
+	monSales: string;
+	id: number | string;
+	loading?: boolean;
+};
+
+declare type FilteringRowType = {
+	title: string;
+	isMore: boolean;
+	isShowMore: boolean;
+	id: number | string;
+	children: FilteringChilType[];
+};
+
+// tableRules
+declare type TableRulesHeaderType = {
+	prop: string;
+	width: string | number;
+	label: string;
+	isRequired?: boolean;
+	isTooltip?: boolean;
+	type: string;
+};
+
+declare type TableRulesState = {
+	tableData: {
+		data: EmptyObjectType[];
+		header: TableRulesHeaderType[];
+		option: SelectOptionType[];
+	};
+};
+
+declare type TableRulesOneProps = {
+	name: string;
+	email: string;
+	autograph: string;
+	occupation: string;
+};
+
+// tree
+declare type RowTreeType = {
+	id: number;
+	label: string;
+	label1: string;
+	label2: string;
+	isShow: boolean;
+	children?: RowTreeType[];
+};
+
+// workflow index
+declare type NodeListState = {
+	id: string | number;
+	nodeId: string | undefined;
+	class: HTMLElement | string;
+	left: number | string;
+	top: number | string;
+	icon: string;
+	name: string;
+};
+
+declare type LineListState = {
+	sourceId: string;
+	targetId: string;
+	label: string;
+};
+
+declare type XyState = {
+	x: string | number;
+	y: string | number;
+};
+
+declare type WorkflowState<T = any> = {
+	leftNavList: T[];
+	dropdownNode: XyState;
+	dropdownLine: XyState;
+	isShow: boolean;
+	jsPlumb: T;
+	jsPlumbNodeIndex: null | number;
+	jsplumbDefaults: T;
+	jsplumbMakeSource: T;
+	jsplumbMakeTarget: T;
+	jsplumbConnect: T;
+	jsplumbData: {
+		nodeList: NodeListState[];
+		lineList: LineListState[];
+	};
+};
+
+// workflow drawer
+declare type WorkflowDrawerNodeState<T = any> = {
+	node: { [key: string]: T };
+	nodeRules: T;
+	form: T;
+	tabsActive: string;
+	loading: {
+		extend: boolean;
+	};
+};
+
+declare type WorkflowDrawerLabelType = {
+	type: string;
+	label: string;
+};
+
+declare type WorkflowDrawerState<T = any> = {
+	isOpen: boolean;
+	nodeData: {
+		type: string;
+	};
+	jsplumbConn: T;
+};
+
+/**
+ * views make
+ */
+// tableDemo
+declare type TableDemoPageType = {
+	pageNum: number;
+	pageSize: number;
+};
+
+declare type TableHeaderType = {
+	key: string;
+	width: string;
+	title: string;
+	type: string | number;
+	colWidth: string;
+	width?: string | number;
+	height?: string | number;
+	isCheck: boolean;
+};
+
+declare type TableSearchType = {
+	label: string;
+	prop: string;
+	placeholder: string;
+	required: boolean;
+	type: string;
+	options?: SelectOptionType[];
+};
+
+declare type TableDemoState = {
+	tableData: {
+		data: EmptyObjectType[];
+		header: TableHeaderType[];
+		config: {
+			total: number;
+			loading: boolean;
+			isBorder: boolean;
+			isSelection: boolean;
+			isSerialNo: boolean;
+			isOperate: boolean;
+		};
+		search: TableSearchType[];
+		param: EmptyObjectType;
+		printName: string;
+	};
+};

src/utils/arrayOperation.ts

@@ -4,7 +4,7 @@
  * @param old 源数据
  * @returns 两数组相同返回 `true`，反之则反
  */
-export function judementSameArr(newArr, oldArr) {
+export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]): boolean {
 	const news = removeDuplicate(newArr);
 	const olds = removeDuplicate(oldArr);
 	let count = 0;
@@ -23,7 +23,7 @@ export function judementSameArr(newArr, oldArr) {
  * @param b 要比较的对象二
  * @returns 相同返回 true，反之则反
  */
-export function isObjectValueEqual(a, b) {
+export function isObjectValueEqual<T>(a: T, b: T): boolean {
 	if (!a || !b) return false;
 	let aProps = Object.getOwnPropertyNames(a);
 	let bProps = Object.getOwnPropertyNames(b);
@@ -48,19 +48,18 @@ export function isObjectValueEqual(a, b) {
  * @param attr 需要去重的键值（数组对象）
  * @returns
  */
-export function removeDuplicate(arr, attr) {
-	if (!arr && !arr.length) {
+export function removeDuplicate(arr: EmptyArrayType, attr?: string) {
+	if (!Object.keys(arr).length) {
 		return arr;
 	} else {
 		if (attr) {
-			const obj = {};
-			const newArr = arr.reduce((cur, item) => {
+			const obj: EmptyObjectType = {};
+			return arr.reduce((cur: EmptyArrayType[], item: EmptyArrayType) => {
 				obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
 				return cur;
 			}, []);
-			return newArr;
 		} else {
-			return Array.from(new Set([...arr]));
+			return [...new Set(arr)];
 		}
 	}
 }

src/utils/authFunction.ts

@@ -6,9 +6,9 @@ import { judementSameArr } from '/@/utils/arrayOperation';
  * @param value 权限值
  * @returns 有权限，返回 `true`，反之则反
  */
-export function auth(value) {
+export function auth(value: string): boolean {
 	const stores = useUserInfo();
-	return stores.userInfos.authBtnList.some((v) => v === value);
+	return stores.userInfos.authBtnList.some((v: string) => v === value);
 }
 
 /**
@@ -16,11 +16,11 @@ export function auth(value) {
  * @param value 权限值
  * @returns 有权限，返回 `true`，反之则反
  */
-export function auths(value) {
+export function auths(value: Array<string>): boolean {
 	let flag = false;
 	const stores = useUserInfo();
-	stores.userInfos.authBtnList.map((val) => {
-		value.map((v) => {
+	stores.userInfos.authBtnList.map((val: string) => {
+		value.map((v: string) => {
 			if (val === v) flag = true;
 		});
 	});
@@ -32,7 +32,7 @@ export function auths(value) {
  * @param value 权限值
  * @returns 有权限，返回 `true`，反之则反
  */
-export function authAll(value) {
+export function authAll(value: Array<string>): boolean {
 	const stores = useUserInfo();
 	return judementSameArr(value, stores.userInfos.authBtnList);
 }

src/utils/commonFunction.ts

@@ -7,21 +7,21 @@ export default function () {
 	const { toClipboard } = useClipboard();
 
 	// 百分比格式化
-	const percentFormat = (row, column, cellValue) => {
+	const percentFormat = (row: EmptyArrayType, column: number, cellValue: string) => {
 		return cellValue ? `${cellValue}%` : '-';
 	};
 	// 列表日期时间格式化
-	const dateFormatYMD = (row, column, cellValue) => {
+	const dateFormatYMD = (row: EmptyArrayType, column: number, cellValue: string) => {
 		if (!cellValue) return '-';
 		return formatDate(new Date(cellValue), 'YYYY-mm-dd');
 	};
 	// 列表日期时间格式化
-	const dateFormatYMDHMS = (row, column, cellValue) => {
+	const dateFormatYMDHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
 		if (!cellValue) return '-';
 		return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
 	};
 	// 列表日期时间格式化
-	const dateFormatHMS = (row, column, cellValue) => {
+	const dateFormatHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
 		if (!cellValue) return '-';
 		let time = 0;
 		if (typeof row === 'number') time = row;
@@ -29,15 +29,15 @@ export default function () {
 		return formatDate(new Date(time * 1000), 'HH:MM:SS');
 	};
 	// 小数格式化
-	const scaleFormat = (value = '0', scale = 4) => {
+	const scaleFormat = (value: string = '0', scale: number = 4) => {
 		return Number.parseFloat(value).toFixed(scale);
 	};
 	// 小数格式化
-	const scale2Format = (value = '0') => {
+	const scale2Format = (value: string = '0') => {
 		return Number.parseFloat(value).toFixed(2);
 	};
 	// 点击复制文本
-	const copyText = (text) => {
+	const copyText = (text: string) => {
 		return new Promise((resolve, reject) => {
 			try {
 				// 复制

src/utils/formatTime.ts

@@ -9,11 +9,11 @@
  * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
  * @returns 返回拼接后的时间字符串
  */
-export function formatDate(date, format) {
+export function formatDate(date: Date, format: string): string {
 	let we = date.getDay(); // 星期
 	let z = getWeek(date); // 周
 	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
-	const opt = {
+	const opt: { [key: string]: string } = {
 		'Y+': date.getFullYear().toString(), // 年
 		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
 		'd+': date.getDate().toString(), // 日
@@ -23,21 +23,21 @@ export function formatDate(date, format) {
 		'q+': qut, // 季度
 	};
 	// 中文数字 (星期)
-	const week = {
-		0: '日',
-		1: '一',
-		2: '二',
-		3: '三',
-		4: '四',
-		5: '五',
-		6: '六',
+	const week: { [key: string]: string } = {
+		'0': '日',
+		'1': '一',
+		'2': '二',
+		'3': '三',
+		'4': '四',
+		'5': '五',
+		'6': '六',
 	};
 	// 中文数字（季度）
-	const quarter = {
-		1: '一',
-		2: '二',
-		3: '三',
-		4: '四',
+	const quarter: { [key: string]: string } = {
+		'1': '一',
+		'2': '二',
+		'3': '三',
+		'4': '四',
 	};
 	if (/(W+)/.test(format))
 		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
@@ -56,7 +56,7 @@ export function formatDate(date, format) {
  * @param dateTime 当前传入的日期值
  * @returns 返回第几周数字值
  */
-export function getWeek(dateTime) {
+export function getWeek(dateTime: Date): number {
 	let temptTime = new Date(dateTime.getTime());
 	// 周几
 	let weekday = temptTime.getDay() || 7;
@@ -83,11 +83,11 @@ export function getWeek(dateTime) {
  * @description param 3天：   60 * 60* 24 * 1000 * 3
  * @returns 返回拼接后的时间字符串
  */
-export function formatPast(param, format = 'YYYY-mm-dd') {
+export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
 	// 传入格式处理、存储转换值
-	let t, s;
+	let t: any, s: number;
 	// 获取js 时间戳
-	let time = new Date().getTime();
+	let time: number = new Date().getTime();
 	// 是否是对象
 	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
 	// 当前时间戳 - 传入时间戳
@@ -124,8 +124,8 @@ export function formatPast(param, format = 'YYYY-mm-dd') {
  * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
  * @returns 返回拼接后的时间字符串
  */
-export function formatAxis(param) {
-	let hour = new Date(param).getHours();
+export function formatAxis(param: Date): string {
+	let hour: number = new Date(param).getHours();
 	if (hour < 6) return '凌晨好';
 	else if (hour < 9) return '早上好';
 	else if (hour < 12) return '上午好';

src/utils/getStyleSheets.ts

@@ -5,7 +5,7 @@ import * as svg from '@element-plus/icons-vue';
 const getAlicdnIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-			const styles = document.styleSheets;
+			const styles: any = document.styleSheets;
 			let sheetsList = [];
 			let sheetsIconList = [];
 			for (let i = 0; i < styles.length; i++) {
@@ -32,7 +32,7 @@ const getAlicdnIconfont = () => {
 const getElementPlusIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-			const icons = svg;
+			const icons = svg as any;
 			const sheetsIconList = [];
 			for (const i in icons) {
 				sheetsIconList.push(`ele-${icons[i].name}`);
@@ -47,7 +47,7 @@ const getElementPlusIconfont = () => {
 const getAwesomeIconfont = () => {
 	return new Promise((resolve, reject) => {
 		nextTick(() => {
-			const styles = document.styleSheets;
+			const styles: any = document.styleSheets;
 			let sheetsList = [];
 			let sheetsIconList = [];
 			for (let i = 0; i < styles.length; i++) {

src/utils/loading.ts

@@ -9,8 +9,8 @@ import '/@/theme/loading.scss';
 export const NextLoading = {
 	// 创建 loading
 	start: () => {
-		const bodys = document.body;
-		const div = document.createElement('div');
+		const bodys: Element = document.body;
+		const div = <HTMLElement>document.createElement('div');
 		div.setAttribute('class', 'loading-next');
 		const htmls = `
 			<div class="loading-next-box">
@@ -32,11 +32,11 @@ export const NextLoading = {
 		window.nextLoading = true;
 	},
 	// 移除 loading
-	done: (time = 0) => {
+	done: (time: number = 0) => {
 		nextTick(() => {
 			setTimeout(() => {
 				window.nextLoading = false;
-				const el = document.querySelector('.loading-next');
+				const el = <HTMLElement>document.querySelector('.loading-next');
 				el?.parentNode?.removeChild(el);
 			}, time);
 		});

src/utils/mitt.js

@@ -1,8 +0,0 @@
-// https://www.npmjs.com/package/mitt
-import mitt from 'mitt';
-
-// 类型
-const emitter = mitt();
-
-// 导出
-export default emitter;

src/utils/mitt.ts

@@ -0,0 +1,8 @@
+// https://www.npmjs.com/package/mitt
+import mitt, { Emitter } from 'mitt';
+
+// 类型
+const emitter: Emitter<MittType> = mitt<MittType>();
+
+// 导出
+export default emitter;

src/utils/other.ts

@@ -1,10 +1,12 @@
 import { nextTick, defineAsyncComponent } from 'vue';
+import type { App } from 'vue';
 import * as svg from '@element-plus/icons-vue';
 import router from '/@/router/index';
-import pinia from '../stores/index';
+import pinia from '/@/stores/index';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { Local } from '/@/utils/storage';
+import { verifyUrl } from '/@/utils/toolsValidate';
 
 // 引入组件
 const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
@@ -14,8 +16,8 @@ const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.v
  * @param app vue 实例
  * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
  */
-export function elSvg(app) {
-	const icons = svg;
+export function elSvg(app: App) {
+	const icons = svg as any;
 	for (const i in icons) {
 		app.component(`ele-${icons[i].name}`, icons[i]);
 	}
@@ -31,10 +33,10 @@ export function useTitle() {
 	const { themeConfig } = storeToRefs(stores);
 	nextTick(() => {
 		let webTitle = '';
-		let globalTitle = themeConfig.value.globalTitle;
+		let globalTitle: string = themeConfig.value.globalTitle;
 		const { path, meta } = router.currentRoute.value;
 		if (path === '/login') {
-			webTitle = meta.title;
+			webTitle = <string>meta.title;
 		} else {
 			webTitle = setTagsViewNameI18n(router.currentRoute.value);
 		}
@@ -47,8 +49,8 @@ export function useTitle() {
  * @param params 路由 query、params 中的 tagsViewName
  * @returns 返回当前 tagsViewName 名称
  */
-export function setTagsViewNameI18n(item) {
-	let tagsViewName = '';
+export function setTagsViewNameI18n(item: any) {
+	let tagsViewName: string = '';
 	const { query, params, meta } = item;
 	if (query?.tagsViewName || params?.tagsViewName) {
 		// 非国际化
@@ -66,9 +68,9 @@ export function setTagsViewNameI18n(item) {
  * @param arr 列表数据
  * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
  */
-export const lazyImg = (el, arr) => {
+export const lazyImg = (el: string, arr: EmptyArrayType) => {
 	const io = new IntersectionObserver((res) => {
-		res.forEach((v) => {
+		res.forEach((v: any) => {
 			if (v.isIntersecting) {
 				const { img, key } = v.target.dataset;
 				v.target.src = img;
@@ -88,7 +90,7 @@ export const lazyImg = (el, arr) => {
  * 全局组件大小
  * @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
  */
-export const globalComponentSize = () => {
+export const globalComponentSize = (): string => {
 	const stores = useThemeConfig(pinia);
 	const { themeConfig } = storeToRefs(stores);
 	return Local.get('themeConfig')?.globalComponentSize || themeConfig.value?.globalComponentSize;
@@ -99,8 +101,8 @@ export const globalComponentSize = () => {
  * @param obj 源对象
  * @returns 克隆后的对象
  */
-export function deepClone(obj) {
-	let newObj;
+export function deepClone(obj: EmptyObjectType) {
+	let newObj: EmptyObjectType;
 	try {
 		newObj = obj.push ? [] : {};
 	} catch (error) {
@@ -137,7 +139,7 @@ export function isMobile() {
  * @param list 数组对象
  * @returns 删除空值后的数组对象
  */
-export function handleEmpty(list) {
+export function handleEmpty(list: EmptyArrayType) {
 	const arr = [];
 	for (const i in list) {
 		const d = [];
@@ -156,10 +158,10 @@ export function handleEmpty(list) {
  * 打开外部链接
  * @param val 当前点击项菜单
  */
-export function handleOpenLink(val) {
+export function handleOpenLink(val: RouteItem) {
 	const { origin, pathname } = window.location;
 	router.push(val.path);
-	if (verifyUrl(val.meta?.isLink)) window.open(val.meta?.isLink);
+	if (verifyUrl(<string>val.meta?.isLink)) window.open(val.meta?.isLink);
 	else window.open(`${origin}${pathname}#${val.meta?.isLink}`);
 }
 
@@ -173,34 +175,33 @@ export function handleOpenLink(val) {
  * @method deepClone 对象深克隆
  * @method isMobile 判断是否是移动端
  * @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
- * @method handleOpenLink 打开外部链接
  */
 const other = {
-	elSvg: (app) => {
+	elSvg: (app: App) => {
 		elSvg(app);
 	},
 	useTitle: () => {
 		useTitle();
 	},
-	setTagsViewNameI18n(route) {
+	setTagsViewNameI18n(route: RouteToFrom) {
 		return setTagsViewNameI18n(route);
 	},
-	lazyImg: (el, arr) => {
+	lazyImg: (el: string, arr: EmptyArrayType) => {
 		lazyImg(el, arr);
 	},
 	globalComponentSize: () => {
 		return globalComponentSize();
 	},
-	deepClone: (obj) => {
+	deepClone: (obj: EmptyObjectType) => {
 		return deepClone(obj);
 	},
 	isMobile: () => {
 		return isMobile();
 	},
-	handleEmpty: (list) => {
+	handleEmpty: (list: EmptyArrayType) => {
 		return handleEmpty(list);
 	},
-	handleOpenLink: (val) => {
+	handleOpenLink: (val: RouteItem) => {
 		handleOpenLink(val);
 	},
 };

src/utils/request.ts

@@ -1,10 +1,10 @@
-import axios from 'axios';
+import axios, { AxiosInstance } from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import qs from 'qs';
 import { Session } from '/@/utils/storage';
+import qs from 'qs';
 
 // 配置新建一个 axios 实例
-const service = axios.create({
+const service: AxiosInstance = axios.create({
 	baseURL: import.meta.env.VITE_API_URL,
 	timeout: 50000,
 	headers: { 'Content-Type': 'application/json' },
@@ -20,7 +20,7 @@ service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
 		if (Session.get('token')) {
-			config.headers['Authorization'] = `${Session.get('token')}`;
+			config.headers!['Authorization'] = `${Session.get('token')}`;
 		}
 		return config;
 	},

src/utils/setIconfont.ts

@@ -1,7 +1,10 @@
 // 字体图标 url
-const cssCdnUrlList = ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'];
+const cssCdnUrlList: Array<string> = [
+	'//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css',
+	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+];
 // 第三方 js url
-const jsCdnUrlList = [];
+const jsCdnUrlList: Array<string> = [];
 
 // 动态批量设置字体图标
 export function setCssCdn() {

src/utils/storage.ts

@@ -9,21 +9,21 @@ import Cookies from 'js-cookie';
  */
 export const Local = {
 	// 查看 v2.4.3版本更新日志
-	setKey(key) {
+	setKey(key: string) {
 		// @ts-ignore
 		return `${__NEXT_NAME__}:${key}`;
 	},
 	// 设置永久缓存
-	set(key, val) {
+	set<T>(key: string, val: T) {
 		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
 	},
 	// 获取永久缓存
-	get(key) {
-		let json = window.localStorage.getItem(Local.setKey(key));
+	get(key: string) {
+		let json = <string>window.localStorage.getItem(Local.setKey(key));
 		return JSON.parse(json);
 	},
 	// 移除永久缓存
-	remove(key) {
+	remove(key: string) {
 		window.localStorage.removeItem(Local.setKey(key));
 	},
 	// 移除全部永久缓存
@@ -41,18 +41,18 @@ export const Local = {
  */
 export const Session = {
 	// 设置临时缓存
-	set(key, val) {
+	set<T>(key: string, val: T) {
 		if (key === 'token') return Cookies.set(key, val);
 		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
 	},
 	// 获取临时缓存
-	get(key) {
+	get(key: string) {
 		if (key === 'token') return Cookies.get(key);
-		let json = window.sessionStorage.getItem(Local.setKey(key));
+		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
 		return JSON.parse(json);
 	},
 	// 移除临时缓存
-	remove(key) {
+	remove(key: string) {
 		if (key === 'token') return Cookies.remove(key);
 		window.sessionStorage.removeItem(Local.setKey(key));
 	},

src/utils/theme.ts

@@ -9,8 +9,8 @@ import { ElMessage } from 'element-plus';
  */
 export function useChangeColor() {
 	// str 颜色值字符串
-	const hexToRgb = (str) => {
-		let hexs = '';
+	const hexToRgb = (str: string): any => {
+		let hexs: any = '';
 		let reg = /^\#?[0-9A-Fa-f]{6}$/;
 		if (!reg.test(str)) {
 			ElMessage.warning('输入错误的hex');
@@ -22,7 +22,7 @@ export function useChangeColor() {
 		return hexs;
 	};
 	// r 代表红色 | g 代表绿色 | b 代表蓝色
-	const rgbToHex = (r, g, b) => {
+	const rgbToHex = (r: any, g: any, b: any): string => {
 		let reg = /^\d{1,3}$/;
 		if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
 			ElMessage.warning('输入错误的rgb颜色值');
@@ -33,7 +33,7 @@ export function useChangeColor() {
 		return `#${hexs.join('')}`;
 	};
 	// color 颜色值字符串 | level 变浅的程度，限0-1之间
-	const getDarkColor = (color, level) => {
+	const getDarkColor = (color: string, level: number): string => {
 		let reg = /^\#?[0-9A-Fa-f]{6}$/;
 		if (!reg.test(color)) {
 			ElMessage.warning('输入错误的hex颜色值');
@@ -44,7 +44,7 @@ export function useChangeColor() {
 		return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
 	};
 	// color 颜色值字符串 | level 加深的程度，限0-1之间
-	const getLightColor = (color, level) => {
+	const getLightColor = (color: string, level: number): string => {
 		let reg = /^\#?[0-9A-Fa-f]{6}$/;
 		if (!reg.test(color)) {
 			ElMessage.warning('输入错误的hex颜色值');

src/utils/toolsValidate.ts

@@ -9,7 +9,7 @@
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyNumberPercentage(val) {
+export function verifyNumberPercentage(val: string): string {
 	// 匹配空格
 	let v = val.replace(/(^\s*)|(\s*$)/g, '');
 	// 只能是数字和小数点，不能是其他输入
@@ -27,7 +27,7 @@ export function verifyNumberPercentage(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyNumberPercentageFloat(val) {
+export function verifyNumberPercentageFloat(val: string): string {
 	let v = verifyNumberIntegerAndFloat(val);
 	// 数字超过100，赋值成最大值100
 	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
@@ -42,7 +42,7 @@ export function verifyNumberPercentageFloat(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyNumberIntegerAndFloat(val) {
+export function verifyNumberIntegerAndFloat(val: string) {
 	// 匹配空格
 	let v = val.replace(/(^\s*)|(\s*$)/g, '');
 	// 只能是数字和小数点，不能是其他输入
@@ -64,7 +64,7 @@ export function verifyNumberIntegerAndFloat(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifiyNumberInteger(val) {
+export function verifiyNumberInteger(val: string) {
 	// 匹配空格
 	let v = val.replace(/(^\s*)|(\s*$)/g, '');
 	// 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
@@ -84,7 +84,7 @@ export function verifiyNumberInteger(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyCnAndSpace(val) {
+export function verifyCnAndSpace(val: string) {
 	// 匹配中文与空格
 	let v = val.replace(/[\u4e00-\u9fa5\s]+/g, '');
 	// 匹配空格
@@ -98,7 +98,7 @@ export function verifyCnAndSpace(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyEnAndSpace(val) {
+export function verifyEnAndSpace(val: string) {
 	// 匹配英文与空格
 	let v = val.replace(/[a-zA-Z]+/g, '');
 	// 匹配空格
@@ -112,7 +112,7 @@ export function verifyEnAndSpace(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyAndSpace(val) {
+export function verifyAndSpace(val: string) {
 	// 匹配空格
 	let v = val.replace(/(^\s*)|(\s*$)/g, '');
 	// 返回结果
@@ -124,9 +124,9 @@ export function verifyAndSpace(val) {
  * @param val 当前值字符串
  * @returns 返回处理后的字符串
  */
-export function verifyNumberComma(val) {
+export function verifyNumberComma(val: string) {
 	// 调用小数或整数(不可以负数)方法
-	let v = verifyNumberIntegerAndFloat(val);
+	let v: any = verifyNumberIntegerAndFloat(val);
 	// 字符串转成数组
 	v = v.toString().split('.');
 	// \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
@@ -144,7 +144,7 @@ export function verifyNumberComma(val) {
  * @param color 搜索到时字体高亮颜色
  * @returns 返回处理后的字符串
  */
-export function verifyTextColor(val, text = '', color = 'red') {
+export function verifyTextColor(val: string, text = '', color = 'red') {
 	// 返回内容，添加颜色
 	let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
 	// 返回结果
@@ -157,7 +157,7 @@ export function verifyTextColor(val, text = '', color = 'red') {
  * @param unit 默认：仟佰拾亿仟佰拾万仟佰拾元角分
  * @returns 返回处理后的字符串
  */
-export function verifyNumberCnUppercase(val, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
+export function verifyNumberCnUppercase(val: any, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
 	// 当前内容字符串添加 2个0，为什么??
 	val += '00';
 	// 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
@@ -188,7 +188,7 @@ export function verifyNumberCnUppercase(val, unit = '仟佰拾亿仟佰拾万仟
  * @param val 当前值字符串
  * @returns 返回 true: 手机号码正确
  */
-export function verifyPhone(val) {
+export function verifyPhone(val: string) {
 	// false: 手机号码不正确
 	if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
 	// true: 手机号码正确
@@ -200,7 +200,7 @@ export function verifyPhone(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 国内电话号码正确
  */
-export function verifyTelPhone(val) {
+export function verifyTelPhone(val: string) {
 	// false: 国内电话号码不正确
 	if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false;
 	// true: 国内电话号码正确
@@ -212,7 +212,7 @@ export function verifyTelPhone(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 登录账号正确
  */
-export function verifyAccount(val) {
+export function verifyAccount(val: string) {
 	// false: 登录账号不正确
 	if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false;
 	// true: 登录账号正确
@@ -224,7 +224,7 @@ export function verifyAccount(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 密码正确
  */
-export function verifyPassword(val) {
+export function verifyPassword(val: string) {
 	// false: 密码不正确
 	if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false;
 	// true: 密码正确
@@ -236,7 +236,7 @@ export function verifyPassword(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 强密码正确
  */
-export function verifyPasswordPowerful(val) {
+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;
@@ -252,7 +252,7 @@ export function verifyPasswordPowerful(val) {
  * @description 强：字母+数字+特殊字符
  * @returns 返回处理后的字符串：弱、中、强
  */
-export function verifyPasswordStrength(val) {
+export function verifyPasswordStrength(val: string) {
 	let v = '';
 	// 弱：纯数字，纯字母，纯特殊字符
 	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
@@ -270,7 +270,7 @@ export function verifyPasswordStrength(val) {
  * @param val 当前值字符串
  * @returns 返回 true: IP地址正确
  */
-export function verifyIPAddress(val) {
+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(
@@ -287,7 +287,7 @@ export function verifyIPAddress(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 邮箱正确
  */
-export function verifyEmail(val) {
+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(
@@ -304,7 +304,7 @@ export function verifyEmail(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 身份证正确
  */
-export function verifyIdCard(val) {
+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: 身份证正确
@@ -316,7 +316,7 @@ export function verifyIdCard(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 姓名正确
  */
-export function verifyFullName(val) {
+export function verifyFullName(val: string) {
 	// false: 姓名不正确
 	if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false;
 	// true: 姓名正确
@@ -328,7 +328,7 @@ export function verifyFullName(val) {
  * @param val 当前值字符串
  * @returns 返回 true: 邮政编码正确
  */
-export function verifyPostalCode(val) {
+export function verifyPostalCode(val: string) {
 	// false: 邮政编码不正确
 	if (!/^[1-9][0-9]{5}$/.test(val)) return false;
 	// true: 邮政编码正确
@@ -340,7 +340,7 @@ export function verifyPostalCode(val) {
  * @param val 当前值字符串
  * @returns 返回 true: url 正确
  */
-export function verifyUrl(val) {
+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(
@@ -357,7 +357,7 @@ export function verifyUrl(val) {
  * @param val 当前值字符串
  * @returns 返回 true：车牌号正确
  */
-export function verifyCarNum(val) {
+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(

src/utils/watermark.ts

@@ -1,15 +1,15 @@
 // 页面添加水印效果
-const setWatermark = (str) => {
+const setWatermark = (str: string) => {
 	const id = '1.23452384164.123412416';
-	if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));
+	if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
 	const can = document.createElement('canvas');
 	can.width = 200;
 	can.height = 130;
-	const cans = can.getContext('2d');
+	const cans = <CanvasRenderingContext2D>can.getContext('2d');
 	cans.rotate((-20 * Math.PI) / 180);
 	cans.font = '12px Vedana';
 	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
-	cans.textBaseline = 'Middle';
+	cans.textBaseline = 'middle';
 	cans.fillText(str, can.width / 10, can.height / 2);
 	const div = document.createElement('div');
 	div.id = id;
@@ -32,14 +32,14 @@ const setWatermark = (str) => {
  */
 const watermark = {
 	// 设置水印
-	set: (str) => {
+	set: (str: string) => {
 		let id = setWatermark(str);
 		if (document.getElementById(id) === null) id = setWatermark(str);
 	},
 	// 删除水印
 	del: () => {
 		let id = '1.23452384164.123412416';
-		if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));
+		if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
 	},
 };
 

src/views/error/401.vue

@@ -20,10 +20,9 @@
 	</div>
 </template>
 
-<script setup name="noPower">
+<script setup lang="ts" name="noPower">
 import { Session } from '/@/utils/storage';
 
-// 重新授权
 const onSetAuth = () => {
 	// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
 	// 清除缓存/token等

src/views/error/404.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script setup name="notFound">
+<script setup lang="ts" name="notFound">
 import { useRouter } from 'vue-router';
 
 // 定义变量内容

src/views/home/index.vue

@@ -65,7 +65,7 @@
 	</div>
 </template>
 
-<script setup name="home">
+<script setup lang="ts" name="home">
 import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
 import * as echarts from 'echarts';
 import { storeToRefs } from 'pinia';
@@ -86,7 +86,7 @@ const state = reactive({
 		homeChartTwo: null,
 		homeCharThree: null,
 		dispose: [null, '', undefined],
-	},
+	} as any,
 	homeOne: [
 		{
 			num1: '125,12',
@@ -181,7 +181,7 @@ const state = reactive({
 			iconColor: '#FBD4A0',
 		},
 	],
-	myCharts: [],
+	myCharts: [] as EmptyArrayType,
 	charts: {
 		theme: '',
 		bgColor: '',
@@ -191,7 +191,7 @@ const state = reactive({
 
 // 折线图
 const initLineChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
+	if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
 	state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
 	const option = {
 		backgroundColor: state.charts.bgColor,
@@ -273,7 +273,7 @@ const initLineChart = () => {
 };
 // 饼图
 const initPieChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
+	if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
 	state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
 	var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
 	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
@@ -343,7 +343,7 @@ const initPieChart = () => {
 				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
 				center: ['32%', '50%'],
 				itemStyle: {
-					color: function (params) {
+					color: function (params: any) {
 						return colorList[params.dataIndex];
 					},
 				},
@@ -358,7 +358,7 @@ const initPieChart = () => {
 };
 // 柱状图
 const initBarChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
+	if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
 	state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
 	const option = {
 		backgroundColor: state.charts.bgColor,

src/views/login/component/account.vue

@@ -43,7 +43,7 @@
 	</el-form>
 </template>
 
-<script setup name="loginAccount">
+<script setup lang="ts" name="loginAccount">
 import { reactive, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
@@ -97,7 +97,7 @@ const onSignIn = async () => {
 	}
 };
 // 登录成功后的跳转
-const signInSuccess = (isNoPower) => {
+const signInSuccess = (isNoPower: boolean | undefined) => {
 	if (isNoPower) {
 		ElMessage.warning('抱歉，您没有登录权限');
 		Session.clear();
@@ -108,8 +108,8 @@ const signInSuccess = (isNoPower) => {
 		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
 		if (route.query?.redirect) {
 			router.push({
-				path: route.query?.redirect,
-				query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
+				path: <string>route.query?.redirect,
+				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
 			});
 		} else {
 			router.push('/');

src/views/login/component/mobile.vue

@@ -31,7 +31,7 @@
 	</el-form>
 </template>
 
-<script setup name="loginMobile">
+<script setup lang="ts" name="loginMobile">
 import { reactive } from 'vue';
 
 // 定义变量内容

src/views/login/component/scan.vue

@@ -8,17 +8,17 @@
 	</div>
 </template>
 
-<script setup name="loginScan">
+<script setup lang="ts" name="loginScan">
 import { ref, onMounted, nextTick } from 'vue';
 import QRCode from 'qrcodejs2-fixes';
 
 // 定义变量内容
-const qrcodeRef = ref(null);
+const qrcodeRef = ref<HTMLElement | null>(null);
 
 // 初始化生成二维码
 const initQrcode = () => {
 	nextTick(() => {
-		qrcodeRef.value.innerHTML = '';
+		(<HTMLElement>qrcodeRef.value).innerHTML = '';
 		new QRCode(qrcodeRef.value, {
 			text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
 			width: 260,

src/views/login/index.vue

@@ -42,7 +42,7 @@
 	</div>
 </template>
 
-<script setup name="loginIndex">
+<script setup lang="ts" name="loginIndex">
 import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';

src/views/system/dept/dialog.vue

@@ -67,7 +67,7 @@
 	</div>
 </template>
 
-<script setup name="systemDeptDialog">
+<script setup lang="ts" name="systemDeptDialog">
 import { reactive, ref } from 'vue';
 
 // 定义子组件向父组件传值/事件
@@ -77,7 +77,7 @@ const emit = defineEmits(['refresh']);
 const deptDialogFormRef = ref();
 const state = reactive({
 	ruleForm: {
-		deptLevel: [], // 上级部门
+		deptLevel: [] as string[], // 上级部门
 		deptName: '', // 部门名称
 		person: '', // 负责人
 		phone: '', // 手机号
@@ -86,7 +86,7 @@ const state = reactive({
 		status: true, // 部门状态
 		describe: '', // 部门描述
 	},
-	deptData: [], // 部门数据
+	deptData: [] as DeptTreeType[], // 部门数据
 	dialog: {
 		isShowDialog: false,
 		type: '',
@@ -96,7 +96,7 @@ const state = reactive({
 });
 
 // 打开弹窗
-const openDialog = (type, row) => {
+const openDialog = (type: string, row: RowDeptType) => {
 	if (type === 'edit') {
 		row.deptLevel = ['vueNextAdmin'];
 		row.person = 'lyt';

src/views/system/dept/index.vue

@@ -51,7 +51,7 @@
 	</div>
 </template>
 
-<script setup name="systemDept">
+<script setup lang="ts" name="systemDept">
 import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
@@ -60,7 +60,7 @@ const DeptDialog = defineAsyncComponent(() => import('/@/views/system/dept/dialo
 
 // 定义变量内容
 const deptDialogRef = ref();
-const state = reactive({
+const state = reactive<SysDeptState>({
 	tableData: {
 		data: [],
 		total: 0,
@@ -108,15 +108,15 @@ const getTableData = () => {
 	}, 500);
 };
 // 打开新增菜单弹窗
-const onOpenAddDept = (type) => {
+const onOpenAddDept = (type: string) => {
 	deptDialogRef.value.openDialog(type);
 };
 // 打开编辑菜单弹窗
-const onOpenEditDept = (type, row) => {
+const onOpenEditDept = (type: string, row: DeptTreeType) => {
 	deptDialogRef.value.openDialog(type, row);
 };
 // 删除当前行
-const onTabelRowDel = (row) => {
+const onTabelRowDel = (row: DeptTreeType) => {
 	ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
 		confirmButtonText: '删除',
 		cancelButtonText: '取消',

src/views/system/dic/dialog.vue

@@ -63,7 +63,7 @@
 	</div>
 </template>
 
-<script setup name="systemDicDialog">
+<script setup lang="ts" name="systemDicDialog">
 import { reactive, ref } from 'vue';
 
 // 定义子组件向父组件传值/事件
@@ -76,7 +76,7 @@ const state = reactive({
 		dicName: '', // 字典名称
 		fieldName: '', // 字段名
 		status: true, // 字典状态
-		list: [], // 子集字段 + 属性值
+		list: [] as ListType[], // 子集字段 + 属性值
 		describe: '', // 字典描述
 	},
 	dialog: {
@@ -88,7 +88,7 @@ const state = reactive({
 });
 
 // 打开弹窗
-const openDialog = (type, row) => {
+const openDialog = (type: string, row: RowDicType) => {
 	if (type === 'edit') {
 		if (row.fieldName === 'SYS_UERINFO') {
 			row.list = [
@@ -139,7 +139,7 @@ const onAddRow = () => {
 	});
 };
 // 删除行
-const onDelRow = (k) => {
+const onDelRow = (k: number) => {
 	state.ruleForm.list.splice(k, 1);
 };
 

src/views/system/dic/index.vue

@@ -53,7 +53,7 @@
 	</div>
 </template>
 
-<script setup name="systemDic">
+<script setup lang="ts" name="systemDic">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
@@ -62,7 +62,7 @@ const DicDialog = defineAsyncComponent(() => import('/@/views/system/dic/dialog.
 
 // 定义变量内容
 const dicDialogRef = ref();
-const state = reactive({
+const state = reactive<SysDicState>({
 	tableData: {
 		data: [],
 		total: 0,
@@ -95,15 +95,15 @@ const getTableData = () => {
 	}, 500);
 };
 // 打开新增字典弹窗
-const onOpenAddDic = (type) => {
+const onOpenAddDic = (type: string) => {
 	dicDialogRef.value.openDialog(type);
 };
 // 打开修改字典弹窗
-const onOpenEditDic = (type, row) => {
+const onOpenEditDic = (type: string, row: RowDicType) => {
 	dicDialogRef.value.openDialog(type, row);
 };
 // 删除字典
-const onRowDel = (row) => {
+const onRowDel = (row: RowDicType) => {
 	ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -116,12 +116,12 @@ const onRowDel = (row) => {
 		.catch(() => {});
 };
 // 分页改变
-const onHandleSizeChange = (val) => {
+const onHandleSizeChange = (val: number) => {
 	state.tableData.param.pageSize = val;
 	getTableData();
 };
 // 分页改变
-const onHandleCurrentChange = (val) => {
+const onHandleCurrentChange = (val: number) => {
 	state.tableData.param.pageNum = val;
 	getTableData();
 };

src/views/system/menu/dialog.vue

@@ -145,7 +145,7 @@
 	</div>
 </template>
 
-<script setup name="systemMenuDialog">
+<script setup lang="ts" name="systemMenuDialog">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
@@ -185,7 +185,7 @@ const state = reactive({
 		},
 		btnPower: '', // 菜单类型为按钮时，权限标识
 	},
-	menuData: [], // 上级菜单数据
+	menuData: [] as RouteItems, // 上级菜单数据
 	dialog: {
 		isShowDialog: false,
 		type: '',
@@ -195,17 +195,17 @@ const state = reactive({
 });
 
 // 获取 pinia 中的路由
-const getMenuData = (routes) => {
-	const arr = [];
-	routes.map((val) => {
-		val['title'] = val.meta?.title;
+const getMenuData = (routes: RouteItems) => {
+	const arr: RouteItems = [];
+	routes.map((val: RouteItem) => {
+		val['title'] = val.meta?.title as string;
 		arr.push({ ...val });
 		if (val.children) getMenuData(val.children);
 	});
 	return arr;
 };
 // 打开弹窗
-const openDialog = (type, row) => {
+const openDialog = (type: string, row?: any) => {
 	if (type === 'edit') {
 		// 模拟数据，实际请走接口
 		row.menuType = 'menu';

src/views/system/menu/index.vue

@@ -63,8 +63,9 @@
 	</div>
 </template>
 
-<script setup name="systemMenu">
+<script setup lang="ts" name="systemMenu">
 import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
@@ -79,7 +80,7 @@ const { routesList } = storeToRefs(stores);
 const menuDialogRef = ref();
 const state = reactive({
 	tableData: {
-		data: [],
+		data: [] as RouteRecordRaw[],
 		loading: true,
 	},
 });
@@ -93,15 +94,15 @@ const getTableData = () => {
 	}, 500);
 };
 // 打开新增菜单弹窗
-const onOpenAddMenu = (type) => {
+const onOpenAddMenu = (type: string) => {
 	menuDialogRef.value.openDialog(type);
 };
 // 打开编辑菜单弹窗
-const onOpenEditMenu = (type, row) => {
+const onOpenEditMenu = (type: string, row: RouteRecordRaw) => {
 	menuDialogRef.value.openDialog(type, row);
 };
 // 删除当前行
-const onTabelRowDel = (row) => {
+const onTabelRowDel = (row: RouteRecordRaw) => {
 	ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
 		confirmButtonText: '删除',
 		cancelButtonText: '取消',

src/views/system/role/dialog.vue

@@ -50,7 +50,7 @@
 	</div>
 </template>
 
-<script setup name="systemRoleDialog">
+<script setup lang="ts" name="systemRoleDialog">
 import { reactive, ref } from 'vue';
 
 // 定义子组件向父组件传值/事件
@@ -66,7 +66,7 @@ const state = reactive({
 		status: true, // 角色状态
 		describe: '', // 角色描述
 	},
-	menuData: [],
+	menuData: [] as TreeType[],
 	menuProps: {
 		children: 'children',
 		label: 'label',
@@ -80,7 +80,7 @@ const state = reactive({
 });
 
 // 打开弹窗
-const openDialog = (type, row) => {
+const openDialog = (type: string, row: RowRoleType) => {
 	if (type === 'edit') {
 		state.ruleForm = row;
 		state.dialog.title = '修改角色';

src/views/system/role/index.vue

@@ -56,7 +56,7 @@
 	</div>
 </template>
 
-<script setup name="systemRole">
+<script setup lang="ts" name="systemRole">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
@@ -65,7 +65,7 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
 
 // 定义变量内容
 const roleDialogRef = ref();
-const state = reactive({
+const state = reactive<SysRoleState>({
 	tableData: {
 		data: [],
 		total: 0,
@@ -98,15 +98,15 @@ const getTableData = () => {
 	}, 500);
 };
 // 打开新增角色弹窗
-const onOpenAddRole = (type) => {
+const onOpenAddRole = (type: string) => {
 	roleDialogRef.value.openDialog(type);
 };
 // 打开修改角色弹窗
-const onOpenEditRole = (type, row) => {
+const onOpenEditRole = (type: string, row: Object) => {
 	roleDialogRef.value.openDialog(type, row);
 };
 // 删除角色
-const onRowDel = (row) => {
+const onRowDel = (row: RowRoleType) => {
 	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -119,12 +119,12 @@ const onRowDel = (row) => {
 		.catch(() => {});
 };
 // 分页改变
-const onHandleSizeChange = (val) => {
+const onHandleSizeChange = (val: number) => {
 	state.tableData.param.pageSize = val;
 	getTableData();
 };
 // 分页改变
-const onHandleCurrentChange = (val) => {
+const onHandleCurrentChange = (val: number) => {
 	state.tableData.param.pageNum = val;
 	getTableData();
 };

src/views/system/user/dialog.vue

@@ -88,7 +88,7 @@
 	</div>
 </template>
 
-<script setup name="systemUserDialog">
+<script setup lang="ts" name="systemUserDialog">
 import { reactive, ref } from 'vue';
 
 // 定义子组件向父组件传值/事件
@@ -101,7 +101,7 @@ const state = reactive({
 		userName: '', // 账户名称
 		userNickname: '', // 用户昵称
 		roleSign: '', // 关联角色
-		department: [], // 部门
+		department: [] as string[], // 部门
 		phone: '', // 手机号
 		email: '', // 邮箱
 		sex: '', // 性别
@@ -110,7 +110,7 @@ const state = reactive({
 		status: true, // 用户状态
 		describe: '', // 用户描述
 	},
-	deptData: [], // 部门数据
+	deptData: [] as DeptTreeType[], // 部门数据
 	dialog: {
 		isShowDialog: false,
 		type: '',
@@ -120,7 +120,7 @@ const state = reactive({
 });
 
 // 打开弹窗
-const openDialog = (type, row) => {
+const openDialog = (type: string, row: RowUserType) => {
 	if (type === 'edit') {
 		state.ruleForm = row;
 		state.dialog.title = '修改用户';

src/views/system/user/index.vue

@@ -59,7 +59,7 @@
 	</div>
 </template>
 
-<script setup name="systemUser">
+<script setup lang="ts" name="systemUser">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
@@ -68,7 +68,7 @@ const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialo
 
 // 定义变量内容
 const userDialogRef = ref();
-const state = reactive({
+const state = reactive<SysUserState>({
 	tableData: {
 		data: [],
 		total: 0,
@@ -107,15 +107,15 @@ const getTableData = () => {
 	}, 500);
 };
 // 打开新增用户弹窗
-const onOpenAddUser = (type) => {
+const onOpenAddUser = (type: string) => {
 	userDialogRef.value.openDialog(type);
 };
 // 打开修改用户弹窗
-const onOpenEditUser = (type, row) => {
+const onOpenEditUser = (type: string, row: RowUserType) => {
 	userDialogRef.value.openDialog(type, row);
 };
 // 删除用户
-const onRowDel = (row) => {
+const onRowDel = (row: RowUserType) => {
 	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -128,12 +128,12 @@ const onRowDel = (row) => {
 		.catch(() => {});
 };
 // 分页改变
-const onHandleSizeChange = (val) => {
+const onHandleSizeChange = (val: number) => {
 	state.tableData.param.pageSize = val;
 	getTableData();
 };
 // 分页改变
-const onHandleCurrentChange = (val) => {
+const onHandleCurrentChange = (val: number) => {
 	state.tableData.param.pageNum = val;
 	getTableData();
 };

tsconfig.json

@@ -0,0 +1,74 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                   /* Enable incremental compilation */
+		"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
+		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		// "checkJs": true,                       /* Report errors in .js files. */
+		"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+		// "declaration": true /* Generates corresponding '.d.ts' file. */,
+		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
+		// "outFile": "./",                       /* Concatenate and emit output to single file. */
+		// "outDir": "./",                        /* Redirect output structure to the directory. */
+		// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+		// "composite": true,                     /* Enable project compilation */
+		// "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+		// "removeComments": true,                /* Do not emit comments to output. */
+		// "noEmit": true,                        /* Do not emit outputs. */
+		// "importHelpers": true /* Import emit helpers from 'tslib'. */,
+		// "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+		"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,              /* Enable strict null checks. */
+		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                /* Report errors on unused locals. */
+		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+		// "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+
+		/* Module Resolution Options */
+		"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+		"baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+		"paths": {
+			"/@/*": ["src/*"]
+		} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                       /* List of folders to include type definitions from. */
+		"types": ["vite/client"] /* Type declaration files to be included in compilation. */,
+		"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
+}

vite.config.ts

@@ -1,19 +1,19 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig, loadEnv, ConfigEnv } from 'vite';
 import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
 import viteCompression from 'vite-plugin-compression';
 import { buildConfig } from './src/utils/build';
 
-const pathResolve = (dir) => {
+const pathResolve = (dir: string) => {
 	return resolve(__dirname, '.', dir);
 };
 
-const alias = {
+const alias: Record<string, string> = {
 	'/@': pathResolve('./src/'),
 };
 
-const viteConfig = defineConfig((mode) => {
+const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
 		plugins: [vue(), vueSetupExtend(), viteCompression(), JSON.parse(env.VITE_OPEN_CDN) ? buildConfig.cdn() : null],
@@ -25,7 +25,7 @@ const viteConfig = defineConfig((mode) => {
 		},
 		server: {
 			host: '0.0.0.0',
-			port: env.VITE_PORT,
+			port: env.VITE_PORT as unknown as number,
 			open: JSON.parse(env.VITE_OPEN),
 			hmr: true,
 			proxy: {
@@ -47,7 +47,7 @@ const viteConfig = defineConfig((mode) => {
 					assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
 					manualChunks(id) {
 						if (id.includes('node_modules')) {
-							return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//).groups.moduleName ?? 'vender';
+							return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//)?.groups!.moduleName ?? 'vender';
 						}
 					},
 				},