Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

2024-08-18 10:05:18 +08:00
parent 5c13428bc9 f8485e8861
commit 4e268d6334
73 changed files with 963 additions and 895 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -27,7 +27,7 @@ jobs:
        uses: ./.github/actions/setup-node

      - name: Build
-        run: pnpm run build
+        run: pnpm build:play && pnpm build:docs

      - name: Sync Playground files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -66,7 +66,7 @@ jobs:
        uses: ./.github/actions/setup-node

      - name: Build
-        run: pnpm run build
+        run: pnpm run build:antd

      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -97,7 +97,7 @@ jobs:
        uses: ./.github/actions/setup-node

      - name: Build
-        run: pnpm run build
+        run: pnpm run build:ele

      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -128,7 +128,7 @@ jobs:
        uses: ./.github/actions/setup-node

      - name: Build
-        run: pnpm run build
+        run: pnpm run build:naive

      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -78,7 +78,7 @@ pnpm build

 ## 変更ログ

-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases/latest)
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)

 ## 貢献方法

--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ pnpm build

 ## Change Log

-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases/latest)
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)

 ## How to contribute

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -128,7 +128,7 @@ pnpm build

 ## 更新日志

-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases/latest)
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)

 ## Contributor

--- a/apps/backend-mock/package.json
+++ b/apps/backend-mock/package.json
@@ -6,8 +6,8 @@
  "license": "MIT",
  "author": "",
  "scripts": {
-    "start": "nitro dev",
-    "build": "nitro build"
+    "build": "nitro build",
+    "start": "nitro dev"
  },
  "dependencies": {
    "nitropack": "^2.9.7"
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -48,7 +48,7 @@
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "pinia": "2.2.2",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
--- a/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/apps/web-antd/src/router/routes/modules/vben.ts
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
      {
        name: 'VbenAbout',
        path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
          title: $t('page.vben.about'),
--- a/apps/web-antd/src/views/_core/vben/about/index.vue
+++ b/apps/web-antd/src/views/_core/vben/about/index.vue
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -44,7 +44,7 @@
    "dayjs": "^1.11.12",
    "element-plus": "^2.8.0",
    "pinia": "2.2.2",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
--- a/apps/web-ele/src/router/routes/modules/vben.ts
+++ b/apps/web-ele/src/router/routes/modules/vben.ts
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
      {
        name: 'VbenAbout',
        path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
          title: $t('page.vben.about'),
--- a/apps/web-ele/src/views/_core/vben/about/index.vue
+++ b/apps/web-ele/src/views/_core/vben/about/index.vue
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -43,7 +43,7 @@
    "@vueuse/core": "^11.0.0",
    "naive-ui": "^2.39.0",
    "pinia": "2.2.2",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/apps/web-naive/src/router/routes/modules/vben.ts
+++ b/apps/web-naive/src/router/routes/modules/vben.ts
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
      {
        name: 'VbenAbout',
        path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
          title: $t('page.vben.about'),
--- a/apps/web-naive/src/views/_core/vben/about/index.vue
+++ b/apps/web-naive/src/views/_core/vben/about/index.vue
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -13,7 +13,7 @@ import { version } from '../../package.json';

 export default withPwa(
  defineConfigWithTheme({
-    description: 'Vben Admin& 企业级管理系统框架',
+    description: 'Vben Admin & 企业级管理系统框架',
    head: head(),
    lang: 'zh',
    pwa: pwa(),
@@ -284,6 +284,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
    {
      text: '深入',
      items: [
+        { link: 'in-depth/login', text: '登录' },
        // { link: 'in-depth/layout', text: '布局' },
        { link: 'in-depth/theme', text: '主题' },
        { link: 'in-depth/access', text: '权限' },
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,7 +13,7 @@
  "devDependencies": {
    "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
    "@vite-pwa/vitepress": "^0.5.0",
-    "vitepress": "^1.3.2",
-    "vue": "^3.4.37"
+    "vitepress": "^1.3.3",
+    "vue": "^3.4.38"
  }
 }
--- a/docs/src/guide/essentials/development.md
+++ b/docs/src/guide/essentials/development.md
@@ -52,8 +52,18 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    // 构建项目并分析
    "build:analyze": "turbo build:analyze",
-    // 构建docker镜像
+    // 构建本地 docker 镜像
    "build:docker": "./build-local-docker-image.sh",
+    // 单独构建 web-antd 应用
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    // 单独构建文档
+    "build:docs": "pnpm run build --filter=@vben/docs",
+    // 单独构建 web-ele 应用
+    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    // 单独构建 web-naive 应用
+    "build:naive": "pnpm run build --filter=@vben/naive",
+    // 单独构建 playground 应用
+    "build:play": "pnpm run build --filter=@vben/playground",
    // changeset 版本管理
    "changeset": "pnpm exec changeset",
    // 检查项目各种问题
@@ -78,10 +88,10 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
    "dev:docs": "pnpm -F @vben/docs run dev",
    // 启动web-ele应用
    "dev:ele": "pnpm -F @vben/web-ele run dev",
-    // 启动演示应用
-    "dev:play": "pnpm -F @vben/playground run dev",
    // 启动web-naive应用
    "dev:naive": "pnpm -F @vben/web-naive run dev",
+    // 启动演示应用
+    "dev:play": "pnpm -F @vben/playground run dev",
    // 格式化代码
    "format": "vsh lint --format",
    // lint 代码
--- a/docs/src/guide/essentials/route.md
+++ b/docs/src/guide/essentials/route.md
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
      {
        name: 'VbenAbout',
        path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          badgeType: 'dot',
          badgeVariants: 'destructive',
--- a/docs/src/guide/in-depth/login.md
+++ b/docs/src/guide/in-depth/login.md
@@ -0,0 +1,131 @@
+# 登录
+
+本文介绍如何去改造自己的应用程序登录页。
+
+## 登录页面调整
+
+如果你想调整登录页面的标题、描述和图标以及工具栏，你可以通过配置 `AuthPageLayout` 组件的 `props` 参数来实现。
+
+![login](/guide/login.png)
+
+只需要在应用下的 `src/router/routes/core.ts` 内，配置`AuthPageLayout`的 `props`参数即可：
+
+```ts {4-8}
+ {
+    component: AuthPageLayout,
+    props: {
+      sloganImage: "xxx/xxx.png",
+      pageTitle: "开箱即用的大型中后台管理系统",
+      pageDescription: "工程化、高性能、跨组件库的前端模版",
+      toolbar: true,
+      toolbarList: () => ['color', 'language', 'layout', 'theme'],
+    }
+    // ...
+  },
+```
+
+::: tip
+
+如果这些配置不能满足你的需求，你可以自行实现登录页面。直接实现自己的 `AuthPageLayout`即可。
+
+:::
+
+## 登录表单调整
+
+如果你想调整登录表单的相关内容，你可以在应用下的 `src/views/_core/authentication/login.vue` 内，配置`AuthenticationLogin` 组件参数即可：
+
+```vue
+<AuthenticationLogin
+  :loading="authStore.loginLoading"
+  password-placeholder="123456"
+  username-placeholder="vben"
+  @submit="authStore.authLogin"
+/>
+```
+
+::: details AuthenticationLogin 组件参数
+
+```ts
+{
+  /**
+   * @zh_CN 验证码登录路径
+   */
+  codeLoginPath?: string;
+  /**
+   * @zh_CN 忘记密码路径
+   */
+  forgetPasswordPath?: string;
+
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+
+  /**
+   * @zh_CN 密码占位符
+   */
+  passwordPlaceholder?: string;
+
+  /**
+   * @zh_CN 二维码登录路径
+   */
+  qrCodeLoginPath?: string;
+
+  /**
+   * @zh_CN 注册路径
+   */
+  registerPath?: string;
+
+  /**
+   * @zh_CN 是否显示验证码登录
+   */
+  showCodeLogin?: boolean;
+  /**
+   * @zh_CN 是否显示忘记密码
+   */
+  showForgetPassword?: boolean;
+
+  /**
+   * @zh_CN 是否显示二维码登录
+   */
+  showQrcodeLogin?: boolean;
+
+  /**
+   * @zh_CN 是否显示注册按钮
+   */
+  showRegister?: boolean;
+
+  /**
+   * @zh_CN 是否显示记住账号
+   */
+  showRememberMe?: boolean;
+
+  /**
+   * @zh_CN 是否显示第三方登录
+   */
+  showThirdPartyLogin?: boolean;
+
+  /**
+   * @zh_CN 登录框子标题
+   */
+  subTitle?: string;
+
+  /**
+   * @zh_CN 登录框标题
+   */
+  title?: string;
+
+  /**
+   * @zh_CN 用户名占位符
+   */
+  usernamePlaceholder?: string;
+}
+```
+
+:::
+
+::: tip
+
+如果这些配置不能满足你的需求，你可以自行实现登录表单及相关登录逻辑。
+
+:::
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@@ -28,12 +28,7 @@ apps/web-native

 ## Mock 服务精简

-如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。
-
-```bash
-# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
-VITE_NITRO_MOCK=false
-```
+如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹即可。

 ## 安装依赖

--- a/docs/src/public/guide/login.png
+++ b/docs/src/public/guide/login.png
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -46,7 +46,7 @@
    "tailwindcss": "^3.4.3"
  },
  "dependencies": {
-    "@iconify/json": "^2.2.237",
+    "@iconify/json": "^2.2.238",
    "@iconify/tailwind": "^1.1.2",
    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
    "@tailwindcss/typography": "^0.5.14",
--- a/internal/vite-config/src/plugins/nitro-mock.ts
+++ b/internal/vite-config/src/plugins/nitro-mock.ts
@@ -23,7 +23,9 @@ export const viteNitroMockPlugin = ({

      const pkg = await getPackage(mockServerPackage);
      if (!pkg) {
-        consola.error(`Package ${mockServerPackage} not found.`);
+        consola.log(
+          `Package ${mockServerPackage} not found. Skip mock server.`,
+        );
        return;
      }

--- a/package.json
+++ b/package.json
@@ -29,6 +29,11 @@
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    "build:analyze": "turbo build:analyze",
    "build:docker": "./build-local-docker-image.sh",
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:docs": "pnpm run build --filter=@vben/docs",
+    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:play": "pnpm run build --filter=@vben/playground",
    "changeset": "pnpm exec changeset",
    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
    "check:circular": "vsh check-circular",
@@ -41,8 +46,8 @@
    "dev:antd": "pnpm -F @vben/web-antd run dev",
    "dev:docs": "pnpm -F @vben/docs run dev",
    "dev:ele": "pnpm -F @vben/web-ele run dev",
-    "dev:play": "pnpm -F @vben/playground run dev",
    "dev:naive": "pnpm -F @vben/web-naive run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
    "format": "vsh lint --format",
    "lint": "vsh lint",
    "postinstall": "turbo run stub",
@@ -60,7 +65,7 @@
    "@changesets/cli": "^2.27.7",
    "@ls-lint/ls-lint": "^2.2.3",
    "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.3.0",
+    "@types/node": "^22.4.0",
    "@vben/commitlint-config": "workspace:*",
    "@vben/eslint-config": "workspace:*",
    "@vben/prettier-config": "workspace:*",
@@ -75,7 +80,7 @@
    "@vue/test-utils": "^2.4.6",
    "autoprefixer": "^10.4.20",
    "cross-env": "^7.0.3",
-    "cspell": "^8.13.3",
+    "cspell": "^8.14.1",
    "husky": "^9.1.4",
    "is-ci": "^3.0.1",
    "jsdom": "^24.1.1",
@@ -87,7 +92,7 @@
    "unbuild": "^2.0.0",
    "vite": "^5.4.1",
    "vitest": "^2.0.5",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-tsc": "^2.0.29"
  },
  "engines": {
@@ -105,7 +110,7 @@
      "@ctrl/tinycolor": "4.1.0",
      "clsx": "2.1.1",
      "pinia": "2.2.2",
-      "vue": "3.4.37"
+      "vue": "3.4.38"
    },
    "neverBuiltDependencies": [
      "canvas",
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -36,6 +36,6 @@
  "dependencies": {
    "@iconify/vue": "^4.1.2",
    "lucide-vue-next": "^0.428.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/base/icons/src/create-icon.ts
+++ b/packages/@core/base/icons/src/create-icon.ts
@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue';

 function createIconifyIcon(icon: string) {
  return defineComponent({
-    name: `SvgIcon-${icon}`,
+    name: `Icon-${icon}`,
    setup(props, { attrs }) {
      return () => h(Icon, { icon, ...props, ...attrs });
    },
--- a/packages/@core/base/icons/src/index.ts
+++ b/packages/@core/base/icons/src/index.ts
@@ -1,5 +1,4 @@
 export * from './create-icon';
 export * from './lucide';

-export * from './mdi';
 export * from '@iconify/vue';
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -1,7 +1,9 @@
 export {
  ArrowDown,
  ArrowLeft,
+  ArrowLeftFromLine as MdiMenuOpen,
  ArrowLeftToLine,
+  ArrowRightFromLine as MdiMenuClose,
  ArrowRightLeft,
  ArrowRightToLine,
  ArrowUp,
@@ -11,10 +13,12 @@ export {
  ChevronDown,
  ChevronLeft,
  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
  CircleHelp,
  Copy,
  CornerDownLeft,
-  Disc3 as IconDefault,
+  Disc as IconDefault,
  Ellipsis,
  ExternalLink,
  Eye,
@@ -36,6 +40,8 @@ export {
  Palette,
  PanelLeft,
  PanelRight,
+  Pin,
+  PinOff,
  RotateCw,
  Search,
  SearchX,
--- a/packages/@core/base/icons/src/mdi.ts
+++ b/packages/@core/base/icons/src/mdi.ts
@@ -1,29 +0,0 @@
-import { createIconifyIcon } from './create-icon';
-
-export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
-
-export const MdiWechat = createIconifyIcon('mdi:wechat');
-
-export const MdiGithub = createIconifyIcon('mdi:github');
-
-export const MdiGoogle = createIconifyIcon('mdi:google');
-
-export const MdiQqchat = createIconifyIcon('mdi:qqchat');
-
-export const MdiPin = createIconifyIcon('mdi:pin');
-
-export const MdiPinOff = createIconifyIcon('mdi:pin-off');
-
-export const MdiMenuClose = createIconifyIcon('mdi:menu-close');
-
-export const MdiMenuOpen = createIconifyIcon('mdi:menu-open');
-
-export const EosSystem = createIconifyIcon('eos-icons:system-group');
-// 缓存监控使用
-export const RedisIcon = createIconifyIcon('logos:redis');
-export const CommandLineIcon = createIconifyIcon(
-  'flat-color-icons:command-line',
-);
-export const MemoryIcon = createIconifyIcon('la:memory');
-
-export const GiteeIcon = createIconifyIcon('simple-icons:gitee');
--- a/packages/@core/base/shared/build.config.ts
+++ b/packages/@core/base/shared/build.config.ts
@@ -5,6 +5,7 @@ export default defineBuildConfig({
  declaration: true,
  entries: [
    'src/index',
+    'src/store',
    'src/constants/index',
    'src/utils/index',
    'src/color/index',
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -44,6 +44,11 @@
      "types": "./src/cache/index.ts",
      "development": "./src/cache/index.ts",
      "default": "./dist/cache/index.mjs"
+    },
+    "./store": {
+      "types": "./src/store.ts",
+      "development": "./src/store.ts",
+      "default": "./dist/store.mjs"
    }
  },
  "publishConfig": {
@@ -56,7 +61,8 @@
  },
  "dependencies": {
    "@ctrl/tinycolor": "^4.1.0",
-    "@vue/shared": "^3.4.37",
+    "@tanstack/vue-store": "^0.5.5",
+    "@vue/shared": "^3.4.38",
    "clsx": "^2.1.1",
    "defu": "^6.1.4",
    "lodash.clonedeep": "^4.5.0",
--- a/packages/@core/base/shared/src/index.ts
+++ b/packages/@core/base/shared/src/index.ts
@@ -1,4 +1,5 @@
 export * from './cache';
 export * from './color';
 export * from './constants';
+export * from './store';
 export * from './utils';
--- a/packages/@core/base/shared/src/store.ts
+++ b/packages/@core/base/shared/src/store.ts
@@ -0,0 +1 @@
+export * from '@tanstack/vue-store';
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -38,7 +38,7 @@
    }
  },
  "dependencies": {
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -39,7 +39,7 @@
    "@vueuse/core": "^11.0.0",
    "radix-vue": "^1.9.4",
    "sortablejs": "^1.15.2",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  },
  "devDependencies": {
    "@types/sortablejs": "^1.15.8"
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -32,6 +32,6 @@
    "@vben-core/shared": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/preferences/src/preferences.ts
+++ b/packages/@core/preferences/src/preferences.ts
@@ -116,7 +116,6 @@ class PreferenceManager {
        this.updatePreferences({
          theme: { mode: isDark ? 'dark' : 'light' },
        });
-        // updateCSSVariables(this.state);
      });
  }

--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -42,6 +42,6 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -54,7 +54,6 @@ const style = computed((): CSSProperties => {

 <template>
  <main ref="contentElement" :style="style" class="bg-background-deep relative">
-    <!-- <BlurShadow :style="shadowStyle" /> -->
    <slot :overlay-style="overlayStyle" name="overlay"></slot>
    <slot></slot>
  </main>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
+import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';

 const collapsed = defineModel<boolean>('collapsed');

@@ -10,10 +10,10 @@ function handleCollapsed() {

 <template>
  <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
    @click.stop="handleCollapsed"
  >
-    <MdiMenuClose v-if="collapsed" class="size-4" />
-    <MdiMenuOpen v-else class="size-4" />
+    <ChevronsRight v-if="collapsed" class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
  </div>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MdiPin, MdiPinOff } from '@vben-core/icons';
+import { Pin, PinOff } from '@vben-core/icons';

 const expandOnHover = defineModel<boolean>('expandOnHover');

@@ -10,10 +10,10 @@ function toggleFixed() {

 <template>
  <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
    @click="toggleFixed"
  >
-    <MdiPinOff v-if="!expandOnHover" />
-    <MdiPin v-else />
+    <PinOff v-if="!expandOnHover" class="size-3.5" />
+    <Pin v-else class="size-3.5" />
  </div>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -474,7 +474,7 @@ function handleOpenMenu() {
    >
      <div
        :style="headerWrapperStyle"
-        class="overflow-hidden transition-all duration-200"
+        class="overflow-hidden shadow-[0_16px_24px_hsl(var(--background))] transition-all duration-200"
      >
        <LayoutHeader
          v-if="headerVisible"
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -43,6 +43,6 @@
    "@vben-core/shared": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -683,7 +683,7 @@ $namespace: vben;
  }

  &__popup {
-    padding: 4px 0;
+    padding: 10px 0;
    border-radius: var(--menu-item-radius);

    .#{$namespace}-sub-menu-content,
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -68,11 +68,13 @@ const isFirstLevel = computed(() => {
 });

 const contentProps = computed((): HoverCardContentProps => {
-  const side =
-    mode.value === 'horizontal' && isFirstLevel.value ? 'bottom' : 'right';
+  const isHorizontal = mode.value === 'horizontal';
+  const side = isHorizontal && isFirstLevel.value ? 'bottom' : 'right';
  return {
+    collisionPadding: { top: 20 },
    side,
-    sideOffset: isFirstLevel.value ? 5 : 10,
+    sideOffset: isHorizontal ? 5 : 10,
+    // sideOffset: 10,
  };
 });

@@ -214,7 +216,7 @@ onBeforeUnmount(() => {
        ]"
        :content-props="contentProps"
        :open="true"
-        :open-delay="0"
+        :open-delay="30"
      >
        <template #trigger>
          <SubMenuContent
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -50,6 +50,6 @@
    "class-variance-authority": "^0.7.0",
    "lucide-vue-next": "^0.428.0",
    "radix-vue": "^1.9.4",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -42,15 +42,17 @@ const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
 const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
 const showShadowRight = computed(() => props.shadow && props.shadowRight);

-const computedShadowClasses = computed(() => ({
-  'shadow-both':
-    !isAtLeft.value &&
-    !isAtRight.value &&
-    showShadowLeft.value &&
-    showShadowRight.value,
-  'shadow-left': !isAtLeft.value && showShadowLeft.value,
-  'shadow-right': !isAtRight.value && showShadowRight.value,
-}));
+const computedShadowClasses = computed(() => {
+  return {
+    'both-shadow':
+      !isAtLeft.value &&
+      !isAtRight.value &&
+      showShadowLeft.value &&
+      showShadowRight.value,
+    'left-shadow': !isAtLeft.value && showShadowLeft.value,
+    'right-shadow': !isAtRight.value && showShadowRight.value,
+  };
+});

 function handleScroll(event: Event) {
  const target = event.target as HTMLElement;
@@ -107,11 +109,11 @@ function handleScroll(event: Event) {

 <style scoped>
 .vben-scrollbar {
-  &:not(.shadow-both).shadow-left {
+  &:not(.both-shadow).left-shadow {
    mask-image: linear-gradient(90deg, transparent, #000 16px);
  }

-  &:not(.shadow-both).shadow-right {
+  &:not(.both-shadow).right-shadow {
    mask-image: linear-gradient(
      90deg,
      #000 0%,
@@ -120,7 +122,7 @@ function handleScroll(event: Event) {
    );
  }

-  &.shadow-both {
+  &.both-shadow {
    mask-image: linear-gradient(
      90deg,
      transparent,
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -42,6 +42,6 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';

 import { computed, ref } from 'vue';

-import { MdiPin, X } from '@vben-core/icons';
+import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';

 interface Props extends TabsProps {}
@@ -62,7 +62,7 @@ const tabsView = computed((): TabConfig[] => {
    :style="style"
    class="tabs-chrome !flex h-full w-max pr-6"
  >
-    <TransitionGroup name="slide-left">
+    <TransitionGroup name="slide-right">
      <div
        v-for="(tab, i) in tabsView"
        :key="tab.key"
@@ -70,7 +70,7 @@ const tabsView = computed((): TabConfig[] => {
        :class="[{ 'is-active': tab.key === active, dragable: !tab.affixTab }]"
        :data-active-tab="active"
        :data-index="i"
-        class="tabs-chrome__item draggable group relative -mr-3 flex h-full select-none items-center"
+        class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
        data-tab-item="true"
        @click="active = tab.key"
      >
@@ -119,7 +119,7 @@ const tabsView = computed((): TabConfig[] => {
                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
                @click.stop="() => emit('close', tab.key)"
              />
-              <MdiPin
+              <Pin
                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
                class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                @click.stop="() => emit('unpin', tab)"
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';

 import { computed } from 'vue';

-import { MdiPin, X } from '@vben-core/icons';
+import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';

 interface Props extends TabsProps {}
@@ -65,7 +65,7 @@ const tabsView = computed((): TabConfig[] => {
    :class="contentClass"
    class="relative !flex h-full w-max items-center pr-6"
  >
-    <TransitionGroup name="slide-left">
+    <TransitionGroup name="slide-right">
      <div
        v-for="(tab, i) in tabsView"
        :key="tab.key"
@@ -77,7 +77,7 @@ const tabsView = computed((): TabConfig[] => {
          typeWithClass.content,
        ]"
        :data-index="i"
-        class="tab-item [&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none"
+        class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
        data-tab-item="true"
        @click="active = tab.key"
      >
@@ -98,7 +98,7 @@ const tabsView = computed((): TabConfig[] => {
                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
                @click.stop="() => emit('close', tab.key)"
              />
-              <MdiPin
+              <Pin
                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
                class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                @click.stop="() => emit('unpin', tab)"
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -60,9 +60,11 @@ useTabsDrag(props, emit);
    >
      <VbenScrollbar
        ref="scrollbarRef"
+        :shadow-bottom="false"
+        :shadow-top="false"
        class="h-full"
        horizontal
-        scroll-bar-class="z-10 hidden"
+        scroll-bar-class="z-10 hidden "
        shadow
        shadow-left
        shadow-right
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
@@ -31,7 +31,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {

    const resetElState = async () => {
      el.style.cursor = 'default';
-      el.classList.remove('dragging');
+      // el.classList.remove('dragging');
      el.querySelector('.draggable')?.classList.remove('dragging');
    };

--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -24,6 +24,6 @@
    "@vben/stores": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/effects/chart-ui/package.json
+++ b/packages/effects/chart-ui/package.json
@@ -23,6 +23,6 @@
    "@vben/preferences": "workspace:*",
    "@vueuse/core": "^11.0.0",
    "echarts": "^5.5.1",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -28,7 +28,7 @@
    "@vben/types": "workspace:*",
    "@vueuse/integrations": "^11.0.0",
    "qrcode": "^1.5.4",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -25,7 +25,7 @@
    "@vben/stores": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3",
    "watermark-js-plus": "^1.5.3"
  }
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -33,7 +33,7 @@
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -6,9 +6,26 @@ import { preferences, usePreferences } from '@vben/preferences';

 import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
+import Toolbar from './toolbar.vue';
+
+interface Props {
+  pageTitle?: string;
+  pageDescription?: string;
+  sloganImage?: string;
+  toolbar?: boolean;
+  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+}

 defineOptions({ name: 'Authentication' });

+withDefaults(defineProps<Props>(), {
+  pageDescription: '',
+  pageTitle: '',
+  sloganImage: '',
+  toolbar: true,
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
 const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 const appName = computed(() => preferences.app.name);
 const logoSource = computed(() => preferences.logo.source);
@@ -21,7 +38,11 @@ const logoSource = computed(() => preferences.logo.source);
      v-if="authPanelLeft"
      class="min-h-full w-2/5"
      transition-name="slide-left"
-    />
+    >
+      <template v-if="toolbar" #toolbar>
+        <Toolbar :toolbar-list="toolbarList" />
+      </template>
+    </AuthenticationFormView>

    <!-- 头部 Logo 和应用名称 -->
    <div class="absolute left-0 top-0 z-10 flex flex-1">
@@ -41,12 +62,19 @@ const logoSource = computed(() => preferences.logo.source);
      <div class="absolute inset-0 h-full w-full bg-[#070709]">
        <div class="login-background absolute left-0 top-0 size-full"></div>
        <div class="flex-col-center -enter-x mr-20 h-full">
-          <SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
+          <template v-if="sloganImage">
+            <img
+              :alt="appName"
+              :src="sloganImage"
+              class="animate-float h-64 w-2/5"
+            />
+          </template>
+          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
-            {{ $t('authentication.pageTitle') }}
+            {{ pageTitle || $t('authentication.pageTitle') }}
          </div>
          <div class="dark:text-muted-foreground mt-2 text-white/60">
-            {{ $t('authentication.pageDesc') }}
+            {{ pageDescription || $t('authentication.pageDesc') }}
          </div>
        </div>
      </div>
@@ -57,14 +85,22 @@ const logoSource = computed(() => preferences.logo.source);
      <div class="login-background absolute left-0 top-0 size-full"></div>
      <AuthenticationFormView
        class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
-      />
+      >
+        <template v-if="toolbar" #toolbar>
+          <Toolbar :toolbar-list="toolbarList" />
+        </template>
+      </AuthenticationFormView>
    </div>

    <!-- 右侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelRight"
      class="min-h-full w-2/5 flex-1"
-    />
+    >
+      <template v-if="toolbar" #toolbar>
+        <Toolbar :toolbar-list="toolbarList" />
+      </template>
+    </AuthenticationFormView>
  </div>
 </template>

--- a/packages/effects/layouts/src/authentication/form.vue
+++ b/packages/effects/layouts/src/authentication/form.vue
@@ -2,7 +2,6 @@
 import { preferences } from '@vben/preferences';

 import { Copyright } from '../basic/copyright';
-import Toolbar from './toolbar.vue';

 defineOptions({
  name: 'AuthenticationFormView',
@@ -14,9 +13,7 @@ defineOptions({
    class="flex-col-center bg-background-deep relative px-6 py-10 lg:flex-initial lg:px-8"
  >
    <!-- Toolbar Slot -->
-    <slot name="toolbar">
-      <Toolbar />
-    </slot>
+    <slot name="toolbar"> </slot>

    <!-- Router View with Transition and KeepAlive -->
    <RouterView v-slot="{ Component, route }">
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import {
  AuthenticationColorToggle,
  AuthenticationLayoutToggle,
@@ -6,22 +8,39 @@ import {
  ThemeToggle,
 } from '../widgets';

+interface Props {
+  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+}
+
 defineOptions({
  name: 'AuthenticationToolbar',
 });
+
+const props = withDefaults(defineProps<Props>(), {
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
+const showColor = computed(() => props.toolbarList.includes('color'));
+const showLayout = computed(() => props.toolbarList.includes('layout'));
+const showLanguage = computed(() => props.toolbarList.includes('language'));
+const showTheme = computed(() => props.toolbarList.includes('theme'));
 </script>

 <template>
  <div
-    class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
+    :class="{
+      'bg-background dark:bg-accent rounded-3xl px-3 py-1':
+        toolbarList.length > 1,
+    }"
+    class="flex-center absolute right-2 top-4"
  >
    <!-- Only show on medium and larger screens -->
    <div class="hidden md:flex">
-      <AuthenticationColorToggle />
-      <AuthenticationLayoutToggle />
+      <AuthenticationColorToggle v-if="showColor" />
+      <AuthenticationLayoutToggle v-if="showLayout" />
    </div>
    <!-- Always show Language and Theme toggles -->
-    <LanguageToggle />
-    <ThemeToggle />
+    <LanguageToggle v-if="showLanguage" />
+    <ThemeToggle v-if="showTheme" />
  </div>
 </template>
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -139,7 +139,7 @@ watch(
  async (val) => {
    if (val) {
      await updateWatermark({
-        content: `${preferences.app.name} 用户名: ${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username}`,
      });
    }
  },
--- a/packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts
+++ b/packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts
@@ -1,50 +0,0 @@
-import { ref } from 'vue';
-
-type El = HTMLElement | null | undefined;
-
-export function useTabViewScroll(scrollDistance: number = 150) {
-  const scrollbarEl = ref<El>(null);
-  const scrollViewportEl = ref<El>(null);
-
-  function setScrollBarEl(el: El) {
-    scrollbarEl.value = el;
-  }
-
-  function setScrollViewEl(el: El) {
-    scrollViewportEl.value = el;
-  }
-
-  function getScrollClientWidth() {
-    if (!scrollbarEl.value || !scrollViewportEl.value) return {};
-
-    const scrollbarWidth = scrollbarEl.value.clientWidth;
-    const scrollViewWidth = scrollViewportEl.value.clientWidth;
-
-    return {
-      scrollbarWidth,
-      scrollViewWidth,
-    };
-  }
-
-  function scrollDirection(
-    direction: 'left' | 'right',
-    distance: number = scrollDistance,
-  ) {
-    const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
-
-    if (!scrollbarWidth || !scrollViewWidth) return;
-
-    if (scrollbarWidth > scrollViewWidth) return;
-
-    scrollViewportEl.value?.scrollBy({
-      behavior: 'smooth',
-      left: direction === 'left' ? -distance : +distance,
-    });
-  }
-
-  return {
-    scrollDirection,
-    setScrollBarEl,
-    setScrollViewEl,
-  };
-}
--- a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
+++ b/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
@@ -13,9 +13,9 @@ import {
  ExternalLink,
  FoldHorizontal,
  Fullscreen,
-  MdiPin,
-  MdiPinOff,
  Minimize2,
+  Pin,
+  PinOff,
  RotateCw,
  X,
 } from '@vben/icons';
@@ -135,7 +135,7 @@ export function useTabbar() {
        handler: async () => {
          await toggleTabPin(tab);
        },
-        icon: affixTab ? MdiPinOff : MdiPin,
+        icon: affixTab ? PinOff : Pin,
        key: 'affix',
        text: affixTab
          ? $t('preferences.tabbar.contextMenu.unpin')
--- a/packages/effects/layouts/src/iframe/iframe-view.vue
+++ b/packages/effects/layouts/src/iframe/iframe-view.vue
@@ -1,6 +1,3 @@
-<script lang="ts" setup>
-defineOptions({ name: 'IFrameView' });
-</script>
 <template>
  <div></div>
 </template>
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -1,5 +1,13 @@
-// import { createIconifyIcon } from '@vben-core/icons';
+import { createIconifyIcon } from '@vben-core/icons';

 export * from '@vben-core/icons';

-// export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
+export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
+
+export const MdiWechat = createIconifyIcon('mdi:wechat');
+
+export const MdiGithub = createIconifyIcon('mdi:github');
+
+export const MdiGoogle = createIconifyIcon('mdi:google');
+
+export const MdiQqchat = createIconifyIcon('mdi:qqchat');
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -20,8 +20,8 @@
    }
  },
  "dependencies": {
-    "@intlify/core-base": "^9.13.1",
-    "vue": "^3.4.37",
-    "vue-i18n": "^9.13.1"
+    "@intlify/core-base": "^9.14.0",
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0"
  }
 }
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -24,7 +24,7 @@
    "@vben-core/typings": "workspace:*",
    "pinia": "2.2.2",
    "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -21,7 +21,7 @@
  },
  "dependencies": {
    "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/playground/package.json
+++ b/playground/package.json
@@ -44,7 +44,7 @@
    "ant-design-vue": "^4.2.3",
    "dayjs": "^1.11.12",
    "pinia": "2.2.2",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/playground/src/router/routes/modules/vben.ts
+++ b/playground/src/router/routes/modules/vben.ts
@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
      {
        name: 'VbenAbout',
        path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
        meta: {
          icon: 'lucide:copyright',
          title: $t('page.vben.about'),
--- a/playground/src/views/_core/vben/about/index.vue
+++ b/playground/src/views/_core/vben/about/index.vue
--- a/playground/src/views/examples/ellipsis/index.vue
+++ b/playground/src/views/examples/ellipsis/index.vue
@@ -16,7 +16,7 @@ const text = ref(longText);
    title="文本省略示例"
  >
    <Card class="mb-4" title="基本使用">
-      <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+      <EllipsisText :max-width="500">{{ text }}</EllipsisText>
    </Card>

    <Card class="mb-4" title="多行省略">
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml