From a90fa8d106a70744f59003d88143b501b2eb7f9d Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 18 Jun 2020 18:41:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9:=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E8=A7=A3=E5=86=B3=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=AF=BC=E8=87=B4=E7=9A=84=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  4 +-
 src/components/exception/ExceptionPage.vue    | 17 +++---
 src/components/setting/Setting.vue            |  7 ++-
 .../transition/PageToggleTransition.vue       |  3 +-
 src/layouts/GlobalLayout.vue                  | 55 ++++++++++++++-----
 src/layouts/MenuView.vue                      | 47 ++++++++--------
 src/layouts/PageLayout.vue                    |  9 ++-
 src/pages/exception/403.vue                   |  6 +-
 src/pages/exception/404.vue                   |  6 +-
 src/pages/exception/500.vue                   |  8 ++-
 src/store/modules/setting.js                  |  2 +-
 src/theme/default/color.less                  | 14 ++++-
 src/theme/theme.less                          |  2 +-
 vue.config.js                                 |  6 +-
 14 files changed, 122 insertions(+), 64 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4136d3f..fb66b17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,5 +18,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+  #id{
+  }
 </style>
diff --git a/src/components/exception/ExceptionPage.vue b/src/components/exception/ExceptionPage.vue
index ca2eea9..9fc4bed 100644
--- a/src/components/exception/ExceptionPage.vue
+++ b/src/components/exception/ExceptionPage.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="exception">
+  <div class="exception-page" :style="{minHeight: layoutMinHeight - 64 + 'px'}">
     <div class="img">
       <img :src="config[type].img" />
-      <!--<div class="ele" :style="{backgroundImage: `url(${config[type].img})`}"/>-->
     </div>
     <div class="content">
       <h1>{{config[type].title}}</h1>
@@ -24,17 +23,18 @@ export default {
     return {
       config: Config
     }
-  }
+  },
+  inject: ['layoutMinHeight']
 }
 </script>
 
 <style lang="less" scoped>
