add init loading page and remove $ref

jzfai · Apr 20, 2023 · fc0b262 · fc0b262
1 parent 87660bd
commit fc0b262
Show file tree

Hide file tree

Showing 40 changed files with 185 additions and 887 deletions.
diff --git a/eslintrc/.eslintrc-auto-import.json b/eslintrc/.eslintrc-auto-import.json
@@ -36,8 +36,6 @@
     "isReadonly": true,
     "isRef": true,
     "langTitle": true,
-    "loginOutReq": true,
-    "loginReq": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -93,7 +91,6 @@
     "useSlots": true,
     "useTable": true,
     "useTagsViewStore": true,
-    "userInfoReq": true,
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,

diff --git a/index.html b/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html lang="en" class="base-theme">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= title %></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<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 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.js"></script>
+</body>
 </html>
diff --git a/mock/example.ts → mock/example.js b/mock/example.ts → mock/example.js
diff --git a/mock/system.js b/mock/system.js
@@ -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/src/api/system.js b/src/api/system.js
@@ -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.js b/src/api/user.js
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
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup >
 import { nextTick } from 'vue'
 import { CaretBottom } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
@@ -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.js b/src/lib/el-svg-icon.js
@@ -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.js b/src/main.js
@@ -28,6 +28,10 @@ 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.js b/src/permission.js
@@ -1,9 +1,8 @@
 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'
+import settings from "@/settings";
 
 //路由进入前拦截
 //to:将要进入的页面 vue-router4.0 不推荐使用next()
@@ -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)) {