feat: v5.0

2026-10-07 17:08:27 +08:00 · 2025-01-16 21:48:41 +08:00
parent 40b7f93d97
commit cfd23d54da
68 changed files with 1422 additions and 704 deletions
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
 import { ua } from '@/utils/ua'
-import hotkeys from 'hotkeys-js'
 import Provider from './ui/provider/index.vue'
-import eventBus from './utils/eventBus'

 const route = useRoute()

@@ -40,9 +38,6 @@ onMounted(() => {
  window.addEventListener('resize', () => {
    settingsStore.setMode(document.documentElement.clientWidth)
  })
-  hotkeys('alt+i', () => {
-    eventBus.emit('global-system-info-toggle')
-  })
 })
 </script>

@@ -17,7 +17,7 @@ export default {
  // 修改密码
  passwordEdit: (data: {
    password: string
-    newpassword: string
+    newPassword: string
  }) => api.post('user/password/edit', data, {
    baseURL: '/mock/',
  }),
@@ -21,7 +21,7 @@
 /* 明暗模式 CSS 变量 */
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
-  --g-box-shadow-color: rgb(0 0 0 / 12%);
+  color-scheme: light;

  &::view-transition-old(root),
  &::view-transition-new(root) {
@@ -38,7 +38,7 @@
  }

  &.dark {
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
+    color-scheme: dark;

    &::view-transition-old(root) {
      z-index: 9999;
@@ -50,29 +50,9 @@
  }
 }

-body:not([data-os="macOS"]) {
-  ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--primary) / 30%);
-    background-clip: padding-box;
-    border: 3px solid transparent;
-    border-radius: 6px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--primary) / 50%);
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-
 * {
+  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-width: thin;
  border-color: hsl(var(--border));
 }

@@ -88,10 +68,6 @@ body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-tap-highlight-color: transparent;
-
-  &.overflow-hidden {
-    overflow: hidden;
-  }
 }

 #app {
