From cfd23d54da3b69497242830366ef315051ea1283 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 6 Jan 2025 00:06:46 +0800
Subject: [PATCH] feat: v5.0

---
 .npmrc                                        |   1 +
 package.json                                  |   7 +-
 pnpm-lock.yaml                                |  59 +--
 src/App.vue                                   |   5 -
 src/api/modules/user.ts                       |   2 +-
 src/assets/styles/globals.css                 |  43 +-
 src/assets/styles/nprogress.css               |   2 +-
 .../AccountForm/EditPasswordForm.vue          |  91 ++++
 src/layouts/components/AppSetting/index.vue   |   4 +-
 src/layouts/components/Header/index.vue       |  16 +-
 src/layouts/components/HotkeysIntro/index.vue |   6 +-
 src/layouts/components/MainSidebar/index.vue  |   8 +-
 src/layouts/components/Menu/sub.vue           |  27 +-
 src/layouts/components/SubSidebar/index.vue   |   8 +-
 .../components/Topbar/Tabbar/index.vue        | 408 ++++++++----------
 .../Topbar/Toolbar/NavSearch/index.vue        |   2 +-
 .../Topbar/Toolbar/NavSearch/search.vue       | 239 +++++-----
 .../components/Topbar/Toolbar/leftSide.vue    |   4 +-
 .../components/Topbar/Toolbar/rightSide.vue   |   6 +-
 src/layouts/components/Topbar/index.vue       |   2 +-
 src/layouts/index.vue                         |   4 +-
 src/main.ts                                   |   1 -
 src/settings.ts                               |   3 +-
 src/slots/FreePosition/index.vue              |   3 -
 src/slots/ToolbarEnd/index.vue                |  10 +-
 src/slots/ToolbarEnd/profile.vue              |  36 ++
 src/slots/ToolbarStart/index.vue              |   3 -
 src/slots/index.ts                            |  29 ++
 src/store/modules/settings.ts                 |   3 +-
 src/store/modules/user.ts                     |   2 +-
 src/types/components.d.ts                     |   4 +-
 src/types/global.d.ts                         |   2 +-
 src/types/shims.d.ts                          |   6 +-
 .../context-menu/ContextMenu.vue              |  15 +
 .../context-menu/ContextMenuCheckboxItem.vue  |  40 ++
 .../context-menu/ContextMenuContent.vue       |  36 ++
 .../context-menu/ContextMenuGroup.vue         |  11 +
 .../context-menu/ContextMenuItem.vue          |  34 ++
 .../context-menu/ContextMenuLabel.vue         |  25 ++
 .../context-menu/ContextMenuPortal.vue        |  11 +
 .../context-menu/ContextMenuRadioGroup.vue    |  19 +
 .../context-menu/ContextMenuRadioItem.vue     |  40 ++
 .../context-menu/ContextMenuSeparator.vue     |  20 +
 .../context-menu/ContextMenuShortcut.vue      |  14 +
 .../context-menu/ContextMenuSub.vue           |  19 +
 .../context-menu/ContextMenuSubContent.vue    |  35 ++
 .../context-menu/ContextMenuSubTrigger.vue    |  34 ++
 .../context-menu/ContextMenuTrigger.vue       |  13 +
 .../FaContextMenu/context-menu/index.ts       |  14 +
 src/ui/components/FaContextMenu/index.vue     |  71 +++
 src/ui/components/FaDrawer/index.vue          |   9 +-
 src/ui/components/FaDropdown/index.vue        |   2 +-
 .../FaMaskScrollContainer/index.vue           | 105 -----
 .../FaModal/dialog/DialogContent.vue          |  11 +-
 .../FaModal/dialog/DialogHeader.vue           |   2 +-
 src/ui/components/FaModal/index.ts            |  25 +-
 src/ui/components/FaModal/index.vue           |  77 +++-
 src/ui/components/FaModal/use-draggable.ts    | 110 +++++
 src/ui/components/FaScrollArea/index.vue      | 116 +++++
 .../FaScrollArea/scroll-area/ScrollArea.vue   |  45 ++
 .../FaScrollArea/scroll-area/ScrollBar.vue    |  30 ++
 .../FaScrollArea/scroll-area/index.ts         |   2 +
 src/ui/components/FaSmartFixedBlock/index.vue |  17 +-
 src/ui/components/FaSystemInfo/index.vue      |  40 +-
 src/utils/composables/useTabbar.ts            |  22 +-
 src/views/index.vue                           |   7 +-
 uno.config.ts                                 |   4 +
 vite/plugins.ts                               |   1 +
 68 files changed, 1420 insertions(+), 702 deletions(-)
 create mode 100644 src/components/AccountForm/EditPasswordForm.vue
 delete mode 100644 src/slots/FreePosition/index.vue
 create mode 100644 src/slots/ToolbarEnd/profile.vue
 delete mode 100644 src/slots/ToolbarStart/index.vue
 create mode 100644 src/slots/index.ts
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuShortcut.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
 create mode 100644 src/ui/components/FaContextMenu/context-menu/index.ts
 create mode 100644 src/ui/components/FaContextMenu/index.vue
 delete mode 100755 src/ui/components/FaMaskScrollContainer/index.vue
 create mode 100644 src/ui/components/FaModal/use-draggable.ts
 create mode 100755 src/ui/components/FaScrollArea/index.vue
 create mode 100644 src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
 create mode 100644 src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
 create mode 100644 src/ui/components/FaScrollArea/scroll-area/index.ts

