From 5a57e375787ede155dbbc2c475c75761aa77f1d1 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Wed, 13 Jan 2021 17:32:59 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.01.13:=E6=96=B0=E5=A2=9E=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=85=8D=E7=BD=AE=E5=88=86=E7=B1=BB=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E5=88=87=E6=8D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-admin-wonderful-next/src/store/index.ts   |  1 +
 .../src/utils/themeConfig.ts                  |  1 +
 .../views/layout/component/columnsAside.vue   | 32 ++++++++++++++++---
 .../layout/navBars/breadcrumb/setings.vue     | 11 ++++++-
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts
index 3aba339..b8fc4af 100644
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/vue-admin-wonderful-next/src/store/index.ts
@@ -37,6 +37,7 @@ export interface RootStateTypes {
         wartermarkText: string,
         tagsStyle: string,
         animation: string,
+        columnsAsideStyle: string,
         layout: string
     }
 }
diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts
index 7d62a57..8d02f4b 100644
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts
@@ -34,5 +34,6 @@ export default {
     wartermarkText: 'small@小柒',
     tagsStyle: 'tagsStyleOne',
     animation: 'slideRight',
+    columnsAsideStyle: 'columnsRound',
     layout: 'defaults'
 }
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
index f74b9a1..0bc6b2d 100644
--- a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
@@ -3,7 +3,7 @@
     <el-scrollbar>
       <ul>
         <li v-for="(v,k) in columnsAsideList" :key="k" @click="onColumnsAsideDown(v,k)"
-          :ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active': liIndex === k}">
+          :ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active':liIndex === k} ">
           <div class="layout-columns-aside-li-box">
             <template v-if="!v.meta.isLink">
               <i :class="v.meta.icon"></i>
@@ -21,19 +21,21 @@
             </template>
           </div>
         </li>
-        <div class="layout-columns-aside-active" ref="columnsAsideActiveRef"></div>
+        <div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
       </ul>
     </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, ref } from "vue";
+import { reactive, toRefs, ref, computed } from "vue";
+import { useStore } from "/@/store/index.ts";
 export default {
   name: "layoutColumnsAside",
   setup() {
     const columnsAsideOffsetTopRefs = ref([]);
     const columnsAsideActiveRef = ref();
+    const store = useStore();
     const state = reactive({
       columnsAsideList: [
         {
@@ -67,18 +69,31 @@ export default {
         },
       ],
       liIndex: 0,
+      difference: 0,
+    });
+    // 设置高亮样式
+    const setColumnsAsideStyle = computed(() => {
+      let { columnsAsideStyle } = store.state.themeConfig;
+      columnsAsideStyle === "columnsRound"
+        ? (state.difference = 3)
+        : (state.difference = 0);
+      if (columnsAsideStyle === "columnsRound")
+        return "layout-columns-round-active";
+      else if (columnsAsideStyle === "columnsCard")
+        return "layout-columns-card-active";
     });
     // 设置高亮动态位置
     const onColumnsAsideDown = (v: Object, k: number) => {
       state.liIndex = k;
       columnsAsideActiveRef.value.style.top = `${
-        columnsAsideOffsetTopRefs.value[k].offsetTop + 3
+        columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference
       }px`;
     };
     return {
       columnsAsideOffsetTopRefs,
       columnsAsideActiveRef,
       onColumnsAsideDown,
+      setColumnsAsideStyle,
       ...toRefs(state),
     };
   },
@@ -113,7 +128,7 @@ export default {
       color: #ffffff;
       transition: 0.3s ease-in-out;
     }
-    .layout-columns-aside-active {
+    .layout-columns-round-active {
       background: var(--color-primary);
       color: #ffffff;
       position: absolute;
@@ -126,6 +141,13 @@ export default {
       transition: 0.3s ease-in-out;
       border-radius: 5px;
     }
+    .layout-columns-card-active {
+      @extend .layout-columns-round-active;
+      top: 0;
+      height: 50px;
+      width: 100%;
+      border-radius: 0;
+    }
   }
 }
 </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 d20c0f4..46a69e8 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
@@ -218,7 +218,7 @@
             </el-select>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
+        <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-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
@@ -228,6 +228,15 @@
             </el-select>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
+          <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;">
+              <el-option label="圆角" value="columnsRound"></el-option>
+              <el-option label="卡片" value="columnsCard"></el-option>
+            </el-select>
+          </div>
+        </div>
 
         <!-- 布局切换 -->
         <el-divider content-position="left">布局切换</el-divider>