From b048d19d22e00201d0a9af3f2abdefed06a7cac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Sat, 27 Nov 2021 11:34:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/SidebarItem.vue | 36 ++++++++++---------
 src/layout/components/Sidebar/index.vue       |  1 -
 src/layout/index.vue                          |  4 +--
 src/main.ts                                   |  2 +-
 src/router/index.ts                           | 12 ++++---
 src/styles/sidebar.scss                       | 22 ++++++------
 src/utils/request.ts                          |  6 +++-
 src/views/login/index.vue                     |  1 +
 8 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 23450cbb..70c2f4ca 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,41 +1,43 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
+        v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+          <span v-if="onlyOneChild.meta && onlyOneChild.meta.title">{{ onlyOneChild.meta.title }}</span>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template #title>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
 
-        <span v-if="item.meta && item.meta.title">{{
-            t("route." + item.meta.title)
-          }}</span>
+      <template slot="title">
+        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
       <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
+          v-for="child in item.children"
+          :key="child.path"
+          :is-nest="true"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 
 <script>
 import path from 'path-browserify'
-import { isExternal } from '@utils/validate'
+import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
+import SvgIcon from '@/components/SvgIcon/index.vue';
 
 export default {
   name: 'SidebarItem',
-  components: {  AppLink },
+  components: {SvgIcon, AppLink},
   props: {
     // route object
     item: {
@@ -76,7 +78,7 @@ export default {
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
         return true
       }
 
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 414915d3..7fab2ebc 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -27,7 +27,6 @@ import variables from '@styles/variables.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 
-
 export default defineComponent({
   components: {
     SidebarItem,
diff --git a/src/layout/index.vue b/src/layout/index.vue
index fbc486dd..d65a4a68 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -135,8 +135,8 @@ export default defineComponent({
 
 </script>
 <style lang="scss" scoped>
-@import "@styles/mixin.scss";
-@import "@styles/variables.scss";
+@import "@/styles/mixin.scss";
+@import "@/styles/variables.scss";
 
 .app-wrapper {
   @include clearfix;
diff --git a/src/main.ts b/src/main.ts
index 8e24d3a6..41e87218 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
 import {store,key} from './store'
-import '@styles/index.scss'
+import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
diff --git a/src/router/index.ts b/src/router/index.ts
index f9a07a6e..22e4b271 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,14 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 import Layout from '@/layout/index.vue'
 
+
+// 参数配置: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+
 export const constantRoutes: Array<RouteRecordRaw> = [
     {
         path: '/redirect',
         component: Layout,
-        meta: {hidden: true},
+        hidden: true,
         children: [
             {
                 path: '/redirect/:path(.*)',
@@ -15,19 +18,18 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     },
     {
         path: '/login',
-        name: 'Login',
         component: () => import('@/views/login/index.vue'),
-        meta: {title: '登录'}
+        hidden: true
     },
     {
         path: '/404',
         component: () => import('@/views/error-page/404.vue'),
-        meta: {hidden: true}
+        hidden: true
     },
     {
         path: '/401',
         component: () => import('@/views/error-page/401.vue'),
-        meta: {hidden: true}
+        hidden: true
     },
     {
         path: '/',
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 94760cc7..c6b87fcd 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -70,18 +70,18 @@
 
     // menu hover
     .submenu-title-noDropdown,
-    .el-submenu__title {
+    .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
       }
     }
 
-    .is-active>.el-submenu__title {
+    .is-active>.el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 
@@ -117,10 +117,10 @@
       }
     }
 
-    .el-submenu {
+    .el-sub-menu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -131,15 +131,15 @@
           margin-left: 19px;
         }
 
-        .el-submenu__icon-arrow {
+        .el-sub-menu__icon-arrow {
           display: none;
         }
       }
     }
 
     .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
+      .el-sub-menu {
+        &>.el-sub-menu__title {
           &>span {
             height: 0;
             width: 0;
@@ -152,7 +152,7 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-submenu {
+  .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $sideBarWidth !important;
   }
 
@@ -197,7 +197,7 @@
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 833b81f0..d90c8bd5 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -42,7 +42,6 @@ service.interceptors.response.use(
         }
     },
     (error) => {
-        console.log('error', error)
         const {code, msg} = error.response.data
         if (code === 'A0230') {  // token 过期
             Local.clear(); // 清除浏览器全部缓存
@@ -52,6 +51,11 @@ service.interceptors.response.use(
                 })
                 .catch(() => {
                 });
+        }else{
+            ElMessage({
+                message: msg || '系统出错',
+                type: 'error'
+            })
         }
         return Promise.reject(new Error(msg || 'Error'))
     }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 04c68d60..0f8ed5f1 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -135,6 +135,7 @@ export default {
             this.loading = false
           }).catch(() => {
             this.loading = false
+            this.getCaptcha()
           })
         } else {
           console.log('error submit!!')