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

.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

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)
 
 ## 貢献方法
 

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
 

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
 

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"

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": {

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'),

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": {

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'),

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"
   }
 }

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'),

docs/.vitepress/config.mts

@@ -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: '权限' },

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",
+    "vitepress": "^1.3.3",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
   }
 }

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 代码

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',

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
+
+如果这些配置不能满足你的需求，你可以自行实现登录表单及相关登录逻辑。
+
+:::

docs/src/guide/introduction/thin.md

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

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",

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;
       }
 

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",

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"
   }
 }

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 });
     },

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';

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,

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');

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',

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",

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';

packages/@core/base/shared/src/store.ts

@@ -0,0 +1 @@
+export * from '@tanstack/vue-store';

packages/@core/base/typings/package.json

@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   }
 }

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"

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"
   }
 }

packages/@core/preferences/src/preferences.ts

@@ -116,7 +116,6 @@ class PreferenceManager {
         this.updatePreferences({
           theme: { mode: isDark ? 'dark' : 'light' },
         });
-        // updateCSSVariables(this.state);
       });
   }
 

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"
   }
 }

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>

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" />
+    <ChevronsRight v-if="collapsed" class="size-4" />
-    <MdiMenuOpen v-else class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
   </div>
 </template>

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" />
+    <PinOff v-if="!expandOnHover" class="size-3.5" />
-    <MdiPin v-else />
+    <Pin v-else class="size-3.5" />
   </div>
 </template>

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"

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"
   }
 }

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,

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -68,11 +68,13 @@ const isFirstLevel = computed(() => {
 });
 
 const contentProps = computed((): HoverCardContentProps => {
-  const side =
+  const isHorizontal = mode.value === 'horizontal';
-    mode.value === 'horizontal' && isFirstLevel.value ? 'bottom' : 'right';
+  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

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"
   }
 }

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(() => ({
+const computedShadowClasses = computed(() => {
-  'shadow-both':
+  return {
+    'both-shadow':
       !isAtLeft.value &&
       !isAtRight.value &&
       showShadowLeft.value &&
       showShadowRight.value,
-  'shadow-left': !isAtLeft.value && showShadowLeft.value,
+    'left-shadow': !isAtLeft.value && showShadowLeft.value,
-  'shadow-right': !isAtRight.value && showShadowRight.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,

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"
   }
 }

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)"

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)"

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -60,6 +60,8 @@ useTabsDrag(props, emit);
     >
       <VbenScrollbar
         ref="scrollbarRef"
+        :shadow-bottom="false"
+        :shadow-top="false"
         class="h-full"
         horizontal
         scroll-bar-class="z-10 hidden "

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');
     };
 

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"
   }
 }

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"
   }
 }

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": {

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"
   }

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"
   }
 }

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>
 

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">
+    <slot name="toolbar"> </slot>
-      <Toolbar />
-    </slot>
 
     <!-- Router View with Transition and KeepAlive -->
     <RouterView v-slot="{ Component, route }">

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 />
+      <AuthenticationColorToggle v-if="showColor" />
-      <AuthenticationLayoutToggle />
+      <AuthenticationLayoutToggle v-if="showLayout" />
     </div>
     <!-- Always show Language and Theme toggles -->
-    <LanguageToggle />
+    <LanguageToggle v-if="showLanguage" />
-    <ThemeToggle />
+    <ThemeToggle v-if="showTheme" />
   </div>
 </template>

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}`,
       });
     }
   },

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,
-  };
-}

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')

packages/effects/layouts/src/iframe/iframe-view.vue

@@ -1,6 +1,3 @@
-<script lang="ts" setup>
-defineOptions({ name: 'IFrameView' });
-</script>
 <template>
   <div></div>
 </template>

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');

packages/locales/package.json

@@ -20,8 +20,8 @@
     }
   },
   "dependencies": {
-    "@intlify/core-base": "^9.13.1",
+    "@intlify/core-base": "^9.14.0",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
-    "vue-i18n": "^9.13.1"
+    "vue-i18n": "^9.14.0"
   }
 }

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"
   }
 }

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"
   }
 }

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"
   }
 }

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'),

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="多行省略">