'admin-21.01.05:编写布局配置相对应功能、添加过渡动画等'

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",

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,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"/>
+	</defs>
+	<style>
+		tspan { white-space:pre }
+	</style>
+	<use id="图层 1" href="#img1" x="3" y="3" />
+</svg>

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
     }
 }
 

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 {

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);
+  }
+}

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
 }

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-aside :class="getThemeConfig.isCollapse ? 'layout-aside-width64' : 'layout-aside-width-default'">
-    <el-scrollbar>
+    <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(() => {
+    const getThemeConfig = computed(() => {
-      return store.state.themeConfig.isCollapse;
+      return store.state.themeConfig;
+    });
+    watch(store.state.themeConfig, (val) => {
+      proxy.$refs.layoutAsideScrollbarRef.update();
     });
     return {
-      isCollapse,
+      getThemeConfig,
       ...toRefs(state),
     };
   },

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">

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>
+
+<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>

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>
 

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>
+    <div class="layout-navbars-breadcrumb-user-icon">
-    <i class="el-icon-setting layout-navbars-breadcrumb-user-icon" title="布局配置" @click="onLayoutSetingClick"></i>
+      <i class="el-icon-search" title="菜单搜索"></i>
-    <i class="el-icon-bell layout-navbars-breadcrumb-user-icon" title="消息"></i>
+    </div>
-    <i class="icon-fullscreen iconfont layout-navbars-breadcrumb-user-icon mr10" title="开全屏"></i>
+    <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) {