diff --git a/.npmrc b/.npmrc
index 330178cf7..aaac007ea 100755
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
 engine-strict=true
+verify-deps-before-run=prompt
diff --git a/package.json b/package.json
index bac815b7d..8e560cece 100755
--- a/package.json
+++ b/package.json
@@ -17,14 +17,12 @@
     "lint:tsc": "vue-tsc -b",
     "lint:eslint": "eslint . --cache --fix",
     "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
-    "postinstall": "simple-git-hooks",
     "preinstall": "npx only-allow pnpm",
+    "postinstall": "simple-git-hooks",
     "commit": "git cz",
     "release": "bumpp"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.23",
-    "@imengyu/vue3-context-menu": "^1.4.4",
     "@vee-validate/zod": "^4.15.0",
     "@vueuse/components": "^12.3.0",
     "@vueuse/core": "^12.3.0",
@@ -42,8 +40,6 @@
     "lucide-vue-next": "^0.469.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.10.1",
-    "overlayscrollbars-vue": "^0.5.9",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^8.2.0",
     "pinia": "^2.3.0",
@@ -69,6 +65,7 @@
     "@types/path-browserify": "^1.0.3",
     "@types/qs": "^6.9.17",
     "@unocss/eslint-plugin": "^0.65.3",
+    "@unocss/preset-legacy-compat": "^65.4.2",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1322dab47..e1f576086 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@headlessui/vue':
-        specifier: ^1.7.23
-        version: 1.7.23(vue@3.5.13(typescript@5.7.2))
-      '@imengyu/vue3-context-menu':
-        specifier: ^1.4.4
-        version: 1.4.4
       '@vee-validate/zod':
         specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.2))(zod@3.24.1)