-  .exception{
-    min-height: 500px;
-    height: 80%;
+  .exception-page{
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
     align-items: center;
-    text-align: center;
-    margin-top: 150px;
+    background-color: white;
     .img{
       display: inline-block;
       padding-right: 52px;
@@ -46,7 +46,6 @@ export default {
     }
     .content{
       display: inline-block;
-      flex: auto;
       h1{
         color: #434e59;
         font-size: 72px;
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index c3dc643..b7f21c0 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -7,7 +7,7 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="[0]" :multiple="false">
+      <color-checkbox-group @change="onColorChange" :defaultValues="[5]" :multiple="false">
         <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
       </color-checkbox-group>
     </setting-item>
@@ -96,6 +96,11 @@ export default {
       colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
     }
   },
+  watch: {
+    animate(){
+      this.direction = 0
+    }
+  },
   computed: {
     animateCfg() {
       return this.animates[this.animate]
diff --git a/src/components/transition/PageToggleTransition.vue b/src/components/transition/PageToggleTransition.vue
index 2da6634..e8a75b2 100644
--- a/src/components/transition/PageToggleTransition.vue
+++ b/src/components/transition/PageToggleTransition.vue
@@ -51,9 +51,8 @@
           direction = animate.directions[0]
         } else {
           direction = animate.directions.find(item => item == this.direction)
-          direction = (direction == undefined || direction === 'default') ? '' : direction
         }
-        window.console.log(direction)
+        direction = (direction == undefined || direction === 'default') ? '' : direction
         if (direction != '') {
           direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
           direction = direction[0].toUpperCase() + direction.substring(1)
diff --git a/src/layouts/GlobalLayout.vue b/src/layouts/GlobalLayout.vue
index f1b8271..743f3e4 100644
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout>
+  <a-layout class="global-layout">
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
       <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
@@ -10,9 +10,9 @@
       </div>
       <setting />
     </drawer>
-    <a-layout>
+    <a-layout class="global-layout-main">
       <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
-      <a-layout-content :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
+      <a-layout-content class="global-layout-content" :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
         <slot></slot>
       </a-layout-content>
       <a-layout-footer style="padding: 0px">
@@ -29,7 +29,7 @@ import Drawer from '../components/tool/Drawer'
 import SiderMenu from '../components/menu/SiderMenu'
 import Setting from '../components/setting/Setting'
 
-const minHeight = window.innerHeight - 64 - 24 - 122
+const minHeight = window.innerHeight - 64 - 122
 
 let menuData = []
 
@@ -44,6 +44,11 @@ export default {
       showSetting: false
     }
   },
+  provide() {
+    return{
+      layoutMinHeight: minHeight,
+    }
+  },
   computed: {
     isMobile () {
       return this.$store.state.setting.isMobile
@@ -82,14 +87,38 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .setting{
-    background-color: #1890ff;
-    color: #fff;
-    border-radius: 5px 0 0 5px;
-    line-height: 40px;
-    font-size: 22px;
-    width: 40px;
-    height: 40px;
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  .global-layout{
+    height: 100vh;
+    .global-layout-main{
+      height: 100vh;
+      overflow-y: scroll;
+      scrollbar-color: @primary-color @primary-2;
+      scrollbar-width: thin;
+      &::-webkit-scrollbar{
+        width: 3px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background: @primary;
+      }
+      &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
+        border-radius: 3px;
+        background: @primary-3;
+      }
+    }
+    .global-layout-content{
+    }
+    .setting{
+      background-color: #1890ff;
+      color: #fff;
+      border-radius: 5px 0 0 5px;
+      line-height: 40px;
+      font-size: 22px;
+      width: 40px;
+      height: 40px;
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+    }
   }
 </style>
diff --git a/src/layouts/MenuView.vue b/src/layouts/MenuView.vue
index d71e524..9742e02 100644
--- a/src/layouts/MenuView.vue
+++ b/src/layouts/MenuView.vue
@@ -1,25 +1,25 @@
 <template>
   <global-layout>
-    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
-    <a-tabs
-      @contextmenu.native="e => onContextmenu(e)"
-      v-if="multiPage"
-      :active-key="activePage"
-      style="margin-top: -8px; margin-bottom: 8px"
-      :hide-add="true"
-      type="editable-card"
-      @change="changePage"
-      @edit="editPage">
-      <a-tab-pane :key="page.fullPath" v-for="page in pageList">
-        <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
-      </a-tab-pane>
-    </a-tabs>
-    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
-      <keep-alive v-if="multiPage">
-        <router-view />
-      </keep-alive>
-      <router-view v-else />
-    </page-toggle-transition>
+      <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
+      <a-tabs
+        @contextmenu.native="e => onContextmenu(e)"
+        v-if="multiPage"
+        :active-key="activePage"
+        style="margin-top: -8px; margin-bottom: 8px"
+        :hide-add="true"
+        type="editable-card"
+        @change="changePage"
+        @edit="editPage">
+        <a-tab-pane :key="page.fullPath" v-for="page in pageList">
+          <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
+        </a-tab-pane>
+      </a-tabs>
+      <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+        <keep-alive v-if="multiPage">
+          <router-view />
+        </keep-alive>
+        <router-view v-else />
+      </page-toggle-transition>
   </global-layout>
 </template>
 
@@ -159,6 +159,9 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .menu-view{
+    .menu-view-content{
+    }
+  }
 </style>
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index 81f3f68..5702982 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="margin: -24px -24px 0px">
+  <div class="page-layout">
     <page-header :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
       <slot name="action"  slot="action"></slot>
       <slot slot="content" name="headerContent"></slot>
@@ -50,6 +50,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .page-header{
+    margin: -24px -24px 0;
+  }
   .link{
     margin-top: 16px;
     line-height: 24px;
@@ -64,11 +67,11 @@ export default {
   }
   .page-content{
     position: relative;
+    padding: 24px 24px 0;
     &.side{
-      padding: 24px 24px 0;
     }
     &.head{
-      padding: 24px 0 0;
+      margin: 0 auto;
       max-width: 1400px;
     }
   }
diff --git a/src/pages/exception/403.vue b/src/pages/exception/403.vue
index cdb0f11..f35faf5 100644
--- a/src/pages/exception/403.vue
+++ b/src/pages/exception/403.vue
@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>
diff --git a/src/pages/exception/404.vue b/src/pages/exception/404.vue
index c47f870..05fda1c 100644
--- a/src/pages/exception/404.vue
+++ b/src/pages/exception/404.vue
@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>
diff --git a/src/pages/exception/500.vue b/src/pages/exception/500.vue
index d80ca2e..f68d91a 100644
--- a/src/pages/exception/500.vue
+++ b/src/pages/exception/500.vue
@@ -1,5 +1,5 @@
 <template>
-    <exception-page type="500" />
+  <exception-page type="500" />
 </template>
 
 <script>
@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index d5171c6..a433e37 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -11,7 +11,7 @@ export default {
     multiPage: true,
     animates: animates,
     animate: {
-      name: 'back',
+      name: 'bounce',
       direction: 'left'
     }
   },
diff --git a/src/theme/default/color.less b/src/theme/default/color.less
index 102c682..aaf7a5a 100644
--- a/src/theme/default/color.less
+++ b/src/theme/default/color.less
@@ -1,4 +1,16 @@
-@import "../theme";
+@import '~ant-design-vue/lib/style/color/colors.less';
+@primary: #1890ff;
 @primary-color: @primary;
 @processing-color: @primary;
 @link-color: @primary;
+
+@primary-1: color(~`colorPalette('@{primary}', 1) `);
+@primary-2: color(~`colorPalette('@{primary}', 2) `);
+@primary-3: color(~`colorPalette('@{primary}', 3) `);
+@primary-4: color(~`colorPalette('@{primary}', 4) `);
+@primary-5: color(~`colorPalette('@{primary}', 5) `);
+@primary-6: color(~`colorPalette('@{primary}', 6) `);
+@primary-7: color(~`colorPalette('@{primary}', 7) `);
+@primary-8: color(~`colorPalette('@{primary}', 8) `);
+@primary-9: color(~`colorPalette('@{primary}', 9) `);
+@primary-10: color(~`colorPalette('@{primary}', 10) `);
diff --git a/src/theme/theme.less b/src/theme/theme.less
index 33b715c..03d15ef 100644
--- a/src/theme/theme.less
+++ b/src/theme/theme.less
@@ -1 +1 @@
-@primary: #1890ff;
+@import "./default/index";
diff --git a/vue.config.js b/vue.config.js
index 4e97645..09c45a7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,14 +1,14 @@
-// let path = require('path')
+let path = require('path')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const getThemeColors = require('./src/utils/themeUtil').getThemeColors
 const themeColor = require('./src/config').themeColor
 
 module.exports = {
+  // transpileDependencies: ['webpack-theme-color-replacer'],
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'less',
-      // patterns: [path.resolve(__dirname, "./src/theme/theme.less")]
-      patterns: []
+      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
     }
   },
   configureWebpack: config => {