feat: 将账号信息按钮封装为 AccountButton 组件，并优化工具栏和导航栏的显示逻辑

Author: hooray

src/slots/ToolbarEnd/index.vue src/components/AccountButton/index.vuesrc/slots/ToolbarEnd/index.vue renamed to src/components/AccountButton/index.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
+import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import Profile from './profile.vue'
 
+const props = withDefaults(defineProps<{
+  onlyAvatar?: boolean
+  dropdownAlign?: 'start' | 'center' | 'end'
+  dropdownSide?: 'left' | 'right' | 'top' | 'bottom'
+  buttonVariant?: 'secondary' | 'ghost'
+  class?: HTMLAttributes['class']
+}>(), {
+  dropdownAlign: 'end',
+  dropdownSide: 'right',
+  buttonVariant: 'ghost',
+})
+
 const router = useRouter()
 
 const settingsStore = useSettingsStore()
@@ -14,7 +28,7 @@ const isProfileShow = ref(false)
 
 <template>
   <FaDropdown
-    align="end" :items="[
+    :align="dropdownAlign" :side="dropdownSide" :items="[
       [
         { label: settingsStore.settings.home.title, icon: 'i-mdi:home', handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
         { label: '个人设置', icon: 'i-mdi:account', handle: () => isProfileShow = true },
@@ -39,20 +53,26 @@ const isProfileShow = ref(false)
               {{ userStore.account }}
             </div>
             <div class="text-xs text-secondary-foreground/50 font-normal">
-              这里可以显示邮箱
+              [ 这里可以显示邮箱 ]
             </div>
           </div>
         </div>
       </div>
     </template>
-    <FaButton variant="ghost" class="h-9 flex-center gap-1 px-2">
-      <FaAvatar :src="userStore.avatar" class="size-6">
-        <FaIcon name="i-carbon:user-avatar-filled-alt" class="size-6 text-secondary-foreground/50" />
+    <FaButton
+      :variant="buttonVariant" :class="cn('flex-center gap-1 p-2', {
+        'size-8 p-1': onlyAvatar,
+      }, props.class)"
+    >
+      <FaAvatar :src="userStore.avatar" :class="cn('size-6', { 'size-full': onlyAvatar })">
+        <FaIcon name="i-carbon:user-avatar-filled" class="size-6 text-secondary-foreground/50" />
       </FaAvatar>
-      <template v-if="settingsStore.mode === 'pc'">
-        {{ userStore.account }}
-        <FaIcon name="i-ep:caret-bottom" />
-      </template>
+      <div v-if="settingsStore.mode === 'pc' && !onlyAvatar" class="min-w-0 flex-center-between flex-1 gap-2">
+        <div class="flex-1 truncate text-start">
+          {{ userStore.account }}
+        </div>
+        <FaIcon name="i-material-symbols:expand-all-rounded" />
+      </div>
     </FaButton>
   </FaDropdown>
   <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px min-w-600px overflow-hidden" content-class="min-h-full p-0 flex">

src/slots/ToolbarEnd/profile.vue src/components/AccountButton/profile.vuesrc/slots/ToolbarEnd/profile.vue renamed to src/components/AccountButton/profile.vue