@@ -102,14 +78,3 @@ body {
 textarea {
  font-family: inherit;
 }
-
-/* Overrides OverlayScrollbars */
-[data-overlayscrollbars-contents] {
-  overscroll-behavior: contain;
-}
-
-.os-scrollbar {
-  --os-handle-bg: hsl(var(--primary) / 30%);
-  --os-handle-bg-hover: hsl(var(--primary) / 40%);
-  --os-handle-bg-active: hsl(var(--primary) / 50%);
-}
@@ -5,7 +5,7 @@
    position: fixed;
    top: 0;
    left: 0;
-    z-index: 2000;
+    z-index: 3000;
    width: 100%;
    height: 2px;
    background: hsl(var(--primary));
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { toast } from 'vue-sonner'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'EditPasswordForm',
+})
+
+const userStore = useUserStore()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      password: z.string().min(1, '请输入原密码'),
+      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+      checkPassword: z.string().min(1, '请确认新密码'),
+    }).refine(data => data.newPassword === data.checkPassword, {
+      message: '两次输入的密码不一致',
+      path: ['checkPassword'],
+    }),
+  ),
+  initialValues: {
+    password: '',
+    newPassword: '',
+    checkPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  userStore.editPassword(values).then(async () => {
+    toast.success('模拟修改成功，请重新登录')
+    userStore.logout()
+  }).finally(() => {
+    loading.value = false
+  })
+})
+</script>
+
+<template>
+  <div class="w-full flex-col-stretch-center">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+        修改密码
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        请输入原密码、新密码和确认密码
+      </p>
+    </div>
+    <form @submit="onSubmit">
+      <FormField v-slot="{ componentField, errors }" name="password">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入原密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="newPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="checkPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请确认新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
+        保存
+      </FaButton>
+    </form>
+  </div>
+</template>
@@ -49,7 +49,7 @@ function handleCopy() {
 </script>

 <template>
-  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块">
+  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported">
    <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
      应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
    </div>
@@ -350,7 +350,7 @@ function handleCopy() {
        <FaSwitch v-model="settingsStore.settings.app.enableDynamicTitle" />
      </div>
    </div>
-    <template v-if="isSupported" #footer>
+    <template #footer>
      <FaButton class="w-full" @click="handleCopy">
        <FaIcon name="i-ep:document-copy" />
        复制配置
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSlots } from '@/slots'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
@@ -17,9 +18,11 @@ 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">
        <Logo class="title" />
-        <FaMaskScrollContainer scroll="x" gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
+        <component :is="useSlots('header-after-logo')" />
+        <FaScrollArea horizontal :scrollbar="false" mask gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
          <!-- 顶部模式 -->
          <div class="menu h-full flex of-hidden transition-all">
            <template v-for="(item, index) in menuStore.allMenus" :key="index">
@@ -43,9 +46,10 @@ const { switchTo } = useMenu()
              </div>
            </template>
          </div>
-        </FaMaskScrollContainer>
+        </FaScrollArea>
        <ToolbarRightSide />
      </div>
+      <component :is="useSlots('header-end')" />
    </header>
  </Transition>
 </template>
@@ -54,14 +58,13 @@ const { switchTo } = useMenu()
 header {
  position: fixed;
  top: 0;
-  right: 0;
+  right: var(--scrollbar-width, 0);
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
-  width: 100%;
+  width: calc(100% - var(--scrollbar-width, 0px));
  height: var(--g-header-height);
-  padding: 0 20px;
  margin: 0 auto;
  color: var(--g-header-color);
  background-color: var(--g-header-bg);
@@ -75,6 +78,7 @@ header {
    justify-content: space-between;
    width: 100%;
    height: 100%;
+    padding: 0 12px 0 20px;
    margin: 0 auto;

    :deep(a.title) {
@@ -82,7 +86,7 @@ header {
      flex: 0;
      width: inherit;
      height: inherit;
-      padding: inherit;
+      padding: 0;
      background-color: inherit;

      .logo {
@@ -28,15 +28,15 @@ onMounted(() => {
          <ul class="list-none ps-2 pt-2 text-sm">
            <li class="flex-baseline gap-2 py-1">
              <div class="flex-shrink-0 space-x-1">
-                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }}</FaKbd>
                <FaKbd>I</FaKbd>
              </div>
              查看系统信息
            </li>
            <li v-if="settingsStore.settings.toolbar.navSearch && settingsStore.settings.navSearch.enableHotkeys" class="flex-baseline gap-2 py-1">
              <div class="flex-shrink-0 space-x-1">
-                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
-                <FaKbd>S</FaKbd>
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }}</FaKbd>
+                <FaKbd>K</FaKbd>
              </div>
              唤起导航搜索
            </li>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSlots } from '@/slots'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
@@ -16,8 +17,10 @@ const { switchTo } = useMenu()
 <template>
  <Transition name="main-sidebar">
    <div v-if="settingsStore.settings.menu.mode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.mode !== 'single')" class="main-sidebar-container">
+      <component :is="useSlots('main-sidebar-top')" />
      <Logo :show-title="false" class="sidebar-logo" />
-      <FaMaskScrollContainer gradient-color="var(--g-main-sidebar-bg)" class="menu">
+      <component :is="useSlots('main-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu">
        <!-- 侧边栏模式（含主导航） -->
        <div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
          <template v-for="(item, index) in menuStore.allMenus" :key="index">
@@ -41,7 +44,8 @@ const { switchTo } = useMenu()
            </div>
          </template>
        </div>
-      </FaMaskScrollContainer>
+      </FaScrollArea>
+      <component :is="useSlots('main-sidebar-bottom')" />
    </div>
  </Transition>
 </template>
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
 import type { SubMenuProps } from './types'
 import { useTimeoutFn } from '@vueuse/core'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import Item from './item.vue'
 import { rootMenuInjectionKey } from './types'

@@ -19,7 +17,7 @@ const props = withDefaults(

 const index = props.menu.path ?? JSON.stringify(props.menu)
 const itemRef = useTemplateRef('itemRef')
-const subMenuRef = useTemplateRef<OverlayScrollbarsComponentRef>('subMenuRef')
+const subMenuRef = useTemplateRef('subMenuRef')
 const rootMenu = inject(rootMenuInjectionKey)!

 const opened = computed(() => {
@@ -141,7 +139,8 @@ function handleMouseenter() {
      rootMenu.openMenu(index, props.uniqueKey)
      nextTick(() => {
        const el = itemRef.value?.ref
-        if (!el) {
+        const subMenuEl = subMenuRef.value?.$el
+        if (!el || !subMenuEl) {
          return
        }
        let top = 0
@@ -149,22 +148,22 @@ function handleMouseenter() {
        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
          top = el.getBoundingClientRect().top + el.scrollTop
          left = el.getBoundingClientRect().left + el.getBoundingClientRect().width
-          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
-            top = window.innerHeight - subMenuRef.value!.getElement()!.offsetHeight
+          if (top + subMenuEl.offsetHeight > window.innerHeight) {
+            top = window.innerHeight - subMenuEl.offsetHeight
          }
        }
        else {
          top = el.getBoundingClientRect().top + el.getBoundingClientRect().height
          left = el.getBoundingClientRect().left
-          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
-            subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`
+          if (top + subMenuEl.offsetHeight > window.innerHeight) {
+            subMenuEl.style.height = `${window.innerHeight - top}px`
          }
        }
-        if (left + subMenuRef.value!.getElement()!.offsetWidth > document.documentElement.clientWidth) {
+        if (left + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
        }
-        subMenuRef.value!.getElement()!.style.top = `${top}px`
-        subMenuRef.value!.getElement()!.style.left = `${left}px`
+        subMenuEl.style.top = `${top}px`
+        subMenuEl.style.insetInlineStart = `${left}px`
      })
    }
    else {
@@ -197,8 +196,8 @@ function handleMouseleave() {
  <Item ref="itemRef" :unique-key="uniqueKey" :item="menu" :level="level" :sub-menu="hasChildren" :expand="opened" @click="handleClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" />
  <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
    <Transition v-bind="transitionClass" v-on="transitionEvent">
-      <OverlayScrollbarsComponent
-        v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu static rounded-lg" :class="{
+      <FaScrollArea
+        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" class="sub-menu static rounded-lg" :class="{
          'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
          'border shadow-xl fixed! z-3000 w-[200px]': rootMenu.isMenuPopup,
          'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
@@ -208,7 +207,7 @@ function handleMouseleave() {
        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
          <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
        </template>
-      </OverlayScrollbarsComponent>
+      </FaScrollArea>
    </Transition>
  </Teleport>
 </template>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSlots } from '@/slots'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
@@ -47,12 +48,14 @@ watch(() => menuStore.actived, (val, oldVal) => {
      'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
    }"
  >
+    <component :is="useSlots('sub-sidebar-top')" />
    <Logo
      v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
        'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',
      }"
    />
-    <FaMaskScrollContainer gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
+    <component :is="useSlots('sub-sidebar-after-logo')" />
+    <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
      <TransitionGroup :name="transitionName">
        <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
          <div v-show="mainIndex === menuStore.actived">
@@ -64,12 +67,13 @@ watch(() => menuStore.actived, (val, oldVal) => {
          </div>
        </template>
      </TransitionGroup>
-    </FaMaskScrollContainer>
+    </FaScrollArea>
    <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
      <FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
        <FaIcon name="toolbar-collapse" :size="16" />
      </FaButton>
    </div>
+    <component :is="useSlots('sub-sidebar-bottom')" />
  </div>
 </template>

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { Tabbar } from '#/global'
+import { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
 import useTabbarStore from '@/store/modules/tabbar'
-import ContextMenu from '@imengyu/vue3-context-menu'
 import { useMagicKeys } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 import { toast } from 'vue-sonner'
-import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'

 defineOptions({
  name: 'Tabbar',
@@ -25,7 +24,7 @@ const keys = useMagicKeys({ reactive: true })

 const activedTabId = computed(() => tabbar.getId())

-const tabsRef = ref()
+const tabsRef = useTemplateRef('tabsRef')
 const tabContainerRef = useTemplateRef('tabContainerRef')
 const tabRef = useTemplateRef<HTMLElement[]>('tabRef')

@@ -34,7 +33,7 @@ watch(() => route, (val) => {
    tabbarStore.add(val).then(() => {
      const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
      if (index !== -1) {
-        tabRef.value && tabsRef.value.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref.clientWidth * 0.4)
+        tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
        tabbarScrollTip()
      }
    })
@@ -44,7 +43,7 @@ watch(() => route, (val) => {
  deep: true,
 })
 function tabbarScrollTip() {
-  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value.ref.clientWidth ?? 0) && localStorage.getItem('tabbarScrollTip') === undefined) {
+  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && localStorage.getItem('tabbarScrollTip') === undefined) {
    localStorage.setItem('tabbarScrollTip', '')
    const tips = toast.info('温馨提示', {
      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
@@ -57,53 +56,40 @@ function tabbarScrollTip() {
    })
  }
 }
-function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
-  event.preventDefault()
-  ContextMenu.showContextMenu({
-    x: event.x,
-    y: event.y,
-    zIndex: 1050,
-    iconFontClass: '',
-    customClass: 'tabbar-contextmenu',
-    items: [
+function contextMenuItems(routeItem: Tabbar.recordRaw) {
+  return [
+    [
      {
        label: '重新加载',
        icon: 'i-ri:refresh-line',
        disabled: routeItem.tabId !== activedTabId.value,
-        onClick: () => mainPage.reload(),
+        handle: () => mainPage.reload(),
      },
      {
        label: '关闭标签页',
        icon: 'i-ri:close-line',
        disabled: tabbarStore.list.length <= 1,
-        divided: true,
-        onClick: () => {
-          tabbar.closeById(routeItem.tabId)
-        },
+        handle: () => tabbar.closeById(routeItem.tabId),
      },
+    ],
+    [
      {
        label: '关闭其他标签页',
        disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeOtherSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeOtherSide(routeItem.tabId),
      },
      {
        label: '关闭左侧标签页',
        disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeLeftSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeLeftSide(routeItem.tabId),
      },
      {
        label: '关闭右侧标签页',
        disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeRightSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeRightSide(routeItem.tabId),
      },
    ],
-  })
+  ]
 }

 onMounted(() => {
@@ -158,85 +144,58 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="tabbar-container">
-    <FaMaskScrollContainer ref="tabsRef" scroll="x" gradient-color="var(--g-tabbar-bg)" class="tabs">
-      <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
-        <div
-          v-for="(element, index) in tabbarStore.list" :key="element.tabId"
-          ref="tabRef" :data-index="index" class="tab" :class="{
-            actived: element.tabId === activedTabId,
-          }" @click="router.push(element.fullPath)" @contextmenu="onTabbarContextmenu($event, element)"
-        >
-          <div class="tab-dividers" />
-          <div class="tab-background" />
-          <FaTooltip :delay="1000" side="bottom">
-            <div class="tab-content">
-              <div :key="element.tabId" class="title">
-                <FaIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
-                {{ typeof element?.title === 'function' ? element.title() : element.title }}
+  <div class="tabbar">
+    <component :is="useSlots('tabbar-start')" />
+    <div class="tabbar-container">
+      <FaScrollArea ref="tabsRef" horizontal :scrollbar="false" mask gradient-color="var(--g-tabbar-bg)" class="tabs">
+        <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
+          <div
+            v-for="(element, index) in tabbarStore.list" :key="element.tabId"
+            ref="tabRef" :data-index="index" class="tab" :class="{
+              actived: element.tabId === activedTabId,
+            }" @click="router.push(element.fullPath)"
+          >
+            <FaContextMenu :items="contextMenuItems(element)">
+              <div class="size-full">
+                <div class="tab-dividers" />
+                <div class="tab-background" />
+                <FaTooltip :delay="1000" side="bottom">
+                  <div class="tab-content">
+                    <div :key="element.tabId" class="title">
+                      <FaIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
+                      {{ typeof element?.title === 'function' ? element.title() : element.title }}
+                    </div>
+                    <div v-if="tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+                      <FaIcon name="i-ri:close-fill" />
+                    </div>
+                    <div v-show="keys.alt && index < 9" class="hotkey-number">
+                      {{ index + 1 }}
+                    </div>
+                  </div>
+                  <template #content>
+                    <div class="text-sm">
+                      {{ typeof element?.title === 'function' ? element.title() : element.title }}
+                    </div>
+                    <div class="text-accent-foreground/50">
+                      {{ element.fullPath }}
+                    </div>
+                  </template>
+                </FaTooltip>
              </div>
-              <div v-if="tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
-                <FaIcon name="i-ri:close-fill" />
-              </div>
-              <div v-show="keys.alt && index < 9" class="hotkey-number">
-                {{ index + 1 }}
-              </div>
-            </div>
-            <template #content>
-              <div class="text-sm">
-                {{ typeof element?.title === 'function' ? element.title() : element.title }}
-              </div>
-              <div class="text-accent-foreground/50">
-                {{ element.fullPath }}
-              </div>
-            </template>
-          </FaTooltip>
-        </div>
-      </TransitionGroup>
-    </FaMaskScrollContainer>
+            </FaContextMenu>
+          </div>
+        </TransitionGroup>
+      </FaScrollArea>
+    </div>
+    <component :is="useSlots('tabbar-end')" />
  </div>
 </template>

-<style>
-.tabbar-contextmenu {
-  --uno: fixed ring-1 ring-border shadow-2xl;
-
-  background-color: hsl(var(--popover));
-
-  .mx-context-menu-items .mx-context-menu-item {
-    --uno: transition-background-color;
-
-    &:not(.disabled):hover {
-      --uno: cursor-pointer bg-accent;
-    }
-
-    span {
-      color: initial;
-    }
-
-    .icon {
-      color: initial;
-    }
-
-    &.disabled span,
-    &.disabled .icon {
-      opacity: 0.25;
-    }
-  }
-
-  .mx-context-menu-item-sperator {
-    background-color: hsl(var(--popover));
-
-    &::after {
-      --uno: bg-border;
-    }
-  }
-}
-</style>
-
 <style scoped>
-.tabbar-container {
+.tabbar {
  position: relative;
+  display: flex;
+  align-items: center;
  height: var(--g-tabbar-height);
  background-color: var(--g-tabbar-bg);
  transition: background-color 0.3s, box-shadow 0.3s;
@@ -245,158 +204,163 @@ onUnmounted(() => {
    box-shadow: 0 1px 0 0 hsl(var(--border)), 0 -1px 0 0 hsl(var(--border));
  }

-  .tabs {
-    position: absolute;
-    inset-inline: 0;
-    margin-inline-end: 50px;
-    white-space: nowrap;
+  .tabbar-container {
+    position: relative;
+    flex: 1;
+    height: 100%;

-    .tab-container {
-      display: inline-block;
+    .tabs {
+      position: absolute;
+      inset-inline: 0;
+      white-space: nowrap;

-      .tab {
-        position: relative;
+      .tab-container {
        display: inline-block;
-        width: 150px;
-        height: var(--g-tabbar-height);
-        font-size: 14px;
-        line-height: calc(var(--g-tabbar-height) - 2px);
-        vertical-align: bottom;
-        pointer-events: none;
-        cursor: pointer;

-        &:not(.actived):hover {
-          z-index: 3;
+        .tab {
+          position: relative;
+          display: inline-block;
+          width: 150px;
+          height: var(--g-tabbar-height);
+          font-size: 14px;
+          line-height: calc(var(--g-tabbar-height) - 2px);
+          vertical-align: bottom;
+          pointer-events: none;
+          cursor: pointer;

-          &::before,
-          &::after {
-            content: none;
-          }
+          &:not(.actived):hover {
+            z-index: 3;

-          & + .tab .tab-dividers::before {
-            opacity: 0;
-          }
+            &::before,
+            &::after {
+              content: none;
+            }

-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-hover-color);
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-hover-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-hover-bg);
            }
          }

-          .tab-background {
-            background-color: var(--g-tabbar-tab-hover-bg);
-          }
-        }
-
-        * {
-          user-select: none;
-        }
-
-        & + .tab:hover,
-        & + .tab.actived {
-          .tab-dividers::before {
-            opacity: 0;
-          }
-        }
-
-        &.actived {
-          z-index: 5;
-
-          &::before,
-          &::after {
-            content: none;
+          * {
+            user-select: none;
          }

-          & + .tab .tab-dividers::before {
-            opacity: 0;
-          }
-
-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-active-color);
+          & + .tab:hover,
+          & + .tab.actived {
+            .tab-dividers::before {
+              opacity: 0;
            }
          }

-          .tab-background {
-            background-color: var(--g-tabbar-tab-active-bg);
+          &.actived {
+            z-index: 5;
+
+            &::before,
+            &::after {
+              content: none;
+            }
+
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-active-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-active-bg);
+            }
          }
-        }

-        .tab-dividers {
-          position: absolute;
-          top: 50%;
-          right: -1px;
-          left: -1px;
-          z-index: 0;
-          height: 14px;
-          transform: translateY(-50%);
+          .tab-dividers {
+            position: absolute;
+            top: 50%;
+            right: -1px;
+            left: -1px;
+            z-index: 0;
+            height: 14px;
+            transform: translateY(-50%);

-          &::before {
+            &::before {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 1px;
+              display: block;
+              width: 1px;
+              content: "";
+              background-color: var(--g-tabbar-dividers-bg);
+              opacity: 1;
+              transition: opacity 0.3s, background-color 0.3s;
+            }
+          }
+
+          &:first-child .tab-dividers::before {
+            opacity: 0;
+          }
+
+          .tab-background {
            position: absolute;
            top: 0;
-            bottom: 0;
-            left: 1px;
-            display: block;
-            width: 1px;
-            content: "";
-            background-color: var(--g-tabbar-dividers-bg);
-            opacity: 1;
+            left: 0;
+            z-index: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
            transition: opacity 0.3s, background-color 0.3s;
          }
-        }

-        &:first-child .tab-dividers::before {
-          opacity: 0;
-        }
-
-        .tab-background {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          transition: opacity 0.3s, background-color 0.3s;
-        }
-
-        .tab-content {
-          display: flex;
-          width: 100%;
-          height: 100%;
-          pointer-events: all;
-
-          .title {
+          .tab-content {
            display: flex;
-            flex: 1;
-            gap: 5px;
-            align-items: center;
+            width: 100%;
            height: 100%;
-            padding: 0 10px;
-            margin-right: 10px;
-            overflow: hidden;
-            color: var(--g-tabbar-tab-color);
-            white-space: nowrap;
-            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
-            transition: margin-right 0.3s;
+            pointer-events: all;

-            &:has(+ .action-icon) {
-              margin-right: 28px;
+            .title {
+              display: flex;
+              flex: 1;
+              gap: 5px;
+              align-items: center;
+              height: 100%;
+              padding: 0 10px;
+              margin-right: 10px;
+              overflow: hidden;
+              color: var(--g-tabbar-tab-color);
+              white-space: nowrap;
+              mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
+              transition: margin-right 0.3s;
+
+              &:has(+ .action-icon) {
+                margin-right: 28px;
+              }
+
+              .icon {
+                flex-shrink: 0;
+              }
            }

-            .icon {
-              flex-shrink: 0;
+            .action-icon {
+              --uno: transition absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]" hover:(border bg-secondary);
            }
-          }

-          .action-icon {
-            --uno: transition absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]" hover:(border bg-secondary);
-          }
-
-          .hotkey-number {
-            --uno: border bg-secondary absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]";
+            .hotkey-number {
+              --uno: border bg-secondary absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]";
+            }
          }
        }
      }
@@ -17,7 +17,7 @@ const isShow = ref(false)
    <template v-if="settingsStore.mode === 'pc'">
      <span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>
      <FaKbd v-if="settingsStore.settings.navSearch.enableHotkeys">
-        {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S
+        {{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }} K
      </FaKbd>
    </template>
  </FaButton>
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import type { Menu } from '@/types/global'
-import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import { resolveRoutePath } from '@/utils'
-import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { cloneDeep } from 'es-toolkit'
 import hotkeys from 'hotkeys-js'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'

 defineOptions({
  name: 'Search',
@@ -19,26 +16,6 @@ const isShow = defineModel<boolean>({
  default: false,
 })

-const overlayTransitionClass = ref({
-  enter: 'ease-in-out duration-500',
-  enterFrom: 'opacity-0',
-  enterTo: 'opacity-100',
-  leave: 'ease-in-out duration-500',
-  leaveFrom: 'opacity-100',
-  leaveTo: 'opacity-0',
-})
-
-const transitionClass = computed(() => {
-  return {
-    enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
-    enterTo: 'opacity-100 translate-y-0 lg-scale-100',
-    leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
-    leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
-  }
-})
-
 const router = useRouter()
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
@@ -57,43 +34,44 @@ const searchInput = ref('')
 const sourceList = ref<listTypes[]>([])
 const actived = ref(-1)

-const searchInputRef = useTemplateRef('searchInputRef')
-const searchResultRef = useTemplateRef<OverlayScrollbarsComponentRef>('searchResultRef')
+const searchResultRef = useTemplateRef('searchResultRef')
 const searchResultItemRef = useTemplateRef<HTMLElement[]>('searchResultItemRef')

 const resultList = computed(() => {
  let result = []
  result = sourceList.value.filter((item) => {
    let flag = false
-    if (item.title) {
-      if (typeof item.title === 'function') {
-        if (item.title().includes(searchInput.value)) {
-          flag = true
+    if (searchInput.value !== '') {
+      if (item.title) {
+        if (typeof item.title === 'function') {
+          if (item.title().includes(searchInput.value)) {
+            flag = true
+          }
+        }
+        else {
+          if (item.title.includes(searchInput.value)) {
+            flag = true
+          }
        }
      }
-      else {
-        if (item.title.includes(searchInput.value)) {
-          flag = true
-        }
+      if (item.path.includes(searchInput.value)) {
+        flag = true
      }
-    }
-    if (item.path.includes(searchInput.value)) {
-      flag = true
-    }
-    if (item.breadcrumb.some((b) => {
-      if (typeof b.title === 'function') {
-        if (b.title().includes(searchInput.value)) {
-          return true
+      if (item.breadcrumb.some((b) => {
+        if (typeof b.title === 'function') {
+          if (b.title().includes(searchInput.value)) {
+            return true
+          }
        }
-      }
-      else {
-        if (b.title?.includes(searchInput.value)) {
-          return true
+        else {
+          if (b.title?.includes(searchInput.value)) {
+            return true
+          }
        }
+        return false
+      })) {
+        flag = true
      }
-      return false
-    })) {
-      flag = true
    }
    return flag
  })
@@ -129,7 +107,7 @@ watch(() => resultList.value, () => {

 onMounted(() => {
  initSourceList()
-  hotkeys('alt+s', (e) => {
+  hotkeys('command+k, ctrl+k', (e) => {
    if (settingsStore.settings.navSearch.enableHotkeys) {
      e.preventDefault()
      isShow.value = true
@@ -138,7 +116,7 @@ onMounted(() => {
 })

 onUnmounted(() => {
-  hotkeys.unbind('alt+s')
+  hotkeys.unbind('command+k, ctrl+k')
 })

 function initSourceList() {
@@ -205,8 +183,8 @@ function keyEnter() {
  }
 }
 function handleScroll() {
-  if (searchResultRef.value) {
-    const contentDom = searchResultRef.value.osInstance()!.elements().content
+  if (searchResultRef.value?.areaRef?.ref?.el?.viewportElement) {
+    const contentDom = searchResultRef.value.areaRef.ref.el.viewportElement
    let scrollTo = 0
    if (actived.value !== -1) {
      scrollTo = contentDom.scrollTop
@@ -239,92 +217,77 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
 </script>

 <template>
-  <TransitionRoot as="template" :show="isShow">
-    <Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow = false">
-      <TransitionChild v-if="settingsStore.mode === 'pc'" as="template" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" />
-      </TransitionChild>
-      <div class="fixed inset-0">
-        <div class="h-full flex items-end justify-center text-center lg-items-center lg-p-4">
-          <TransitionChild as="template" v-bind="transitionClass">
-            <div class="h-full max-h-full w-full lg-max-h-4/5 lg-max-w-2xl">
-              <DialogPanel class="relative h-full flex flex-col text-left lg-max-h-full">
-                <div class="h-full flex flex-col overflow-y-auto border bg-background shadow-xl lg-h-auto lg-rounded-md">
-                  <div class="h-12 flex flex-shrink-0 items-center border-b">
-                    <div class="h-full w-14 flex-center">
-                      <FaIcon name="i-ri:search-line" :size="18" class="text-foreground/30" />
-                    </div>
-                    <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="h-full w-full border-0 rounded-md bg-transparent text-base text-foreground focus-outline-none placeholder-foreground/30" @keydown.esc="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
-                    <div v-if="settingsStore.mode === 'mobile'" class="h-full w-14 flex-center border-s">
-                      <FaIcon name="i-carbon:close" :size="18" @click="isShow = false" />
-                    </div>
-                  </div>
-                  <DialogDescription class="relative m-0 h-full of-y-hidden">
-                    <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
-                      <template v-if="resultList.length > 0">
-                        <div v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="p-4" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
-                          <a class="flex cursor-pointer items-center border rounded-lg" :class="{ '-mt-4': index !== 0, 'bg-accent': index === actived }">
-                            <FaIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-primary': index === actived }" />
-                            <div class="flex flex-1 flex-col gap-1 truncate border-s px-4 py-3">
-                              <div class="truncate text-start text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
-                              <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
-                                <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                                  {{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
-                                </BreadcrumbItem>
-                              </Breadcrumb>
-                            </div>
-                          </a>
-                        </div>
-                      </template>
-                      <template v-else-if="searchInput === ''">
-                        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
-                          <FaIcon name="i-tabler:mood-smile" :size="40" />
-                          <p class="m-2 text-base">
-                            输入你要搜索的导航
-                          </p>
-                        </div>
-                      </template>
-                      <template v-else>
-                        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
-                          <FaIcon name="i-tabler:mood-empty" :size="40" />
-                          <p class="m-2 text-base">
-                            没有找到你想要的
-                          </p>
-                        </div>
-                      </template>
-                    </OverlayScrollbarsComponent>
-                  </DialogDescription>
-                  <div v-if="settingsStore.mode === 'pc'" class="flex justify-between border-t px-4 py-3">
-                    <div class="flex gap-8">
-                      <div class="inline-flex items-center gap-1 text-xs">
-                        <FaKbd>
-                          <FaIcon name="i-ion:md-return-left" :size="14" />
-                        </FaKbd>
-                        <span>访问</span>
-                      </div>
-                      <div class="inline-flex items-center gap-1 text-xs">
-                        <FaKbd>
-                          <FaIcon name="i-ant-design:caret-up-filled" :size="14" />
-                        </FaKbd>
-                        <FaKbd>
-                          <FaIcon name="i-ant-design:caret-down-filled" :size="14" />
-                        </FaKbd>
-                        <span>切换</span>
-                      </div>
-                    </div>
-                    <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
-                      <FaKbd>
-                        ESC
-                      </FaKbd>
-                      <span>退出</span>
-                    </div>
-                  </div>
-                </div>
-              </DialogPanel>
-            </div>
-          </TransitionChild>
+  <FaModal ref="searchResultRef" v-model="isShow" border :footer="settingsStore.mode === 'pc'" :closable="false" class="w-full lg-max-w-2xl" content-class="flex flex-col p-0 min-h-auto" header-class="p-0" footer-class="p-0">
+    <template #header>
+      <div class="h-12 flex flex-shrink-0 items-center">
+        <div class="h-full w-14 flex-center">
+          <FaIcon name="i-ri:search-line" :size="18" class="text-foreground/30" />
+        </div>
+        <input v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="h-full w-full border-0 rounded-md bg-transparent text-base text-foreground focus-outline-none placeholder-foreground/30" @keydown.esc="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+        <div v-if="settingsStore.mode === 'mobile'" class="h-full w-14 flex-center border-s">
+          <FaIcon name="i-carbon:close" :size="18" @click="isShow = false" />
        </div>
      </div>
-    </Dialog>
-  </TransitionRoot>
+    </template>
+    <template #footer>
+      <div class="w-full flex justify-between px-4 py-3">
+        <div class="flex gap-8">
+          <div class="inline-flex items-center gap-1 text-xs">
+            <FaKbd>
+              <FaIcon name="i-ion:md-return-left" :size="14" />
+            </FaKbd>
+            <span>访问</span>
+          </div>
+          <div class="inline-flex items-center gap-1 text-xs">
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-up-filled" :size="14" />
+            </FaKbd>
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-down-filled" :size="14" />
+            </FaKbd>
+            <span>切换</span>
+          </div>
+        </div>
+        <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
+          <FaKbd>
+            ESC
+          </FaKbd>
+          <span>退出</span>
+        </div>
+      </div>
+    </template>
+    <div>
+      <template v-if="resultList.length > 0">
+        <div v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="p-4" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+          <a class="flex cursor-pointer items-center border rounded-lg" :class="{ '-mt-4': index !== 0, 'bg-accent': index === actived }">
+            <FaIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-primary': index === actived }" />
+            <div class="flex flex-1 flex-col gap-1 truncate border-s px-4 py-3">
+              <div class="truncate text-start text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
+              <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
+                <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
+                  {{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
+                </BreadcrumbItem>
+              </Breadcrumb>
+            </div>
+          </a>
+        </div>
+      </template>
+      <template v-else-if="searchInput === ''">
+        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
+          <FaIcon name="i-tabler:mood-smile" :size="40" />
+          <p class="m-2 text-base">
+            输入你要搜索的导航
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
+          <FaIcon name="i-tabler:mood-empty" :size="40" />
+          <p class="m-2 text-base">
+            没有找到你想要的
+          </p>
+        </div>
+      </template>
+    </div>
+  </FaModal>
 </template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToolbarStart from '@/slots/ToolbarStart/index.vue'
+import { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
 import Breadcrumb from './Breadcrumb/index.vue'

@@ -15,7 +15,7 @@ const settingsStore = useSettingsStore()
    <FaButton v-if="settingsStore.mode === 'mobile'" variant="ghost" size="icon" class="h-9 w-9 -rotate-z-180" @click="settingsStore.toggleSidebarCollapse()">
      <FaIcon name="toolbar-collapse" :size="16" />
    </FaButton>
-    <ToolbarStart />
+    <component :is="useSlots('toolbar-start')" />
    <Breadcrumb v-if="settingsStore.settings.toolbar.breadcrumb" />
  </div>
 </template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToolbarEnd from '@/slots/ToolbarEnd/index.vue'
+import { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
 import ColorScheme from './ColorScheme/index.vue'
 import Fullscreen from './Fullscreen/index.vue'
@@ -7,7 +7,7 @@ import NavSearch from './NavSearch/index.vue'
 import PageReload from './PageReload/index.vue'

 defineOptions({
-  name: 'Tools',
+  name: 'ToolbarRightSide',
 })

 const settingsStore = useSettingsStore()
@@ -19,6 +19,6 @@ const settingsStore = useSettingsStore()
    <Fullscreen v-if="settingsStore.settings.toolbar.fullscreen" />
    <PageReload v-if="settingsStore.settings.toolbar.pageReload" />
    <ColorScheme v-if="settingsStore.settings.toolbar.colorScheme" />
-    <ToolbarEnd />
+    <component :is="useSlots('toolbar-end')" />
  </div>
 </template>
@@ -57,7 +57,7 @@ watch(scrollTop, (val, oldVal) => {
 .topbar-container {
  display: flex;
  flex-direction: column;
-  width: 100%;
+  width: calc(100% - var(--scrollbar-width, 0px));
  box-shadow: 0 1px 0 0 hsl(var(--border));
  transition: transform 0.3s, box-shadow 0.3s;

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FreePosition from '@/slots/FreePosition/index.vue'
+import { useSlots } from '@/slots'
 import useKeepAliveStore from '@/store/modules/keepAlive'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
@@ -154,7 +154,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
      <AppSetting />
    </template>
    <BackTop />
-    <FreePosition />
+    <component :is="useSlots('free-position')" />
  </div>
 </template>

@@ -13,7 +13,6 @@ import uiProvider from './ui/provider'

 import '@/utils/systemCopyright'

-import 'overlayscrollbars/overlayscrollbars.css'
 // 加载 svg 图标
 import 'virtual:svg-icons-register'
 import 'virtual:uno.css'
@@ -1,9 +1,10 @@
 import type { RecursiveRequired, Settings } from '#/global'
 import settingsDefault from '@/settings.default'
 import { merge } from '@/utils/object'
+import { cloneDeep } from 'es-toolkit'

 const globalSettings: Settings.all = {
  // 请在此处编写或粘贴配置代码
 }

-export default merge(globalSettings, settingsDefault) as RecursiveRequired<Settings.all>
+export default merge(globalSettings, cloneDeep(settingsDefault)) as RecursiveRequired<Settings.all>
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
@@ -2,19 +2,22 @@
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 import eventBus from '@/utils/eventBus'
+import Profile from './profile.vue'

 const router = useRouter()

 const settingsStore = useSettingsStore()
 const userStore = useUserStore()
+
+const isProfileShow = ref(false)
 </script>

 <template>
  <FaDropdown
-    align="end"
-    :items="[
+    align="end" :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 },
      ],
      [
        { label: '快捷键介绍', icon: 'i-mdi:keyboard', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },
@@ -52,4 +55,7 @@ const userStore = useUserStore()
      </template>
    </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">
+    <Profile />
+  </FaModal>
 </template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import EditPasswordForm from '@/components/AccountForm/EditPasswordForm.vue'
+
+const active = ref(0)
+const tabs = ref([
+  {
+    title: '基本设置',
+    description: '账号的基本信息，头像、昵称等',
+  },
+  {
+    title: '安全设置',
+    description: '定期修改密码可以提高帐号安全性',
+  },
+])
+</script>
+
+<template>
+  <div class="min-h-full w-full">
+    <div class="fixed inset-s-0 bottom-0 top-0 h-full w-40 border-e">
+      <div v-for="(tab, index) in tabs" :key="index" class="cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
+        <div class="text-base text-accent-foreground leading-tight">
+          {{ tab.title }}
+        </div>
+        <div class="text-xs text-accent-foreground/50">
+          {{ tab.description }}
+        </div>
+      </div>
+    </div>
+    <div class="ms-40 min-h-full flex-col-center p-10">
+      <div v-if="active === 0">
+        请开发者自行扩展
+      </div>
+      <EditPasswordForm v-if="active === 1" />
+    </div>
+  </div>
+</template>
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
@@ -0,0 +1,29 @@
+import { pascalCase } from 'scule'
+
+type Slots =
+  'header-start' | 'header-end' | 'header-after-logo' |
+  'main-sidebar-top' | 'main-sidebar-bottom' | 'main-sidebar-after-logo' |
+  'sub-sidebar-top' | 'sub-sidebar-bottom' | 'sub-sidebar-after-logo' |
+  'tabbar-start' | 'tabbar-end' |
+  'toolbar-start' | 'toolbar-end' |
+  'free-position'
+
+function tryLoadComponent(name: Slots) {
+  const componentMap = import.meta.glob('./*/index.vue', { eager: true })
+  const path = `./${pascalCase(name as unknown as string)}/index.vue`
+  const component = componentMap[path as keyof typeof componentMap]
+  if (!component) {
+    return {
+      default: defineComponent({
+        name: 'SlotsInvalidComponent',
+        render: () => null,
+      }),
+    }
+  }
+  return component
+}
+
+export function useSlots(name: Slots) {
+  const component = tryLoadComponent(name)
+  return defineComponent((component as any).default)
+}
@@ -2,6 +2,7 @@ import type { Settings } from '#/global'
 import type { RouteMeta } from 'vue-router'
 import settingsDefault from '@/settings'
 import { merge } from '@/utils/object'
+import { cloneDeep } from 'es-toolkit'

 const useSettingsStore = defineStore(
  // 唯一ID
@@ -144,7 +145,7 @@ const useSettingsStore = defineStore(

    // 更新应用配置
    function updateSettings(data: Settings.all, fromBase = false) {
-      settings.value = merge(data, fromBase ? settingsDefault : settings.value)
+      settings.value = merge(data, fromBase ? cloneDeep(settingsDefault) : settings.value)
    }

    return {
@@ -90,7 +90,7 @@ const useUserStore = defineStore(
    // 修改密码
    async function editPassword(data: {
      password: string
-      newpassword: string
+      newPassword: string
    }) {
      await apiUser.passwordEdit(data)
    }
@@ -12,6 +12,7 @@ declare module 'vue' {
    FaButton: typeof import('./../ui/components/FaButton/index.vue')['default']
    FaCard: typeof import('./../ui/components/FaCard/index.vue')['default']
    FaCheckbox: typeof import('./../ui/components/FaCheckbox/index.vue')['default']
+    FaContextMenu: typeof import('./../ui/components/FaContextMenu/index.vue')['default']
    FaDivider: typeof import('./../ui/components/FaDivider/index.vue')['default']
    FaDrawer: typeof import('./../ui/components/FaDrawer/index.vue')['default']
    FaDropdown: typeof import('./../ui/components/FaDropdown/index.vue')['default']
@@ -19,8 +20,6 @@ declare module 'vue' {
    FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
    FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
    FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
-    FaLoading: typeof import('./../ui/components/FaLoading/index.vue')['default']
-    FaMaskScrollContainer: typeof import('./../ui/components/FaMaskScrollContainer/index.vue')['default']
    FaModal: typeof import('./../ui/components/FaModal/index.vue')['default']
    FaNotAllowed: typeof import('./../ui/components/FaNotAllowed/index.vue')['default']
    FaNotification: typeof import('./../ui/components/FaNotification/index.vue')['default']
@@ -29,6 +28,7 @@ declare module 'vue' {
    FaPasswordStrength: typeof import('./../ui/components/FaPasswordStrength/index.vue')['default']
    FaPinInput: typeof import('./../ui/components/FaPinInput/index.vue')['default']
    FaPopover: typeof import('./../ui/components/FaPopover/index.vue')['default']
+    FaScrollArea: typeof import('./../ui/components/FaScrollArea/index.vue')['default']
    FaSearchBar: typeof import('./../ui/components/FaSearchBar/index.vue')['default']
    FaSelect: typeof import('./../ui/components/FaSelect/index.vue')['default']
    FaSmartFixedBlock: typeof import('./../ui/components/FaSmartFixedBlock/index.vue')['default']
@@ -97,7 +97,7 @@ declare namespace Settings {
     * 主导航点击模式
     * @默认值 `'switch'` 切换
     * @可选值 `'jump'` 跳转
-     * @可选值 `'smart'` 智能选择
+     * @可选值 `'smart'` 智能选择，判断次导航是否只有且只有一个可访问的菜单进行切换或跳转操作
     */
    mainMenuClickMode?: 'switch' | 'jump' | 'smart'
    /**
@@ -5,9 +5,9 @@ declare interface Window {

 declare const __SYSTEM_INFO__: {
  pkg: {
-    version: Recordable<string>
-    dependencies: Recordable<string>
-    devDependencies: Recordable<string>
+    version: string
+    dependencies: Record<string, string>
+    devDependencies: Record<string, string>
  }
  lastBuildTime: string
 }
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  ContextMenuCheckboxItem,
+  type ContextMenuCheckboxItemEmits,
+  type ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import {
+  ContextMenuContent,
+  type ContextMenuContentEmits,
+  type ContextMenuContentProps,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import {
+  ContextMenuItem,
+  type ContextMenuItemEmits,
+  type ContextMenuItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class,
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupEmits,
+  type ContextMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  type ContextMenuRadioItemEmits,
+  type ContextMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import {
+  ContextMenuSeparator,
+  type ContextMenuSeparatorProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  ContextMenuSub,
+  type ContextMenuSubEmits,
+  type ContextMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import {
+  ContextMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from './context-menu'
+
+defineOptions({
+  name: 'FaContextMenu',
+})
+
+const props = defineProps<{
+  items: {
+    label: string
+    icon?: string
+    disabled?: boolean
+    hide?: boolean
+    handle?: () => void
+  }[][]
+}>()
+
+const slots = defineSlots<{
+  default?: () => VNode
+  label?: () => VNode
+}>()
+
+const myItems = computed(() => {
+  return props.items.map((item) => {
+    return item.filter(v => !v.hide)
+  }).filter(v => v.length)
+})
+
+const isItemsHasIcon = computed(() => {
+  return myItems.value.some(item => item.some(v => v.icon))
+})
+
+function handleItemClick(item: { handle?: () => void }) {
+  item.handle?.()
+}
+</script>
+
+<template>
+  <ContextMenu :modal="false">
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuContent class="z-1050">
+      <template v-if="!!slots.label">
+        <ContextMenuLabel>
+          <slot name="label" />
+        </ContextMenuLabel>
+        <ContextMenuSeparator />
+      </template>
+      <template v-for="(item, index) in myItems" :key="index">
+        <ContextMenuGroup>
+          <ContextMenuItem v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="cursor-pointer" @click="handleItemClick(v)">
+            <div v-if="isItemsHasIcon" class="size-4 flex-center">
+              <FaIcon v-if="v.icon" :name="v.icon" :size="16" />
+            </div>
+            {{ v.label }}
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator v-if="index !== myItems.length - 1" />
+      </template>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import {
  Sheet,
  SheetContent,
@@ -157,9 +156,11 @@ function handleAnimationEnd() {
        </slot>
      </SheetHeader>
      <div class="m-0 flex-1 of-y-hidden">
-        <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full p-4">
-          <slot />
-        </OverlayScrollbarsComponent>
+        <FaScrollArea class="h-full">
+          <div class="p-4">
+            <slot />
+          </div>
+        </FaScrollArea>
        <div v-show="props.loading" class="absolute inset-0 z-1000 size-full flex-center bg-popover/75">
          <FaIcon name="i-line-md:loading-twotone-loop" :size="36" />
        </div>
@@ -50,7 +50,7 @@ function handleItemClick(item: { handle?: () => void }) {
 </script>

 <template>
-  <DropdownMenu>
+  <DropdownMenu :modal="false">
    <DropdownMenuTrigger as-child>
      <slot />
    </DropdownMenuTrigger>
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { useElementSize, useScroll } from '@vueuse/core'
-
-defineOptions({
-  name: 'FaMaskScrollContainer',
-})
-
-const props = withDefaults(
-  defineProps<{
-    scroll?: 'x' | 'y'
-    gradientColor?: string
-  }>(),
-  {
-    scroll: 'y',
-    gradientColor: 'hsl(var(--background))',
-  },
-)
-
-const maskScrollContainerOuterRef = useTemplateRef('maskScrollContainerOuterRef')
-const maskScrollContainerInnerRef = useTemplateRef('maskScrollContainerInnerRef')
-
-const showMaskStart = ref(false)
-const showMaskEnd = ref(false)
-
-function updateMask() {
-  if (props.scroll === 'x') {
-    const scrollLeft = maskScrollContainerOuterRef.value?.scrollLeft ?? 0
-    showMaskStart.value = scrollLeft > 0
-    const clientWidth = maskScrollContainerOuterRef.value?.clientWidth ?? 0
-    const scrollWidth = maskScrollContainerOuterRef.value?.scrollWidth ?? 0
-    showMaskEnd.value = Math.ceil(scrollLeft + clientWidth) < scrollWidth
-  }
-  else {
-    const scrollTop = maskScrollContainerOuterRef.value?.scrollTop ?? 0
-    showMaskStart.value = scrollTop > 0
-    const clientHeight = maskScrollContainerOuterRef.value?.clientHeight ?? 0
-    const scrollHeight = maskScrollContainerOuterRef.value?.scrollHeight ?? 0
-    showMaskEnd.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
-  }
-}
-
-function onWheel(event: WheelEvent) {
-  if (props.scroll === 'x') {
-    maskScrollContainerOuterRef.value?.scrollBy({
-      left: event.deltaY || event.detail,
-    })
-  }
-  else {
-    maskScrollContainerOuterRef.value?.scrollBy({
-      top: event.deltaY || event.detail,
-    })
-  }
-}
-
-const { x, y } = useScroll(maskScrollContainerOuterRef)
-watch([() => x.value, () => y.value], updateMask)
-
-const { width, height } = useElementSize(maskScrollContainerInnerRef)
-watch([() => width.value, () => height.value], () => {
-  if (width.value > 0 || height.value > 0) {
-    updateMask()
-  }
-}, {
-  immediate: true,
-})
-
-function scrollTo(scrollNumber: number) {
-  if (props.scroll === 'x') {
-    maskScrollContainerOuterRef.value?.scrollTo({
-      left: scrollNumber,
-      behavior: 'smooth',
-    })
-  }
-  else {
-    maskScrollContainerOuterRef.value?.scrollTo({
-      top: scrollNumber,
-      behavior: 'smooth',
-    })
-  }
-}
-
-defineExpose({
-  ref: useTemplateRef('maskScrollContainerRef'),
-  scrollTo,
-})
-</script>
-
-<template>
-  <div
-    ref="maskScrollContainerRef" class="relative flex overflow-hidden after:(pointer-events-none absolute z-1 from-transparent to-[var(--mask-scroll-container-gradient-color)] opacity-0 transition-opacity content-empty) before:(pointer-events-none absolute z-1 from-transparent to-[var(--mask-scroll-container-gradient-color)] opacity-0 transition-opacity content-empty)" :class="{
-      'after:(bg-gradient-to-r h-full w-12 right-0) before:(bg-gradient-to-l h-full w-12)': props.scroll === 'x',
-      'after:(bg-gradient-to-b h-12 w-full bottom-0) before:(bg-gradient-to-t h-12 w-full)': props.scroll === 'y',
-      'before:(opacity-100!)': showMaskStart,
-      'after:(opacity-100!)': showMaskEnd,
-    }" :style="{
-      '--mask-scroll-container-gradient-color': props.gradientColor,
-    }"
-  >
-    <div ref="maskScrollContainerOuterRef" class="relative z-0 flex-1 overflow-auto scrollbar-none" @wheel.prevent="onWheel">
-      <div ref="maskScrollContainerInnerRef" class="h-full w-full">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
@@ -35,6 +35,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 function handleMaximize() {
  emits('toggleMaximize', !props.maximize)
 }
+
+const dialogContentRef = useTemplateRef('dialogContentRef')
+
+defineExpose({
+  el: dialogContentRef,
+})
 </script>

 <template>
@@ -45,16 +51,17 @@ function handleMaximize() {
      })"
    />
    <DialogContent
+      ref="dialogContentRef"
      v-bind="forwarded"
      :class="
        cn(
-          'fixed left-1/2 top-1/2 z-2000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-2000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-0 data-[state=closed]:slide-out-to-top-1/5 data-[state=open]:slide-in-from-left-0 data-[state=open]:slide-in-from-top-1/5 sm:rounded-lg',
          props.class,
        )"
      @animationend="emits('animationEnd')"
    >
      <slot />
-      <div class="absolute right-4 top-4 flex-center gap-2">
+      <div class="absolute inset-e-4 top-4 flex-center gap-2">
        <button v-if="props.maximizable" class="rounded-sm bg-transparent opacity-70 ring-offset-background transition-opacity hidden disabled:pointer-events-none sm:inline-block data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring" @click="handleMaximize">
          <Maximize v-if="!props.maximize" class="h-4 w-4" />
          <Minimize v-else class="h-4 w-4" />
@@ -9,7 +9,7 @@ const props = defineProps<{

 <template>
  <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)"
  >
    <slot />
  </div>
@@ -10,8 +10,10 @@ export interface ModalProps {
  closable?: boolean
  maximize?: boolean
  maximizable?: boolean
-  centered?: boolean
-  bordered?: boolean
+  draggable?: boolean
+  center?: boolean
+  border?: boolean
+  alignCenter?: boolean
  overlay?: boolean
  overlayBlur?: boolean
  showConfirmButton?: boolean
@@ -39,12 +41,12 @@ export interface ModalEmits {
  'cancel': []
 }

-type alertOptions = Pick<ModalProps, 'title' | 'description' | 'icon' | 'centered' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
+type alertOptions = Pick<ModalProps, 'title' | 'description' | 'icon' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
  content: string
  onConfirm?: () => any
 }

-type confirmOptions = Pick<ModalProps, 'title' | 'description' | 'centered' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
+type confirmOptions = Pick<ModalProps, 'title' | 'description' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
  content: string
  onConfirm?: () => any
  onCancel?: () => any
@@ -59,7 +61,8 @@ export function useFaModal() {
          modelValue: true,
          icon: 'info',
          closable: false,
-          bordered: false,
+          border: false,
+          alignCenter: true,
          closeOnClickOverlay: false,
          contentClass: 'py-0 min-h-auto',
          footerClass: 'p-4',
@@ -79,7 +82,8 @@ export function useFaModal() {
          modelValue: true,
          icon: 'success',
          closable: false,
-          bordered: false,
+          border: false,
+          alignCenter: true,
          closeOnClickOverlay: false,
          contentClass: 'py-0 min-h-auto',
          footerClass: 'p-4',
@@ -99,7 +103,8 @@ export function useFaModal() {
          modelValue: true,
          icon: 'warning',
          closable: false,
-          bordered: false,
+          border: false,
+          alignCenter: true,
          closeOnClickOverlay: false,
          contentClass: 'py-0 min-h-auto',
          footerClass: 'p-4',
@@ -119,7 +124,8 @@ export function useFaModal() {
          modelValue: true,
          icon: 'error',
          closable: false,
-          bordered: false,
+          border: false,
+          alignCenter: true,
          closeOnClickOverlay: false,
          contentClass: 'py-0 min-h-auto',
          footerClass: 'p-4',
@@ -138,7 +144,8 @@ export function useFaModal() {
        return h(Modal, Object.assign({
          modelValue: true,
          closable: false,
-          bordered: false,
+          border: false,
+          alignCenter: true,
          closeOnClickOverlay: false,
          contentClass: 'py-0 min-h-auto',
          footerClass: 'p-4',
@@ -9,6 +9,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from './dialog'
+import { useDraggable } from './use-draggable'

 defineOptions({
  name: 'FaModal',
@@ -22,8 +23,10 @@ const props = withDefaults(
    closable: true,
    maximize: false,
    maximizable: false,
-    centered: false,
-    bordered: true,
+    draggable: false,
+    center: false,
+    border: true,
+    alignCenter: false,
    overlay: true,
    overlayBlur: false,
    showConfirmButton: true,
@@ -47,12 +50,47 @@ const slots = defineSlots<{
  footer?: () => VNode
 }>()

+const dialogContentRef = useTemplateRef('dialogContentRef')
+const dialogHeaderRef = ref()
+const dialogAreaRef = useTemplateRef('dialogAreaRef')
+const dialogRef = ref()
+
+defineExpose({
+  areaRef: dialogAreaRef,
+})
+
 const isOpen = ref(props.modelValue)
+const isMaximize = ref(props.maximize)

 watch(() => props.modelValue, (newValue) => {
  isOpen.value = newValue
 })

+const { isDragging, transform } = useDraggable(
+  dialogRef,
+  dialogHeaderRef,
+  computed(() => props.draggable && props.header && !isMaximize.value),
+)
+function setTransform() {
+  if (isMaximize.value) {
+    dialogRef.value.style.transform = 'none'
+  }
+  else {
+    dialogRef.value.style.transform = `translate(${transform.offsetX}px, ${transform.offsetY}px)`
+  }
+}
+
+watch(isOpen, (val) => {
+  if (val) {
+    nextTick(() => {
+      if (dialogContentRef.value) {
+        dialogRef.value = dialogContentRef.value.el?.$el
+        setTransform()
+      }
+    })
+  }
+})
+
 function updateOpen(value: boolean) {
  isOpen.value = value
  emits('update:modelValue', value)
@@ -64,8 +102,6 @@ function updateOpen(value: boolean) {
  }
 }

-const isMaximize = ref(props.maximize)
-
 function onConfirm() {
  updateOpen(false)
  emits('confirm')
@@ -95,6 +131,7 @@ function handleEscapeKeyDown(e: KeyboardEvent) {

 function handleMaximize(val: boolean) {
  isMaximize.value = val
+  setTransform()
 }

 function handleAnimationEnd() {
@@ -110,12 +147,15 @@ function handleAnimationEnd() {
 <template>
  <Dialog :modal="props.overlay" :open="isOpen" @update:open="updateOpen">
    <DialogContent
+      ref="dialogContentRef"
      :closable="props.closable"
      :overlay-blur="props.overlayBlur"
      :maximize="isMaximize"
      :maximizable="props.maximizable"
-      :class="cn('flex flex-col p-0 gap-0 max-h-full sm:max-h-[90vh] duration-0', props.class, {
-        'size-full max-w-full max-h-full sm:max-h-full': isMaximize,
+      :class="cn('left-0 right-0 top-0 md:top-[5vh] flex flex-col p-0 gap-0 mx-auto h-[calc-size(auto,size)] min-h-full md:min-h-auto max-h-full md:max-h-[90vh] translate-x-0 translate-y-0', props.class, {
+        'md:top-0 size-full max-w-full max-h-full md:max-h-full': isMaximize,
+        'md:top-1/2 md:-translate-y-1/2!': props.alignCenter,
+        'duration-0': isDragging,
      })"
      @close-auto-focus="handleFocusOutside"
      @focus-outside="handleFocusOutside"
@@ -126,12 +166,13 @@ function handleAnimationEnd() {
      @animation-end="handleAnimationEnd"
    >
      <DialogHeader
-        v-if="header" :class="cn('p-4', props.headerClass, {
-          'border-b': props.bordered,
+        v-if="header" ref="dialogHeaderRef" :class="cn('p-4', props.headerClass, {
+          'cursor-move select-none': props.draggable,
+          'border-b': props.border,
        })"
      >
        <slot name="header">
-          <DialogTitle class="flex-center-start gap-x-2" :class="{ 'justify-center': props.centered }">
+          <DialogTitle class="flex-center gap-x-2 md:justify-start" :class="{ 'md:justify-center': props.center }">
            <FaIcon
              v-if="props.icon" :name="{
                info: 'i-ant-design:info-circle-filled',
@@ -147,25 +188,23 @@ function handleAnimationEnd() {
            />
            {{ title }}
          </DialogTitle>
-          <DialogDescription v-if="!!description" :class="{ 'text-center': props.centered }">
+          <DialogDescription v-if="!!description" :class="{ 'text-center': props.center }">
            {{ description }}
          </DialogDescription>
        </slot>
      </DialogHeader>
-      <div
-        v-if="!!slots.default" :class="cn('relative min-h-40 flex-1 p-4 of-y-auto', props.contentClass, {
-          'of-hidden': props.loading,
-        })"
-      >
-        <slot />
+      <FaScrollArea v-if="!!slots.default" ref="dialogAreaRef" class="flex-1">
+        <div :class="cn('min-h-40 p-4', props.contentClass)">
+          <slot />
+        </div>
        <div v-show="props.loading" class="absolute inset-0 z-1000 size-full flex-center bg-popover/75">
          <FaIcon name="i-line-md:loading-twotone-loop" :size="36" />
        </div>
-      </div>
+      </FaScrollArea>
      <DialogFooter
        v-if="footer" :class="cn('p-2 gap-y-2', props.footerClass, {
-          'sm:justify-center': props.centered,
-          'border-t': props.bordered,
+          'md:justify-center': props.center,
+          'border-t': props.border,
        })"
      >
        <slot name="footer">
@@ -0,0 +1,110 @@
+/**
+ * fork: https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-draggable/index.ts
+ * reference: https://github.com/vbenjs/vue-vben-admin/blob/main/packages/%40core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
+ */
+
+import type { ComputedRef, Ref } from 'vue'
+import { unrefElement } from '@vueuse/core'
+
+export function useDraggable(
+  targetRef: Ref<HTMLElement | undefined>,
+  dragRef: Ref<HTMLElement | undefined>,
+  draggable: ComputedRef<boolean>,
+  overflow?: ComputedRef<boolean>,
+) {
+  const isDragging = ref(false)
+  const transform = reactive({
+    offsetX: 0,
+    offsetY: 0,
+  })
+
+  const onMousedown = (e: MouseEvent) => {
+    const downX = e.clientX
+    const downY = e.clientY
+    const { offsetX, offsetY } = transform
+
+    const targetRect = targetRef.value!.getBoundingClientRect()
+    const targetLeft = targetRect.left
+    const targetTop = targetRect.top
+    const targetWidth = targetRect.width
+    const targetHeight = targetRect.height
+
+    const clientWidth = document.documentElement.clientWidth
+    const clientHeight = document.documentElement.clientHeight
+
+    const minLeft = -targetLeft + offsetX
+    const minTop = -targetTop + offsetY
+    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX
+    const maxTop = clientHeight - targetTop - targetHeight + offsetY
+
+    const onMousemove = (e: MouseEvent) => {
+      let moveX = offsetX + e.clientX - downX
+      let moveY = offsetY + e.clientY - downY
+
+      if (!overflow?.value) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft)
+        moveY = Math.min(Math.max(moveY, minTop), maxTop)
+      }
+
+      transform.offsetX = moveX
+      transform.offsetY = moveY
+
+      if (targetRef.value) {
+        isDragging.value = true
+        targetRef.value.style.transform = `translate(${moveX}px, ${moveY}px)`
+      }
+    }
+
+    const onMouseup = () => {
+      isDragging.value = false
+      document.removeEventListener('mousemove', onMousemove)
+      document.removeEventListener('mouseup', onMouseup)
+    }
+
+    document.addEventListener('mousemove', onMousemove)
+    document.addEventListener('mouseup', onMouseup)
+  }
+
+  const onDraggable = () => {
+    const dragRefElement = unrefElement(dragRef)
+    if (dragRefElement && targetRef.value) {
+      dragRefElement.addEventListener('mousedown', onMousedown)
+    }
+  }
+
+  const offDraggable = () => {
+    const dragRefElement = unrefElement(dragRef)
+    if (dragRefElement && targetRef.value) {
+      dragRefElement.removeEventListener('mousedown', onMousedown)
+    }
+  }
+
+  const resetPosition = () => {
+    transform.offsetX = 0
+    transform.offsetY = 0
+    if (targetRef.value) {
+      targetRef.value.style.transform = 'none'
+    }
+  }
+
+  onMounted(() => {
+    watchEffect(() => {
+      if (draggable.value) {
+        onDraggable()
+      }
+      else {
+        offDraggable()
+      }
+    })
+  })
+
+  onBeforeUnmount(() => {
+    offDraggable()
+  })
+
+  return {
+    isDragging,
+    transform,
+    resetPosition,
+  }
+}
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import { useElementSize, useScroll } from '@vueuse/core'
+import { ScrollArea, ScrollBar } from './scroll-area'
+
+defineOptions({
+  name: 'FaScrollArea',
+})
+
+const props = withDefaults(
+  defineProps<{
+    horizontal?: boolean
+    scrollbar?: boolean
+    mask?: boolean
+    gradientColor?: string
+    class?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
+  }>(),
+  {
+    horizontal: false,
+    scrollbar: true,
+    mask: false,
+    gradientColor: 'hsl(var(--background))',
+  },
+)
+
+const scrollAreaRef = useTemplateRef('scrollAreaRef')
+
+const arrivedState = ref<{
+  left: boolean
+  right: boolean
+  top: boolean
+  bottom: boolean
+}>()
+const showMaskStart = computed(() => {
+  if (props.horizontal) {
+    return !arrivedState.value?.left
+  }
+  return !arrivedState.value?.top
+})
+const showMaskEnd = computed(() => {
+  if (props.horizontal) {
+    return !arrivedState.value?.right
+  }
+  return !arrivedState.value?.bottom
+})
+
+function onWheel(event: WheelEvent) {
+  if (props.horizontal) {
+    scrollAreaRef.value?.el?.viewportElement?.scrollBy({
+      left: event.deltaY || event.detail,
+    })
+  }
+  else {
+    scrollAreaRef.value?.el?.viewportElement?.scrollBy({
+      top: event.deltaY || event.detail,
+    })
+  }
+}
+
+const scrollContainerRef = useTemplateRef('scrollContainerRef')
+
+onMounted(() => {
+  const { arrivedState: arrivedStateValue } = useScroll(scrollAreaRef.value?.el?.viewportElement)
+  watch(arrivedStateValue, (value) => {
+    arrivedState.value = value
+  }, {
+    immediate: true,
+  })
+  const { width, height } = useElementSize(scrollContainerRef.value)
+  watch([width, height], () => {
+    scrollAreaRef.value?.el?.viewportElement?.dispatchEvent(new Event('scroll'))
+  }, {
+    immediate: true,
+  })
+})
+
+function scrollTo(scrollNumber: number) {
+  if (props.horizontal) {
+    scrollAreaRef.value?.el?.viewportElement?.scrollTo({
+      left: scrollNumber,
+      behavior: 'smooth',
+    })
+  }
+  else {
+    scrollAreaRef.value?.el?.viewportElement?.scrollTo({
+      top: scrollNumber,
+      behavior: 'smooth',
+    })
+  }
+}
+
+defineExpose({
+  ref: scrollAreaRef,
+  scrollTo,
+})
+</script>
+
+<template>
+  <div
+    ref="scrollContainerRef" :class="cn('relative flex overflow-hidden after:(pointer-events-none absolute z-1 from-transparent to-[var(--mask-scroll-container-gradient-color)] opacity-0 transition-opacity content-empty) before:(pointer-events-none absolute z-1 from-transparent to-[var(--mask-scroll-container-gradient-color)] opacity-0 transition-opacity content-empty)', {
+      'after:(bg-gradient-to-r rtl:bg-gradient-to-l h-full w-12 end-0) before:(bg-gradient-to-l rtl:bg-gradient-to-r h-full w-12 start-0)': props.horizontal,
+      'after:(bg-gradient-to-b h-12 w-full bottom-0) before:(bg-gradient-to-t h-12 w-full)': !props.horizontal,
+      'before:(opacity-100!)': props.mask && showMaskStart,
+      'after:(opacity-100!)': props.mask && showMaskEnd,
+    }, props.class)" :style="props.mask ? {
+      '--mask-scroll-container-gradient-color': props.gradientColor,
+    } : {}"
+  >
+    <ScrollArea ref="scrollAreaRef" :class="cn('relative z-0 flex-1', props.contentClass)" :scrollbar="props.scrollbar" :on-wheel="onWheel">
+      <slot />
+      <ScrollBar v-if="props.horizontal" orientation="horizontal" :class="{ 'opacity-0 pointer-events-none': !props.scrollbar }" />
+    </ScrollArea>
+  </div>
+</template>
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & {
+  class?: HTMLAttributes['class']
+  scrollbar?: boolean
+  onWheel?: (event: WheelEvent) => void
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, onWheel, ...delegated } = props
+
+  return delegated
+})
+
+const viewportRef = useTemplateRef('viewportRef')
+
+defineExpose({
+  el: viewportRef,
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport ref="viewportRef" class="scroll-area-viewport h-full w-full rounded-[inherit]" @wheel.prevent="onWheel">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar :class="{ 'opacity-0 pointer-events-none': !props.scrollbar }" />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
+
+<style scoped>
+:deep(.scroll-area-viewport > div) {
+  height: 100%;
+}
+</style>
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
@@ -20,6 +20,7 @@ defineProps<{
  inset-inline: 50% 0;
  z-index: 1000;
  width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+  padding-right: var(--scrollbar-width, 0);
  transition: width 0.3s, max-width 0.3s, transform 0.3s;
  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));

@@ -31,25 +32,9 @@ defineProps<{
    bottom: 0;
  }

-  [data-app-width-mode="center"] & {
-    max-width: calc(var(--g-app-width) - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  }
-
-  [data-app-width-mode="center-max-width"] & {
-    max-width: calc(var(--g-app-width) - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  }
-
-  [dir="rtl"] & {
-    transform: translateX(50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2 * -1)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2 * -1));
-  }
-
  [data-mode="mobile"] & {
    width: 100% !important;
    transform: translateX(-50%) !important;
-
-    [dir="rtl"] & {
-      transform: translateX(50%) !important;
-    }
  }
 }
 </style>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import eventBus from '@/utils/eventBus'
+import hotkeys from 'hotkeys-js'

 defineOptions({
  name: 'FaSystemInfo',
@@ -10,27 +10,35 @@ const isShow = ref(false)
 const { pkg, lastBuildTime } = __SYSTEM_INFO__

 onMounted(() => {
-  eventBus.on('global-system-info-toggle', () => {
-    isShow.value = !isShow.value
+  hotkeys('command+i, ctrl+i', () => {
+    isShow.value = true
  })
 })
 </script>

 <template>
-  <FaDrawer v-model="isShow" title="系统信息">
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
+  <FaDrawer v-model="isShow" title="系统信息" :footer="false">
+    <div v-if="pkg.version">
+      <FaDivider>
+        系统信息
+      </FaDivider>
+      <div class="text-center text-lg font-bold font-sans">
+        {{ pkg.version }}
+      </div>
+    </div>
+    <div>
+      <FaDivider>
        最后编译时间
-      </h2>
-      <div class="my-4 text-center text-lg font-sans">
+      </FaDivider>
+      <div class="text-center text-lg font-bold font-sans">
        {{ lastBuildTime }}
      </div>
    </div>
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
+    <div>
+      <FaDivider>
        生产环境依赖
-      </h2>
-      <ul class="my-4 list-none text-sm">
+      </FaDivider>
+      <ul class="list-none text-sm">
        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover-bg-secondary">
          <div class="font-bold">
            {{ key }}
@@ -41,11 +49,11 @@ onMounted(() => {
        </li>
      </ul>
    </div>
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
+    <div>
+      <FaDivider>
        开发环境依赖
-      </h2>
-      <ul class="my-4 list-none text-sm">
+      </FaDivider>
+      <ul class="list-none text-sm">
        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover-bg-secondary">
          <div class="font-bold">
            {{ key }}
@@ -22,28 +22,22 @@ export default function useTabbar() {

  function go(delta: number) {
    const tabId = getId()
-    if (checkClose(tabId, false)) {
-      router.go(delta)
-      tabbarStore.remove(tabId)
-    }
+    router.go(delta)
+    tabbarStore.remove(tabId)
  }

  function replace(to: RouteLocationRaw) {
    const tabId = getId()
-    if (checkClose(tabId, false)) {
-      router.replace(to).then(() => {
-        tabbarStore.remove(tabId)
-      })
-    }
+    router.replace(to).then(() => {
+      tabbarStore.remove(tabId)
+    })
  }

  function close(to: RouteLocationRaw) {
    const tabId = getId()
-    if (checkClose(tabId, false)) {
-      router.push(to).then(() => {
-        tabbarStore.remove(tabId)
-      })
-    }
+    router.push(to).then(() => {
+      tabbarStore.remove(tabId)
+    })
  }

  function closeById(tabId = getId()) {
@@ -9,7 +9,7 @@ meta:
 const versionType = ref('basic')
 watch(versionType, (val) => {
  if (val === 'pro') {
-    location.href = location.href.replace('basic-example', 'pro-example')
+    location.href = `${location.origin}${location.pathname}`.replace('basic-example', 'pro-example')
  }
 })

@@ -66,11 +66,10 @@ function open(url: string) {
        <div class="flex items-center gap-4">
          欢迎使用 Fantastic-admin
          <FaTabs
-            v-model="versionType"
-            :list="[
+            v-model="versionType" :list="[
              { label: '基础版', value: 'basic' },
              { label: '专业版', value: 'pro' },
-            ]"
+            ]" class="-mb-2"
          />
        </div>
      </template>