feat(Logo): Add Logo component

src/components/Backtop/index.ts

@@ -0,0 +1,3 @@
+import Backtop from './src/Backtop.vue'
+
+export { Backtop }

src/components/Backtop/src/Backtop.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ElBacktop } from 'element-plus'
+</script>
+
+<template>
+  <ElBacktop target=".v-content .el-scrollbar__wrap" />
+</template>

src/components/Logo/index.ts

@@ -0,0 +1,3 @@
+import Logo from './src/Logo.vue'
+
+export { Logo }

src/components/Logo/src/Logo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const show = ref(true)
+
+const title = computed(() => appStore.getLogoTitle)
+
+const layout = computed(() => appStore.getLayout)
+
+const collapse = computed(() => appStore.getCollapse)
+
+watch(
+  () => collapse.value,
+  (collapse: boolean) => {
+    if (layout.value !== 'classic') {
+      show.value = true
+    } else {
+      if (!collapse) {
+        setTimeout(() => {
+          show.value = !collapse
+        }, 400)
+      } else {
+        show.value = !collapse
+      }
+    }
+  }
+)
+</script>
+
+<template>
+  <router-link
+    :class="[
+      'v-logo',
+      {
+        'v-logo__Top': layout !== 'classic'
+      },
+      'flex h-[var(--logo-height)] items-center cursor-pointer pl-8px'
+    ]"
+    to="/"
+  >
+    <img
+      src="@/assets/imgs/logo.png"
+      class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+    />
+    <div v-if="show" class="text-[var(--logo-title-text-color)] ml-10px text-16px font-700">{{
+      title
+    }}</div>
+  </router-link>
+</template>

src/components/Menu/src/Menu.vue

@@ -7,6 +7,7 @@ import type { LayoutType } from '@/config/app'
 import { useRenderMenuItem } from './components/useRenderMenuItem'
 import { useRouter } from 'vue-router'
 import { isUrl } from '@/utils/is'
+import { Logo } from '@/components/Logo'
 
 export default defineComponent({
   name: 'Menu',
@@ -53,14 +54,15 @@ export default defineComponent({
       <div
         class={[
           'v-menu',
-          'h-[100%] overflow-hidden z-100',
+          'h-[100%] overflow-hidden z-100 flex-col',
           appStore.getCollapse
             ? 'w-[var(--left-menu-min-width)]'
             : 'w-[var(--left-menu-max-width)]',
           'bg-[var(--left-menu-bg-color)]'
         ]}
       >
-        <ElScrollbar>
+        <Logo></Logo>
+        <ElScrollbar class={[{ '!h-[calc(100%-var(--top-tool-height))]': true }]}>
           <ElMenu
             defaultActive={unref(activeMenu)}
             mode={unref(menuMode)}

src/components/Setting/index.ts

@@ -0,0 +1,3 @@
+import Setting from './src/Setting.vue'
+
+export { Setting }

src/components/Setting/src/Setting.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ElDrawer } from 'element-plus'
+import { ref } from 'vue'
+
+const drawer = ref(false)
+</script>
+
+<template>
+  <div
+    class="v-setting fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
+    @click="drawer = true"
+  >
+    <Icon icon="ant-design:setting-outlined" color="#fff" />
+  </div>
+
+  <ElDrawer v-model="drawer" :with-header="false" direction="rtl" size="300px">ddd</ElDrawer>
+</template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-setting';
+
+.@{prefix-cls} {
+  border-radius: 6px 0 0 6px;
+}
+</style>

src/components/TagsView/src/TagsView.vue

@@ -199,7 +199,7 @@ watch(
               }
             ]"
           >
-            <router-link :to="{ ...item }" custom #default="{ navigate }">
+            <router-link :to="{ ...item }" custom v-slot="{ navigate }">
               <div @click="navigate" class="h-full flex justify-center items-center">
                 {{ t(item?.meta?.title as string) }}
                 <Icon
@@ -277,7 +277,7 @@ watch(
       <span
         class="v-tags-view__tool w-[40px] h-[40px] text-center leading-[40px] cursor-pointer block"
       >
-        <Icon icon="ant-design:down-outlined" color="#333" />
+        <Icon icon="ant-design:setting-outlined" color="#333" />
       </span>
     </ContextMenu>
   </div>