@@ -3,7 +3,6 @@ import { useSlots } from '@/slots'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
-import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'
 
 defineOptions({
   name: 'LayoutHeader',
@@ -18,8 +17,8 @@ const { switchTo } = useMenu()
 <template>
   <Transition name="header">
     <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
-      <component :is="useSlots('header-start')" />
       <div class="header-container">
+        <component :is="useSlots('header-start')" />
         <Logo class="title" />
         <component :is="useSlots('header-after-logo')" />
         <FaScrollArea :scrollbar="false" mask horizontal gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
@@ -47,9 +46,11 @@ const { switchTo } = useMenu()
             </template>
           </div>
         </FaScrollArea>
-        <ToolbarRightSide />
+        <div class="flex-center">
+          <AccountButton only-avatar dropdown-side="bottom" class="size-12 p-2" />
+        </div>
+        <component :is="useSlots('header-end')" />
       </div>
-      <component :is="useSlots('header-end')" />
     </header>
   </Transition>
 </template>
@@ -78,7 +79,7 @@ header {
     justify-content: space-between;
     width: 100%;
     height: 100%;
-    padding: 0 12px 0 20px;
+    padding: 0 12px;
     margin: 0 auto;
 
     :deep(a.title) {

src/layouts/components/Header/index.vue

@@ -65,6 +65,9 @@ onUnmounted(() => {
           </template>
         </div>
       </FaScrollArea>
+      <div class="flex-center px-4 py-3">
+        <AccountButton only-avatar :button-variant="settingsStore.settings.menu.mode === 'side' ? 'secondary' : 'ghost'" class="size-12 p-2" />
+      </div>
       <component :is="useSlots('main-sidebar-bottom')" />
     </div>
   </Transition>

src/layouts/components/MainSidebar/index.vue

@@ -74,6 +74,9 @@ watch(() => menuStore.actived, (val, oldVal) => {
           <FaIcon name="toolbar-collapse" class="size-4" />
         </FaButton>
       </div>
+      <div v-if="settingsStore.settings.menu.mode === 'single'" class="flex-center px-4 pb-3">
+        <AccountButton :only-avatar="settingsStore.settings.menu.subMenuCollapse" dropdown-align="center" :dropdown-side="settingsStore.settings.menu.subMenuCollapse ? 'right' : 'top'" button-variant="secondary" :class="{ 'w-full': !settingsStore.settings.menu.subMenuCollapse }" />
+      </div>
       <component :is="useSlots('sub-sidebar-bottom')" />
     </div>
   </Transition>

src/layouts/components/SubSidebar/index.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import LeftSide from './leftSide.vue'
 import RightSide from './rightSide.vue'
 
 defineOptions({
   name: 'Toolbar',
 })
-
-const settingsStore = useSettingsStore()
 </script>
 
 <template>
   <div class="toolbar-container flex items-center justify-between">
     <div class="left-side h-full flex items-center of-hidden pe-16 ps-2">
       <LeftSide />
     </div>
-    <div v-if="['side', 'single'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile'" class="h-full flex flex-shrink-0 items-center justify-end px-2">
+    <div class="h-full flex flex-shrink-0 items-center justify-end px-2">
       <RightSide />
     </div>
   </div>

src/layouts/components/Topbar/Toolbar/index.vue

@@ -10,11 +10,12 @@ defineOptions({
 const settingsStore = useSettingsStore()
 
 const enableToolbar = computed(() => {
-  return !(
-    settingsStore.settings.menu.mode === 'head' && (
-      !settingsStore.settings.toolbar.breadcrumb || settingsStore.settings.app.routeBaseOn === 'filesystem'
-    )
-  )
+  return Object.keys(settingsStore.settings.toolbar).some((key) => {
+    if (settingsStore.settings.app.routeBaseOn === 'filesystem' && key === 'breadcrumb') {
+      return false
+    }
+    return settingsStore.settings.toolbar[key as keyof typeof settingsStore.settings.toolbar]
+  })
 })
 
 const scrollTop = ref(0)

src/layouts/components/Topbar/index.vue

@@ -58,7 +58,12 @@ const topbarActualHeight = computed(() => {
   if (settingsStore.settings.tabbar.enable) {
     actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-tabbar-height'))
   }
-  if (!['head'].includes(settingsStore.settings.menu.mode) || settingsStore.settings.toolbar.breadcrumb) {
+  if (Object.keys(settingsStore.settings.toolbar).some((key) => {
+    if (settingsStore.settings.app.routeBaseOn === 'filesystem' && key === 'breadcrumb') {
+      return false
+    }
+    return settingsStore.settings.toolbar[key as keyof typeof settingsStore.settings.toolbar]
+  })) {
     actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-toolbar-height'))
   }
   return actualHeight

src/layouts/index.vue

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AccountButton: typeof import('./../components/AccountButton/index.vue')['default']
     FaAuth: typeof import('./../ui/components/FaAuth/index.vue')['default']
     FaAvatar: typeof import('./../ui/components/FaAvatar/index.vue')['default']
     FaBackToTop: typeof import('./../ui/components/FaBackToTop/index.vue')['default']