From 4a916d6d12637b6b04b3fdf923e0f3a85939992a Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Tue, 5 Jan 2021 23:58:16 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.01.05:=E7=BC=96=E5=86=99=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=85=8D=E7=BD=AE=E7=9B=B8=E5=AF=B9=E5=BA=94=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=81=E6=B7=BB=E5=8A=A0=E8=BF=87=E6=B8=A1=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-admin-wonderful-next/package.json         |  2 +-
 .../src/assets/logo-docs-mini.svg             |  9 ++++
 vue-admin-wonderful-next/src/store/index.ts   |  3 +-
 vue-admin-wonderful-next/src/theme/app.scss   | 13 +++++-
 .../src/theme/common/transition.scss          | 14 +++++++
 .../src/utils/themeConfig.ts                  |  3 +-
 .../src/views/layout/component/aside.vue      | 20 +++++----
 .../src/views/layout/component/main.vue       |  1 -
 .../src/views/layout/logo/index.vue           | 41 ++++++++++++++++++-
 .../layout/navBars/breadcrumb/setings.vue     | 14 ++-----
 .../views/layout/navBars/breadcrumb/user.vue  | 18 +++++---
 11 files changed, 107 insertions(+), 31 deletions(-)
 create mode 100644 vue-admin-wonderful-next/src/assets/logo-docs-mini.svg

diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index 347c693..ba14cd1 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/vue-admin-wonderful-next/package.json
@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.19",
+    "element-plus": "^v1.0.1-beta.20",
     "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",
