chore: release v5.6.0

README.md

@@ -37,8 +37,8 @@
 
 - `main` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
 - `example` Vue3 版本演示源码分支，同线上演示站，包含大量示例，可用于参考学习
-- `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
-- `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
+- ~~`vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发~~（停止维护）
+- ~~`vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习~~（停止维护）
 
 ## 预览
 

eslint.config.js

@@ -6,7 +6,6 @@ export default antfu(
     ignores: [
       'public',
       'dist*',
-      'src/ui/shadcn/ui',
     ],
   },
   {

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
     <link rel="stylesheet" href="/browser_upgrade/index.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
     <meta http-equiv="Expires" content="0">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Cache-control" content="no-cache">

loading.html

@@ -101,7 +101,7 @@
   height: 100%;
   color: var(--rainbow-color);
   user-select: none;
-  background-color: snow;
+  background-color: hsl(var(--background));
 }
 
 .loading-container *::before,

package.json

@@ -1,8 +1,9 @@
 {
   "type": "module",
-  "version": "5.4.0",
+  "version": "5.6.0",
+  "packageManager": "pnpm@10.14.0",
   "engines": {
-    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
     "dev": "vite",
@@ -12,7 +13,7 @@
     "serve:test": "http-server ./dist-test -o",
     "svgo": "svgo -f src/assets/icons",
     "new": "plop",
-    "generate:icons": "esno ./scripts/generate.icons.ts",
+    "generate:icons": "tsx ./scripts/generate.icons.ts",
     "lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
     "lint:tsc": "vue-tsc -b",
     "lint:eslint": "eslint . --cache --fix",
@@ -24,95 +25,96 @@
     "release": "bumpp"
   },
   "dependencies": {
-    "@vee-validate/zod": "^4.15.0",
-    "@vueuse/components": "^13.3.0",
-    "@vueuse/core": "^13.3.0",
-    "@vueuse/integrations": "^13.3.0",
-    "axios": "^1.9.0",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueuse/components": "^13.6.0",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/integrations": "^13.6.0",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "defu": "^6.1.4",
-    "disable-devtool": "^0.3.8",
-    "element-plus": "^2.9.11",
-    "eruda": "^3.4.1",
-    "es-toolkit": "^1.38.0",
-    "hotkeys-js": "^3.13.10",
-    "lucide-vue-next": "^0.511.0",
+    "disable-devtool": "^0.3.9",
+    "element-plus": "^2.10.6",
+    "eruda": "^3.4.3",
+    "es-toolkit": "^1.39.8",
+    "filesize": "^11.0.2",
+    "hotkeys-js": "^3.13.15",
+    "lucide-vue-next": "^0.539.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^8.2.0",
-    "pinia": "^3.0.2",
+    "pinia": "^3.0.3",
     "qs": "^6.14.0",
-    "reka-ui": "^2.3.0",
+    "reka-ui": "^2.4.1",
     "scule": "^1.3.0",
-    "tailwind-merge": "^3.3.0",
-    "ua-parser-js": "^2.0.3",
+    "tailwind-merge": "^3.3.1",
+    "ua-parser-js": "^2.0.4",
     "vconsole": "^3.15.1",
-    "vee-validate": "^4.15.0",
-    "vue": "^3.5.16",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.18",
     "vue-router": "^4.5.1",
-    "vue-sonner": "^2.0.0",
-    "zod": "^3.25.41"
+    "vue-sonner": "^2.0.2",
+    "zod": "^4.0.17"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.13.2",
-    "@faker-js/faker": "^9.8.0",
-    "@iconify/json": "^2.2.342",
+    "@antfu/eslint-config": "^5.2.0",
+    "@clack/prompts": "^0.11.0",
+    "@faker-js/faker": "^9.9.0",
+    "@iconify/json": "^2.2.367",
     "@iconify/vue": "^5.0.0",
-    "@stylistic/stylelint-config": "^2.0.0",
+    "@stylistic/stylelint-config": "^3.0.1",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@types/qs": "^6.14.0",
-    "@unocss/eslint-plugin": "^66.1.2",
-    "@unocss/preset-legacy-compat": "^66.1.2",
-    "@vitejs/plugin-legacy": "^6.1.1",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "@unocss/eslint-plugin": "^66.4.2",
+    "@unocss/preset-legacy-compat": "^66.4.2",
+    "@vitejs/plugin-legacy": "^7.2.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.0.1",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "boxen": "^8.0.1",
-    "bumpp": "^10.1.1",
-    "cz-git": "^1.11.1",
-    "eslint": "^9.27.0",
-    "esno": "^4.8.0",
-    "fs-extra": "^11.3.0",
+    "bumpp": "^10.2.2",
+    "cz-git": "^1.12.0",
+    "eslint": "^9.33.0",
+    "fs-extra": "^11.3.1",
     "http-server": "^14.1.1",
-    "inquirer": "^12.6.3",
-    "lint-staged": "^16.1.0",
+    "lint-staged": "^16.1.5",
     "npm-run-all2": "^8.0.4",
     "picocolors": "^1.1.1",
     "plop": "^4.0.1",
-    "postcss": "^8.5.4",
+    "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "sass-embedded": "^1.89.0",
-    "simple-git-hooks": "^2.13.0",
-    "stylelint": "^16.20.0",
-    "stylelint-config-recess-order": "^6.0.0",
+    "sass-embedded": "^1.90.0",
+    "simple-git-hooks": "^2.13.1",
+    "stylelint": "^16.23.1",
+    "stylelint-config-recess-order": "^7.1.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^6.12.0",
-    "svgo": "^3.3.2",
+    "stylelint-scss": "^6.12.1",
+    "svgo": "^4.0.0",
     "taze": "^19.1.0",
-    "typescript": "^5.8.3",
-    "unocss": "^66.1.2",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
+    "unocss": "^66.4.2",
     "unocss-preset-animations": "^1.2.1",
-    "unplugin-auto-import": "^19.3.0",
-    "unplugin-turbo-console": "^2.1.3",
-    "unplugin-vue-components": "^28.7.0",
-    "vite": "^6.3.5",
-    "vite-plugin-app-loading": "^0.3.1",
-    "vite-plugin-archiver": "^0.1.2",
+    "unplugin-auto-import": "^20.0.0",
+    "unplugin-turbo-console": "^2.2.0",
+    "unplugin-vue-components": "^29.0.0",
+    "vite": "^7.1.1",
+    "vite-plugin-app-loading": "^0.4.0",
+    "vite-plugin-archiver": "^0.2.0",
     "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-compression2": "^1.4.0",
+    "vite-plugin-compression2": "^2.2.0",
     "vite-plugin-env-parse": "^1.0.15",
     "vite-plugin-fake-server": "^2.2.0",
-    "vite-plugin-pages": "^0.33.0",
+    "vite-plugin-pages": "^0.33.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^7.7.6",
+    "vite-plugin-vue-devtools": "^8.0.0",
     "vite-plugin-vue-meta-layouts": "^0.5.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.5"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

plop-templates/store/index.hbs

@@ -1,4 +1,4 @@
-const use{{ properCase name }}Store = defineStore(
+export const use{{ properCase name }}Store = defineStore(
   // 唯一ID
   '{{ camelCase name }}',
   () => {
@@ -9,5 +9,3 @@ const use{{ properCase name }}Store = defineStore(
     }
   },
 )
-
-export default use{{ properCase name }}Store

scripts/generate.icons.ts

@@ -1,8 +1,8 @@
-import { exec } from 'node:child_process'
+import { spawn } from 'node:child_process'
 import path from 'node:path'
 import process from 'node:process'
+import * as p from '@clack/prompts'
 import { lookupCollection, lookupCollections } from '@iconify/json'
-import { checkbox, confirm } from '@inquirer/prompts'
 import fs from 'fs-extra'
 
 // 拿到全部图标集的原始数据
@@ -11,32 +11,45 @@ const raw = await lookupCollections()
 let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
 lastChoose = JSON.parse(lastChoose)
 
-// 取出可使用的图标集数据用于 inquirer 选择，并按名称排序
+// 取出可使用的图标集数据用于选择，并按名称排序
 const collections = Object.entries(raw).map(([id, item]) => ({
   ...item,
   id,
 })).sort((a, b) => a.name.localeCompare(b.name))
 
+p.intro('图标集生成工具')
+
 /**
  * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
- * (1) src/iconify/index.json    记录用户 inquirer 的交互信息
+ * (1) src/iconify/index.json    记录用户交互信息
  * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
  * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
  */
-const answers = {
-  collections: await checkbox({
-    message: '请选择需要生成的图标集',
-    choices: collections.map(item => ({
-      name: `${item.name} (${item.total} icons)`,
-      value: item.id,
-      checked: lastChoose.collections.includes(item.id),
-    })),
-  }),
-  isOfflineUse: await confirm({
-    message: '是否需要离线使用',
-    default: false,
-  }),
-}
+const answers = await p.group(
+  {
+    collections: () =>
+      p.multiselect({
+        message: '请选择需要生成的图标集',
+        options: collections.map(item => ({
+          label: item.name,
+          value: item.id,
+          hint: `${item.total} 个图标`,
+        })),
+        initialValues: lastChoose.collections,
+      }),
+    isOfflineUse: () =>
+      p.confirm({
+        message: '是否需要离线使用',
+        initialValue: false,
+      }),
+  },
+  {
+    onCancel: () => {
+      p.cancel('操作已取消')
+      process.exit(0)
+    },
+  },
+)
 
 await fs.writeJSON(
   path.resolve(process.cwd(), 'src/iconify/index.json'),
@@ -72,4 +85,21 @@ await fs.writeJSON(
   collectionsMeta,
 )
 
-exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')
+// 使用 spawn 运行 eslint
+const eslint = spawn('eslint', ['src/iconify/data.json', 'src/iconify/index.json', '--cache', '--fix'], {
+  stdio: 'inherit',
+  shell: true,
+})
+
+eslint.on('error', (err) => {
+  p.log.error(`ESLint 执行失败: ${err.message}`)
+  process.exit(1)
+})
+
+eslint.on('close', (code) => {
+  if (code !== 0) {
+    p.log.error(`ESLint 执行失败，退出码: ${code}`)
+    process.exit(code)
+  }
+  p.outro('图标集生成完成！')
+})

src/App.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import { ua } from '@/utils/ua'
 import Provider from './ui/provider/index.vue'
 

src/api/index.ts

@@ -1,7 +1,6 @@
 import axios from 'axios'
 // import qs from 'qs'
 import { toast } from 'vue-sonner'
-import useUserStore from '@/store/modules/user'
 
 // 请求重试配置
 const MAX_RETRY_COUNT = 3 // 最大重试次数
@@ -71,42 +70,41 @@ api.interceptors.response.use(
      * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
      * 请求出错时 error 会返回错误信息
      */
-    if (response.data.status === 1) {
-      if (response.data.error !== '') {
-        toast.warning('Warning', {
-          description: response.data.error,
-        })
-        return Promise.reject(response.data)
+    if (typeof response.data === 'object') {
+      if (response.data.status === 1) {
+        if (response.data.error !== '') {
+          toast.warning('Warning', {
+            description: response.data.error,
+          })
+          return Promise.reject(response.data)
+        }
       }
+      else {
+        useUserStore().requestLogout()
+      }
+      return Promise.resolve(response.data)
     }
     else {
-      useUserStore().requestLogout()
+      return Promise.reject(response.data)
     }
-    return Promise.resolve(response.data)
   },
   async (error) => {
     // 获取请求配置
     const config = error.config
-
     // 如果配置不存在或未启用重试，则直接处理错误
     if (!config || !config.retry) {
       return handleError(error)
     }
-
     // 设置重试次数
     config.retryCount = config.retryCount || 0
-
     // 判断是否超过重试次数
     if (config.retryCount >= MAX_RETRY_COUNT) {
       return handleError(error)
     }
-
     // 重试次数自增
     config.retryCount += 1
-
     // 延迟重试
     await new Promise(resolve => setTimeout(resolve, RETRY_DELAY))
-
     // 重新发起请求
     return api(config)
   },

src/assets/icons/toolbar-collapse.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667zm-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666zm0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666H516.267zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667zm-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667m-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666m0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667m-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266"/></svg>

src/assets/styles/globals.css

@@ -1,5 +1,7 @@
 /* 页面布局 CSS 变量 */
 :root {
+  color-scheme: light;
+
   /* 头部高度 */
   --g-header-height: 60px;
 
@@ -16,44 +18,45 @@
 
   /* 工具栏高度 */
   --g-toolbar-height: 50px;
+
+  /* 滚动条颜色 */
+  --scrollbar-color: 240 5.9% 90%;
+
+  &.dark {
+    color-scheme: dark;
+
+    --scrollbar-color: 240 3.7% 15.9%;
+  }
 }
 
 /* 明暗模式 CSS 变量 */
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
-  color-scheme: light;
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
 
-  &::view-transition-old(root),
-  &::view-transition-new(root) {
-    mix-blend-mode: normal;
-    animation: none;
-  }
+::view-transition-old(root) {
+  z-index: 0;
+}
 
+::view-transition-new(root) {
+  z-index: 1;
+}
+
+.dark {
   &::view-transition-old(root) {
     z-index: 1;
   }
 
   &::view-transition-new(root) {
-    z-index: 9999;
-  }
-
-  &.dark {
-    color-scheme: dark;
-
-    &::view-transition-old(root) {
-      z-index: 9999;
-    }
-
-    &::view-transition-new(root) {
-      z-index: 1;
-    }
+    z-index: 0;
   }
 }
 
 * {
-  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-color: hsl(var(--scrollbar-color)) transparent;
   scrollbar-width: thin;
-  border-color: hsl(var(--border));
 }
 
 html,
@@ -64,9 +67,6 @@ body {
 body {
   box-sizing: border-box;
   margin: 0;
-  font-family: var(--font-family);
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
   -webkit-tap-highlight-color: transparent;
 }
 

src/components/AccountButton/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import Profile from './profile.vue'
@@ -67,7 +65,7 @@ const isProfileShow = ref(false)
       <FaAvatar :src="userStore.avatar" :class="cn('size-6', { 'size-full': onlyAvatar })">
         <FaIcon name="i-carbon:user-avatar-filled" class="size-6 text-secondary-foreground/50" />
       </FaAvatar>
-      <div v-if="settingsStore.mode === 'pc' && !onlyAvatar" class="min-w-0 flex-center-between flex-1 gap-2">
+      <div v-if="!onlyAvatar" class="min-w-0 flex-center-between flex-1 gap-2">
         <div class="flex-1 truncate text-start">
           {{ userStore.account }}
         </div>
@@ -75,7 +73,7 @@ const isProfileShow = ref(false)
       </div>
     </FaButton>
   </FaDropdown>
-  <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px min-w-600px overflow-hidden" content-class="min-h-full p-0 flex">
+  <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px max-w-xl overflow-hidden" content-class="min-h-full p-0 flex">
     <Profile />
   </FaModal>
 </template>

src/components/AccountButton/profile.vue

@@ -16,8 +16,8 @@ const tabs = ref([
 
 <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="fixed right-0 top-0 z-1 flex flex-row overflow-auto border-b border-e bg-background md:(inset-s-0 bottom-0 h-full w-40 flex-col)">
+      <div v-for="(tab, index) in tabs" :key="index" class="flex-shrink-0 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>
@@ -26,7 +26,7 @@ const tabs = ref([
         </div>
       </div>
     </div>
-    <div class="ms-40 min-h-full flex-col-center p-10">
+    <div class="min-h-full flex-col-center p-10 pt-20 md:(ms-40 pt-10)">
       <div v-if="active === 0">
         请开发者自行扩展
       </div>

src/components/AccountForm/EditPasswordForm.vue

@@ -3,7 +3,6 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
 import * as z from 'zod'
-import useUserStore from '@/store/modules/user'
 import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({

src/components/AccountForm/LoginForm.vue

@@ -2,7 +2,6 @@
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import useUserStore from '@/store/modules/user'
 import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({

src/components/FileUpload/index.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import type { UploadProps, UploadUserFile } from 'element-plus'
-import { toast } from 'vue-sonner'
-
-defineOptions({
-  name: 'FileUpload',
-})
-
-const props = withDefaults(
-  defineProps<{
-    action: UploadProps['action']
-    headers?: UploadProps['headers']
-    data?: UploadProps['data']
-    name?: UploadProps['name']
-    size?: number
-    max?: number
-    files?: UploadUserFile[]
-    notip?: boolean
-    ext?: string[]
-    httpRequest?: UploadProps['httpRequest']
-  }>(),
-  {
-    name: 'file',
-    size: 2,
-    max: 3,
-    files: () => [],
-    notip: false,
-    ext: () => ['zip', 'rar'],
-  },
-)
-
-const emits = defineEmits<{
-  onSuccess: [
-    res: any,
-    file: UploadUserFile,
-    fileList: UploadUserFile[],
-  ]
-  onRemove: [
-    file: UploadUserFile,
-    fileList: UploadUserFile[],
-  ]
-}>()
-
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-  const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1) ?? ''
-  const isTypeOk = props.ext.includes(fileExt)
-  const isSizeOk = file.size / 1024 / 1024 < props.size
-  if (!isTypeOk) {
-    toast.error(`上传文件只支持 ${props.ext.join(' / ')} 格式！`)
-  }
-  if (!isSizeOk) {
-    toast.error(`上传文件大小不能超过 ${props.size}MB！`)
-  }
-  return isTypeOk && isSizeOk
-}
-
-const onExceed: UploadProps['onExceed'] = () => {
-  toast.warning('文件上传超过限制')
-}
-
-const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
-  emits('onSuccess', res, file, fileList)
-}
-
-const onRemove: UploadProps['onRemove'] = (file, fileList) => {
-  emits('onRemove', file, fileList)
-}
-
-const onPreview: UploadProps['onPreview'] = (e) => {
-  const getBlob = (url: string) => new Promise((resolve) => {
-    const xhr = new XMLHttpRequest()
-    xhr.open('GET', url, true)
-    xhr.responseType = 'blob'
-    xhr.onload = () => {
-      if (xhr.status === 200) {
-        resolve(xhr.response)
-      }
-    }
-    xhr.send()
-  })
-  getBlob(e.url!).then((blob: any) => {
-    const a = document.createElement('a')
-    const url = window.URL.createObjectURL(blob)
-    const event = new MouseEvent('click')
-    a.target = '_blank'
-    a.download = e.name
-    a.href = url
-    a.dispatchEvent(event)
-  })
-}
-</script>
-
-<template>
-  <ElUpload
-    :headers="headers"
-    :action="action"
-    :data="data"
-    :name="name"
-    :before-upload="beforeUpload"
-    :on-exceed="onExceed"
-    :on-success="onSuccess"
-    :on-remove="onRemove"
-    :on-preview="onPreview"
-    :http-request="httpRequest"
-    :file-list="files"
-    :limit="max"
-    drag
-  >
-    <div class="slot">
-      <FaIcon name="i-ep:upload-filled" class="el-icon--upload" />
-      <div class="el-upload__text">
-        将文件拖到此处，或<em>点击上传</em>
-      </div>
-    </div>
-    <template #tip>
-      <div v-if="!notip" class="el-upload__tip">
-        <div style="display: inline-block;">
-          <ElAlert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
-        </div>
-      </div>
-    </template>
-  </ElUpload>
-</template>
-
-<style scoped>
-:deep(.el-upload.is-drag) {
-  display: inline-block;
-
-  .el-upload-dragger {
-    padding: 0;
-  }
-
-  &.is-dragover {
-    border-width: 1px;
-  }
-
-  .slot {
-    width: 300px;
-    padding: 40px 0;
-  }
-}
-</style>

src/components/ImagePreview/index.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'ImagePreview',
-})
-
-const props = withDefaults(
-  defineProps<{
-    src: string
-    width?: number | string
-    height?: number | string
-  }>(),
-  {
-    width: 200,
-    height: 200,
-  },
-)
-
-const realWidth = computed(() => {
-  return typeof props.width === 'string' ? props.width : `${props.width}px`
-})
-
-const realHeight = computed(() => {
-  return typeof props.height === 'string' ? props.height : `${props.height}px`
-})
-</script>
-
-<template>
-  <ElImage :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
-    <template #error>
-      <div class="image-slot">
-        <FaIcon name="i-ph:image-broken-duotone" />
-      </div>
-    </template>
-  </ElImage>
-</template>
-
-<style scoped>
-.el-image {
-  background-color: var(--el-fill-color);
-  border-radius: 5px;
-  box-shadow: var(--el-box-shadow-light);
-  transition: background-color 0.3s, var(--el-transition-box-shadow);
-
-  :deep(.el-image__inner) {
-    cursor: pointer;
-    transition: all 0.3s;
-
-    &:hover {
-      transform: scale(1.2);
-    }
-  }
-
-  :deep(.image-slot) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    font-size: 30px;
-    color: #909399;
-  }
-}
-</style>

src/components/ImageUpload/index.vue

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import type { UploadProps } from 'element-plus'
-import { toast } from 'vue-sonner'
-
-defineOptions({
-  name: 'ImageUpload',
-})
-
-const props = withDefaults(
-  defineProps<{
-    action: UploadProps['action']
-    headers?: UploadProps['headers']
-    data?: UploadProps['data']
-    name?: UploadProps['name']
-    size?: number
-    width?: number
-    height?: number
-    placeholder?: string
-    notip?: boolean
-    ext?: string[]
-    httpRequest?: UploadProps['httpRequest']
-  }>(),
-  {
-    name: 'file',
-    size: 2,
-    width: 150,
-    height: 150,
-    placeholder: '',
-    notip: false,
-    ext: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
-)
-
-const emits = defineEmits<{
-  onSuccess: [
-    res: any,
-  ]
-}>()
-
-const url = defineModel<string>({
-  default: '',
-})
-
-const uploadData = ref({
-  imageViewerVisible: false,
-  progress: {
-    preview: '',
-    percent: 0,
-  },
-})
-
-// 预览
-function preview() {
-  uploadData.value.imageViewerVisible = true
-}
-// 关闭预览
-function previewClose() {
-  uploadData.value.imageViewerVisible = false
-}
-// 移除
-function remove() {
-  url.value = ''
-}
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-  const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1) ?? ''
-  const isTypeOk = props.ext.includes(fileExt)
-  const isSizeOk = file.size / 1024 / 1024 < props.size
-  if (!isTypeOk) {
-    toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
-  }
-  if (!isSizeOk) {
-    toast.error(`上传图片大小不能超过 ${props.size}MB！`)
-  }
-  if (isTypeOk && isSizeOk) {
-    uploadData.value.progress.preview = URL.createObjectURL(file)
-  }
-  return isTypeOk && isSizeOk
-}
-const onProgress: UploadProps['onProgress'] = (file) => {
-  uploadData.value.progress.percent = ~~file.percent
-}
-const onSuccess: UploadProps['onSuccess'] = (res) => {
-  uploadData.value.progress.preview = ''
-  uploadData.value.progress.percent = 0
-  emits('onSuccess', res)
-}
-</script>
-
-<template>
-  <div class="upload-container">
-    <ElUpload
-      :show-file-list="false"
-      :headers="headers"
-      :action="action"
-      :data="data"
-      :name="name"
-      :before-upload="beforeUpload"
-      :on-progress="onProgress"
-      :on-success="onSuccess"
-      :http-request="httpRequest"
-      drag
-      class="image-upload"
-    >
-      <ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
-        <template #error>
-          <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <FaIcon name="i-ep:plus" class="icon" />
-          </div>
-        </template>
-      </ElImage>
-      <div v-else class="image">
-        <ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <div class="mask">
-          <div class="actions">
-            <span @click.stop="preview">
-              <FaIcon name="i-ep:zoom-in" class="icon" />
-            </span>
-            <span @click.stop="remove">
-              <FaIcon name="i-ep:delete" class="icon" />
-            </span>
-          </div>
-        </div>
-      </div>
-      <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-      </div>
-    </ElUpload>
-    <div v-if="!notip" class="el-upload__tip">
-      <div style="display: inline-block;">
-        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
-      </div>
-    </div>
-    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
-  </div>
-</template>
-
-<style scoped>
-.upload-container {
-  line-height: initial;
-}
-
-.el-image {
-  display: block;
-}
-
-.image {
-  position: relative;
-  overflow: hidden;
-  border-radius: 6px;
-
-  .mask {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--el-overlay-color-lighter);
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    .actions {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      width: 100px;
-      height: 100px;
-      transform: translateX(-50%) translateY(-50%);
-
-      span {
-        width: 50%;
-        color: var(--el-color-white);
-        text-align: center;
-        cursor: pointer;
-        transition: color 0.1s, transform 0.1s;
-
-        &:hover {
-          transform: scale(1.5);
-        }
-
-        .icon {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-
-  &:hover .mask {
-    opacity: 1;
-  }
-}
-
-.image-upload {
-  display: inline-block;
-  vertical-align: top;
-}
-
-:deep(.el-upload) {
-  .el-upload-dragger {
-    display: inline-block;
-    padding: 0;
-
-    &.is-dragover {
-      border-width: 1px;
-    }
-
-    .image-slot {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: var(--el-text-color-placeholder);
-      background-color: transparent;
-
-      .icon {
-        font-size: 30px;
-      }
-    }
-
-    .progress {
-      position: absolute;
-      top: 0;
-
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background-color: var(--el-overlay-color-lighter);
-      }
-
-      .el-progress {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 1;
-        transform: translateX(-50%) translateY(-50%);
-
-        .el-progress__text {
-          color: var(--el-text-color-placeholder);
-        }
-      }
-    }
-  }
-}
-</style>

src/components/ImagesUpload/index.vue

@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import type { UploadProps } from 'element-plus'
-import { toast } from 'vue-sonner'
-
-defineOptions({
-  name: 'ImagesUpload',
-})
-
-const props = withDefaults(
-  defineProps<{
-    action: UploadProps['action']
-    headers?: UploadProps['headers']
-    data?: UploadProps['data']
-    name?: UploadProps['name']
-    size?: number
-    max?: number
-    width?: number
-    height?: number
-    placeholder?: string
-    notip?: boolean
-    ext?: string[]
-    httpRequest?: UploadProps['httpRequest']
-  }>(),
-  {
-    name: 'file',
-    size: 2,
-    max: 3,
-    width: 150,
-    height: 150,
-    placeholder: '',
-    notip: false,
-    ext: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
-)
-
-const emits = defineEmits<{
-  onSuccess: [
-    res: any,
-  ]
-}>()
-
-const url = defineModel<string[]>({
-  default: [],
-})
-
-const uploadData = ref({
-  dialogImageIndex: 0,
-  imageViewerVisible: false,
-  progress: {
-    preview: '',
-    percent: 0,
-  },
-})
-
-// 预览
-function preview(index: number) {
-  uploadData.value.dialogImageIndex = index
-  uploadData.value.imageViewerVisible = true
-}
-// 关闭预览
-function previewClose() {
-  uploadData.value.imageViewerVisible = false
-}
-// 移除
-function remove(index: number) {
-  url.value.splice(index, 1)
-}
-// 移动
-function move(index: number, type: 'left' | 'right') {
-  if (type === 'left' && index !== 0) {
-    url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
-  }
-  if (type === 'right' && index !== url.value.length - 1) {
-    url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
-  }
-}
-
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-  const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1) ?? ''
-  const isTypeOk = props.ext.includes(fileExt)
-  const isSizeOk = file.size / 1024 / 1024 < props.size
-  if (!isTypeOk) {
-    toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
-  }
-  if (!isSizeOk) {
-    toast.error(`上传图片大小不能超过 ${props.size}MB！`)
-  }
-  if (isTypeOk && isSizeOk) {
-    uploadData.value.progress.preview = URL.createObjectURL(file)
-  }
-  return isTypeOk && isSizeOk
-}
-const onProgress: UploadProps['onProgress'] = (file) => {
-  uploadData.value.progress.percent = ~~file.percent
-}
-const onSuccess: UploadProps['onSuccess'] = (res) => {
-  uploadData.value.progress.preview = ''
-  uploadData.value.progress.percent = 0
-  emits('onSuccess', res)
-}
-</script>
-
-<template>
-  <div class="upload-container">
-    <div v-for="(item, index) in (url as string[])" :key="index" class="images">
-      <ElImage v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
-      <div class="mask">
-        <div class="actions">
-          <span @click="preview(index)">
-            <FaIcon name="i-ep:zoom-in" class="icon" />
-          </span>
-          <span @click="remove(index)">
-            <FaIcon name="i-ep:delete" class="icon" />
-          </span>
-          <span v-show="url.length > 1" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <FaIcon name="i-ep:back" class="icon" />
-          </span>
-          <span v-show="url.length > 1" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <FaIcon name="i-ep:right" class="icon" />
-          </span>
-        </div>
-      </div>
-    </div>
-    <ElUpload
-      v-show="url.length < max"
-      :show-file-list="false"
-      :headers="headers"
-      :action="action"
-      :data="data"
-      :name="name"
-      :before-upload="beforeUpload"
-      :on-progress="onProgress"
-      :on-success="onSuccess"
-      :http-request="httpRequest"
-      drag
-      class="images-upload"
-    >
-      <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <FaIcon name="i-ep:plus" class="icon" />
-      </div>
-      <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-      </div>
-    </ElUpload>
-    <div v-if="!notip" class="el-upload__tip">
-      <div style="display: inline-block;">
-        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
-      </div>
-    </div>
-    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
-  </div>
-</template>
-
-<style scoped>
-.upload-container {
-  line-height: initial;
-}
-
-.el-image {
-  display: block;
-}
-
-.images {
-  position: relative;
-  display: inline-block;
-  margin-inline-end: 10px;
-  overflow: hidden;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-
-  .mask {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--el-overlay-color-lighter);
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    .actions {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      width: 100px;
-      height: 100px;
-      transform: translateX(-50%) translateY(-50%);
-
-      span {
-        width: 50%;
-        color: var(--el-color-white);
-        text-align: center;
-        cursor: pointer;
-        transition: color 0.1s, transform 0.1s;
-
-        &.disabled {
-          color: var(--el-text-color-disabled);
-          cursor: not-allowed;
-        }
-
-        &:hover:not(.disabled) {
-          transform: scale(1.5);
-        }
-
-        .icon {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-
-  &:hover .mask {
-    opacity: 1;
-  }
-}
-
-.images-upload {
-  display: inline-block;
-  vertical-align: top;
-}
-
-:deep(.el-upload) {
-  .el-upload-dragger {
-    display: inline-block;
-    padding: 0;
-
-    &.is-dragover {
-      border-width: 1px;
-    }
-
-    .image-slot {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: var(--el-text-color-placeholder);
-      background-color: transparent;
-
-      .icon {
-        font-size: 30px;
-      }
-    }
-
-    .progress {
-      position: absolute;
-      top: 0;
-
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background-color: var(--el-overlay-color-lighter);
-      }
-
-      .el-progress {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 1;
-        transform: translateX(-50%) translateY(-50%);
-
-        .el-progress__text {
-          color: var(--el-text-color-placeholder);
-        }
-      }
-    }
-  }
-}
-</style>

src/layouts/components/AppSetting/index.vue

@@ -2,8 +2,6 @@
 import { useClipboard } from '@vueuse/core'
 import { toast } from 'vue-sonner'
 import settingsDefault from '@/settings.default'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 import { diffTwoObj } from '@/utils/object'
 
@@ -58,7 +56,7 @@ function handleCopy() {
 </script>
 
 <template>
-  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" content-class="sm:min-w-md">
+  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" :destroy-on-close="false" content-class="sm:min-w-md">
     <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
       应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
     </div>

src/layouts/components/Header/index.vue

@@ -1,7 +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'
 
 defineOptions({

src/layouts/components/HotkeysIntro/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({

src/layouts/components/Logo/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import imgLogo from '@/assets/images/logo.svg'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'Logo',

src/layouts/components/MainSidebar/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import hotkeys from 'hotkeys-js'
 import { useSlots } from '@/slots'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
 
 defineOptions({
@@ -40,7 +38,7 @@ onUnmounted(() => {
       <component :is="useSlots('main-sidebar-top')" />
       <Logo :show-title="false" class="sidebar-logo" />
       <component :is="useSlots('main-sidebar-after-logo')" />
-      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu">
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu flex-1">
         <!-- 侧边栏模式（含主导航） -->
         <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">
@@ -92,8 +90,6 @@ onUnmounted(() => {
   }
 
   .menu {
-    flex: 1;
-
     :deep(.menu-item) {
       .menu-item-container {
         padding-block: 8px;

src/layouts/components/Menu/index.vue

@@ -20,6 +20,16 @@ const props = withDefaults(
   },
 )
 
+// 用于缓存对象到 ID 的映射
+const idMap = new WeakMap<object, string>()
+// 获取对象的唯一 ID，如果已存在则返回缓存的 ID，否则生成新的
+function getUseId(obj: object): string {
+  if (!idMap.has(obj)) {
+    idMap.set(obj, useId())
+  }
+  return idMap.get(obj)!
+}
+
 const activeIndex = ref<MenuInjection['activeIndex']>(props.value)
 const items = ref<MenuInjection['items']>({})
 const subMenus = ref<MenuInjection['subMenus']>({})
@@ -32,8 +42,8 @@ const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
 // 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
 function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
   menu.forEach((item) => {
-    const index = item.path ?? JSON.stringify(item)
-    if (item.children) {
+    const index = item.path ?? getUseId(item)
+    if (item.children?.some(item => item.meta?.menu !== false)) {
       const indexPath = [...parentPaths, index]
       subMenus.value[index] = {
         index,
@@ -144,6 +154,7 @@ watch(() => props.collapse, (value) => {
 
 provide(rootMenuInjectionKey, reactive({
   props,
+  getUseId,
   items,
   subMenus,
   activeIndex,
@@ -164,10 +175,10 @@ provide(rootMenuInjectionKey, reactive({
       'py-1': props.mode === 'vertical',
     })"
   >
-    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
+    <template v-for="item in menu" :key="item.path ?? getUseId(item)">
       <template v-if="item.meta?.menu !== false">
-        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
-        <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? getUseId(item)]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? getUseId(item)]" @click="handleMenuItemClick(item.path ?? getUseId(item))" />
       </template>
     </template>
   </div>

src/layouts/components/Menu/sub.vue

@@ -16,111 +16,113 @@ const props = withDefaults(
   },
 )
 
-const index = props.menu.path ?? JSON.stringify(props.menu)
 const itemRef = useTemplateRef('itemRef')
 const subMenuRef = useTemplateRef('subMenuRef')
 const rootMenu = inject(rootMenuInjectionKey)!
 
-const opened = computed(() => {
-  return rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!)
-})
+const index = props.menu.path ?? rootMenu.getUseId(props.menu)
+
+const opened = computed(() => rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!))
 
 const transitionEvent = computed(() => {
-  return rootMenu.isMenuPopup
-    ? {
-        enter(el: HTMLElement) {
-          if (el.offsetHeight > window.innerHeight) {
-            el.style.height = `${window.innerHeight}px`
-          }
-        },
-        afterEnter: () => {},
-        beforeLeave: (el: HTMLElement) => {
-          el.style.maxHeight = `${el.offsetHeight}px`
-          el.style.overflow = 'hidden'
-        },
-        leave: (el: HTMLElement) => {
-          el.style.maxHeight = '0'
-        },
-        afterLeave(el: HTMLElement) {
-          el.style.maxHeight = ''
-          el.style.overflow = ''
-        },
-      }
-    : CSS.supports('height', 'calc-size(auto, size)')
-      ? {}
-      : {
-          enter(el: HTMLElement) {
-            requestAnimationFrame(() => {
-              el.dataset.height = el.offsetHeight.toString()
-              el.style.maxHeight = '0'
-              void el.offsetHeight
-              el.style.maxHeight = `${el.dataset.height}px`
-              el.style.overflow = 'hidden'
-            })
-          },
-          afterEnter(el: HTMLElement) {
-            el.style.maxHeight = ''
-            el.style.overflow = ''
-          },
-          enterCancelled(el: HTMLElement) {
-            el.style.maxHeight = ''
-            el.style.overflow = ''
-          },
-          beforeLeave(el: HTMLElement) {
-            el.style.maxHeight = `${el.offsetHeight}px`
-            el.style.overflow = 'hidden'
-          },
-          leave(el: HTMLElement) {
-            el.style.maxHeight = '0'
-          },
-          afterLeave(el: HTMLElement) {
-            el.style.maxHeight = ''
-            el.style.overflow = ''
-          },
-          leaveCancelled(el: HTMLElement) {
-            el.style.maxHeight = ''
-            el.style.overflow = ''
-          },
+  if (rootMenu.isMenuPopup) {
+    return {
+      enter(el: HTMLElement) {
+        if (el.offsetHeight > window.innerHeight) {
+          el.style.height = `${window.innerHeight}px`
         }
+      },
+      afterEnter: () => {},
+      beforeLeave: (el: HTMLElement) => {
+        el.style.maxHeight = `${el.offsetHeight}px`
+        el.style.overflow = 'hidden'
+      },
+      leave: (el: HTMLElement) => {
+        el.style.maxHeight = '0'
+      },
+      afterLeave(el: HTMLElement) {
+        el.style.maxHeight = ''
+        el.style.overflow = ''
+      },
+    }
+  }
+  if (CSS.supports('height', 'calc-size(auto, size)')) {
+    return {}
+  }
+  return {
+    enter(el: HTMLElement) {
+      requestAnimationFrame(() => {
+        el.dataset.height = el.offsetHeight.toString()
+        el.style.maxHeight = '0'
+        void el.offsetHeight
+        el.style.maxHeight = `${el.dataset.height}px`
+        el.style.overflow = 'hidden'
+      })
+    },
+    afterEnter(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    enterCancelled(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    beforeLeave(el: HTMLElement) {
+      el.style.maxHeight = `${el.offsetHeight}px`
+      el.style.overflow = 'hidden'
+    },
+    leave(el: HTMLElement) {
+      el.style.maxHeight = '0'
+    },
+    afterLeave(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    leaveCancelled(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+  }
 })
 
 const transitionClass = computed(() => {
-  return rootMenu.isMenuPopup
-    ? {
-        enterActiveClass: 'ease-in-out duration-300',
-        enterFromClass: 'opacity-0 translate-x-4',
-        enterToClass: 'opacity-100',
-        leaveActiveClass: 'ease-in-out duration-300',
-        leaveFromClass: 'opacity-100',
-        leaveToClass: 'opacity-0',
-      }
-    : {
-        enterActiveClass: 'ease-in-out duration-300',
-        enterFromClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
-        enterToClass: 'opacity-100 translate-y-0 scale-100 blur-0',
-        leaveActiveClass: 'ease-in-out duration-300',
-        leaveFromClass: 'opacity-100 translate-y-0 scale-100 blur-0',
-        leaveToClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
-      }
+  if (rootMenu.isMenuPopup) {
+    return {
+      enterActiveClass: 'ease-in-out duration-300',
+      enterFromClass: 'opacity-0 translate-x-4',
+      enterToClass: 'opacity-100',
+      leaveActiveClass: 'ease-in-out duration-300',
+      leaveFromClass: 'opacity-100',
+      leaveToClass: 'opacity-0',
+    }
+  }
+  return {
+    enterActiveClass: 'ease-in-out duration-300',
+    enterFromClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
+    enterToClass: 'opacity-100 translate-y-0 scale-100 blur-0',
+    leaveActiveClass: 'ease-in-out duration-300',
+    leaveFromClass: 'opacity-100 translate-y-0 scale-100 blur-0',
+    leaveToClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
+  }
 })
 
-const hasChildren = computed(() => {
-  return props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false
-})
+const hasChildren = computed(() => props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false)
 
 function handleClick() {
-  if (rootMenu.isMenuPopup && hasChildren.value) {
+  if (
+    (rootMenu.isMenuPopup && hasChildren.value)
+    || props.menu.meta?.link
+  ) {
     return
   }
-  if (props.menu.meta?.link) {
-    return
-  }
-  if (hasChildren.value) {
-    rootMenu.handleSubMenuClick(index, props.uniqueKey)
-  }
-  else {
-    rootMenu.handleMenuItemClick(index)
-  }
+  requestAnimationFrame(() => {
+    if (hasChildren.value) {
+      rootMenu.handleSubMenuClick(index, props.uniqueKey)
+    }
+    else {
+      rootMenu.handleMenuItemClick(index)
+    }
+  })
 }
 
 let timeout: (() => void) | undefined
@@ -135,32 +137,44 @@ function handleMouseenter() {
     if (hasChildren.value) {
       rootMenu.openMenu(index, props.uniqueKey)
       nextTick(() => {
-        const el = itemRef.value?.ref
-        const subMenuEl = subMenuRef.value?.$el
-        if (!el || !subMenuEl) {
-          return
-        }
-        let top = 0
-        let left = 0
-        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
-          top = el.getBoundingClientRect().top + el.scrollTop
-          left = el.getBoundingClientRect().left + el.getBoundingClientRect().width
-          if (top + subMenuEl.offsetHeight > window.innerHeight) {
-            top = Math.max(0, window.innerHeight - subMenuEl.offsetHeight)
+        requestAnimationFrame(() => {
+          const el = itemRef.value?.ref
+          const subMenuEl = subMenuRef.value?.$el
+          if (!el || !subMenuEl) {
+            return
           }
-        }
-        else {
-          top = el.getBoundingClientRect().top + el.getBoundingClientRect().height
-          left = el.getBoundingClientRect().left
-          if (top + subMenuEl.offsetHeight > window.innerHeight) {
-            subMenuEl.style.height = `${window.innerHeight - top}px`
+          const rect = el.getBoundingClientRect()
+          const { top, left, width, height } = rect
+          let menuTop = 0
+          let menuLeft = 0
+          if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
+            menuTop = top + el.scrollTop
+            menuLeft = left + width
+            // 处理边界情况
+            if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
+              menuTop = Math.max(0, window.innerHeight - subMenuEl.offsetHeight)
+            }
           }
-        }
-        if (left + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
-          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
-        }
-        subMenuEl.style.top = `${top}px`
-        subMenuEl.style.insetInlineStart = `${left}px`
+          else {
+            menuTop = top + height
+            menuLeft = left
+            // 处理边界情况
+            if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
+              subMenuEl.style.height = `${window.innerHeight - menuTop}px`
+            }
+          }
+          // 处理边界情况
+          if (menuLeft + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
+            menuLeft = left - width
+          }
+          // 设置样式
+          Object.assign(subMenuEl.style, {
+            top: `${menuTop}px`,
+            insetInlineStart: `${menuLeft}px`,
+            willChange: 'transform',
+            transform: 'translateZ(0)',
+          })
+        })
       })
     }
     else {
@@ -177,14 +191,16 @@ function handleMouseleave() {
   rootMenu.mouseInMenu = []
   timeout?.()
   ;({ stop: timeout } = useTimeoutFn(() => {
-    if (rootMenu.mouseInMenu.length === 0) {
-      rootMenu.closeMenu(props.uniqueKey)
-    }
-    else {
-      if (hasChildren.value) {
-        !rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
+    requestAnimationFrame(() => {
+      if (rootMenu.mouseInMenu.length === 0) {
+        rootMenu.closeMenu(props.uniqueKey)
       }
-    }
+      else {
+        if (hasChildren.value) {
+          !rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
+        }
+      }
+    })
   }, 300))
 }
 </script>
@@ -194,15 +210,15 @@ function handleMouseleave() {
   <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
     <Transition v-bind="transitionClass" v-on="transitionEvent">
       <FaScrollArea
-        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg', {
+        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg will-change-transform', {
           '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),
           'py-1': rootMenu.isMenuPopup,
         })"
       >
-        <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 v-for="item in menu.children" :key="item.path ?? rootMenu.getUseId(item)">
+          <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? rootMenu.getUseId(item)]" :menu="item" :level="level + 1" />
         </template>
       </FaScrollArea>
     </Transition>

src/layouts/components/Menu/types.ts

@@ -18,6 +18,7 @@ export interface MenuProps {
 
 export interface MenuInjection {
   props: MenuProps
+  getUseId: (obj: object) => string
   items: Record<string, MenuItem>
   subMenus: Record<string, MenuItem>
   activeIndex: MenuProps['value']

src/layouts/components/SubSidebar/index.vue

@@ -1,7 +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'
 import Menu from '../Menu/index.vue'
 

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

@@ -4,8 +4,6 @@ import { useMagicKeys } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 import { toast } from 'vue-sonner'
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
-import useTabbarStore from '@/store/modules/tabbar'
 
 defineOptions({
   name: 'Tabbar',
@@ -85,16 +83,19 @@ function contextMenuItems(routeItem: Tabbar.recordRaw) {
     [
       {
         label: '关闭其他标签页',
+        icon: 'i-mdi:close',
         disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
         handle: () => tabbar.closeOtherSide(routeItem.tabId),
       },
       {
         label: '关闭左侧标签页',
+        icon: 'i-mdi:arrow-expand-left',
         disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
         handle: () => tabbar.closeLeftSide(routeItem.tabId),
       },
       {
         label: '关闭右侧标签页',
+        icon: 'i-mdi:arrow-expand-right',
         disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
         handle: () => tabbar.closeRightSide(routeItem.tabId),
       },

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { compile } from 'path-to-regexp'
-import useSettingsStore from '@/store/modules/settings'
 import Breadcrumb from '../../../Breadcrumb/index.vue'
 import BreadcrumbItem from '../../../Breadcrumb/item.vue'
 

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
 defineOptions({
   name: 'ColorScheme',
 })
@@ -8,28 +6,33 @@ defineOptions({
 const settingsStore = useSettingsStore()
 
 function toggleColorScheme(event: MouseEvent) {
-  const { startViewTransition } = useViewTransition(() => {
+  if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
     settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    return
+  }
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  const transition = document.startViewTransition(async () => {
+    settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    await nextTick()
   })
-  startViewTransition()?.ready.then(() => {
-    const x = event.clientX
-    const y = event.clientY
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )
+  transition.ready.then(() => {
     const clipPath = [
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
     ]
     document.documentElement.animate(
       {
-        clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
+        clipPath: settingsStore.currentColorScheme === 'light' ? clipPath : clipPath.reverse(),
       },
       {
-        duration: 300,
-        easing: 'ease-out',
-        pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
+        duration: 500,
+        easing: 'ease-in-out',
+        pseudoElement: settingsStore.currentColorScheme === 'light' ? '::view-transition-new(root)' : '::view-transition-old(root)',
       },
     )
   })

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useFullscreen } from '@vueuse/core'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'Fullscreen',

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import Search from './search.vue'
 
 defineOptions({

src/layouts/components/Topbar/Toolbar/NavSearch/search.vue

@@ -4,9 +4,6 @@ import { useFocus } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
-import useMenuStore from '@/store/modules/menu'
-import useRouteStore from '@/store/modules/route'
-import useSettingsStore from '@/store/modules/settings'
 import { resolveRoutePath } from '@/utils'
 
 defineOptions({

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import hotkeys from 'hotkeys-js'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'PageReload',

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
 import Breadcrumb from './Breadcrumb/index.vue'
 
 defineOptions({

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
 import ColorScheme from './ColorScheme/index.vue'
 import Fullscreen from './Fullscreen/index.vue'
 import NavSearch from './NavSearch/index.vue'

src/layouts/components/Topbar/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
-import useSettingsStore from '@/store/modules/settings'
 import Tabbar from './Tabbar/index.vue'
 import Toolbar from './Toolbar/index.vue'
 

src/layouts/index.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 import AppSetting from './components/AppSetting/index.vue'
 import Header from './components/Header/index.vue'

src/main.ts

@@ -8,13 +8,13 @@ import App from './App.vue'
 import router from './router'
 import pinia from './store'
 import uiProvider from './ui/provider'
-
 import '@/utils/systemCopyright'
 
 // 加载 svg 图标
 import 'virtual:svg-icons-register'
-import 'virtual:uno.css'
+// UnoCSS
 import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
 // 全局样式
 import '@/assets/styles/globals.css'
 

src/router/extensions.ts

@@ -1,7 +1,5 @@
 import type { RouteLocationRaw, Router } from 'vue-router'
 import pinia from '@/store'
-import useSettingsStore from '@/store/modules/settings'
-import useTabbarStore from '@/store/modules/tabbar'
 
 function getId(router: Router) {
   return router.currentRoute.value.fullPath
@@ -57,8 +55,32 @@ function extendReplace(router: Router) {
   }
 }
 
+declare module 'vue-router' {
+  interface Router {
+    /**
+     * 本方法为框架扩展语法，等同于 `push` 方法，并且同时会关闭当前标签页
+     */
+    close: (to: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>
+  }
+}
+
+function extendClose(router: Router) {
+  router.close = function (to: RouteLocationRaw) {
+    const currentRoute = router.currentRoute.value
+    const tabId = getId(router)
+    return router.push(to).then(() => {
+      const settingsStore = useSettingsStore(pinia)
+      if (settingsStore.settings.tabbar.enable && currentRoute.meta.tabMerge !== 'activeMenu') {
+        const tabbarStore = useTabbarStore(pinia)
+        tabbarStore.remove(tabId)
+      }
+    })
+  }
+}
+
 export default function setupExtensions(router: Router) {
   extendPush(router)
   extendGo(router)
   extendReplace(router)
+  extendClose(router)
 }

src/router/guards.ts

@@ -1,10 +1,5 @@
 import type { Router, RouteRecordRaw } from 'vue-router'
 import { useNProgress } from '@vueuse/integrations/useNProgress'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useMenuStore from '@/store/modules/menu'
-import useRouteStore from '@/store/modules/route'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
 import { asyncRoutes, asyncRoutesByFilesystem } from './routes'
 import '@/assets/styles/nprogress.css'
 
@@ -165,54 +160,49 @@ function setupTitle(router: Router) {
 
 // 页面缓存
 function setupKeepAlive(router: Router) {
-  router.afterEach((to, from) => {
+  router.afterEach(async (to, from) => {
     const keepAliveStore = useKeepAliveStore()
-    // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
-    if (to.meta.cache) {
-      const componentName = to.matched.at(-1)?.components?.default.name
-      if (componentName) {
-        keepAliveStore.add(componentName)
-      }
-      else {
-        // turbo-console-disable-next-line
-        console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
-      }
-    }
-    // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
-    if (from.meta.cache) {
-      const componentName = from.matched.at(-1)?.components?.default.name
-      if (componentName) {
-        // 通过 meta.cache 判断针对哪些页面进行缓存
-        switch (typeof from.meta.cache) {
-          case 'string':
-            if (from.meta.cache !== to.name) {
-              keepAliveStore.remove(componentName)
-            }
-            break
-          case 'object':
-            if (!from.meta.cache.includes(to.name as string)) {
-              keepAliveStore.remove(componentName)
-            }
-            break
-        }
-        // 通过 meta.noCache 判断针对哪些页面不需要进行缓存
-        if (from.meta.noCache) {
-          switch (typeof from.meta.noCache) {
-            case 'string':
-              if (from.meta.noCache === to.name) {
-                keepAliveStore.remove(componentName)
-              }
-              break
-            case 'object':
-              if (from.meta.noCache.includes(to.name as string)) {
-                keepAliveStore.remove(componentName)
-              }
-              break
+    if (to.fullPath !== from.fullPath) {
+      if (to.meta.cache) {
+        const componentName = to.matched.at(-1)?.components?.default.name
+        if (componentName) {
+          // 缓存当前页面前，先判断是否需要进行清除缓存，判断依据：
+          // 1. 如果 to.meta.cache 为 boolean 类型，并且不为 true，则需要清除缓存
+          // 2. 如果 to.meta.cache 为 string 类型，并且与 from.name 不一致，则需要清除缓存
+          // 3. 如果 to.meta.cache 为 array 类型，并且不包含 from.name，则需要清除缓存
+          // 4. 如果 to.meta.noCache 为 string 类型，并且与 from.name 一致，则需要清除缓存
+          // 5. 如果 to.meta.noCache 为 array 类型，并且包含 from.name，则需要清除缓存
+          // 6. 如果是刷新页面，则需要清除缓存
+          let shouldClearCache = false
+          if (typeof to.meta.cache === 'boolean') {
+            shouldClearCache = !to.meta.cache
           }
+          else if (typeof to.meta.cache === 'string') {
+            shouldClearCache = to.meta.cache !== from.name
+          }
+          else if (Array.isArray(to.meta.cache)) {
+            shouldClearCache = !to.meta.cache.includes(from.name as string)
+          }
+          if (to.meta.noCache) {
+            if (typeof to.meta.noCache === 'string') {
+              shouldClearCache = to.meta.noCache === from.name
+            }
+            else if (Array.isArray(to.meta.noCache)) {
+              shouldClearCache = to.meta.noCache.includes(from.name as string)
+            }
+          }
+          if (from.name === 'reload') {
+            shouldClearCache = true
+          }
+          if (shouldClearCache) {
+            keepAliveStore.remove(componentName)
+            await nextTick()
+          }
+          keepAliveStore.add(componentName)
         }
-        // 如果进入的是 reload 页面，则也将离开页面的缓存清空
-        if (to.name === 'reload') {
-          keepAliveStore.remove(componentName)
+        else {
+          // turbo-console-disable-next-line
+          console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
         }
       }
     }

src/router/index.ts

@@ -1,7 +1,6 @@
 import { loadingFadeOut } from 'virtual:app-loading'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import pinia from '@/store'
-import useSettingsStore from '@/store/modules/settings'
 import setupExtensions from './extensions'
 import setupGuards from './guards'
 // 路由相关数据

src/router/routes.ts

@@ -2,7 +2,6 @@ import type { Route } from '#/global'
 import type { RouteRecordRaw } from 'vue-router'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:meta-layouts'
-import useSettingsStore from '@/store/modules/settings'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 
 // 固定路由（默认路由）

src/slots/index.ts

@@ -1,12 +1,12 @@
 import { pascalCase } from 'scule'
 
-type Slots =
-  'header-start' | 'header-after-logo' | 'header-after-menu' | 'header-end' |
-  'main-sidebar-top' | 'main-sidebar-after-logo' | 'main-sidebar-after-menu' | 'main-sidebar-bottom' |
-  'sub-sidebar-top' | 'sub-sidebar-after-logo' | 'sub-sidebar-after-menu' | 'sub-sidebar-bottom' |
-  'tabbar-start' | 'tabbar-end' |
-  'toolbar-start' | 'toolbar-end' |
-  'free-position'
+type Slots
+  = 'header-start' | 'header-after-logo' | 'header-after-menu' | 'header-end'
+    | 'main-sidebar-top' | 'main-sidebar-after-logo' | 'main-sidebar-after-menu' | 'main-sidebar-bottom'
+    | 'sub-sidebar-top' | 'sub-sidebar-after-logo' | 'sub-sidebar-after-menu' | 'sub-sidebar-bottom'
+    | 'tabbar-start' | 'tabbar-end'
+    | 'toolbar-start' | 'toolbar-end'
+    | 'free-position'
 
 function tryLoadComponent(name: Slots) {
   const componentMap = import.meta.glob('./*/index.vue', { eager: true })

src/store/modules/keepAlive.ts

@@ -1,4 +1,4 @@
-const useKeepAliveStore = defineStore(
+export const useKeepAliveStore = defineStore(
   // 唯一ID
   'keepAlive',
   () => {
@@ -38,5 +38,3 @@ const useKeepAliveStore = defineStore(
     }
   },
 )
-
-export default useKeepAliveStore

src/store/modules/menu.ts

@@ -4,16 +4,12 @@ import { cloneDeep } from 'es-toolkit'
 import apiApp from '@/api/modules/app'
 import menu from '@/menu'
 import { resolveRoutePath } from '@/utils'
-import useRouteStore from './route'
-import useSettingsStore from './settings'
-import useUserStore from './user'
 
-const useMenuStore = defineStore(
+export const useMenuStore = defineStore(
   // 唯一ID
   'menu',
   () => {
     const settingsStore = useSettingsStore()
-    const userStore = useUserStore()
     const routeStore = useRouteStore()
 
     const filesystemMenusRaw = ref<Menu.recordMainRaw[]>([])
@@ -78,10 +74,7 @@ const useMenuStore = defineStore(
       else {
         returnMenus = filesystemMenusRaw.value
       }
-      // 如果权限功能开启，则需要对导航数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
-        returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
-      }
+      returnMenus = filterAsyncMenus(returnMenus)
       return returnMenus
     })
     // 次导航数据
@@ -100,7 +93,7 @@ const useMenuStore = defineStore(
     })
     function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
       let retnPath = ''
-      if (menu.children) {
+      if (menu.children?.some(item => item.meta?.menu !== false)) {
         const item = menu.children.find(item => item.meta?.menu !== false)
         if (item) {
           retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
@@ -155,35 +148,15 @@ const useMenuStore = defineStore(
       return defaultOpenedPaths
     }
 
-    // 判断是否有权限
-    function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
-      let isAuth = false
-      if (menu.meta?.auth) {
-        isAuth = permissions.some((auth) => {
-          if (typeof menu.meta?.auth === 'string') {
-            return menu.meta.auth !== '' ? menu.meta.auth === auth : true
-          }
-          else if (typeof menu.meta?.auth === 'object') {
-            return menu.meta.auth.length > 0 ? menu.meta.auth.includes(auth) : true
-          }
-          else {
-            return false
-          }
-        })
-      }
-      else {
-        isAuth = true
-      }
-      return isAuth
-    }
+    const auth = useAuth()
     // 根据权限过滤导航
-    function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
+    function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T): T {
       const res: any = []
       menus.forEach((menu) => {
-        if (hasPermission(permissions, menu)) {
+        if (auth.auth(menu.meta?.auth ?? '')) {
           const tmpMenu = cloneDeep(menu)
           if (tmpMenu.children && tmpMenu.children.length > 0) {
-            tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
+            tmpMenu.children = filterAsyncMenus(tmpMenu.children) as Menu.recordRaw[]
             tmpMenu.children.length > 0 && res.push(tmpMenu)
           }
           else {
@@ -242,5 +215,3 @@ const useMenuStore = defineStore(
     }
   },
 )
-
-export default useMenuStore

src/store/modules/route.ts

@@ -4,9 +4,8 @@ import { cloneDeep } from 'es-toolkit'
 import { createRouterMatcher } from 'vue-router'
 import apiApp from '@/api/modules/app'
 import { systemRoutes as systemRoutesRaw } from '@/router/routes'
-import useSettingsStore from './settings'
 
-const useRouteStore = defineStore(
+export const useRouteStore = defineStore(
   // 唯一ID
   'route',
   () => {
@@ -131,7 +130,7 @@ const useRouteStore = defineStore(
         })
         routesMatcher.value = createRouterMatcher(routes, {})
         isGenerate.value = true
-      }).catch(() => {})
+      })
     }
     // 生成路由（文件系统生成）
     function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
@@ -169,5 +168,3 @@ const useRouteStore = defineStore(
     }
   },
 )
-
-export default useRouteStore

src/store/modules/settings.ts

@@ -4,7 +4,7 @@ import { cloneDeep } from 'es-toolkit'
 import settingsDefault from '@/settings'
 import { merge } from '@/utils/object'
 
-const useSettingsStore = defineStore(
+export const useSettingsStore = defineStore(
   // 唯一ID
   'settings',
   () => {
@@ -172,5 +172,3 @@ const useSettingsStore = defineStore(
     }
   },
 )
-
-export default useSettingsStore

src/store/modules/tabbar.ts

@@ -1,8 +1,7 @@
 import type { Tabbar } from '#/global'
 import type { RouteLocationNormalized } from 'vue-router'
-import useKeepAliveStore from './keepAlive'
 
-const useTabbarStore = defineStore(
+export const useTabbarStore = defineStore(
   // 唯一ID
   'tabbar',
   () => {
@@ -20,7 +19,7 @@ const useTabbarStore = defineStore(
         }
       })
       const meta = route.matched.at(-1)?.meta
-      const tabId = route.fullPath
+      const tabId = route.path
       if (route.name !== 'reload') {
         // 记录查找到的标签页
         const findTab = list.value.find((item) => {
@@ -159,5 +158,3 @@ const useTabbarStore = defineStore(
     }
   },
 )
-
-export default useTabbarStore

src/store/modules/user.ts

@@ -1,11 +1,7 @@
 import apiUser from '@/api/modules/user'
 import router from '@/router'
-import useMenuStore from './menu'
-import useRouteStore from './route'
-import useSettingsStore from './settings'
-import useTabbarStore from './tabbar'
 
-const useUserStore = defineStore(
+export const useUserStore = defineStore(
   // 唯一ID
   'user',
   () => {
@@ -109,5 +105,3 @@ const useUserStore = defineStore(
     }
   },
 )
-
-export default useUserStore

src/types/auto-imports.d.ts

@@ -19,12 +19,14 @@ declare global {
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const isShallow: typeof import('vue')['isShallow']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
   const mapState: typeof import('pinia')['mapState']
@@ -71,16 +73,21 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useGlobalProperties: typeof import('../utils/composables/useGlobalProperties')['default']
   const useId: typeof import('vue')['useId']
+  const useKeepAliveStore: typeof import('../store/modules/keepAlive')['useKeepAliveStore']
   const useLink: typeof import('vue-router')['useLink']
   const useMainPage: typeof import('../utils/composables/useMainPage')['default']
   const useMenu: typeof import('../utils/composables/useMenu')['default']
+  const useMenuStore: typeof import('../store/modules/menu')['useMenuStore']
   const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
+  const useRouteStore: typeof import('../store/modules/route')['useRouteStore']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSettingsStore: typeof import('../store/modules/settings')['useSettingsStore']
   const useSlots: typeof import('vue')['useSlots']
   const useTabbar: typeof import('../utils/composables/useTabbar')['default']
+  const useTabbarStore: typeof import('../store/modules/tabbar')['useTabbarStore']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
-  const useViewTransition: typeof import('../utils/composables/useViewTransition')['default']
+  const useUserStore: typeof import('../store/modules/user')['useUserStore']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -89,6 +96,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/types/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     FaAvatar: typeof import('./../ui/components/FaAvatar/index.vue')['default']
     FaBackToTop: typeof import('./../ui/components/FaBackToTop/index.vue')['default']
     FaButton: typeof import('./../ui/components/FaButton/index.vue')['default']
+    FaButtonGroup: typeof import('./../ui/components/FaButtonGroup/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']
@@ -20,9 +21,12 @@ declare module 'vue' {
     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']
+    FaFileUpload: typeof import('./../ui/components/FaFileUpload/index.vue')['default']
     FaFixedActionBar: typeof import('./../ui/components/FaFixedActionBar/index.vue')['default']
     FaHoverCard: typeof import('./../ui/components/FaHoverCard/index.vue')['default']
     FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
+    FaImagePreview: typeof import('./../ui/components/FaImagePreview/index.vue')['default']
+    FaImageUpload: typeof import('./../ui/components/FaImageUpload/index.vue')['default']
     FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
     FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
     FaModal: typeof import('./../ui/components/FaModal/index.vue')['default']
@@ -42,12 +46,9 @@ declare module 'vue' {
     FaSwitch: typeof import('./../ui/components/FaSwitch/index.vue')['default']
     FaSystemInfo: typeof import('./../ui/components/FaSystemInfo/index.vue')['default']
     FaTabs: typeof import('./../ui/components/FaTabs/index.vue')['default']
+    FaTextarea: typeof import('./../ui/components/FaTextarea/index.vue')['default']
     FaToast: typeof import('./../ui/components/FaToast/index.vue')['default']
     FaTooltip: typeof import('./../ui/components/FaTooltip/index.vue')['default']
-    FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
-    ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
-    ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
-    ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/ui/components/FaButtonGroup/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'FaButtonGroup',
+})
+
+const props = defineProps<{
+  vertical?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('inline-flex gap-[1px] items-stretch', {
+      'horizontal-group flex-row': !props.vertical,
+      'vertical-group flex-col': props.vertical,
+    })"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.horizontal-group {
+  :deep(> button) {
+    &:first-child:not(:last-child) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+  }
+}
+
+.vertical-group {
+  :deep(> button) {
+    &:first-child:not(:last-child) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+  }
+}
+</style>

src/ui/components/FaCheckbox/checkbox/Checkbox.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
 import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuContent,
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import type { ContextMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ContextMenuLabel } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 import type { ContextMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuSeparator,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuSubContent,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { ContextMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>

src/ui/components/FaCopyright/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
 defineOptions({
   name: 'FaCopyright',
 })

src/ui/components/FaDrawer/index.ts

@@ -0,0 +1,137 @@
+import type { Component, HTMLAttributes } from 'vue'
+import { createVNode, isVNode, render } from 'vue'
+import Drawer from './index.vue'
+
+export interface DrawerProps {
+  id?: string
+  modelValue?: boolean
+  zIndex?: number
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  title?: string
+  description?: string
+  loading?: boolean
+  closable?: boolean
+  centered?: boolean
+  bordered?: boolean
+  overlay?: boolean
+  overlayBlur?: boolean
+  showConfirmButton?: boolean
+  showCancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonDisabled?: boolean
+  confirmButtonLoading?: boolean
+  beforeClose?: (
+    action: 'confirm' | 'cancel' | 'close',
+    done: () => void
+  ) => void
+  header?: boolean
+  footer?: boolean
+  closeOnClickOverlay?: boolean
+  closeOnPressEscape?: boolean
+  destroyOnClose?: boolean
+  contentClass?: HTMLAttributes['class']
+  headerClass?: HTMLAttributes['class']
+  footerClass?: HTMLAttributes['class']
+}
+
+export interface DrawerEmits {
+  'update:modelValue': [value: boolean]
+  'open': []
+  'opened': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}
+
+type BaseOptions = Omit<DrawerProps, 'modelValue'> & {
+  content?: Component | VNode | string
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+export function useFaDrawer() {
+  function create(initialOptions: BaseOptions) {
+    const container = document.createElement('div')
+    const visible = ref(false)
+    const options = reactive({ ...initialOptions })
+    const instance = getCurrentInstance()
+    let vnode: VNode | null = null
+
+    const updateVNode = () => {
+      vnode = createVNode(Drawer, Object.assign({
+        'id': instance && instance.uid ? `FaDrawer-${instance.uid}` : undefined,
+        'modelValue': visible.value,
+        'onUpdate:modelValue': (val: boolean) => {
+          visible.value = val
+        },
+        ...options,
+      }), {
+        default: () => {
+          if (typeof options.content === 'string') {
+            return options.content
+          }
+          else if (isVNode(options.content)) {
+            return options.content
+          }
+          else if (options.content) {
+            return h(options.content)
+          }
+          return null
+        },
+      })
+      // 继承主应用的上下文
+      if (instance && instance.appContext) {
+        vnode.appContext = instance.appContext
+      }
+      render(vnode, container)
+    }
+
+    // 监听 visible 和 options 变化，自动重新渲染
+    watch([visible, options], () => {
+      updateVNode()
+    }, {
+      immediate: true,
+      deep: true,
+    })
+
+    // 挂载到当前实例
+    instance?.proxy?.$el?.appendChild(container)
+
+    // 监听组件卸载，自动清理
+    if (instance) {
+      onUnmounted(() => {
+        if (vnode) {
+          render(null, container)
+          vnode = null
+        }
+        if (container.parentNode) {
+          container.parentNode.removeChild(container)
+        }
+      })
+    }
+
+    const open = () => {
+      visible.value = true
+    }
+    const close = () => {
+      visible.value = false
+    }
+    const update = (newOptions: BaseOptions) => {
+      Object.assign(options, newOptions)
+    }
+    return {
+      open,
+      close,
+      update,
+    }
+  }
+  return {
+    create,
+  }
+}

src/ui/components/FaDrawer/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { DrawerEmits, DrawerProps } from '.'
+import { VisuallyHidden } from 'reka-ui'
 import { cn } from '@/utils'
 import {
   Sheet,
@@ -15,33 +16,10 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    side?: 'top' | 'bottom' | 'left' | 'right'
-    title: string
-    description?: string
-    loading?: boolean
-    closable?: boolean
-    centered?: boolean
-    bordered?: boolean
-    overlay?: boolean
-    overlayBlur?: boolean
-    showConfirmButton?: boolean
-    showCancelButton?: boolean
-    confirmButtonText?: string
-    cancelButtonText?: string
-    confirmButtonDisabled?: boolean
-    confirmButtonLoading?: boolean
-    header?: boolean
-    footer?: boolean
-    closeOnClickOverlay?: boolean
-    closeOnPressEscape?: boolean
-    contentClass?: HTMLAttributes['class']
-    headerClass?: HTMLAttributes['class']
-    footerClass?: HTMLAttributes['class']
-  }>(),
+  defineProps<DrawerProps>(),
   {
     modelValue: false,
+    zIndex: 2000,
     side: 'right',
     loading: false,
     closable: true,
@@ -59,47 +37,102 @@ const props = withDefaults(
     footer: true,
     closeOnClickOverlay: true,
     closeOnPressEscape: true,
+    destroyOnClose: true,
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'open': []
-  'opened': []
-  'close': []
-  'closed': []
-  'confirm': []
-  'cancel': []
+const emits = defineEmits<DrawerEmits>()
+
+const slots = defineSlots<{
+  header?: () => VNode
+  default?: () => VNode
+  footer?: () => VNode
 }>()
 
-const id = useId()
-provide('DrawerId', id)
-
+const drawerId = shallowRef(props.id ?? useId())
 const isOpen = ref(props.modelValue)
 
 watch(() => props.modelValue, (newValue) => {
   isOpen.value = newValue
 })
 
-function updateOpen(value: boolean) {
-  isOpen.value = value
-  emits('update:modelValue', value)
-  if (value) {
+const hasOpened = ref(false)
+const isClosed = ref(true)
+
+watch(isOpen, (val) => {
+  emits('update:modelValue', val)
+  if (val) {
     emits('open')
   }
   else {
     emits('close')
   }
+  isClosed.value = false
+  if (val && !hasOpened.value) {
+    hasOpened.value = true
+  }
+}, {
+  immediate: true,
+})
+
+const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
+
+async function updateOpen(value: boolean) {
+  if (value) {
+    isOpen.value = value
+    emits('open')
+  }
+  else {
+    if (props.beforeClose) {
+      await props.beforeClose(
+        'close',
+        () => {
+          isOpen.value = value
+          emits('close')
+        },
+      )
+    }
+    else {
+      isOpen.value = value
+      emits('close')
+    }
+  }
 }
 
-function onConfirm() {
-  updateOpen(false)
-  emits('confirm')
+const isConfirmButtonLoading = ref(false)
+
+async function onConfirm() {
+  if (props.beforeClose) {
+    isConfirmButtonLoading.value = true
+    await props.beforeClose(
+      'confirm',
+      () => {
+        isOpen.value = false
+        emits('confirm')
+      },
+    )
+    isConfirmButtonLoading.value = false
+  }
+  else {
+    isOpen.value = false
+    emits('confirm')
+  }
 }
 
-function onCancel() {
-  updateOpen(false)
-  emits('cancel')
+async function onCancel() {
+  if (props.beforeClose) {
+    await props.beforeClose(
+      'cancel',
+      () => {
+        isOpen.value = false
+        emits('cancel')
+      },
+    )
+  }
+  else {
+    isOpen.value = false
+    emits('cancel')
+  }
 }
 
 function handleFocusOutside(e: Event) {
@@ -108,7 +141,7 @@ function handleFocusOutside(e: Event) {
 }
 
 function handleClickOutside(e: Event) {
-  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.drawerId !== id) {
+  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.drawerId !== drawerId.value) {
     e.preventDefault()
     e.stopPropagation()
   }
@@ -127,6 +160,7 @@ function handleAnimationEnd() {
   }
   else {
     emits('closed')
+    isClosed.value = true
   }
 }
 </script>
@@ -134,12 +168,17 @@ function handleAnimationEnd() {
 <template>
   <Sheet :modal="false" :open="isOpen" @update:open="updateOpen">
     <SheetContent
-      :closable="props.closable"
+      :drawer-id="drawerId"
       :open="isOpen"
+      :z-index="props.zIndex"
+      :closable="props.closable"
       :overlay="props.overlay"
       :overlay-blur="props.overlayBlur"
-      :class="cn('w-full flex flex-col gap-0 p-0', props.contentClass)"
+      :class="cn('w-full flex flex-col gap-0 p-0', props.contentClass, {
+        hidden: isClosed,
+      })"
       :side="props.side"
+      :force-mount="forceMount"
       @open-auto-focus="handleFocusOutside"
       @close-auto-focus="handleFocusOutside"
       @focus-outside="handleFocusOutside"
@@ -153,6 +192,10 @@ function handleAnimationEnd() {
           'border-b': props.bordered,
         })"
       >
+        <VisuallyHidden v-if="!!slots.header">
+          <SheetTitle />
+          <SheetDescription />
+        </VisuallyHidden>
         <slot name="header">
           <SheetTitle :class="{ 'text-center': props.centered }">
             {{ title }}
@@ -162,18 +205,22 @@ function handleAnimationEnd() {
           </SheetDescription>
         </slot>
       </SheetHeader>
+      <VisuallyHidden v-else>
+        <SheetTitle />
+        <SheetDescription />
+      </VisuallyHidden>
       <div class="m-0 flex-1 of-y-hidden">
-        <FaScrollArea class="h-full">
+        <FaScrollArea v-if="!!slots.default" class="h-full">
           <div class="p-4">
             <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" class="size-10" />
+          </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" class="size-10" />
-        </div>
       </div>
       <SheetFooter
-        v-if="footer" :class="cn('p-2 gap-y-2', props.footerClass, {
+        v-if="footer" :class="cn('p-3 gap-y-2', props.footerClass, {
           'sm:justify-center': props.centered,
           'border-t': props.bordered,
         })"

src/ui/components/FaDrawer/sheet/SheetContent.vue

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
-import { useScrollLock } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -10,17 +10,18 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 import { sheetVariants } from '.'
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class']
+  drawerId: string
   open?: boolean
+  zIndex?: number
   side?: SheetVariants['side']
   closable?: boolean
   overlay?: boolean
   overlayBlur?: boolean
+  class?: HTMLAttributes['class']
 }
 
 defineOptions({
@@ -33,11 +34,7 @@ const emits = defineEmits<DialogContentEmits & {
   animationEnd: []
 }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class', 'side')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
@@ -51,8 +48,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('DrawerId')
 </script>
 
 <template>
@@ -70,14 +65,20 @@ const id = inject('DrawerId')
     >
       <div
         v-if="showOverlay"
-        :data-drawer-id="id"
-        :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
+        :data-drawer-id="props.drawerId"
+        :class="cn('fixed inset-0 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
+        :style="{
+          zIndex: props.zIndex,
+        }"
       />
     </Transition>
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"
+      :style="{
+        zIndex: props.zIndex,
+      }"
       v-bind="{ ...forwarded, ...$attrs }"
       @animationend="emits('animationEnd')"
     >

src/ui/components/FaDrawer/sheet/SheetDescription.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { DialogDescription } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

src/ui/components/FaDrawer/sheet/SheetTitle.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { DialogTitle } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

src/ui/components/FaDrawer/sheet/index.ts

@@ -11,7 +11,7 @@ export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetTrigger } from './SheetTrigger.vue'
 
 export const sheetVariants = cva(
-  'fixed z-2000 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500',
+  'fixed gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500',
   {
     variants: {
       side: {

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuContent,
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = withDefaults(
@@ -17,11 +17,7 @@ const props = withDefaults(
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { DropdownMenuItem, useForwardProps } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
 import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { DropdownMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuSeparator,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']
 }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuSubContent,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { DropdownMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>

src/ui/components/FaFileUpload/index.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { filesize } from 'filesize'
+import { toast } from 'vue-sonner'
+
+defineOptions({
+  name: 'FaFileUpload',
+})
+
+const props = withDefaults(defineProps<{
+  action: string
+  method?: string
+  headers?: Headers | Record<string, any>
+  data?: Record<string, any>
+  name?: string
+  afterUpload?: (response: any) => string | Promise<string>
+  multiple?: boolean
+  ext?: string[]
+  size?: number
+  max?: number
+  hideTips?: boolean
+  disabled?: boolean
+}>(), {
+  method: 'post',
+  headers: () => ({}),
+  data: () => ({}),
+  name: 'file',
+  multiple: false,
+  ext: () => [],
+  size: 10 * 1024 * 1024,
+  max: 0,
+  hideTips: false,
+  disabled: false,
+})
+
+const emits = defineEmits<{
+  onSuccess: [response: any, file: File]
+  onClick: [fileItem: FileItem, index: number]
+}>()
+
+const fileList = defineModel<FileItem[]>('modelValue', { required: true })
+
+export interface FileItem {
+  name: string
+  size: number
+  url?: string
+  status?: 'uploading' | 'success' | 'error'
+  progress?: number
+  file?: File
+}
+
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+const isDragging = ref(false)
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  if (props.disabled) {
+    return
+  }
+  isDragging.value = true
+}
+
+function handleDragLeave(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = false
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  if (props.disabled) {
+    return
+  }
+  isDragging.value = false
+  if (e.dataTransfer?.files) {
+    onSelectFile(e.dataTransfer.files)
+  }
+}
+
+function onSelectFile(files: FileList | File[] | null) {
+  if (!files) {
+    return
+  }
+  const selectedFiles = Array.from(files)
+  // 数量限制
+  const remain = props.max > 0 ? props.max - fileList.value.length : selectedFiles.length
+  const filesToAdd: File[] = []
+  for (const file of selectedFiles.slice(0, remain)) {
+    // 类型校验
+    if (props.ext.length > 0) {
+      const ext = file.name.split('.').pop()?.toLowerCase()
+      if (!props.ext.map(e => e.toLowerCase()).includes(ext || '')) {
+        toast.error(`上传文件只支持 ${props.ext.join(' / ')} 格式`)
+        continue
+      }
+    }
+    // 大小校验
+    if (props.size > 0) {
+      if (file.size > props.size) {
+        toast.error(`上传文件大小不能超过 ${filesize(props.size, { standard: 'jedec' })}`)
+        continue
+      }
+    }
+    filesToAdd.push(file)
+  }
+  fileInputRef.value!.value = ''
+  filesToAdd.forEach(file => uploadFile(file))
+}
+
+function uploadFile(file: File, index?: number) {
+  const formData = new FormData()
+  Object.entries(props.data).forEach(([key, value]) => {
+    formData.append(key, value)
+  })
+  formData.append(props.name, file)
+  let headersObj: Record<string, any> = {}
+  if (props.headers instanceof Headers) {
+    props.headers.forEach((value, key) => {
+      headersObj[key] = value
+    })
+  }
+  else {
+    headersObj = { ...props.headers }
+  }
+  if (index === undefined) {
+    fileList.value.push({
+      name: file.name,
+      size: file.size,
+      status: 'uploading',
+      progress: 0,
+      file,
+    })
+  }
+  const currentFileIndex = index ?? fileList.value.length - 1
+  axios({
+    url: props.action,
+    method: props.method,
+    headers: headersObj,
+    data: formData,
+    onUploadProgress: (progressEvent) => {
+      if (progressEvent.total) {
+        fileList.value[currentFileIndex].progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+      }
+    },
+  })
+    .then(async (response) => {
+      const url = await props.afterUpload?.(response.data)
+      if (url) {
+        fileList.value[currentFileIndex].url = url
+      }
+      emits('onSuccess', response.data, file)
+      fileList.value[currentFileIndex].status = 'success'
+    })
+    .catch(() => {
+      fileList.value[currentFileIndex].status = 'error'
+    })
+}
+
+function removeFile(idx: number) {
+  fileList.value.splice(idx, 1)
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <button
+      class="h-40 w-full flex flex-col cursor-pointer items-center justify-center border border-2 rounded-lg border-dashed bg-transparent p-4 transition-all"
+      :class="{
+        'border-primary bg-primary/5': isDragging,
+        'opacity-50 cursor-not-allowed': props.disabled || (props.max > 0 && fileList.length >= props.max),
+      }"
+      :disabled="props.disabled || (props.max > 0 && fileList.length >= props.max)"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @click="fileInputRef?.click()"
+    >
+      <FaIcon name="i-icon-park-outline:upload" class="mb-2 text-2xl text-card-foreground/50" />
+      <div class="text-sm text-card-foreground/70">
+        将文件拖到此处，或<span class="cursor-pointer text-primary font-bold">点击上传</span>
+      </div>
+      <input ref="fileInputRef" type="file" :multiple="props.multiple" :disabled="props.disabled" class="hidden" @change="e => onSelectFile((e.target as HTMLInputElement).files)">
+    </button>
+    <div v-if="!props.hideTips && !props.disabled" class="flex flex-wrap gap-1 text-xs text-card-foreground/50 empty:hidden">
+      <div v-if="props.ext.length > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `支持 ${props.ext.join(' / ')} 格式` }}
+      </div>
+      <div v-if="props.size > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `大小不超过 ${filesize(props.size, { standard: 'jedec' })}` }}
+      </div>
+      <div v-if="props.max > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `数量不超过 ${props.max} 个` }}
+      </div>
+    </div>
+    <div v-if="fileList.length > 0" class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
+      <div
+        v-for="(item, index) in fileList"
+        :key="item.name + index"
+        class="group/file-upload-item relative flex items-center gap-2 border rounded-lg py-2 pe-2 ps-3"
+        :class="[
+          item.status === 'error' ? 'border-red-500 bg-red-500/10' : '',
+        ]"
+        @click="emits('onClick', item, index)"
+      >
+        <div class="flex-1 truncate">
+          <div class="truncate text-sm font-medium">
+            {{ item.name }}
+          </div>
+          <div class="text-xs text-card-foreground/50">
+            {{ filesize(item.size, { standard: 'jedec' }) }}
+          </div>
+        </div>
+        <div v-if="item.status === 'uploading'" class="pointer-events-none absolute inset-0 z-0 bg-primary/5" :style="{ width: `${item.progress}%` }" />
+        <div v-else-if="item.status === 'success'" class="size-10 flex-center">
+          <FaIcon name="i-ix:upload-success" class="text-lg text-green-600" />
+        </div>
+        <div v-else-if="item.status === 'error'" class="size-10 flex-center">
+          <FaIcon name="i-ix:upload-fail" class="text-lg text-red-600" />
+        </div>
+        <FaButtonGroup v-if="!props.disabled" class="absolute inset-e-2 top-1/2 opacity-0 transition-opacity -translate-y-1/2 group-hover/file-upload-item:opacity-100">
+          <FaButton v-if="item.status === 'error'" variant="outline" size="icon" @click.stop="uploadFile(item.file!, index)">
+            <FaIcon name="i-icon-park-outline:upload" class="cursor-pointer text-lg" />
+          </FaButton>
+          <FaButton v-if="item.status !== 'uploading'" variant="outline" size="icon" @click.stop="removeFile(index)">
+            <FaIcon name="i-icon-park-outline:delete" class="cursor-pointer text-lg text-red-500" />
+          </FaButton>
+        </FaButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>

src/ui/components/FaHoverCard/hover-card/HoverCardContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { HoverCardContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   HoverCardContent,
   HoverCardPortal,
   useForwardProps,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = withDefaults(
@@ -16,11 +16,7 @@ const props = withDefaults(
   },
 )
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>

src/ui/components/FaImagePreview/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

src/ui/components/FaImagePreview/dialog/DialogClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

src/ui/components/FaImagePreview/dialog/DialogContent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits & { animationEnd: [] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-2000 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed z-2000 inset-0 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',
+          props.class,
+        )"
+      @animationend="emits('animationEnd')"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none 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"
+      >
+        <X class="h-8 w-8" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/ui/components/FaImagePreview/dialog/DialogDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/ui/components/FaImagePreview/dialog/DialogFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

src/ui/components/FaImagePreview/dialog/DialogHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/ui/components/FaImagePreview/dialog/DialogScrollContent.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

src/ui/components/FaImagePreview/dialog/DialogTitle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/ui/components/FaImagePreview/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

src/ui/components/FaImagePreview/dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'

src/ui/components/FaImagePreview/index.ts

@@ -0,0 +1,21 @@
+import Preview from './preview.vue'
+
+export function useFaImagePreview() {
+  function open(src: string | string[], index = 0) {
+    const container = document.createElement('div')
+    const app = createApp({
+      render() {
+        return h(Preview, {
+          modelValue: true,
+          src,
+          index,
+        })
+      },
+    })
+    app.mount(container)
+  }
+
+  return {
+    open,
+  }
+}

src/ui/components/FaImagePreview/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import Preview from './preview.vue'
+
+defineOptions({
+  name: 'FaImagePreview',
+})
+
+const props = defineProps<{
+  src: string
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  load: []
+  error: []
+}>()
+
+const isLoading = ref(true)
+const isError = ref(false)
+const isOpen = ref(false)
+
+function handleLoad() {
+  isLoading.value = false
+  emits('load')
+}
+
+function handleError() {
+  isError.value = true
+  isLoading.value = false
+  emits('error')
+}
+
+function handleClick() {
+  if (!isError.value) {
+    isOpen.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="group/image-preview relative inline-block overflow-hidden border rounded-lg">
+    <img
+      :src="src"
+      :class="cn('size-50 object-contain cursor-pointer bg-background transition-all duration-300 group-hover/image-preview:scale-110', props.class, {
+        invisible: isError || isLoading,
+      })"
+      @error="handleError"
+      @load="handleLoad"
+      @click="!isLoading && !isError && handleClick()"
+    >
+    <div v-if="isLoading" class="absolute left-0 top-0 h-full w-full flex-center">
+      <slot name="loading">
+        <FaIcon name="i-line-md:loading-twotone-loop" class="size-8 text-secondary-foreground/50" />
+      </slot>
+    </div>
+    <div v-if="isError" class="absolute left-0 top-0 h-full w-full flex-center">
+      <slot name="error">
+        <FaIcon name="i-ph:image-broken-duotone" class="size-8 text-secondary-foreground/50" />
+      </slot>
+    </div>
+    <Preview v-model="isOpen" :src />
+  </div>
+</template>

src/ui/components/FaImagePreview/preview.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { Dialog, DialogContent } from './dialog'
+
+const props = defineProps<{
+  src: string | string[]
+  index?: number
+}>()
+
+const isOpen = defineModel<boolean>()
+
+// 多图操作
+const index = ref(props.index ?? 0)
+const srcList = computed(() => {
+  if (Array.isArray(props.src)) {
+    return props.src
+  }
+  return [props.src]
+})
+function handlePrev() {
+  index.value = index.value - 1
+  if (index.value < 0) {
+    index.value = srcList.value.length - 1
+  }
+}
+function handleNext() {
+  index.value = index.value + 1
+  if (index.value >= srcList.value.length) {
+    index.value = 0
+  }
+}
+watch(index, resetImageState)
+
+// 图片操作相关状态
+const scale = ref(1)
+const rotate = ref(0)
+const position = ref({ x: 0, y: 0 })
+const isDragging = ref(false)
+const dragStart = ref({ x: 0, y: 0 })
+
+// 图片操作函数
+function handleZoomIn() {
+  scale.value = Math.min(scale.value + 0.25, 3)
+}
+
+function handleZoomOut() {
+  scale.value = Math.max(scale.value - 0.25, 0.5)
+}
+
+function handleOriginalSize() {
+  scale.value = 1
+}
+
+function handleRotateLeft() {
+  rotate.value = rotate.value - 90
+}
+
+function handleRotateRight() {
+  rotate.value = rotate.value + 90
+}
+
+// 处理滚轮缩放
+function handleWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (e.deltaY < 0) {
+    handleZoomIn()
+  }
+  else {
+    handleZoomOut()
+  }
+}
+
+// 处理鼠标按下事件
+function handleMouseDown(e: MouseEvent) {
+  isDragging.value = true
+  dragStart.value = {
+    x: e.clientX - position.value.x,
+    y: e.clientY - position.value.y,
+  }
+}
+
+// 处理鼠标移动事件
+function handleMouseMove(e: MouseEvent) {
+  if (!isDragging.value) {
+    return
+  }
+  position.value = {
+    x: e.clientX - dragStart.value.x,
+    y: e.clientY - dragStart.value.y,
+  }
+}
+
+// 处理鼠标松开事件
+function handleMouseUp() {
+  isDragging.value = false
+}
+
+// 重置图片状态
+function resetImageState() {
+  scale.value = 1
+  rotate.value = 0
+  position.value = { x: 0, y: 0 }
+}
+
+// 监听鼠标事件
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove)
+  window.addEventListener('mouseup', handleMouseUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove)
+  window.removeEventListener('mouseup', handleMouseUp)
+})
+
+function handleAnimationEnd() {
+  if (!isOpen.value) {
+    resetImageState()
+  }
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="size-full" @animation-end="handleAnimationEnd">
+      <div class="relative size-full flex-center" @wheel="handleWheel">
+        <img
+          :src="srcList[index]"
+          class="mx-auto max-h-full max-w-full object-contain"
+          :class="{
+            'transition-all duration-300': !isDragging,
+          }"
+          :style="{
+            transform: `translate(${position.x}px, ${position.y}px) scale(${scale}) rotate(${rotate}deg)`,
+            cursor: isDragging ? 'grabbing' : 'grab',
+          }"
+          @mousedown.prevent="handleMouseDown"
+        >
+        <template v-if="srcList.length > 1">
+          <div class="absolute bottom-20 left-1/2 text-sm text-muted-foreground -translate-x-1/2">
+            {{ index + 1 }} / {{ srcList.length }}
+          </div>
+          <FaButton variant="ghost" size="icon" class="absolute left-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handlePrev">
+            <FaIcon name="i-lucide:chevron-left" class="size-6" />
+          </FaButton>
+          <FaButton variant="ghost" size="icon" class="absolute right-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handleNext">
+            <FaIcon name="i-lucide:chevron-right" class="size-6" />
+          </FaButton>
+        </template>
+        <FaButtonGroup class="absolute bottom-4 left-1/2 scale-125 -translate-x-1/2">
+          <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleZoomIn">
+            <FaIcon name="i-carbon:zoom-in" class="size-5" />
+          </FaButton>
+          <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleZoomOut">
+            <FaIcon name="i-carbon:zoom-out" class="size-5" />
+          </FaButton>
+          <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleOriginalSize">
+            <FaIcon name="i-lucide:maximize" class="size-5" />
+          </FaButton>
+          <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleRotateLeft">
+            <FaIcon name="i-carbon:rotate" class="size-5" />
+          </FaButton>
+          <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleRotateRight">
+            <FaIcon name="i-carbon:rotate-180" class="size-5" />
+          </FaButton>
+        </FaButtonGroup>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

src/ui/components/FaImageUpload/index.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { filesize } from 'filesize'
+import { toast } from 'vue-sonner'
+import { useFaImagePreview } from '@/ui/components/FaImagePreview'
+import { cn } from '@/utils'
+
+const props = withDefaults(defineProps<{
+  action: string
+  method?: string
+  headers?: Headers | Record<string, any>
+  data?: Record<string, any>
+  name?: string
+  afterUpload?: (response: any) => string | Promise<string>
+  multiple?: boolean
+  ext?: string[]
+  max?: number
+  width?: number
+  height?: number
+  dimension?: {
+    width: number
+    height: number
+  }
+  size?: number
+  hideTips?: boolean
+  disabled?: boolean
+}>(), {
+  method: 'post',
+  headers: () => ({}),
+  data: () => ({}),
+  name: 'file',
+  multiple: false,
+  ext: () => [],
+  max: 1,
+  width: 100,
+  height: 100,
+  size: 5 * 1024 * 1024,
+  hideTips: false,
+  disabled: false,
+})
+
+const emits = defineEmits<{
+  onSuccess: [response: any, file: File]
+}>()
+
+const images = defineModel<string[]>('modelValue', { required: true })
+
+const isUploading = ref(false)
+const uploadProgress = ref(0)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+
+function onSelectFile(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (!input.files) {
+    return
+  }
+  const selectedFiles = Array.from(input.files)
+  const remain = props.max === 0 ? selectedFiles.length : props.max - images.value.length
+  const filesToAdd: File[] = []
+  for (const file of selectedFiles.slice(0, remain)) {
+    const fileSize = file.size / 1024 / 1024
+    if (fileSize > props.size) {
+      toast.error(`上传图片大小不能超过 ${filesize(props.size, { standard: 'jedec' })}`)
+      return
+    }
+    // 类型校验
+    if (props.ext.length > 0) {
+      const ext = file.name.split('.').pop()?.toLowerCase()
+      if (!props.ext.map(e => e.toLowerCase()).includes(ext || '')) {
+        toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式`, {
+          description: file.name,
+        })
+        continue
+      }
+    }
+    // 大小校验
+    if (props.size > 0) {
+      if (file.size > props.size) {
+        toast.error(`上传图片大小不能超过 ${filesize(props.size, { standard: 'jedec' })}`, {
+          description: `${file.name} (${filesize(file.size, { standard: 'jedec' })})`,
+        })
+        continue
+      }
+    }
+    filesToAdd.push(file)
+  }
+  fileInputRef.value!.value = ''
+  // 上传每个文件
+  filesToAdd.forEach((file) => {
+    isUploading.value = true
+    uploadProgress.value = 0
+    const formData = new FormData()
+    // 附加额外参数
+    Object.entries(props.data).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+    formData.append(props.name, file)
+    // 处理 headers，确保为普通对象
+    let headersObj: Record<string, any> = {}
+    if (props.headers instanceof Headers) {
+      props.headers.forEach((value, key) => {
+        headersObj[key] = value
+      })
+    }
+    else {
+      headersObj = { ...props.headers }
+    }
+    return axios({
+      url: props.action,
+      method: props.method,
+      headers: headersObj,
+      data: formData,
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+        }
+      },
+    }).then(async (response) => {
+      const url = await props.afterUpload?.(response.data)
+      if (url) {
+        images.value.push(url)
+      }
+      emits('onSuccess', response.data, file)
+    }).finally(() => {
+      isUploading.value = false
+      uploadProgress.value = 0
+    })
+  })
+}
+
+function onRemove(idx: number) {
+  images.value.splice(idx, 1)
+}
+
+function onPreview(index: number) {
+  useFaImagePreview().open(images.value, index)
+}
+
+function onMove(index: number, direction: 'forward' | 'backward') {
+  if (direction === 'forward' && index !== 0) {
+    images.value[index] = images.value.splice(index - 1, 1, images.value[index])[0]
+  }
+  if (direction === 'backward' && index !== images.value.length - 1) {
+    images.value[index] = images.value.splice(index + 1, 1, images.value[index])[0]
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(img, index) in images" :key="img" class="group/image-upload relative flex items-center justify-center overflow-hidden border rounded-lg" :style="{
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        }"
+      >
+        <img :src="img" class="h-full w-full object-contain">
+        <div v-if="!props.disabled" class="absolute inset-0 grid grid-cols-2 place-items-center rounded-lg bg-black/50 p-2 text-white opacity-0 transition-opacity group-hover/image-upload:opacity-100">
+          <div class="flex-center cursor-pointer opacity-60 transition-all hover:(scale-110 opacity-100)" @click.prevent="onPreview(index)">
+            <FaIcon name="i-icon-park-outline:preview-open" class="size-6" />
+          </div>
+          <div class="flex-center cursor-pointer opacity-60 transition-all hover:(scale-110 opacity-100)" @click.prevent="onRemove(index)">
+            <FaIcon name="i-icon-park-outline:delete" class="size-6" />
+          </div>
+          <div
+            v-show="images.length > 1" :class="cn('flex-center cursor-pointer opacity-60 transition-all', {
+              'hover:(scale-110 opacity-100)': index !== 0,
+              'cursor-not-allowed': index === 0,
+            })" @click="onMove(index, 'forward')"
+          >
+            <FaIcon name="i-icon-park-outline:arrow-circle-left" class="size-6" />
+          </div>
+          <div
+            v-show="images.length > 1" :class="cn('flex-center cursor-pointer opacity-60 transition-all', {
+              'hover:(scale-110 opacity-100)': index !== images.length - 1,
+              'cursor-not-allowed': index === images.length - 1,
+            })" @click="onMove(index, 'backward')"
+          >
+            <FaIcon name="i-icon-park-outline:arrow-circle-right" class="size-6" />
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="images.length < props.max || props.max === 0" class="relative flex-center overflow-hidden bg-transparent" :class="{
+          'cursor-not-allowed': props.disabled || isUploading,
+        }" :style="{
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        }" :disabled="props.disabled || isUploading" @click="fileInputRef?.click()"
+      >
+        <slot>
+          <div class="size-full flex-center border border-2 rounded-lg border-dashed p-0 text-primary">
+            <FaIcon name="i-icon-park-outline:upload" class="text-2xl text-card-foreground/50" />
+          </div>
+        </slot>
+        <template v-if="isUploading && uploadProgress > 0 && uploadProgress < 100">
+          <FaProgress :model-value="uploadProgress" class="absolute inset-x-1 inset-b-1 h-1 w-auto" />
+        </template>
+        <input ref="fileInputRef" type="file" accept="image/*" :multiple="props.multiple" class="hidden" @change="onSelectFile">
+      </button>
+    </div>
+    <div v-if="!props.hideTips && !props.disabled" class="flex flex-wrap gap-1 text-xs text-card-foreground/50 empty:hidden">
+      <div v-if="props.dimension" class="after:content-[';_'] last:after:content-empty">
+        {{ `建议尺寸为 ${props.dimension?.width}*${props.dimension?.height}` }}
+      </div>
+      <div v-if="props.ext.length > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `支持 ${props.ext.join(' / ')} 格式` }}
+      </div>
+      <div v-if="props.size > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `大小不超过 ${filesize(props.size, { standard: 'jedec' })}` }}
+      </div>
+      <div v-if="props.max > 1" class="after:content-[';_'] last:after:content-empty">
+        {{ `数量不超过 ${props.max} 个` }}
+      </div>
+    </div>
+  </div>
+</template>

src/ui/components/FaModal/dialog/DialogContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { useScrollLock } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { Maximize, Minimize, X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -9,28 +9,25 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogContentProps & {
-  class?: HTMLAttributes['class']
+  modalId: string
   open?: boolean
+  zIndex?: number
   maximize?: boolean
   maximizable?: boolean
   closable?: boolean
   overlay?: boolean
   overlayBlur?: boolean
+  class?: HTMLAttributes['class']
 }>()
 const emits = defineEmits<DialogContentEmits & {
   toggleMaximize: [val: boolean]
   animationEnd: []
 }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
@@ -54,8 +51,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('ModalId')
 </script>
 
 <template>
@@ -73,10 +68,13 @@ const id = inject('ModalId')
     >
       <div
         v-if="showOverlay"
-        :data-modal-id="id"
-        :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
+        :data-modal-id="props.modalId"
+        :class="cn('fixed inset-0 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
+        :style="{
+          zIndex: props.zIndex,
+        }"
       />
     </Transition>
     <DialogContent
@@ -84,9 +82,12 @@ const id = inject('ModalId')
       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-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',
+          'fixed left-1/2 top-1/2 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,
         )"
+      :style="{
+        zIndex: props.zIndex,
+      }"
       @animationend="emits('animationEnd')"
     >
       <slot />