2022年5月25日17:32:18

src/App.vue

@@ -14,12 +14,9 @@ onUnmounted(): 组件卸载完成后执行的函数
 onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
 onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
  -->
-<script lang="ts">
+<script lang="ts" setup>
 import { defineComponent } from 'vue'
 
-export default defineComponent({
-  name: 'App',
-})
 </script>
 
 <style>

src/layout/components/Head.vue

@@ -17,12 +17,17 @@
         <item-ioc icon="FullScreen" />
       </el-icon>
       <!-- 弹出框提示 -->
-      <el-popover v-model:visible="visible" placement="bottom" :width="160">
-        <div class="as-layout-vertical">
-          <el-button type="default" @click="hint('个人中心')" class="as-text-14px" style="width: 100%">个人中心</el-button>
-          <el-button type="default" @click="hint('退出登录')" class="as-text-14px" style="margin-right: 10px">退出登录
+      <el-popover v-model:visible="visible" trigger="hover" placement="bottom" :width="160">
+        <div class="as-gravity-center" style="display:flex;flex-direction: column;">
+          <el-button type="default" @click="hint('个人中心')" class="as-text-14px" style="width: 100%;border: none">个人中心
           </el-button>
+          <div style="width: 100%;">
+            <el-button type="default" @click="hint('退出登录')" class="as-text-14px"
+              style="width: 100%;border: none">退出登录
+            </el-button>
+          </div>
         </div>
+
         <template #reference>
           <!-- 头像 -->
           <div style="margin-left: 20px">
@@ -61,9 +66,9 @@ function fullScreen() {
 function hint(msg: string) {
   if (msg === '退出登录') {
     Cookies.remove('token')
-    Cookies.remove('rememberPSWD')
-    Cookies.remove('account')
-    Cookies.remove('password')
+    Cookies.remove('rememberPSWD') //记住密码
+    Cookies.remove('account') //账号
+    Cookies.remove('password') //密码
     router.replace('/')
     location.reload()
   } else {

src/layout/components/TabControl.vue

@@ -121,6 +121,8 @@ const tabClick = (tab: any) => {
       router.replace({
         name: tabs[sig].path,
       })
+      console.log(tabs[sig],`${tabs[sig].title},${tabs[sig].path}`);
+      
       sessionStorage.setItem('newTab', JSON.stringify(tabs[sig]))
       //更新菜单索引
       $storeTab.dispatch('updateMI', `${tabs[sig].title},${tabs[sig].path}`)

src/layout/index.vue

@@ -6,19 +6,20 @@
       <!-- 菜单部分 -->
       <div class="bg-theme" style="height: 100%">
         <!-- 菜单头部部分 -->
-        <div class="as-gravity-center-start" style="height: 70px">
+        <div class="as-gravity-center-start" @click="barkHome" style="height: 70px;cursor: pointer;">
           <img rel="icon" src="/logo2.png" style="width: 60px; height: 60px" />
           <!-- D-UI框架模板 -->
-          <span class="as-bold" style="font-size: 18px; color: #ffffff" v-show="menuStart.menuIsExpansion">黔通智联</span>
+          <div class="as-bold" style="font-size: 18px; color: #ffffff;user-select:none;"
+            v-show="menuStart.menuIsExpansion">黔通智联</div>
         </div>
 
         <!-- 菜单主体部分 height="100%" -->
         <div class="as-border-width" style="height: 100%; background-color: #ffffff">
           <el-scrollbar max-height="90%">
-              <el-menu :default-active="menuIndex.menuIndex" mode="vertical" :router="false" @select="select"
-                :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
-                <sidebar-item :list="list" />
-              </el-menu>
+            <el-menu :default-active="menuIndex.menuIndex" mode="vertical" :router="false" @select="select"
+              :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
+              <sidebar-item :list="list" />
+            </el-menu>
           </el-scrollbar>
         </div>
       </div>
@@ -84,8 +85,11 @@ onMounted(() => {
       type: 1,
       data: dataTabs,
     }
+    console.log(dataTabs);
+    
     $storeTab.dispatch('addTab', value)
-    $storeTab.dispatch('updateETV', dataTabs.name)
+    $storeTab.dispatch('updateETV', 1 + '')
+    $storeTab.dispatch('updateMI', `${dataTabs.title},${dataTabs.path}`)
   } else {
     router.replace({
       name: 'home',
@@ -93,6 +97,16 @@ onMounted(() => {
   }
   sessionStorage.removeItem('newTab')
 })
+
+//返回首页
+const barkHome = (() => {
+  //更新菜单索引
+  $storeTab.dispatch('updateETV', 0 + '')
+  router.replace({
+    name: 'home'
+  })
+})
+
 //菜单选择监听(添加选项卡成功则添加，有就进行跳转)
 //data(菜单名称,菜单路径)
 function select(data: unknown) {

src/router/index.ts

@@ -8,6 +8,11 @@ const routes: RouteRecordRaw[] = [
     name: 'Login',
     component: () => import('@/views/system/login/Login.vue'),
   },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/features/404.vue'),
+  },
   {
     path: '/layout/index',
     name: 'Layout',
@@ -211,15 +216,21 @@ const router = createRouter({
 
 //新增前置路由首位
 router.beforeEach((to, from, next) => {
-  if (to.meta.isAuth) { //是否需要验证权限
-    if (Cookies.get('token')) {
-      next() //继续往下
+  console.log(to.path, to, from);
+  if (to.name) {
+    if (to.meta.isAuth) { //是否需要验证权限
+      if (Cookies.get('token')) {
+        next() //继续往下
+      } else {
+        next({ name: 'Login' });  //没登录，跳转到login页
+      }
     } else {
-      next({ name: 'Login' });  //没登录，跳转到login页
+      next() //继续往下
     }
-  } else {
-    next() //继续往下
+  } else { //页面不存在
+    next({ name: '404' });
   }
+
 })
 
 export default router

src/store/tabValue.ts

@@ -102,6 +102,8 @@ export default createStore<any>({
         },
         //更新ETV
         UpdateETV(state, value) {
+            console.log(value);
+            
             state.editableTabsValue.index = value;
         },
         //更新MI

src/views/features/404.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <!-- <el-menu-item href="/" class="bullshit__return-home">返回首页</el-menu-item> -->
+        <router-link :to="{ name: `home` }" class="bullshit__return-home">返回首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '网管说这个页面你不能进......'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>