add init loading page and remove $ref

lxf8808 · Apr 20, 2023 · 644acde · 644acde
1 parent dc5f3b2
commit 644acde
Show file tree

Hide file tree

Showing 52 changed files with 149 additions and 1,004 deletions.
diff --git a/eslintrc/.eslintrc-auto-import.json b/eslintrc/.eslintrc-auto-import.json
@@ -98,7 +98,6 @@
     "useSlots": true,
     "useTable": true,
     "useTagsViewStore": true,
-    "userInfoReq": true,
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,

diff --git a/eslintrc/eslint-config.js b/eslintrc/eslint-config.js
@@ -7,8 +7,7 @@ module.exports = defineConfig({
     node: true
   },
   globals: {
-    defineOptions: true,
-    $ref: true
+    defineOptions: true
   },
   plugins: ['@typescript-eslint', 'prettier', 'unicorn'],
   extends: [

diff --git a/index.html b/index.html
@@ -3,11 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="src/styles/init-loading.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div class="loader-wrapper">
+        <img src="src/assets/gif/dianchi.gif"  class="loading-gif">
+        <div class="load_title">正在加载系统资源，请耐心等待</div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/mock/system.ts b/mock/system.ts
@@ -0,0 +1,25 @@
+const system = {
+  url: '/mock/login',
+  method: 'post',
+  response: () => {
+    return {
+      code: 20000,
+      jwtToken:"666666"
+    }
+  }
+}
+
+const loginOut = {
+  url: '/mock/loginOut',
+  method: 'post',
+  response: () => {
+    return {
+      code: 200,
+      title: 'mock请求测试'
+    }
+  }
+}
+
+export default [
+  system,loginOut
+]
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@element-plus/icons-vue": "^2.0.4",
     "axios": "0.21.3",
     "echarts": "5.3.2",
-    "element-plus": "^2.2.9",
+    "element-plus": "2.2.27",
     "js-error-collection": "^1.0.7",
     "mitt": "3.0.0",
     "moment-mini": "2.22.1",

diff --git a/src/api/system.ts b/src/api/system.ts
@@ -0,0 +1,31 @@
+//获取用户信息
+import axiosReq from 'axios'
+// export const userInfoReq = (): Promise<any> => {
+//   return new Promise((resolve) => {
+//     const reqConfig = {
+//       url: '/basis-func/user/getUserInfo',
+//       params: { plateFormId: 2 },
+//       method: 'post'
+//     }
+//     axiosReq(reqConfig).then(({ data }) => {
+//       resolve(data)
+//     })
+//   })
+// }
+
+//登录
+export const loginReq = (subForm) => {
+  return axiosReq({
+    url: '/mock/login',
+    params: subForm,
+    method: 'post'
+  })
+}
+
+//退出登录
+export const loginOutReq = () => {
+  return axiosReq({
+    url: '/mock/loginOut',
+    method: 'post'
+  })
+}
diff --git a/src/api/user.ts b/src/api/user.ts
diff --git a/src/assets/gif/dianchi.gif b/src/assets/gif/dianchi.gif
diff --git a/src/icons/SvgIcon.vue b/src/icons/SvgIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName" />
+    <use :xlink:href="iconName" :fill="color" />
   </svg>
 </template>
 
@@ -14,7 +14,11 @@ const props = defineProps({
   className: {
     type: String,
     default: ''
-  }
+  },
+  color: {
+    type: String,
+    default: ''
+  },
 })
 
 const iconName = computed(() => `#icon-${props.iconClass}`)
@@ -27,14 +31,6 @@ const svgClass = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.sub-el-icon,
-.nav-icon {
-  display: inline-block;
-  font-size: 15px;
-  margin-right: 12px;
-  position: relative;
-}
-
 .svg-icon {
   width: 1em;
   height: 1em;

diff --git a/src/layout/app-main/Navbar.vue b/src/layout/app-main/Navbar.vue
@@ -47,6 +47,7 @@ import { resetState } from '@/hooks/use-permission'
 import { elMessage } from '@/hooks/use-element'
 import { useBasicStore } from '@/store/basic'
 import { langTitle } from '@/hooks/use-common'
+import {loginOutReq} from "@/api/system";
 
 const basicStore = useBasicStore()
 const { settings, sidebar, setToggleSideBar } = basicStore
@@ -56,10 +57,12 @@ const toggleSideBar = () => {
 //退出登录
 const router = useRouter()
 const loginOut = () => {
-  elMessage('退出登录成功')
-  router.push(`/login?redirect=/`)
-  nextTick(() => {
-    resetState()
+  loginOutReq().then(()=>{
+    elMessage('退出登录成功')
+    router.push(`/login?redirect=/`)
+    nextTick(() => {
+      resetState()
+    })
   })
 }
 </script>

diff --git a/src/layout/app-main/TagsView.vue b/src/layout/app-main/TagsView.vue
@@ -218,6 +218,8 @@ const { visible, top, left, selectedTag } = toRefs(state)
 .tags-view-container {
   height: var(--tag-view-height);
   width: 100%;
+  position: relative;
+  z-index: 10;
   background: var(--tags-view-background);
   border-bottom: 1px solid var(--tags-view-border-bottom);
   box-shadow: var(--tags-view-box-shadow);

diff --git a/src/layout/sidebar/MenuIcon.vue b/src/layout/sidebar/MenuIcon.vue
@@ -1,25 +1,24 @@
 <template>
   <!-- 如果有 elSvgIcon 显示 elSvgIcon 没有显示 icon-->
-  <el-icon v-if="meta?.elSvgIcon" class="el-svg-icon">
-    <component :is="ElSvg[meta.elSvgIcon]" />
+  <el-icon v-if="meta?.elSvgIcon" >
+    <component :is="meta.elSvgIcon" />
   </el-icon>
-  <svg-icon v-else-if="meta?.icon" :icon-class="meta?.icon" class="nav-icon" />
+  <div v-else-if="meta?.icon"  class="menu-svg-class"><svg-icon :icon-class="meta?.icon"   /></div>
 </template>
 
 <script setup lang="ts">
-import * as ElSvg from '@element-plus/icons-vue'
+// import * as ElSvg from '@element-plus/icons-vue'
 defineProps({
   meta: { type: Object, default: null }
 })
 </script>
 
 <style scoped lang="scss">
-.el-svg-icon {
-  width: 1em;
-  height: 1em;
-  position: relative;
-  right: 3px;
-  font-size: var(--sidebar-el-icon-size);
-  text-align: left !important;
+.menu-svg-class {
+  vertical-align: middle;
+  margin-left: 1px;
+  width: 29px;
+  padding-left: 5px;
+  text-align: left;
 }
 </style>
diff --git a/src/lib/el-svg-icon.ts b/src/lib/el-svg-icon.ts
@@ -0,0 +1,10 @@
+import * as components from '@element-plus/icons-vue'
+
+export default {
+    install: (app) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};
diff --git a/src/main.ts b/src/main.ts
@@ -28,6 +28,11 @@ import './permission'
 import 'element-plus/dist/index.css'
 const app = createApp(App)
 
+//import element-plus svg icon
+import ElSvgIcon from "@/lib/el-svg-icon"
+app.use(ElSvgIcon)
+
+
 //router
 app.use(router)
 

diff --git a/src/permission.ts b/src/permission.ts
@@ -1,7 +1,6 @@
 import router from '@/router'
-import { filterAsyncRouter, progressClose, progressStart } from '@/hooks/use-permission'
+import {progressClose, progressStart } from '@/hooks/use-permission'
 import { useBasicStore } from '@/store/basic'
-import { userInfoReq } from '@/api/user'
 import { langTitle } from '@/hooks/use-common'
 import settings from "@/settings";
 
@@ -22,25 +21,8 @@ router.beforeEach(async (to) => {
     if (to.path === '/login') {
       return '/'
     } else {
-      //2.判断是否获取用户信息
-      if (!basicStore.getUserInfo) {
-        try {
-          const userData = await userInfoReq()
-          //3.动态路由权限筛选
-          filterAsyncRouter(userData)
-          //4.保存用户信息到store
-          basicStore.setUserInfo(userData)
-          //5.再次执行路由跳转
-          return { ...to, replace: true }
-        } catch (e) {
-          console.error(`route permission error${e}`)
-          basicStore.resetState()
-          progressClose()
-          return `/login?redirect=${to.path}`
-        }
-      } else {
-        return true
-      }
+      basicStore.setFilterAsyncRoutes([])
+      return true
     }
   } else {
     if (!whiteList.includes(to.path)) {