feat: 🚀 升级依赖插件 && 修复bug(查看详情)

1.修复路由刷新警告问题
2.替换vite-plugin-vue-setup-extend插件
3.升级vue、element-plus、vueuse插件
4.优化样式登陆页样式

package.json

@@ -22,13 +22,14 @@
 	},
 	"dependencies": {
 		"@element-plus/icons-vue": "^2.0.10",
-		"@vueuse/core": "^8.0.1",
+		"@vueuse/core": "^9.12.0",
 		"@wangeditor/editor": "^5.1.12",
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"axios": "^1.2.1",
+		"driver.js": "^0.9.8",
 		"echarts": "^5.3.0",
 		"echarts-liquidfill": "^3.1.0",
-		"element-plus": "^2.2.27",
+		"element-plus": "^2.2.30",
 		"js-md5": "^0.7.3",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
@@ -37,7 +38,7 @@
 		"print-js": "^1.6.0",
 		"qs": "^6.11.0",
 		"sortablejs": "^1.15.0",
-		"vue": "^3.2.45",
+		"vue": "^3.2.47",
 		"vue-i18n": "^9.1.9",
 		"vue-router": "^4.1.6",
 		"vue3-seamless-scroll": "^1.2.0",
@@ -55,7 +56,6 @@
 		"autoprefixer": "^10.4.7",
 		"commitizen": "^4.2.4",
 		"cz-git": "^1.3.2",
-		"driver.js": "^0.9.8",
 		"eslint": "^8.14.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.0.0",
@@ -85,7 +85,7 @@
 		"vite-plugin-eslint": "^1.6.0",
 		"vite-plugin-html": "^3.2.0",
 		"vite-plugin-svg-icons": "^2.0.1",
-		"vite-plugin-vue-setup-extend": "^0.4.0",
+		"vite-plugin-vue-setup-extend-plus": "^0.1.0",
 		"vue-tsc": "^1.0.24"
 	},
 	"config": {

src/components/ProTable/components/ColSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 列设置 -->
 	<el-drawer title="列设置" v-model="drawerVisible" size="450px">
-		<div class="table">
+		<div class="table-main">
 			<el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
 				<el-table-column prop="label" align="center" label="列名" />
 				<el-table-column prop="isShow" align="center" label="显示" v-slot="scope">

src/components/ProTable/index.md

@@ -4,17 +4,17 @@
 
 > 使用 `v-bind="$attrs"` 通过属性透传将 **ProTable** 组件属性全部透传到 **el-table** 上，所以我们支持 **el-table** 的所有 **Props** 属性。在此基础上，还扩展了以下 **Props：**
 
-|    属性名    |    类型     | 是否必传 |                默认值                 |                             属性描述                              |
-| :----------: | :---------: | :------: | :-----------------------------------: | :---------------------------------------------------------------: |
-|   columns    | ColumnProps |    ✅    |                   —                   | ProTable 组件会根据此字段渲染搜索表单与表格列，详情见 ColumnProps |
-|  requestApi  |  Function   |    ✅    |                   —                   |                      获取表格数据的请求 API                       |
-| dataCallback |  Function   |    ❌    |                   —                   |         后台返回数据的回调函数，可对后台返回数据进行处理          |
-|    title     |   String    |    ❌    |                   —                   |                 表格标题，目前只在打印的时候用到                  |
-|  pagination  |   Boolean   |    ❌    |                 true                  |                         是否显示分页组件                          |
-|  initParam   |   Object    |    ❌    |                  {}                   |                       表格请求的初始化参数                        |
-|  toolButton  |   Boolean   |    ❌    |                 true                  |                       是否显示表格功能按钮                        |
-|   selectId   |   String    |    ❌    |                 'id'                  |                   当表格数据多选时，所指定的 id                   |
-|  searchCol   |   Object    |    ❌    | { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } |                      表格搜索项每列占比配置                       |
+|    属性名    |    类型     | 是否必传 |                默认值                 |                                               属性描述                                                |
+| :----------: | :---------: | :------: | :-----------------------------------: | :---------------------------------------------------------------------------------------------------: |
+|   columns    | ColumnProps |    ✅    |                   —                   |                   ProTable 组件会根据此字段渲染搜索表单与表格列，详情见 ColumnProps                   |
+|  requestApi  |  Function   |    ✅    |                   —                   |                                        获取表格数据的请求 API                                         |
+| dataCallback |  Function   |    ❌    |                   —                   |                           后台返回数据的回调函数，可对后台返回数据进行处理                            |
+|    title     |   String    |    ❌    |                   —                   |                                   表格标题，目前只在打印的时候用到                                    |
+|  pagination  |   Boolean   |    ❌    |                 true                  | 是否显示分页组件，pagination 为 false 后台返回数据应该没有 分页信息 和 list，直接 data 就是 list 数据 |
+|  initParam   |   Object    |    ❌    |                  {}                   |                                         表格请求的初始化参数                                          |
+|  toolButton  |   Boolean   |    ❌    |                 true                  |                                         是否显示表格功能按钮                                          |
+|   selectId   |   String    |    ❌    |                 'id'                  |                                     当表格数据多选时，所指定的 id                                     |
+|  searchCol   |   Object    |    ❌    | { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } |                                        表格搜索项每列占比配置                                         |
 
 ### 2、Column 配置（ColumnProps）：
 

src/components/ProTable/index.vue

@@ -12,7 +12,7 @@
 	/>
 
 	<!-- 表格内容 card -->
-	<div class="card table">
+	<div class="card table-main">
 		<!-- 表格头部 操作按钮 -->
 		<div class="table-header">
 			<div class="header-button-lf">

src/components/SelectIcon/index.scss

@@ -8,27 +8,28 @@
 		color: var(--el-text-color-regular);
 	}
 	:deep(.el-dialog__body) {
-		padding-top: 25px;
+		padding: 25px 20px 20px;
 		.el-input {
 			margin-bottom: 10px;
 		}
 		.icon-list {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, 100px);
+			grid-template-columns: repeat(auto-fill, 115px);
 			justify-content: space-evenly;
 			max-height: 70vh;
 			.icon-item {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				width: 40px;
-				padding: 15px 30px;
+				width: 42px;
+				padding: 20px 30px;
 				cursor: pointer;
 				transition: all 0.2s;
 				&:hover {
 					transform: scale(1.3);
 				}
 				span {
+					margin-top: 5px;
 					line-height: 20px;
 					text-align: center;
 				}

src/enums/httpEnum.ts

@@ -6,7 +6,7 @@ export enum ResultEnum {
 	SUCCESS = 200,
 	ERROR = 500,
 	OVERDUE = 401,
-	TIMEOUT = 10000,
+	TIMEOUT = 30000,
 	TYPE = "success"
 }
 

src/layouts/components/Header/components/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="['breadcrumb-box', !themeConfig.breadcrumbIcon && 'no-icon']">
 		<el-breadcrumb :separator-icon="ArrowRight">
-			<transition-group name="breadcrumb" mode="out-in">
+			<transition-group name="breadcrumb">
 				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
 					<div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
 						<el-icon class="breadcrumb-icon" v-show="item.meta.icon && themeConfig.breadcrumbIcon">

src/routers/modules/dynamicRouter.ts

@@ -4,7 +4,6 @@ import { LOGIN_URL } from "@/config/config";
 import { ElNotification } from "element-plus";
 import { GlobalStore } from "@/stores";
 import { AuthStore } from "@/stores/modules/auth";
-import { notFoundRouter } from "@/routers/modules/staticRouter";
 
 // 引入 views 文件夹下所有 vue 文件
 const modules = import.meta.glob("@/views/**/*.vue");
@@ -45,9 +44,6 @@ export const initDynamicRouter = async () => {
 				router.addRoute("layout", item);
 			}
 		});