@@ -65,12 +59,6 @@ importers:
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
-      overlayscrollbars:
-        specifier: ^2.10.1
-        version: 2.10.1
-      overlayscrollbars-vue:
-        specifier: ^0.5.9
-        version: 0.5.9(overlayscrollbars@2.10.1)(vue@3.5.13(typescript@5.7.2))
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
@@ -141,6 +129,9 @@ importers:
       '@unocss/eslint-plugin':
         specifier: ^0.65.3
         version: 0.65.3(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
+      '@unocss/preset-legacy-compat':
+        specifier: ^65.4.2
+        version: 65.4.2
       '@vitejs/plugin-legacy':
         specifier: ^6.0.0
         version: 6.0.0(terser@5.33.0)(vite@6.0.7(@types/node@22.5.5)(jiti@2.4.2)(sass-embedded@1.83.1)(sass@1.79.2)(terser@5.33.0)(tsx@4.19.2)(yaml@2.7.0))
@@ -1290,12 +1281,6 @@ packages:
   '@floating-ui/vue@1.1.5':
     resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
 
-  '@headlessui/vue@1.7.23':
-    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      vue: ^3.2.0
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1330,9 +1315,6 @@ packages:
     peerDependencies:
       vue: '>=3'
 
-  '@imengyu/vue3-context-menu@1.4.4':
-    resolution: {integrity: sha512-Zjh1BbrvcNbZvsWr9IJl9KQUomf50EeP2GT+mWk63sqatDZxG7ZFX1eltrwRyfSBr+SuFpMvdYv/yRxpBsyw6w==}
-
   '@inquirer/checkbox@4.0.4':
     resolution: {integrity: sha512-fYAKCAcGNMdfjL6hZTRUwkIByQ8EIZCXKrIQZH7XjADnN/xvRUhj8UdBbpC4zoUzvChhkSC/zRKaP/tDs3dZpg==}
     engines: {node: '>=18'}
@@ -1830,6 +1812,9 @@ packages:
   '@unocss/core@0.65.3':
     resolution: {integrity: sha512-xYkJ63lIadL6KqvGcaE2fFeLvo6rC1F+e+R9EFn0Aj0ArMRhiltZk8vvLFHP7iYjjdTdqDkAr/7IdrTosTo8Pg==}
 
+  '@unocss/core@65.4.2':
+    resolution: {integrity: sha512-VmXy5D25por+pt9LBlKZ3gk4rOE5ldm80MyVOEnLcpaFb9LqB0g/8qUU9/Dk3TSA+ZPeoGm53Juo0p8LMFIigA==}
+
   '@unocss/eslint-plugin@0.65.3':
     resolution: {integrity: sha512-l/mIp+IOF4TukjcHtxzpYW8gVlYwBpDlOrPYMVMcD8gAmxydBb111RkJPmJKjeDgYcoXDcjP8wyumQuM1L1vWA==}
     engines: {node: '>=14'}
@@ -1855,6 +1840,9 @@ packages:
   '@unocss/preset-icons@0.65.3':
     resolution: {integrity: sha512-3V4d5M+a2mTGnLjSsXyNL+/+nzjasdsJEJdXarLnj9Ez0KaBCvi32OjyoYrZUSMC5GCSreVNUOVBZKcxfdtitA==}
 
+  '@unocss/preset-legacy-compat@65.4.2':
+    resolution: {integrity: sha512-oo0XgPnToBe1zEm71blvNFKkhQ224diOlOU3wdRgEGYN//jrwD+8Dd/ZymHAefxEcBQsDaVCsmUlj9HWovhHcg==}
+
   '@unocss/preset-mini@0.56.5':
     resolution: {integrity: sha512-/KhlThhs1ilauM7MwRSpahLbIPZ5VGeGvaUsU8+ZlNT3sis4yoVYkPtR14tL2IT6jhOU05N/uu3aBj+1bP8GjQ==}
 
@@ -4590,15 +4578,6 @@ packages:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
 
-  overlayscrollbars-vue@0.5.9:
-    resolution: {integrity: sha512-zZEcsb6llnKaRwXTP44E4RrmwuH+eAi70mgCdiiPwcPBE2H99Vs2V0q7sWnEanqU3462ch38e4SmIMnuH906DQ==}
-    peerDependencies:
-      overlayscrollbars: ^2.0.0
-      vue: ^3.2.25
-
-  overlayscrollbars@2.10.1:
-    resolution: {integrity: sha512-BQoUAaw533ZbqBIE8LzKtsIiOKzB3pkhA6oS2ol+8THB5b2VO91myEXPlKrQqXQRYHG53f/169fFBNrGZ9tzag==}
-
   oxc-parser@0.40.1:
     resolution: {integrity: sha512-uN+yvg3rJX6SDtWq4unomdlhafjj0X82yT3DS64XGSG8+bNEBe4ktA95K/WRFH/0l7/pB2xcvo40tFfEqDx+hQ==}
 
@@ -7272,11 +7251,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@headlessui/vue@1.7.23(vue@3.5.13(typescript@5.7.2))':
-    dependencies:
-      '@tanstack/vue-virtual': 3.10.8(vue@3.5.13(typescript@5.7.2))
-      vue: 3.5.13(typescript@5.7.2)
-
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -7315,8 +7289,6 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.13(typescript@5.7.2)
 
-  '@imengyu/vue3-context-menu@1.4.4': {}
-
   '@inquirer/checkbox@4.0.4(@types/node@22.5.5)':
     dependencies:
       '@inquirer/core': 10.1.2(@types/node@22.5.5)
@@ -7822,6 +7794,8 @@ snapshots:
 
   '@unocss/core@0.65.3': {}
 
+  '@unocss/core@65.4.2': {}
+
   '@unocss/eslint-plugin@0.65.3(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)':
     dependencies:
       '@typescript-eslint/utils': 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
@@ -7875,6 +7849,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@unocss/preset-legacy-compat@65.4.2':
+    dependencies:
+      '@unocss/core': 65.4.2
+
   '@unocss/preset-mini@0.56.5':
     dependencies:
       '@unocss/core': 0.56.5
@@ -11087,13 +11065,6 @@ snapshots:
 
   os-tmpdir@1.0.2: {}
 
-  overlayscrollbars-vue@0.5.9(overlayscrollbars@2.10.1)(vue@3.5.13(typescript@5.7.2)):
-    dependencies:
-      overlayscrollbars: 2.10.1
-      vue: 3.5.13(typescript@5.7.2)
-
-  overlayscrollbars@2.10.1: {}
-
   oxc-parser@0.40.1:
     dependencies:
       '@oxc-project/types': 0.40.1
diff --git a/src/App.vue b/src/App.vue
index b64ca507d..7b411b49f 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
 
diff --git a/src/api/modules/user.ts b/src/api/modules/user.ts
index b9fd2b25a..b9e032cc0 100755
--- a/src/api/modules/user.ts
+++ b/src/api/modules/user.ts
@@ -17,7 +17,7 @@ export default {
   // 修改密码
   passwordEdit: (data: {
     password: string
-    newpassword: string
+    newPassword: string
   }) => api.post('user/password/edit', data, {
     baseURL: '/mock/',
   }),
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 65e33b2b0..c301d982c 100755
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -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%);
-}
diff --git a/src/assets/styles/nprogress.css b/src/assets/styles/nprogress.css
index 7b33ea124..ffa5571c7 100755
--- a/src/assets/styles/nprogress.css
+++ b/src/assets/styles/nprogress.css
@@ -5,7 +5,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 2000;
+    z-index: 3000;
     width: 100%;
     height: 2px;
     background: hsl(var(--primary));
diff --git a/src/components/AccountForm/EditPasswordForm.vue b/src/components/AccountForm/EditPasswordForm.vue
new file mode 100644
index 000000000..d6dfa1dc1
--- /dev/null
+++ b/src/components/AccountForm/EditPasswordForm.vue
@@ -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>
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index 7f50582f0..18c637829 100755
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -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" />
         复制配置
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 173e77626..dcfbf1bd8 100755
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -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 {
diff --git a/src/layouts/components/HotkeysIntro/index.vue b/src/layouts/components/HotkeysIntro/index.vue
index 492a8db17..d8a70e3ae 100755
--- a/src/layouts/components/HotkeysIntro/index.vue
+++ b/src/layouts/components/HotkeysIntro/index.vue
@@ -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>
diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
index 9d4bfdb5a..e26c87082 100755
--- a/src/layouts/components/MainSidebar/index.vue
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -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>
diff --git a/src/layouts/components/Menu/sub.vue b/src/layouts/components/Menu/sub.vue
index ab8b85606..779584008 100644
--- a/src/layouts/components/Menu/sub.vue
+++ b/src/layouts/components/Menu/sub.vue
@@ -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>
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index 731817bb9..a670ae408 100755
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -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>
 
diff --git a/src/layouts/components/Topbar/Tabbar/index.vue b/src/layouts/components/Topbar/Tabbar/index.vue
index 1b62298fb..18b9a7236 100644
--- a/src/layouts/components/Topbar/Tabbar/index.vue
+++ b/src/layouts/components/Topbar/Tabbar/index.vue
@@ -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>
-              <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 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 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;
-
-          &::before,
-          &::after {
-            content: none;
-          }
 
-          & + .tab .tab-dividers::before {
-            opacity: 0;
-          }
+        .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;
 
-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-hover-color);
+          &:not(.actived):hover {
+            z-index: 3;
+
+            &::before,
+            &::after {
+              content: none;
             }
-          }
 
-          .tab-background {
-            background-color: var(--g-tabbar-tab-hover-bg);
-          }
-        }
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
 
