Browse Source

wanda-adm:feat >添加错误页面,解决报错

shaun-sheep 4 years ago
parent
commit
68e634a77f

+ 1 - 1
README.md

@@ -27,7 +27,7 @@
 │   └── shims.d.ts             # 模块注入
 ├── .browserslistrc            # browserslistrc 配置文件 (用于支持 Autoprefixer)
 ├── .editorconfig              # 编辑相关配置
-├── ..env.development          # 开发环境变量配置
+├── .env.development           # 开发环境变量配置
 ├── .env.staging               # 测试环境变量配置
 ├── .env.production            # 线上环境变量配置
 ├── .eslintrc.js               # eslint 配置

+ 0 - 1
package.json

@@ -43,7 +43,6 @@
     "@typescript-eslint/parser": "^4.6.0",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
-    "@vue/cli-plugin-pwa": "^4.5.8",
     "@vue/cli-plugin-router": "^4.5.8",
     "@vue/cli-plugin-typescript": "^4.5.8",
     "@vue/cli-plugin-unit-jest": "^4.5.8",

+ 0 - 20
public/manifest.json

@@ -1,20 +0,0 @@
-{
-  "name": "wanda-adm",
-  "short_name": "adm",
-  "icons": [
-    {
-      "src": "./img/icons/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "background_color": "#fff",
-  "theme_color": "#4DBA87"
-}

+ 0 - 2
public/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Disallow:

+ 14 - 3
src/App.vue

@@ -1,16 +1,27 @@
 <template>
   <div id="app">
     <el-scrollbar>
-    <router-view />
+      <router-view/>
     </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import {Component, Vue} from 'vue-property-decorator'
 
 @Component({
   name: 'App'
 })
-export default class extends Vue {}
+export default class extends Vue {
+}
 </script>
+<style lang="scss">
+.el-scrollbar {
+  height: 100%;
+  .el-scrollbar__view{
+    height: 100%;
+
+  }
+}
+
+</style>

BIN
src/assets/401-images/401.gif


+ 4 - 2
src/layout/components/Sidebar/SidebarItem.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     v-if="!item.meta || !item.meta.hidden"
-    :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
-  >
+    :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]">
     <template v-if="theOnlyOneChild && !theOnlyOneChild.children">
       <sidebar-item-link
         v-if="theOnlyOneChild.meta"
@@ -131,6 +130,9 @@ export default class extends Vue {
     &:hover {
       background-color: $subMenuHover !important;
     }
+    &:active{
+      background-color: $subMenuHover !important;
+    }
   }
 }
 

+ 9 - 5
src/layout/components/Sidebar/SidebarItemLink.vue

@@ -5,26 +5,30 @@
     target="_blank"
     rel="noopener"
   >
-    <slot />
+    <slot/>
   </a>
   <router-link
     v-else
     :to="to"
+    active-class="active"
   >
-    <slot />
+    <slot/>
   </router-link>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import { isExternal } from '@/utils/validate'
+import {Component, Prop, Vue} from 'vue-property-decorator'
+import {isExternal} from '@/utils/validate'
 
 @Component({
   name: 'SidebarItemLink'
 })
 export default class extends Vue {
-  @Prop({ required: true }) private to!: string
+  @Prop({required: true}) private to!: string
 
   private isExternal = isExternal
 }
 </script>
+<style lang="scss">
+
+</style>

+ 36 - 2
src/router.ts

@@ -32,8 +32,13 @@ export default new Router({
     },
     {
       path: '/404',
-      component: () => import(/* webpackChunkName: "404" */ '@/views/404.vue'),
-      meta: {hidden: true}
+      component: () => import(/* webpackChunkName: "404" */ '@/views/error-page/404.vue'),
+      meta: { hidden: true }
+    },
+    {
+      path: '/401',
+      component: () => import(/* webpackChunkName: "401" */ '@/views/error-page/401.vue'),
+      meta: { hidden: true }
     },
     {
       path: '/',
@@ -150,6 +155,35 @@ export default new Router({
       },
     },
     {
+      path: '/error',
+      component: Layout,
+      redirect: 'noredirect',
+      meta: {
+        title: '错误页面',
+        icon: 'nested'
+      },
+      children: [
+        {
+          path: '401',
+          component: () => import(/* webpackChunkName: "error-page-401" */ '@/views/error-page/401.vue'),
+          name: 'Page401',
+          meta: {
+            title: '401',
+            noCache: true
+          }
+        },
+        {
+          path: '404',
+          component: () => import(/* webpackChunkName: "error-page-404" */ '@/views/error-page/404.vue'),
+          name: '404',
+          meta: {
+            title: '404',
+            noCache: true
+          }
+        }
+      ]
+    },
+    {
       path: '*',
       redirect: '/404',
       meta: {hidden: true}

+ 131 - 0
src/views/error-page/401.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="errPage-container">
+    <el-button
+      icon="el-icon-arrow-left"
+      class="back-btn"
+      @click="back"
+    >
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          Oops!
+        </h1>
+        gif来源<a
+          href="https://zh.airbnb.com/"
+          target="_blank"
+        >airbnb</a> 页面
+        <h2>你没有权限去该页面</h2>
+        <h6>如有不满请联系你领导</h6>
+        <ul class="list-unstyled">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/dashboard">
+              回首页
+            </router-link>
+          </li>
+          <li class="link-type">
+            <a href="https://github.com/armour">随便看看</a>
+          </li>
+          <li>
+            <a
+              href="#"
+              @click.prevent="dialogVisible=true"
+            >点我看图</a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img
+          :src="errGif"
+          class="some-gif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        >
+      </el-col>
+    </el-row>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="随便看"
+    >
+      <img
+        :src="ewizardClap"
+        class="some-img"
+      >
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import errGif from '@/assets/401-images/401.gif'
+
+@Component({
+  name: 'Page401'
+})
+export default class extends Vue {
+  private errGif = errGif + '?' + +new Date()
+  private ewizardClap = 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646'
+  private dialogVisible = false
+
+  private back() {
+    if (this.$route.query.noGoBack) {
+      this.$router.push({ path: '/dashboard' }).catch(err => {
+        console.warn(err)
+      })
+    } else {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+
+  .back-btn {
+    background: #008489;
+    color: #fff;
+    border: none!important;
+  }
+
+  .some-gif {
+    margin: 0 auto;
+    display: block;
+  }
+
+  .some-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+
+  .list-unstyled {
+    font-size: 14px;
+
+    li {
+      padding-bottom: 5px;
+    }
+
+    a {
+      color: #008489;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/views/404.vue → src/views/error-page/404.vue


+ 1 - 3
vue.config.js

@@ -26,9 +26,7 @@ module.exports = {
       }
     }
   },
-  pwa: {
-    name: name
-  },
+
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'scss',