-
-		// 4.最后添加 notFoundRouter
-		router.addRoute(notFoundRouter);
 	} catch (error) {
 		// 💢 当按钮 || 菜单请求出错时，重定向到登陆页
 		globalStore.setToken("");

src/routers/modules/staticRouter.ts

@@ -54,14 +54,9 @@ export const errorRouter = [
 		meta: {
 			title: "500页面"
 		}
+	},
+	{
+		path: "/:pathMatch(.*)*",
+		component: () => import("@/components/ErrorMessage/404.vue")
 	}
 ];
-
-/**
- * notFoundRouter(找不到路由)
- */
-export const notFoundRouter = {
-	path: "/:pathMatch(.*)*",
-	name: "notFound",
-	redirect: { name: "404" }
-};

src/styles/element.scss

@@ -76,13 +76,14 @@
 	width: 100%;
 	height: 100%;
 	.table-box {
+		/* 这里减去的是 treeFilter 组件宽度 */
 		width: calc(100% - 230px);
 	}
 }
 
-// * table-box 表格页面样式
-.table,
-.table-box {
+// * table 表格页面样式
+.table-box,
+.table-main {
 	display: flex;
 	flex: 1;
 	flex-direction: column;

src/views/home/index.scss

@@ -6,6 +6,7 @@
 	height: 100%;
 	.home-bg {
 		width: 70%;
+		max-width: 1200px;
 		margin-bottom: 20px;
 	}
 }

src/views/login/index.scss

@@ -1,18 +1,12 @@
 .login-container {
-	position: relative;
-	min-width: 520px;
 	height: 100%;
-	min-height: 520px;
+	min-height: 550px;
 	background-color: #eeeeee;
 	background-image: url("@/assets/images/login_bg.svg");
 	background-size: 100% 100%;
 	background-size: cover;
-	.dark {
-		position: absolute;
-		top: 4.5%;
-		right: 3.2%;
-	}
 	.login-box {
+		position: relative;
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
@@ -22,8 +16,14 @@
 		padding: 0 50px;
 		background-color: hsl(0deg 0% 100% / 80%);
 		border-radius: 10px;
+		.dark {
+			position: absolute;
+			top: 13px;
+			right: 18px;
+		}
 		.login-left {
 			width: 800px;
+			margin: 0 10px 0 0;
 			img {
 				width: 100%;
 				height: 100%;
@@ -70,8 +70,14 @@
 	}
 }
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 1250px) {
 	.login-left {
 		display: none;
 	}
 }
+
+@media screen and (max-width: 600px) {
+	.login-form {
+		width: 97% !important;
+	}
+}

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="login-container flx-center">
-		<SwitchDark class="dark" />
 		<div class="login-box">
+			<SwitchDark class="dark" />
 			<div class="login-left">
 				<img src="@/assets/images/login_left.png" alt="login" />
 			</div>

vite.config.ts

@@ -6,7 +6,7 @@ import { wrapperEnv } from "./src/utils/getEnv";
 import { visualizer } from "rollup-plugin-visualizer";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import viteCompression from "vite-plugin-compression";
-import VueSetupExtend from "vite-plugin-vue-setup-extend";
+import vueSetupExtend from "vite-plugin-vue-setup-extend-plus";
 import eslintPlugin from "vite-plugin-eslint";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import importToCDN from "vite-plugin-cdn-import";
@@ -69,7 +69,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
 			// * vite 可以使用 jsx/tsx 语法
 			vueJsx(),
 			// * name 可以写在 script 标签上
-			VueSetupExtend(),
+			vueSetupExtend(),
 			// * 是否生成包预览(分析依赖包大小,方便做优化处理)
 			viteEnv.VITE_REPORT && visualizer(),
 			// * gzip compress