diff --git a/vue-admin-wonderful-next/src/assets/logo-docs-mini.svg b/vue-admin-wonderful-next/src/assets/logo-docs-mini.svg
new file mode 100644
index 0000000..ab8733d
--- /dev/null
+++ b/vue-admin-wonderful-next/src/assets/logo-docs-mini.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 35" width="47" height="35">
+	<defs>
+		<image width="41" height="29" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAdCAYAAAA3i0VNAAAAAXNSR0IB2cksfwAAB69JREFUeJzNVwtQU1caZl3DO4AkQCIoYAjvVyAxBhJAEASMPATBlPAMEIKBhBASQkKRIqzSah1Fq+OrOLJQl2epQEHEtlbFtdWdsvWNjGNtV1nHVq2rJvfsubfNllqE0GXc/WfO3My9/3e+7/zn/P9/YkQiEv3/VF/fViAQyOtqa3edGhm59v6hQ/1eVCrJ6P/F6t6qba2prgbi4mLQ2d4OHAgEsKWhAdTX1W3/X2v7j60tF/yNlhkLVvOSQHtPNyAsJYPsEiEorSjveN1abH19LNyLU6hepeu8vSSpHtSSDKrLhjgPo4BN/MGgd8VI6LsbQeS+CsA6UgHYH1QhXjLegOnChX94nSIpeQlK5n7pI+Z+iRaOp8z9ssc+qsz7RhR+jJjVXIGEdWnA1EHfVXLXkrSY+LoEwoAs8KvJHXpZB3z3mRGe5LCY8Z7kESasqVSLPnl9laD102xdDt8z9nWJxDuQ7eg7xd+h/NE9GiAalCNJvVVgWfZaDebgUZq2B/1ILUzWoc+eLwqQxxPJoKkh6MO5kjlyo8IIgT5ec8U5ccO5oa0qLHpHzxdpUf7znyXqzG0JzpiDtYuzt3+DSMvYI8VECgYUyLmvspEDXWk6Mwv8UkOJWDQipW2A90PENuFNMzNz67mIZJelNklPyLEo5g4oQfcXBeDNndzhXzm55yXsa/pUhFy+koEc+2shEvuhGluVK5+rNITEdOEfFzCqs7r3nBGB1ZDIU5L+/iJPd7whWHMrK/Ohrqiv0egdPifC8oN9rErnGMtJ+5Wjv7e9/dm+qHHU8dHEOlA0qMCc/TblXkIP9WxE9iuCOCEtSp3+wGe2lz0XSDnlEDurSFI4kyHtLH4Go4cIPtbz5t2EWJPfONerA2Vfj6UhvV/m61b3qDFCmPk6axcX75lILElkiwgNr/O9Mxu1ZSfkGEnzqAg52p38DSHAe8lsIl358TWcTg2yqlsNuDBZQv9cqV0cwy6c1tlm6VKLoM0F5/XRCIdDPCQHuVWrZ+w+zqnR/B0Dhc/RXbh7Ix1EdGkQFBvWqQGw3jbPtBPwm6VvTe49lG/3GTEydpmPsOvzzppb2/42inpbkhSVHHJU+QIF1ZwqA5PjqWC4I/w2nAz3ChKc/6bcUwkwAnvPFIPy4XKwslsD8gaUyLqPqhDmQdljUgRz+av47EPoa9jH1Fj00Tkye+Q6N16sYKagGFk6kI1hle9CQfJhOfIAipy8kgBSuc5x0/kvjmaFsprl/5pagA+eE7347sZ6cP0qD1n/kQr4arKOm5mYTrtIT2n6walYWqPwyiJ3is2MIlEjBvt7L98n/QEFpcBoiAYVWj/FGy0v+6FJUbs1oln28zlEh486Z7ShLWvy4a0U8He4dWt71QhMKK1TfHjCNHhc2HbhfdVJGYjrUSPsv1TBahJfMqtAPbl7UXI9BGHkEV3VCOwGTyyIdoSpfq4Md9f+jxP/2TxahAkM3FL4JfSxI68KiQg9IJ8MhzjVyTJt+4VChL8jc3SRO9VqKt5uOS3urROl2tvX04FmpEwXtE10He/oRDAy1GyoVNuAhoKxDNgiBy/lIfkDCgDPa9HUhbgJEjQxXWo0UQDzkPwZMdgvWP99ybpVOfCC8BB2L3DvZipoHBZrl2VxS6eWJE/phgPw/CJpx1UgHAYEtsBygwX+stKgGGGb+OmNqxuQKrglvprsU/qbEZ5MxgduFY6hEeR0qIG3IqN7qgA0o93yE6vjOyp1wsEK2EnUIGh78TiR5ueLfjfD4YxpW4XfwlKHJVrwTvEdeBbJcxaJ2rKsNZqozp+yj3VEobNxo/ij753TYjIrByQv+i/mI1G7i+8QAnxoL2OtnF1MfCr5nWgpQktSTp8ClOxIOWthjDO2Z9G56iHJs1vX0sEnFzMBvTBeaUjhn9bwjo74wC0FV/WJ4ZafVA/7sql/neDzN0fKkKEL2UhkcWLVq+6eDhy6F2N36b2c/kpwB569yatJSJ3Srwy2zf11n0h0kzfXg9NDa/4RwnSctejPaI6x7GhWswKrnfHbc25Hpi+v5bRWPkejw6jLO03w9XrlZQIVD3ejKKdbpnswngLQgn/pfMpj1mH595Fwm9N7lQhrQ1jdvFywPcTrm1GRF77K0t69nAzSj6t0zAPlT+xDgumzYU1xOBysvX1Z/UodzGJtIiza+p0JbMifgAJN/2uBqJnb2pHpu8QPYVdAeH0qHadDg1CLkncYeo7sV9B8GXul3//UbqvBkVGRDu1ILhlc9bwI1JvT2og3QttU2MUDnsmz8OJhNTvqF3PhxeUwD5Y/CYMi5cMywNm18YGFtY3tvIqEUVvoKUkbC3pH+MB+RUDUXPFmltbGsFaqQ1oU2N8UzzLe4XkV+LNIV2sXp0hYz2Lhb5ffOYffMn5cI72p5KKtn1fivIkjWFsTPCgUd0gQC4uwmSOJtNLCxITyOwQugCMMzWQbTy8ifDLmRSDF2dlj5OTwtYmJiW8lJeIPWltaTt4aH78vzM9PMXQOOo3m0LB5c3wil4vuABcu1LRAIFjpQCCEzYtINHvNjY2JtlZWFDi5ZTibzYJkCZDAzFD8O42Nez8/fXqyt6fnm+jIyMRtb7/d+fTHH4FcJqs0ZI5/A3MniZrMHX4aAAAAAElFTkSuQmCC"/>
+	</defs>
+	<style>
+		tspan { white-space:pre }
+	</style>
+	<use id="图层 1" href="#img1" x="3" y="3" />
+</svg>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts
index eb11668..59561a4 100644
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/vue-admin-wonderful-next/src/store/index.ts
@@ -20,7 +20,8 @@ export interface RootStateTypes {
         isUniqueOpened: boolean,
         isFixedHeader: boolean,
         isCollapse1: boolean,
-        menuWidth: number,
+        menuWidth1: number,
+        isShowLogo: boolean
     }
 }
 
diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss
index a495303..9e31d23 100644
--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/vue-admin-wonderful-next/src/theme/app.scss
@@ -34,6 +34,8 @@ body,
     height: inherit;
     position: relative;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
   }
   .el-header {
     box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
@@ -51,7 +53,7 @@ body,
   .el-scrollbar {
     width: 100%;
   }
-  .layout-aside-width240 {
+  .layout-aside-width-default {
     width: 240px !important;
     transition: width 0.3s ease;
   }
@@ -85,6 +87,15 @@ body,
   }
 }
 
+/* flex 弹性布局
+------------------------------- */
+.flex {
+  display: flex;
+}
+.flex-auto {
+  flex: 1;
+}
+
 /* 宽高 100%
 ------------------------------- */
 .w100 {
diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss
index 03c816c..59c98a6 100644
--- a/vue-admin-wonderful-next/src/theme/common/transition.scss
+++ b/vue-admin-wonderful-next/src/theme/common/transition.scss
@@ -35,3 +35,17 @@
   opacity: 0;
   transform: translateX(20px);
 }
+
+/* logo 过渡动画
+------------------------------- */
+@keyframes logoAnimation {
+  0% {
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts
index b97981c..11b9cdd 100644
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts
@@ -17,5 +17,6 @@ export default {
     isUniqueOpened: false,
     isFixedHeader: false,
     isCollapse1: false,
-    menuWidth: 240,
+    menuWidth1: 200,
+    isShowLogo: false
 }
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/component/aside.vue b/vue-admin-wonderful-next/src/views/layout/component/aside.vue
index 6153db5..809327e 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/aside.vue
@@ -1,19 +1,22 @@
 <template>
-  <el-aside :class="isCollapse ? 'layout-aside-width64' : 'layout-aside-width240'">
-    <el-scrollbar>
+  <el-aside :class="getThemeConfig.isCollapse ? 'layout-aside-width64' : 'layout-aside-width-default'">
+    <Logo v-if="getThemeConfig.isShowLogo" />
+    <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
       <Vertical :menuList="menuList" />
     </el-scrollbar>
   </el-aside>
 </template>
 
 <script lang="ts">
+import Logo from "/@/views/layout/logo/index.vue";
 import Vertical from "/@/views/layout/navMenu/vertical.vue";
-import { toRefs, reactive, computed } from "vue";
+import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue";
 import { useStore } from "/@/store/index.ts";
 export default {
   name: "layoutAside",
-  components: { Vertical },
+  components: { Logo, Vertical },
   setup() {
+    const { proxy } = getCurrentInstance();
     const store = useStore();
     const state = reactive({
       menuList: [
@@ -64,11 +67,14 @@ export default {
         },
       ],
     });
-    const isCollapse = computed(() => {
-      return store.state.themeConfig.isCollapse;
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    watch(store.state.themeConfig, (val) => {
+      proxy.$refs.layoutAsideScrollbarRef.update();
     });
     return {
-      isCollapse,
+      getThemeConfig,
       ...toRefs(state),
     };
   },
diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue
index 151d24c..746d2a1 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@@ -1,6 +1,5 @@
 <template>
   <el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'">
-    <!-- <el-main> -->
     <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef">
       <router-view v-slot="{ Component }">
         <transition :name="transitionName" mode="out-in">
diff --git a/vue-admin-wonderful-next/src/views/layout/logo/index.vue b/vue-admin-wonderful-next/src/views/layout/logo/index.vue
index 8130e47..e1a9789 100644
--- a/vue-admin-wonderful-next/src/views/layout/logo/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/logo/index.vue
@@ -1,9 +1,46 @@
 <template>
-  layoutLogo
+  <div class="layout-logo" v-if="!getThemeConfig.isCollapse">vue-admin-wonderful</div>
+  <div class="layout-logo-size" v-else>
+    <img src="/@/assets/logo-docs-mini.svg" class="layout-logo-size-img" />
+  </div>
 </template>
 
 <script lang="ts">
+import { computed } from "vue";
+import { useStore } from "/@/store/index.ts";
 export default {
   name: "layoutLogo",
+  setup() {
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    return {
+      getThemeConfig,
+    };
+  },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+.layout-logo {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
+  color: var(--color-primary);
+  font-size: 16px;
+  animation: logoAnimation 0.3s ease-in-out;
+}
+.layout-logo-size {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  animation: logoAnimation 0.3s ease-in-out;
+  &-img {
+    width: 30px;
+    margin: auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
index 6028d24..322183b 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
@@ -115,18 +115,10 @@
             <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15">
-          <div class="layout-breadcrumb-seting-bar-flex-label">菜单展开宽度</div>
-          <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
-              size="mini" style="width:90px;">
-            </el-input-number>
-          </div>
-        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt11">
           <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
+            <el-input-number v-model="getThemeConfig.menuWidth1" controls-position="right" :min="1" :max="999"
               size="mini" style="width:90px;">
             </el-input-number>
           </div>
@@ -137,7 +129,7 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
+            <el-switch v-model="getThemeConfig.isShowLogo" @change="onsetThemeConfigChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -179,7 +171,7 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input v-model="getThemeConfig.menuWidth" size="mini" style="width:90px;"></el-input>
+            <el-input v-model="getThemeConfig.menuWidth1" size="mini" style="width:90px;"></el-input>
           </div>
         </div>
 
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
index 9389aa6..aaa6643 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="layout-navbars-breadcrumb-user">
-    <i class="el-icon-search layout-navbars-breadcrumb-user-icon" title="菜单搜索"></i>
-    <i class="el-icon-setting layout-navbars-breadcrumb-user-icon" title="布局配置" @click="onLayoutSetingClick"></i>
-    <i class="el-icon-bell layout-navbars-breadcrumb-user-icon" title="消息"></i>
-    <i class="icon-fullscreen iconfont layout-navbars-breadcrumb-user-icon mr10" title="开全屏"></i>
+    <div class="layout-navbars-breadcrumb-user-icon">
+      <i class="el-icon-search" title="菜单搜索"></i>
+    </div>
+    <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
+      <i class="el-icon-setting" title="布局配置"></i>
+    </div>
+    <div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
+    <div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
     <el-dropdown :show-timeout="70" :hide-timeout="50">
       <span class="layout-navbars-breadcrumb-user-link">
         <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
@@ -59,15 +63,17 @@ export default {
     }
   }
   &-icon {
-    display: inline-block;
     padding: 0 10px;
     cursor: pointer;
-    transition: all 0.3s;
     color: var(--bg-topBarColor);
     height: 50px;
     line-height: 50px;
     &:hover {
       background: rgba(0, 0, 0, 0.04);
+      i {
+        display: inline-block;
+        animation: logoAnimation 0.3s ease-in-out;
+      }
     }
   }
   ::v-deep(.el-dropdown) {