diff --git a/.prettierrc.js b/.prettierrc.js
index d0638a7..cff490a 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -36,4 +36,4 @@ module.exports = {
vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'lf',
-}
+};
diff --git a/index.html b/index.html
index 347aa7d..40e8d14 100644
--- a/index.html
+++ b/index.html
@@ -17,18 +17,7 @@
<title>vue-next-admin</title>
</head>
<body>
- <div id="app">
- <div class="loading-next">
- <div class="loading-next-box">
- <div class="loading-next-animation">
- <div class="loading-next-animation-box">
- <div></div>
- <div></div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div id="app"></div>
<script type="text/javascript">
if (window.location.origin === 'https://lyt-top.gitee.io') {
var _hmt = _hmt || [];
diff --git a/package.json b/package.json
index b1a86cd..b2ebea0 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
},
"dependencies": {
- "@antv/g6": "^4.2.1",
+ "@antv/g6": "^4.2.3",
"axios": "^0.21.1",
"clipboard": "^2.0.8",
"countup.js": "^2.0.7",
@@ -32,13 +32,13 @@
"@types/node": "^14.14.35",
"@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.6",
- "@typescript-eslint/eslint-plugin": "^4.18.0",
- "@typescript-eslint/parser": "^4.18.0",
+ "@typescript-eslint/eslint-plugin": "^4.19.0",
+ "@typescript-eslint/parser": "^4.19.0",
"@vitejs/plugin-vue": "^1.1.5",
"@vue/compiler-sfc": "^3.0.7",
"dotenv": "^8.2.0",
"eslint": "^7.22.0",
- "eslint-plugin-vue": "^7.7.0",
+ "eslint-plugin-vue": "^7.8.0",
"prettier": "^2.2.1",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
diff --git a/src/router/index.ts b/src/router/index.ts
index 6e2b548..b618423 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { store } from '/@/store/index.ts';
import { getSession, clearSession } from '/@/utils/storage.ts';
+import { NextLoading } from '/@/utils/loading.ts';
import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts';
// 定义动态路由
@@ -811,6 +812,7 @@ export function setBackEndControlRefreshRoutes() {
// 后端控制路由，模拟执行路由数据初始化
const initBackEndControlRoutesFun = (res: any) => {
+ NextLoading.start();
const oldRoutes = JSON.parse(JSON.stringify(res.data));
store.dispatch('requestOldRoutes/setBackEndControlRoutes', oldRoutes);
dynamicRoutes[0].children = backEndRouter(res.data);
@@ -868,7 +870,7 @@ export function formatTwoStageRoutes(arr: any) {
if (arr.length < 0) return false;
const newArr: any = [];
const cacheList: Array<string> = [];
- arr.map((v: any) => {
+ 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 {
@@ -904,7 +906,7 @@ export function hasAuth(auths: any, route: any) {
// 递归过滤有权限的路由
export function setFilterMenuFun(routes: any, auth: any) {
const menu: any = [];
- routes.map((route: any) => {
+ routes.forEach((route: any) => {
const item = { ...route };
if (hasAuth(auth, item)) {
if (item.children) item.children = setFilterMenuFun(item.children, auth);
@@ -915,12 +917,12 @@ export function setFilterMenuFun(routes: any, auth: any) {
}
// 获取当前用户的权限去比对路由表，用于动态路由的添加
-export function setFilterRoute() {
+export function setFilterRoute(chil: any) {
let filterRoute: any = [];
- formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => {
+ chil.forEach((route: any) => {
if (route.meta.auth)
- route.meta.auth.map((metaAuth: any) => {
- store.state.userInfos.userInfos.authPageList.map((auth: any) => {
+ route.meta.auth.forEach((metaAuth: any) => {
+ store.state.userInfos.userInfos.authPageList.forEach((auth: any) => {
if (metaAuth === auth) filterRoute.push({ ...route });
});
});
@@ -931,20 +933,20 @@ export function setFilterRoute() {
// 比对后的路由表，进行重新赋值
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
- filterRouteEnd[0].children = setFilterRoute();
+ filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children);
return filterRouteEnd;
}
// 添加动态路由
export function setAddRoute() {
- setFilterRouteEnd().map((route: any) => {
+ setFilterRouteEnd().forEach((route: any) => {
router.addRoute((route as unknown) as RouteRecordRaw);
});
}
// 删除/重置路由
export function resetRoute() {
- setFilterRouteEnd().map((route: any) => {
+ setFilterRouteEnd().forEach((route: any) => {
const { name } = route;
router.hasRoute(name) && router.removeRoute(name);
});
@@ -952,6 +954,7 @@ export function resetRoute() {
// 初始化方法，防止刷新时丢失
export function initAllFun() {
+ NextLoading.start();
const token = getSession('token');
if (!token) return false;
store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
@@ -997,6 +1000,7 @@ router.beforeEach((to, from, next) => {
// 路由加载后
router.afterEach(() => {
NProgress.done();
+ NextLoading.done();
});
// 导出路由
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
new file mode 100644
index 0000000..3a87834
--- /dev/null
+++ b/src/utils/loading.ts
@@ -0,0 +1,23 @@
+import { nextTick } from 'vue';
+
+// 定义方法
+export const NextLoading = {
+ // 创建 loading
+ start: () => {
+ const body: any = document.body;
+ const div = document.createElement('div');
+ div.setAttribute('class', 'loading-next');
+ const html = `<div class="loading-next-box"><div class="loading-next-animation"><div class="loading-next-animation-box"><div></div><div></div></div></div></div>`;
+ div.innerHTML = html;
+ body.insertBefore(div, body.childNodes[0]);
+ },
+ // 移除 loading
+ done: () => {
+ nextTick(() => {
+ setTimeout(() => {
+ const el = document.querySelector('.loading-next');
+ el && el.parentNode?.removeChild(el);
+ }, 1000);
+ });
+ },
+};
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
index 1b10dad..a92e210 100644
--- a/src/views/login/component/account.vue
+++ b/src/views/login/component/account.vue
@@ -36,7 +36,7 @@
</el-row>
</el-form-item>
<el-form-item>
- <el-button type="primary" class="login-content-submit" round @click="onSignIn">
+ <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
<span>登 录</span>
</el-button>
</el-form-item>
@@ -47,7 +47,7 @@
import { toRefs, reactive, defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
-import { setAddRoute, setFilterMenu, setCacheTagsViewRoutes, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
+import { initAllFun, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
import { useStore } from '/@/store/index.ts';
import { setSession } from '/@/utils/storage.ts';
import { formatAxis } from '/@/utils/formatTime.ts';
@@ -62,19 +62,17 @@ export default defineComponent({
password: '123456',
code: '1234',
},
+ loading: {
+ signIn: false,
+ },
});
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
});
- // 重新执行添加动态路由、过滤权限菜单、缓存等方法
- const initAllFun = () => {
- setAddRoute();
- setFilterMenu();
- setCacheTagsViewRoutes();
- };
// 登录
const onSignIn = () => {
+ state.loading.signIn = true;
let defaultAuthPageList: Array<string> = [];
let defaultAuthBtnList: Array<string> = [];
// admin 页面权限标识，对应路由 meta.auth
@@ -130,7 +128,9 @@ export default defineComponent({
router.push('/');
// 登录成功提示
setTimeout(() => {
+ state.loading.signIn = true;
ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
+ // 关闭 loading
}, 300);
};
return {