-        * {
-          user-select: none;
-        }
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-hover-color);
+              }
+            }
 
-        & + .tab:hover,
-        & + .tab.actived {
-          .tab-dividers::before {
-            opacity: 0;
+            .tab-background {
+              background-color: var(--g-tabbar-tab-hover-bg);
+            }
           }
-        }
-
-        &.actived {
-          z-index: 5;
 
-          &::before,
-          &::after {
-            content: none;
+          * {
+            user-select: none;
           }
 
-          & + .tab .tab-dividers::before {
-            opacity: 0;
+          & + .tab:hover,
+          & + .tab.actived {
+            .tab-dividers::before {
+              opacity: 0;
+            }
           }
 
-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-active-color);
+          &.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-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%);
+
+            &::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;
+            }
           }
-        }
 
-        .tab-dividers {
-          position: absolute;
-          top: 50%;
-          right: -1px;
-          left: -1px;
-          z-index: 0;
-          height: 14px;
-          transform: translateY(-50%);
+          &:first-child .tab-dividers::before {
+            opacity: 0;
+          }
 
-          &::before {
+          .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;
-
-            &:has(+ .action-icon) {
-              margin-right: 28px;
+            pointer-events: all;
+
+            .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)]";
+            }
           }
         }
       }
diff --git a/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue b/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
index 4303e3fc2..834fc004a 100644
--- a/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
@@ -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>
diff --git a/src/layouts/components/Topbar/Toolbar/NavSearch/search.vue b/src/layouts/components/Topbar/Toolbar/NavSearch/search.vue
index 041cabeab..ef9a6a957 100644
--- a/src/layouts/components/Topbar/Toolbar/NavSearch/search.vue
+++ b/src/layouts/components/Topbar/Toolbar/NavSearch/search.vue
@@ -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.breadcrumb.some((b) => {
-      if (typeof b.title === 'function') {
-        if (b.title().includes(searchInput.value)) {
-          return true
-        }
+      if (item.path.includes(searchInput.value)) {
+        flag = true
       }
-      else {
-        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
+          }
+        }
+        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>
+    </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>
-    </Dialog>
-  </TransitionRoot>
+    </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>
diff --git a/src/layouts/components/Topbar/Toolbar/leftSide.vue b/src/layouts/components/Topbar/Toolbar/leftSide.vue
index 5543e4291..76980d228 100644
--- a/src/layouts/components/Topbar/Toolbar/leftSide.vue
+++ b/src/layouts/components/Topbar/Toolbar/leftSide.vue
@@ -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>
diff --git a/src/layouts/components/Topbar/Toolbar/rightSide.vue b/src/layouts/components/Topbar/Toolbar/rightSide.vue
index f735d8148..30fbed2d9 100644
--- a/src/layouts/components/Topbar/Toolbar/rightSide.vue
+++ b/src/layouts/components/Topbar/Toolbar/rightSide.vue
@@ -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>
diff --git a/src/layouts/components/Topbar/index.vue b/src/layouts/components/Topbar/index.vue
index af4076797..38b782b8b 100755
--- a/src/layouts/components/Topbar/index.vue
+++ b/src/layouts/components/Topbar/index.vue
@@ -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;
 
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index b9a246768..54bf33206 100755
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -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>
 
diff --git a/src/main.ts b/src/main.ts
index 852c8a5a5..d9095a47e 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -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'
diff --git a/src/settings.ts b/src/settings.ts
index ab01111b3..298116aa7 100755
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -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>
diff --git a/src/slots/FreePosition/index.vue b/src/slots/FreePosition/index.vue
deleted file mode 100644
index 04d85e1bd..000000000
--- a/src/slots/FreePosition/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/src/slots/ToolbarEnd/index.vue b/src/slots/ToolbarEnd/index.vue
index 47c295f7a..ea630cbdc 100644
--- a/src/slots/ToolbarEnd/index.vue
+++ b/src/slots/ToolbarEnd/index.vue
@@ -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>
diff --git a/src/slots/ToolbarEnd/profile.vue b/src/slots/ToolbarEnd/profile.vue
new file mode 100644
index 000000000..93968c30b
--- /dev/null
+++ b/src/slots/ToolbarEnd/profile.vue
@@ -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>
diff --git a/src/slots/ToolbarStart/index.vue b/src/slots/ToolbarStart/index.vue
deleted file mode 100644
index 04d85e1bd..000000000
--- a/src/slots/ToolbarStart/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/src/slots/index.ts b/src/slots/index.ts
new file mode 100644
index 000000000..4ac72ccc8
--- /dev/null
+++ b/src/slots/index.ts
@@ -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)
+}
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 555b2d044..e8c4de93c 100755
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -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 {
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index e029f88ff..f8059e908 100755
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -90,7 +90,7 @@ const useUserStore = defineStore(
     // 修改密码
     async function editPassword(data: {
       password: string
-      newpassword: string
+      newPassword: string
     }) {
       await apiUser.passwordEdit(data)
     }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 47a92fa0c..ece1c57da 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -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']
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index e819eaabf..2ace492c7 100755
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -97,7 +97,7 @@ declare namespace Settings {
      * 主导航点击模式
      * @默认值 `'switch'` 切换
      * @可选值 `'jump'` 跳转
-     * @可选值 `'smart'` 智能选择
+     * @可选值 `'smart'` 智能选择，判断次导航是否只有且只有一个可访问的菜单进行切换或跳转操作
      */
     mainMenuClickMode?: 'switch' | 'jump' | 'smart'
     /**
diff --git a/src/types/shims.d.ts b/src/types/shims.d.ts
index fdabb3e42..76b7faf59 100755
--- a/src/types/shims.d.ts
+++ b/src/types/shims.d.ts
@@ -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
 }
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
new file mode 100644
index 000000000..363e9c6b2
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 000000000..442662d9d
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
new file mode 100644
index 000000000..c4f896f33
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
new file mode 100644
index 000000000..b7458d771
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
new file mode 100644
index 000000000..84aec2638
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
new file mode 100644
index 000000000..33efb2441
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
new file mode 100644
index 000000000..73dc714b2
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 000000000..33273a743
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 000000000..9cf6879d3
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 000000000..1459a5f8f
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuShortcut.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 000000000..ab793093f
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuShortcut.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
new file mode 100644
index 000000000..7abc36038
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 000000000..f18a434b0
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 000000000..96d488e97
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 000000000..22e417b52
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
@@ -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>
diff --git a/src/ui/components/FaContextMenu/context-menu/index.ts b/src/ui/components/FaContextMenu/context-menu/index.ts
new file mode 100644
index 000000000..3ed59e63e
--- /dev/null
+++ b/src/ui/components/FaContextMenu/context-menu/index.ts
@@ -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'
diff --git a/src/ui/components/FaContextMenu/index.vue b/src/ui/components/FaContextMenu/index.vue
new file mode 100644
index 000000000..03ac50cc1
--- /dev/null
+++ b/src/ui/components/FaContextMenu/index.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>
diff --git a/src/ui/components/FaDrawer/index.vue b/src/ui/components/FaDrawer/index.vue
index 85bddd60c..9c02354f0 100644
--- a/src/ui/components/FaDrawer/index.vue
+++ b/src/ui/components/FaDrawer/index.vue
@@ -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>
diff --git a/src/ui/components/FaDropdown/index.vue b/src/ui/components/FaDropdown/index.vue
index 7e01ddb09..3c1550f2b 100644
--- a/src/ui/components/FaDropdown/index.vue
+++ b/src/ui/components/FaDropdown/index.vue
@@ -50,7 +50,7 @@ function handleItemClick(item: { handle?: () => void }) {
 </script>
 
 <template>
-  <DropdownMenu>
+  <DropdownMenu :modal="false">
     <DropdownMenuTrigger as-child>
       <slot />
     </DropdownMenuTrigger>
diff --git a/src/ui/components/FaMaskScrollContainer/index.vue b/src/ui/components/FaMaskScrollContainer/index.vue
deleted file mode 100755
index d464fa0cc..000000000
--- a/src/ui/components/FaMaskScrollContainer/index.vue
+++ /dev/null
@@ -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>
diff --git a/src/ui/components/FaModal/dialog/DialogContent.vue b/src/ui/components/FaModal/dialog/DialogContent.vue
index 5fb2f6e2e..53af6cc04 100644
--- a/src/ui/components/FaModal/dialog/DialogContent.vue
+++ b/src/ui/components/FaModal/dialog/DialogContent.vue
@@ -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" />
diff --git a/src/ui/components/FaModal/dialog/DialogHeader.vue b/src/ui/components/FaModal/dialog/DialogHeader.vue
index dee30d9a0..be92717e8 100644
--- a/src/ui/components/FaModal/dialog/DialogHeader.vue
+++ b/src/ui/components/FaModal/dialog/DialogHeader.vue
@@ -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>
diff --git a/src/ui/components/FaModal/index.ts b/src/ui/components/FaModal/index.ts
index 5a30a8660..ec4779297 100644
--- a/src/ui/components/FaModal/index.ts
+++ b/src/ui/components/FaModal/index.ts
@@ -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',
diff --git a/src/ui/components/FaModal/index.vue b/src/ui/components/FaModal/index.vue
index abbff0cf1..f500d8b34 100644
--- a/src/ui/components/FaModal/index.vue
+++ b/src/ui/components/FaModal/index.vue
@@ -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">
diff --git a/src/ui/components/FaModal/use-draggable.ts b/src/ui/components/FaModal/use-draggable.ts
new file mode 100644
index 000000000..3438b6a4b
--- /dev/null
+++ b/src/ui/components/FaModal/use-draggable.ts
@@ -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,
+  }
+}
diff --git a/src/ui/components/FaScrollArea/index.vue b/src/ui/components/FaScrollArea/index.vue
new file mode 100755
index 000000000..81341e22c
--- /dev/null
+++ b/src/ui/components/FaScrollArea/index.vue
@@ -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>
diff --git a/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
new file mode 100644
index 000000000..04a642719
--- /dev/null
+++ b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
@@ -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>
diff --git a/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue b/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
new file mode 100644
index 000000000..e1d039b88
--- /dev/null
+++ b/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
@@ -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>
diff --git a/src/ui/components/FaScrollArea/scroll-area/index.ts b/src/ui/components/FaScrollArea/scroll-area/index.ts
new file mode 100644
index 000000000..2bd4fae5d
--- /dev/null
+++ b/src/ui/components/FaScrollArea/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/src/ui/components/FaSmartFixedBlock/index.vue b/src/ui/components/FaSmartFixedBlock/index.vue
index 68d15093b..82ad9d62c 100644
--- a/src/ui/components/FaSmartFixedBlock/index.vue
+++ b/src/ui/components/FaSmartFixedBlock/index.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>
diff --git a/src/ui/components/FaSystemInfo/index.vue b/src/ui/components/FaSystemInfo/index.vue
index 286a4307b..87c2f8d20 100755
--- a/src/ui/components/FaSystemInfo/index.vue
+++ b/src/ui/components/FaSystemInfo/index.vue
@@ -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 }}
diff --git a/src/utils/composables/useTabbar.ts b/src/utils/composables/useTabbar.ts
index 228083f3f..3104c3741 100755
--- a/src/utils/composables/useTabbar.ts
+++ b/src/utils/composables/useTabbar.ts
@@ -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()) {
diff --git a/src/views/index.vue b/src/views/index.vue
index db70442e3..27d0fd925 100755
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -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>
diff --git a/uno.config.ts b/uno.config.ts
index 9cd9075d7..4d22daeec 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,6 +1,7 @@
 import type { PresetOrFactory } from '@unocss/core'
 import type { Theme } from 'unocss/preset-uno'
 import { entriesToCss, toArray } from '@unocss/core'
+import presetLegacyCompat from '@unocss/preset-legacy-compat'
 import {
   defineConfig,
   presetAttributify,
@@ -115,6 +116,9 @@ export default defineConfig<Theme>({
     }),
     presetTypography(),
     presetScrollbar(),
+    presetLegacyCompat({
+      legacyColorSpace: true,
+    }) as PresetOrFactory<Theme>,
   ],
   transformers: [
     transformerDirectives(),
diff --git a/vite/plugins.ts b/vite/plugins.ts
index 0fef2b656..e3e52a83a 100644
--- a/vite/plugins.ts
+++ b/vite/plugins.ts
@@ -31,6 +31,7 @@ export default function createVitePlugins(mode: string, isBuild = false) {
       modernPolyfills: [
         'es.array.at',
         'es.array.find-last',
+        'es.object.has-own',
       ],
     }),