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>

src/config/app.ts

@@ -39,7 +39,7 @@ export const appModules: AppState = {
   showScreenfull: true, // 是否全屏按钮
   showUserInfo: true, // 是否显示用户头像
   title: 'butterfly-admin', // 标题
-  logoTitle: 'butterfly-admin', // logo标题
+  logoTitle: 'ButterflyAdmin', // logo标题
   userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
   greyMode: false, // 是否开始灰色模式，用于特殊悼念日
   showBackTop: true, // 是否显示回到顶部

src/layout/Layout.vue

@@ -9,6 +9,8 @@ import { UserInfo } from '@/components/UserInfo'
 import { Screenfull } from '@/components/Screenfull'
 import { Breadcrumb } from '@/components/Breadcrumb'
 import { TagsView } from '@/components/TagsView'
+import { Backtop } from '@/components/Backtop'
+import { Setting } from '@/components/Setting'
 import AppView from './components/AppView.vue'
 
 const appStore = useAppStore()
@@ -70,6 +72,10 @@ export default defineComponent({
           </div>
           <AppView></AppView>
         </div>
+
+        <Backtop></Backtop>
+
+        <Setting></Setting>
       </section>
     )
   }

src/layout/components/AppView.vue

@@ -10,6 +10,15 @@ const getCaches = computed((): string[] => {
 </script>
 
 <template>
+  <el-scrollbar
+    :class="[
+      'v-content',
+      {
+        '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]': true
+      }
+    ]"
+  >
+    <section class="p-[var(--app-content-padding)]">
       <router-view>
         <template #default="{ Component, route }">
           <keep-alive :include="getCaches">
@@ -17,4 +26,6 @@ const getCaches = computed((): string[] => {
           </keep-alive>
         </template>
       </router-view>
+    </section>
+  </el-scrollbar>
 </template>

src/styles/var.css

@@ -19,6 +19,13 @@
   --left-menu-collapse-bg-active-color: var(--el-color-primary);
   /* left menu end */
 
+  /* logo start */
+  --logo-height: 50px;
+
+  --logo-title-text-color: #fff;
+  /* logo end */
+
+  /* header start */
   --top-tool-height: 40px;
 
   --top-tool-p-x: 0;
@@ -26,6 +33,9 @@
   --top-tool-border-color: #eee;
 
   --tags-view-height: 40px;
+  /* header start */
+
+  --app-content-padding: 20px;
 
   --transition-time-02: 0.2s;
 }