From 48c3bd88c1520abd09b56d60dd122fc904845615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 1 Jan 2022 16:05:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Sidebar):=20setup=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=E7=B3=96=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue | 44 ++++++++-----------------
 1 file changed, 13 insertions(+), 31 deletions(-)

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 59c826ce..8751aaef 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse"/>
-
-
     <!-- :background-color="variables.menuBg"
           :text-color="variables.menuText"
           :active-text-color="variables.menuActiveText"-->
@@ -25,11 +23,10 @@
         />
       </el-menu>
     </el-scrollbar>
-
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {computed, defineComponent} from "vue";
 import SidebarItem from './SidebarItem.vue'
 import Logo from './Logo.vue'
@@ -39,34 +36,19 @@ import { useAppStoreHook } from "@/store/modules/app";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import {useRoute} from 'vue-router'
 
-export default defineComponent({
-  components: {
-    SidebarItem,
-    Logo
-  },
-  setup() {
-    const route = useRoute()
-    const sidebar = computed(() => useAppStoreHook().sidebar)
-    const routes = computed(() => usePermissionStoreHook().routes)
-    const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
-    const activeMenu = computed(() => {
-      const {meta, path} = route
-      // if set path, the sidebar will highlight the path you set
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    })
-    const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
+const route =useRoute()
 
-    return {
-      sidebar,
-      routes,
-      showLogo,
-      variables,
-      activeMenu,
-      isCollapse,
-    }
+const routes =computed(() => usePermissionStoreHook().routes)
+const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
+const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
+
+
+const activeMenu = computed(() => {
+  const {meta, path} = route
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu
   }
+  return path
 })
 </script>