chore: release v5.2.1

Co-authored-by: afe1 <yunfei.zhu@nwowtec.com>

.github/labeler.yml

@@ -1,16 +0,0 @@
-# Add 'feature' label to any PR where the head branch name starts with `feature` or has a `feature` section in the name
-feature:
-  - head-branch: ["^feat", "feat"]
-
-bug:
-  - head-branch: ["^fix", "fix"]
-
-chore:
-  - head-branch: ["^chore", "chore"]
-
-perf:
-  - head-branch: ["^perf", "perf"]
-
-documentation:
-  - changed-files:
-      - any-glob-to-any-file: ["**/*.md", "docs/**"]

.github/workflows/labeler.yml

@@ -1,22 +0,0 @@
-name: PR Labeler
-
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-
-jobs:
-  label:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Label PR based on title or file changes
-        uses: actions/labeler@v5
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          configuration-path: .github/labeler.yml

.ls-lint.yml

@@ -1,28 +0,0 @@
-ls:
-  .js: kebab-case | pointcase
-  .vue: kebab-case | pointcase
-  .ts: kebab-case | pointcase
-  .tsx: kebab-case | pointcase
-  .jsx: kebab-case | pointcase
-  .css: kebab-case | pointcase
-  .d.ts: kebab-case | pointcase
-  # shadcn 自动生成文件为 PascalCase 格式
-  packages/@core/ui-kit/shadcn-ui/src/components/ui:
-    .vue: PascalCase
-
-ignore:
-  - "**/*.png"
-  - "**/*.jpg"
-  - "**/*.jpeg"
-  - "**/*.jpeg"
-  - "**/*.gif"
-  - "**/_util.ts"
-  - "**/deps/**"
-  - "**/dist/**"
-  - "**/node_modules/**"
-  - "**/.turbo/**"
-  - .git
-  - .vscode
-  - .idea
-  - node_modules
-  - .cache

.vscode/launch.json

@@ -9,7 +9,7 @@
       "url": "http://localhost:5555",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/playground/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -18,7 +18,7 @@
       "url": "http://localhost:5666",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-antd/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -27,7 +27,7 @@
       "url": "http://localhost:5777",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-ele/src"
+      "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
@@ -36,7 +36,7 @@
       "url": "http://localhost:5888",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-naive/src"
+      "webRoot": "${workspaceFolder}"
     }
   ]
 }

.vscode/settings.json

@@ -213,7 +213,7 @@
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
     "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
-    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,.ls-lint*,cspell.json",
+    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
     "tailwind.config.mjs": "postcss.*"
   },
   "commentTranslate.hover.enabled": false,

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

apps/web-antd/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-antd/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue

@@ -55,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -69,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

apps/web-antd/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

apps/web-antd/src/views/demos/antd/index.vue

@@ -37,7 +37,7 @@ function notify(type: NotificationType) {
     description="支持多语言，主题功能集成切换等"
     title="Ant Design Vue组件使用演示"
   >
-    <Card title="按钮">
+    <Card class="mb-5" title="按钮">
       <Space>
         <Button>Default</Button>
         <Button type="primary"> Primary </Button>

apps/web-ele/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

apps/web-ele/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-ele/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue

@@ -55,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -69,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

apps/web-ele/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

apps/web-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

apps/web-naive/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

apps/web-naive/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue

@@ -55,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -69,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

apps/web-naive/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "scripts": {
     "build": "vitepress build",

docs/src/en/guide/essentials/settings.md

@@ -240,7 +240,7 @@ const defaultPreferences: Preferences = {
   theme: {
     builtinType: 'default',
     colorDestructive: 'hsl(348 100% 61%)',
-    colorPrimary: 'hsl(231 98% 65%)',
+    colorPrimary: 'hsl(212 100% 45%)',
     colorSuccess: 'hsl(144 57% 58%)',
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',

docs/src/en/guide/in-depth/login.md

@@ -18,7 +18,7 @@ You just need to configure the `props` parameter of `AuthPageLayout` in `src/rou
       pageTitle: "开箱即用的大型中后台管理系统",
       pageDescription: "工程化、高性能、跨组件库的前端模版",
       toolbar: true,
-      toolbarList: () => ['color', 'language', 'layout', 'theme'],
+      toolbarList: ['color', 'language', 'layout', 'theme'],
     }
     // ...
   },

docs/src/en/guide/in-depth/theme.md

@@ -36,7 +36,7 @@ You can check the list below to understand all the available variables.
   --background: 0 0% 100%;
 
   /* Main area background color */
-  --background-deep: 210 11.11% 96.47%;
+  --background-deep: 216 20.11% 95.47%;
   --foreground: 210 6% 21%;
 
   /* Background color for <Card /> */
@@ -53,7 +53,7 @@ You can check the list below to understand all the available variables.
 
   /* Theme Colors */
 
-  --primary: 231 98% 65%;
+  --primary: 212 100% 45%;
   --primary-foreground: 0 0% 98%;
 
   /* Used for destructive actions such as <Button variant="destructive"> */
@@ -111,7 +111,7 @@ You can check the list below to understand all the available variables.
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 216 20.11% 95.47%;
   --menu: var(--sidebar);
 
   /* header */
@@ -264,7 +264,7 @@ export const overridesPreferences = defineOverridesPreferences({
     // Error color
     colorDestructive: 'hsl(348 100% 61%)',
     // Primary color
-    colorPrimary: 'hsl(231 98% 65%)',
+    colorPrimary: 'hsl(212 100% 45%)',
     // Success color
     colorSuccess: 'hsl(144 57% 58%)',
     // Warning color
@@ -330,7 +330,7 @@ type BuiltinThemeType =
   --background: 0 0% 100%;
 
   /* Main area background color */
-  --background-deep: 210 11.11% 96.47%;
+  --background-deep: 216 20.11% 95.47%;
   --foreground: 222 84% 5%;
 
   /* Background color for <Card /> */
@@ -351,7 +351,7 @@ type BuiltinThemeType =
 
   /* Theme Colors */
 
-  --primary: 231 98% 65%;
+  --primary: 212 100% 45%;
   --primary-foreground: 0 0% 98%;
 
   /* Used for destructive actions such as <Button variant="destructive"> */

docs/src/guide/essentials/settings.md

@@ -262,7 +262,7 @@ const defaultPreferences: Preferences = {
   theme: {
     builtinType: 'default',
     colorDestructive: 'hsl(348 100% 61%)',
-    colorPrimary: 'hsl(231 98% 65%)',
+    colorPrimary: 'hsl(212 100% 45%)',
     colorSuccess: 'hsl(144 57% 58%)',
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',

docs/src/guide/in-depth/login.md

@@ -8,28 +8,21 @@
 
 ![login](/guide/login.png)
 
-只需要在应用下的 `src/router/routes/core.ts` 内，配置`AuthPageLayout`的 `props`参数即可：
+只需要在应用下的 `src/layouts/auth.vue` 内，配置`AuthPageLayout`的 `props`参数即可：
 
-```ts {4-8}
- {
-    component: AuthPageLayout,
-    props: {
-      sloganImage: "xxx/xxx.png",
-      pageTitle: "开箱即用的大型中后台管理系统",
-      pageDescription: "工程化、高性能、跨组件库的前端模版",
-      toolbar: true,
-      toolbarList: () => ['color', 'language', 'layout', 'theme'],
-    }
-    // ...
-  },
+```vue {2-7}
+<AuthPageLayout
+  :copyright="true"
+  :toolbar="true"
+  :toolbarList="['color', 'language', 'layout', 'theme']"
+  :app-name="appName"
+  :logo="logo"
+  :page-description="$t('authentication.pageDesc')"
+  :page-title="$t('authentication.pageTitle')"
+>
+</AuthPageLayout>
 ```
 
-::: tip
-
-如果这些配置不能满足你的需求，你可以自行实现登录页面。直接实现自己的 `AuthPageLayout`即可。
-
-:::
-
 ## 登录表单调整
 
 如果你想调整登录表单的相关内容，你可以在应用下的 `src/views/_core/authentication/login.vue` 内，配置`AuthenticationLogin` 组件参数即可：

docs/src/guide/in-depth/theme.md

@@ -36,7 +36,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   --background: 0 0% 100%;
 
   /* 主体区域背景色 */
-  --background-deep: 210 11.11% 96.47%;
+  --background-deep: 216 20.11% 95.47%;
   --foreground: 210 6% 21%;
 
   /* Background color for <Card /> */
@@ -53,7 +53,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
   /* 主题颜色 */
 
-  --primary: 231 98% 65%;
+  --primary: 212 100% 45%;
   --primary-foreground: 0 0% 98%;
 
   /* Used for destructive actions such as <Button variant="destructive"> */
@@ -111,7 +111,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 216 20.11% 95.47%;
   --menu: var(--sidebar);
 
   /* header */
@@ -264,7 +264,7 @@ export const overridesPreferences = defineOverridesPreferences({
     // 错误色
     colorDestructive: 'hsl(348 100% 61%)',
     // 主题色
-    colorPrimary: 'hsl(231 98% 65%)',
+    colorPrimary: 'hsl(212 100% 45%)',
     // 成功色
     colorSuccess: 'hsl(144 57% 58%)',
     // 警告色
@@ -330,7 +330,7 @@ type BuiltinThemeType =
   --background: 0 0% 100%;
 
   /* 主体区域背景色 */
-  --background-deep: 210 11.11% 96.47%;
+  --background-deep: 216 20.11% 95.47%;
   --foreground: 222 84% 5%;
 
   /* Background color for <Card /> */
@@ -351,7 +351,7 @@ type BuiltinThemeType =
 
   /* 主题颜色 */
 
-  --primary: 231 98% 65%;
+  --primary: 212 100% 45%;
   --primary-foreground: 0 0% 98%;
 
   /* Used for destructive actions such as <Button variant="destructive"> */

internal/lint-configs/commitlint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/lint-configs/eslint-config/package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "eslint-config-turbo": "^2.1.0",
     "eslint-plugin-command": "^0.2.3",
-    "eslint-plugin-import-x": "^4.1.0"
+    "eslint-plugin-import-x": "^4.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

internal/lint-configs/stylelint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/node-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -36,18 +36,18 @@
     "nitropack": "^2.9.7",
     "resolve.exports": "^2.0.2",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-pwa": "^0.20.1",
+    "vite-plugin-pwa": "^0.20.2",
     "vite-plugin-vue-devtools": "^7.3.9"
   },
   "devDependencies": {
     "@types/archiver": "^6.0.2",
     "@types/html-minifier-terser": "^7.0.2",
     "@vben/node-utils": "workspace:*",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
-    "rollup": "^4.21.1",
+    "rollup": "^4.21.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
     "vite": "^5.4.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-pro",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "keywords": [
     "monorepo",
@@ -63,7 +63,6 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
-    "@ls-lint/ls-lint": "^2.2.3",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.5.1",
     "@vben/commitlint-config": "workspace:*",
@@ -75,7 +74,7 @@
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vben/vsh": "workspace:*",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
@@ -93,7 +92,7 @@
     "vite": "^5.4.2",
     "vitest": "^2.0.5",
     "vue": "^3.4.38",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.2"
   },
   "engines": {
     "node": ">=20",

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/design/src/css/global.css

@@ -136,7 +136,7 @@
   }
 
   .card-box {
-    @apply bg-card text-card-foreground border-border rounded-xl border shadow;
+    @apply bg-card text-card-foreground border-border rounded-xl border;
   }
 }
 

packages/@core/base/design/src/design-tokens/default/index.css

@@ -7,7 +7,7 @@
   --background: 0 0% 100%;
 
   /* 主体区域背景色 */
-  --background-deep: 210 11.11% 96.47%;
+  --background-deep: 216 20.11% 95.47%;
   --foreground: 210 6% 21%;
 
   /* Background color for <Card /> */
@@ -28,7 +28,7 @@
 
   /* 主题颜色 */
 
-  --primary: 231 98% 65%;
+  --primary: 212 100% 45%;
   --primary-foreground: 0 0% 98%;
 
   /* Used for destructive actions such as <Button variant="destructive"> */
@@ -77,7 +77,8 @@
   /* ============= custom ============= */
 
   /* 遮罩颜色 */
-  --overlay: 0 0% 0% / 30%;
+  --overlay: 0 0% 0% / 45%;
+  --overlay-light: 0 0% 95% / 45%;
 
   /* 基本文字大小 */
   --font-size-base: 16px;

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/composables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/preferences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -70,12 +70,12 @@ const defaultPreferences: Preferences = {
     expandOnHover: true,
     extraCollapse: true,
     hidden: false,
-    width: 230,
+    width: 224,
   },
   tabbar: {
     dragable: true,
     enable: true,
-    height: 36,
+    height: 38,
     keepAlive: true,
     persist: true,
     showIcon: true,
@@ -87,7 +87,7 @@ const defaultPreferences: Preferences = {
   theme: {
     builtinType: 'default',
     colorDestructive: 'hsl(348 100% 61%)',
-    colorPrimary: 'hsl(231 98% 65%)',
+    colorPrimary: 'hsl(212 100% 45%)',
     colorSuccess: 'hsl(144 57% 58%)',
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',

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

@@ -9,7 +9,7 @@ interface BuiltinThemePreset {
 
 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
   {
-    color: 'hsl(231 98% 65%)',
+    color: 'hsl(212 100% 45%)',
     type: 'default',
   },
   {
@@ -25,7 +25,7 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
     type: 'yellow',
   },
   {
-    color: 'hsl(212 100% 45%)',
+    color: 'hsl(231 98% 65%)',
     type: 'sky-blue',
   },
   {

packages/@core/ui-kit/layout-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -294,7 +294,7 @@ function handleMouseleave() {
       </div>
       <VbenScrollbar
         :style="extraContentStyle"
-        class="border-border border-t py-2"
+        class="border-border py-2"
         shadow
         shadow-border
       >

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarWidth: 180,
   sideCollapseWidth: 60,
   tabbarEnable: true,
-  tabbarHeight: 36,
+  tabbarHeight: 40,
   zIndex: 200,
 });
 

packages/@core/ui-kit/menu-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -153,13 +153,13 @@ function pointerDownOutside(e: Event) {
           {
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
               shouldFullscreen,
-            'top-1/2 -translate-y-1/2': centered && !shouldFullscreen,
+            'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
             'duration-300': !dragging,
           },
         )
       "
       :show-close="closable"
-      close-class="top-4"
+      close-class="top-3"
       @escape-key-down="escapeKeyDown"
       @interact-outside="interactOutside"
       @pointer-down-outside="pointerDownOutside"
@@ -219,7 +219,7 @@ function pointerDownOutside(e: Event) {
 
       <VbenIconButton
         v-if="fullscreenButton"
-        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-4 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
+        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
         @click="handleFullscreen"
       >
         <Shrink v-if="fullscreen" class="size-3.5" />

packages/@core/ui-kit/shadcn-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -28,12 +28,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const text = computed(() => {
-  return props.alt.slice(0, 2).toUpperCase();
+  return props.alt.slice(-2).toUpperCase();
 });
 </script>
 
 <template>
-  <div :class="props.class" class="relative flex-shrink-0">
+  <div :class="props.class" class="relative flex flex-shrink-0 items-center">
     <Avatar :class="props.class" class="size-full">
       <AvatarImage :alt="alt" :src="src" />
       <AvatarFallback>{{ text }}</AvatarFallback>

packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue

@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] h-10 w-10 rounded-full duration-500"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] size-10 rounded-full duration-500"
       size="icon"
       variant="icon"
       @click="handleClick"

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './types';
+import type { BreadcrumbProps } from './types';
 
 import { VbenIcon } from '../icon';
 
-interface Props {
-  breadcrumbs: IBreadcrumb[];
-  showIcon?: boolean;
-}
+interface Props extends BreadcrumbProps {}
 
 defineOptions({ name: 'Breadcrumb' });
 withDefaults(defineProps<Props>(), {

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { useForwardPropsEmits } from 'radix-vue';
+
+import Breadcrumb from './breadcrumb.vue';
+import BreadcrumbBackground from './breadcrumb-background.vue';
+
+interface Props extends BreadcrumbProps {
+  class?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{ select: [string] }>();
+
+const forward = useForwardPropsEmits(props, emit);
+</script>
+<template>
+  <Breadcrumb v-if="styleType === 'normal'" v-bind="forward" />
+  <BreadcrumbBackground v-if="styleType === 'background'" v-bind="forward" />
+</template>

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './types';
+import type { BreadcrumbProps } from './types';
 
 import { ChevronDown } from '@vben-core/icons';
 
@@ -19,10 +19,7 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
 
-interface Props {
-  breadcrumbs: IBreadcrumb[];
-  showIcon?: boolean;
-}
+interface Props extends BreadcrumbProps {}
 
 defineOptions({ name: 'Breadcrumb' });
 withDefaults(defineProps<Props>(), {

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts

@@ -1,4 +1,3 @@
-export { default as VbenBreadcrumb } from './breadcrumb.vue';
-export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue';
+export { default as VbenBreadcrumbView } from './breadcrumb-view.vue';
 
 export type * from './types';

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts

@@ -1,6 +1,8 @@
+import type { BreadcrumbStyleType } from '@vben-core/typings';
+
 import type { Component } from 'vue';
 
-interface IBreadcrumb {
+export interface IBreadcrumb {
   icon?: Component | string;
   isHome?: boolean;
   items?: IBreadcrumb[];
@@ -8,4 +10,8 @@ interface IBreadcrumb {
   title?: string;
 }
 
-export type { IBreadcrumb };
+export interface BreadcrumbProps {
+  breadcrumbs: IBreadcrumb[];
+  showIcon?: boolean;
+  styleType?: BreadcrumbStyleType;
+}

packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue

@@ -25,7 +25,7 @@ const show = ref(false);
 </script>
 
 <template>
-  <form class="relative">
+  <div class="relative">
     <VbenInput
       v-model="modelValue"
       v-bind="{ ...forward, ...$attrs }"
@@ -48,5 +48,5 @@ const show = ref(false);
       <Eye v-if="show" class="size-4" />
       <EyeOff v-else class="size-4" />
     </div>
-  </form>
+  </div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

@@ -1,27 +1,29 @@
 <script setup lang="ts">
+import { VbenAvatar } from '../avatar';
+
 interface Props {
   /**
-   * 是否收起文本
+   * @zh_CN 是否收起文本
    */
   collapsed?: boolean;
   /**
-   * Logo 跳转地址
+   * @zh_CN Logo 跳转地址
    */
   href?: string;
   /**
-   * Logo 图片大小
+   * @zh_CN Logo 图片大小
    */
   logoSize?: number;
   /**
-   * Logo 图标
+   * @zh_CN Logo 图标
    */
   src?: string;
   /**
-   * Logo 文本
+   * @zh_CN Logo 文本
    */
   text: string;
   /**
-   * Logo 主题
+   * @zh_CN Logo 主题
    */
   theme?: string;
 }
@@ -44,16 +46,18 @@ withDefaults(defineProps<Props>(), {
     <a
       :class="$attrs.class"
       :href="href"
-      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg font-semibold leading-normal transition-all duration-500"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
     >
-      <img
+      <VbenAvatar
         v-if="src"
         :alt="text"
         :src="src"
-        :width="logoSize"
-        class="relative rounded-none bg-transparent"
+        class="relative w-8 rounded-none bg-transparent"
       />
-      <span v-if="!collapsed" class="text-foreground truncate text-nowrap">
+      <span
+        v-if="!collapsed"
+        class="text-foreground truncate text-nowrap font-semibold"
+      >
         {{ text }}
       </span>
     </a>

packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue

@@ -69,7 +69,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'bg-overlay z-100 pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
+        'z-100 pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center bg-[hsl(var(--overlay-light))] transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },

packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue

@@ -63,7 +63,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'flex-center bg-overlay z-100 absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500',
+        'flex-center z-100 absolute left-0 top-0 size-full bg-[hsl(var(--overlay-light))] backdrop-blur-sm transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },

packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'bg-card text-card-foreground border-border rounded-xl border shadow-sm',
+        'bg-card text-card-foreground border-border rounded-xl border',
         props.class,
       )
     "

packages/@core/ui-kit/tabs-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -60,9 +60,9 @@ const tabsView = computed((): TabConfig[] => {
     ref="contentRef"
     :class="contentClass"
     :style="style"
-    class="tabs-chrome !flex h-full w-max pr-6"
+    class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
   >
-    <TransitionGroup name="slide-right">
+    <TransitionGroup name="slide-down">
       <div
         v-for="(tab, i) in tabsView"
         :key="tab.key"
@@ -84,14 +84,14 @@ const tabsView = computed((): TabConfig[] => {
             <!-- divider -->
             <div
               v-if="i !== 0 && tab.key !== active"
-              class="tabs-chrome__divider bg-foreground/50 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
+              class="tabs-chrome__divider bg-border absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
             ></div>
             <!-- background -->
             <div
               class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
             >
               <div
-                class="tabs-chrome__background-content group-[.is-active]:bg-heavy dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
+                class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
               ></div>
               <svg
                 class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
@@ -128,7 +128,7 @@ const tabsView = computed((): TabConfig[] => {
 
             <!-- tab-item-main -->
             <div
-              class="tabs-chrome__item-main group-[.is-active]:text-accent-foreground dark:group-[.is-active]:text-accent-foreground text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
+              class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
             >
               <VbenIcon
                 v-if="showIcon"
@@ -168,7 +168,7 @@ const tabsView = computed((): TabConfig[] => {
         @apply pb-[2px];
 
         &-content {
-          @apply bg-accent-hover mx-[2px] rounded-md;
+          @apply bg-accent mx-[2px] rounded-md;
         }
       }
     }

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

@@ -30,14 +30,15 @@ const active = defineModel<string>('active');
 const typeWithClass = computed(() => {
   const typeClasses: Record<string, { content: string }> = {
     brisk: {
-      content: `h-full  after:content-['']  after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 border-l border-border`,
+      content: `h-full after:content-['']  after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 [&:not(:first-child)]:border-l last:border-r last:border-r border-border`,
     },
     card: {
       content:
         'h-[calc(100%-6px)] rounded-md ml-2 border border-border  transition-all',
     },
     plain: {
-      content: 'h-full border-l border-border',
+      content:
+        'h-full [&:not(:first-child)]:border-l last:border-r border-border',
     },
   };
 
@@ -63,9 +64,9 @@ const tabsView = computed((): TabConfig[] => {
 <template>
   <div
     :class="contentClass"
-    class="relative !flex h-full w-max items-center pr-6"
+    class="relative !flex h-full w-max items-center overflow-y-hidden pr-6"
   >
-    <TransitionGroup name="slide-right">
+    <TransitionGroup name="slide-down">
       <div
         v-for="(tab, i) in tabsView"
         :key="tab.key"

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/access/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/common-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -92,14 +92,16 @@ function handleGo(path: string) {
 
 <template>
   <div @keydown.enter.prevent="handleSubmit">
-    <Title>
-      {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
-      <template #desc>
-        <span class="text-muted-foreground">
-          {{ subTitle || $t('authentication.loginSubtitle') }}
-        </span>
-      </template>
-    </Title>
+    <slot name="title">
+      <Title>
+        {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        <template #desc>
+          <span class="text-muted-foreground">
+            {{ subTitle || $t('authentication.loginSubtitle') }}
+          </span>
+        </template>
+      </Title>
+    </slot>
 
     <VbenInput
       v-model="formState.username"
@@ -123,7 +125,10 @@ function handleGo(path: string) {
       type="password"
     />
 
-    <div class="mb-6 mt-4 flex justify-between">
+    <div
+      v-if="showRememberMe || showForgetPassword"
+      class="mb-6 mt-4 flex justify-between"
+    >
       <div v-if="showRememberMe" class="flex-center">
         <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
           {{ $t('authentication.rememberMe') }}
@@ -142,7 +147,10 @@ function handleGo(path: string) {
       {{ $t('common.login') }}
     </VbenButton>
 
-    <div class="mb-2 mt-4 flex items-center justify-between">
+    <div
+      v-if="showCodeLogin || showQrcodeLogin"
+      class="mb-2 mt-4 flex items-center justify-between"
+    >
       <VbenButton
         v-if="showCodeLogin"
         class="w-1/2"
@@ -162,16 +170,20 @@ function handleGo(path: string) {
     </div>
 
     <!-- 第三方登录 -->
-    <ThirdPartyLogin v-if="showThirdPartyLogin" />
+    <slot name="third-party-login">
+      <ThirdPartyLogin v-if="showThirdPartyLogin" />
+    </slot>
 
-    <div v-if="showRegister" class="text-center text-sm">
-      {{ $t('authentication.accountTip') }}
-      <span
-        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
-        @click="handleGo(registerPath)"
-      >
-        {{ $t('authentication.createAccount') }}
-      </span>
-    </div>
+    <slot name="to-register">
+      <div v-if="showRegister" class="mt-3 text-center text-sm">
+        {{ $t('authentication.accountTip') }}
+        <span
+          class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+          @click="handleGo(registerPath)"
+        >
+          {{ $t('authentication.createAccount') }}
+        </span>
+      </div>
+    </slot>
   </div>
 </template>

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue

@@ -23,7 +23,7 @@ const defaultValue = computed(() => {
 </script>
 
 <template>
-  <div class="card-box w-full px-4 pb-5 pt-3 shadow">
+  <div class="card-box w-full px-4 pb-5 pt-3">
     <Tabs :default-value="defaultValue">
       <TabsList>
         <template v-for="tab in tabs" :key="tab.label">

packages/effects/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,6 +27,6 @@
     "@vben/utils": "workspace:*",
     "vue": "^3.4.38",
     "vue-router": "^4.4.3",
-    "watermark-js-plus": "^1.5.3"
+    "watermark-js-plus": "^1.5.4"
   }
 }

packages/effects/layouts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/layouts/src/authentication/authentication.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ToolbarType } from './types';
 
-import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
 
+import { Copyright } from '../basic/copyright';
 import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
 import Toolbar from './toolbar.vue';
 
 interface Props {
+  appName?: string;
+  logo?: string;
   pageTitle?: string;
   pageDescription?: string;
   sloganImage?: string;
   toolbar?: boolean;
-  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+  copyright?: boolean;
+  toolbarList?: ToolbarType[];
 }
 
-defineOptions({ name: 'Authentication' });
-
 withDefaults(defineProps<Props>(), {
+  appName: '',
+  copyright: true,
+  logo: '',
   pageDescription: '',
   pageTitle: '',
   sloganImage: '',
@@ -26,31 +30,42 @@ withDefaults(defineProps<Props>(), {
   toolbarList: () => ['color', 'language', 'layout', 'theme'],
 });
 
-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
-const appName = computed(() => preferences.app.name);
-const logoSource = computed(() => preferences.logo.source);
+const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
+  usePreferences();
 </script>
 
 <template>
-  <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
+  <div
+    :class="[isDark]"
+    class="flex min-h-full flex-1 select-none overflow-x-hidden"
+  >
+    <template v-if="toolbar">
+      <slot name="toolbar">
+        <Toolbar :toolbar-list="toolbarList" />
+      </slot>
+    </template>
     <!-- 左侧认证面板 -->
     <AuthenticationFormView
       v-if="authPanelLeft"
-      class="min-h-full w-2/5"
+      class="min-h-full w-2/5 flex-1"
       transition-name="slide-left"
     >
-      <template v-if="toolbar" #toolbar>
-        <Toolbar :toolbar-list="toolbarList" />
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
       </template>
     </AuthenticationFormView>
 
     <!-- 头部 Logo 和应用名称 -->
     <div class="absolute left-0 top-0 z-10 flex flex-1">
       <div
-        :class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'"
-        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+        class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
       >
-        <img :alt="appName" :src="logoSource" class="mr-2" width="42" />
+        <img :alt="appName" :src="logo" class="mr-2" width="42" />
         <p class="text-xl font-medium">
           {{ appName }}
         </p>
@@ -59,7 +74,9 @@ const logoSource = computed(() => preferences.logo.source);
 
     <!-- 系统介绍 -->
     <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
-      <div class="absolute inset-0 h-full w-full bg-[#070709]">
+      <div
+        class="bg-background-deep absolute inset-0 h-full w-full dark: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">
           <template v-if="sloganImage">
@@ -70,11 +87,11 @@ const logoSource = computed(() => preferences.logo.source);
             />
           </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">
-            {{ pageTitle || $t('authentication.pageTitle') }}
+          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
+            {{ pageTitle }}
           </div>
-          <div class="dark:text-muted-foreground mt-2 text-white/60">
-            {{ pageDescription || $t('authentication.pageDesc') }}
+          <div class="dark:text-muted-foreground mt-2">
+            {{ pageDescription }}
           </div>
         </div>
       </div>
@@ -84,10 +101,15 @@ const logoSource = computed(() => preferences.logo.source);
     <div v-if="authPanelCenter" class="flex-center relative w-full">
       <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%]"
+        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
       >
-        <template v-if="toolbar" #toolbar>
-          <Toolbar :toolbar-list="toolbarList" />
+        <template v-if="copyright" #copyright>
+          <slot name="copyright">
+            <Copyright
+              v-if="preferences.copyright.enable"
+              v-bind="preferences.copyright"
+            />
+          </slot>
         </template>
       </AuthenticationFormView>
     </div>
@@ -95,10 +117,15 @@ const logoSource = computed(() => preferences.logo.source);
     <!-- 右侧认证面板 -->
     <AuthenticationFormView
       v-if="authPanelRight"
-      class="min-h-full w-2/5 flex-1"
+      class="min-h-full w-[34%] flex-1"
     >
-      <template v-if="toolbar" #toolbar>
-        <Toolbar :toolbar-list="toolbarList" />
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
       </template>
     </AuthenticationFormView>
   </div>
@@ -109,9 +136,21 @@ const logoSource = computed(() => preferences.logo.source);
   background: linear-gradient(
     154deg,
     #07070915 30%,
-    hsl(var(--primary) / 15%) 48%,
+    hsl(var(--primary) / 30%) 48%,
     #07070915 64%
   );
   filter: blur(100px);
 }
+
+.dark {
+  .login-background {
+    background: linear-gradient(
+      154deg,
+      #07070915 30%,
+      hsl(var(--primary) / 20%) 48%,
+      #07070915 64%
+    );
+    filter: blur(100px);
+  }
+}
 </style>

packages/effects/layouts/src/authentication/form.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { preferences } from '@vben/preferences';
-
-import { Copyright } from '../basic/copyright';
-
 defineOptions({
   name: 'AuthenticationFormView',
 });
@@ -10,11 +6,9 @@ defineOptions({
 
 <template>
   <div
-    class="flex-col-center bg-background-deep relative px-6 py-10 lg:flex-initial lg:px-8"
+    class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
   >
-    <!-- Toolbar Slot -->
-    <slot name="toolbar"> </slot>
-
+    <slot></slot>
     <!-- Router View with Transition and KeepAlive -->
     <RouterView v-slot="{ Component, route }">
       <Transition appear mode="out-in" name="slide-right">
@@ -29,13 +23,11 @@ defineOptions({
     </RouterView>
 
     <!-- Footer Copyright -->
+
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >
-      <Copyright
-        v-if="preferences.copyright.enable"
-        v-bind="preferences.copyright"
-      />
+      <slot name="copyright"> </slot>
     </div>
   </div>
 </template>

packages/effects/layouts/src/authentication/toolbar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ToolbarType } from './types';
+
 import { computed } from 'vue';
 
 import {
@@ -9,7 +11,7 @@ import {
 } from '../widgets';
 
 interface Props {
-  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+  toolbarList?: ToolbarType[];
 }
 
 defineOptions({
@@ -29,8 +31,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
   <div
     :class="{
-      'bg-background dark:bg-accent rounded-3xl px-3 py-1':
-        toolbarList.length > 1,
+      'bg-accent z-10 rounded-3xl px-3 py-1': toolbarList.length > 1,
     }"
     class="flex-center absolute right-2 top-4"
   >

packages/effects/layouts/src/authentication/types.ts

@@ -0,0 +1 @@
+export type ToolbarType = 'color' | 'language' | 'layout' | 'theme';

packages/effects/layouts/src/widgets/breadcrumb.vue

@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { VbenBackgroundBreadcrumb, VbenBreadcrumb } from '@vben-core/shadcn-ui';
+import { VbenBreadcrumbView } from '@vben-core/shadcn-ui';
 
 interface Props {
   hideWhenOnlyOne?: boolean;
@@ -62,17 +62,10 @@ function handleSelect(path: string) {
 }
 </script>
 <template>
-  <VbenBreadcrumb
-    v-if="type === 'normal'"
-    :breadcrumbs="breadcrumbs"
-    :show-icon="showIcon"
-    class="ml-2"
-    @select="handleSelect"
-  />
-  <VbenBackgroundBreadcrumb
-    v-if="type === 'background'"
+  <VbenBreadcrumbView
     :breadcrumbs="breadcrumbs"
     :show-icon="showIcon"
+    :style-type="type"
     class="ml-2"
     @select="handleSelect"
   />

packages/effects/layouts/src/widgets/check-updates/check-updates.vue

@@ -61,7 +61,7 @@ async function checkForUpdates() {
 }
 function handleNotice(versionTag: string) {
   const { dismiss } = toast({
-    action: h('div', [
+    action: h('div', { class: 'inline-flex items-center' }, [
       h(
         ToastAction,
         {
@@ -76,7 +76,8 @@ function handleNotice(versionTag: string) {
         ToastAction,
         {
           altText: $t('common.refresh'),
-          class: 'bg-primary hover:bg-primary-hover mx-1',
+          class:
+            'bg-primary text-primary-foreground hover:bg-primary-hover mx-1',
           onClick: () => {
             lastVersionTag.value = versionTag;
             window.location.reload();
@@ -94,7 +95,11 @@ function handleNotice(versionTag: string) {
 }
 
 function start() {
-  // 每5分钟检查一次
+  if (props.checkUpdatesInterval <= 0) {
+    return;
+  }
+
+  // 每 checkUpdatesInterval(默认值为1) 分钟检查一次
   timer.value = setInterval(
     checkForUpdates,
     props.checkUpdatesInterval * 60 * 1000,

packages/effects/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/plugins",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/request/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/request/src/request-client/preset-interceptors.ts

@@ -87,7 +87,7 @@ export const errorMessageResponseInterceptor = (
         errMsg = $t('fallback.http.requestTimeout');
       }
       if (errMsg) {
-        makeErrorMessage?.(errMsg);
+        makeErrorMessage?.(errMsg, error);
         return Promise.reject(error);
       }
 
@@ -119,7 +119,7 @@ export const errorMessageResponseInterceptor = (
           errorMessage = $t('fallback.http.internalServerError');
         }
       }
-      makeErrorMessage?.(errorMessage);
+      makeErrorMessage?.(errorMessage, error);
       return Promise.reject(error);
     },
   };

packages/effects/request/src/request-client/types.ts

@@ -28,7 +28,7 @@ interface ResponseInterceptorConfig<T = any> {
   rejected?: (error: any) => any;
 }
 
-type MakeErrorMessageFn = (message: string) => void;
+type MakeErrorMessageFn = (message: string, error: any) => void;
 
 interface HttpResponse<T = any> {
   /**

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/locales/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/preferences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/stores/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -23,7 +23,7 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "pinia": "2.2.2",
-    "pinia-plugin-persistedstate": "^3.2.1",
+    "pinia-plugin-persistedstate": "^3.2.3",
     "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   }

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

playground/src/layouts/auth.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>

playground/src/layouts/index.ts

@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };

playground/src/views/dashboard/analytics/analytics-trends.vue

@@ -55,12 +55,27 @@ onMounted(() => {
       },
       trigger: 'axis',
     },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
     xAxis: {
       axisTick: {
         show: false,
       },
       boundaryGap: false,
       data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
       type: 'category',
     },
     yAxis: [
@@ -69,7 +84,10 @@ onMounted(() => {
           show: false,
         },
         max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
         type: 'value',
       },
     ],

playground/src/views/dashboard/workspace/index.vue

@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
         <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
       </div>
       <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
         <AnalysisChartCard class="mt-5" title="访问来源">
           <AnalyticsVisitsSource />

scripts/turbo-run/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "license": "MIT",
   "type": "module",

scripts/vsh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "private": true,
   "license": "MIT",
   "type": "module",

scripts/vsh/src/lint/index.ts

@@ -28,7 +28,6 @@ async function runLint({ format }: LintCommandOptions) {
     execaCommand(`eslint . --cache`, {
       stdio: 'inherit',
     }),
-    // $`ls-lint`,
     execaCommand(`prettier . --ignore-unknown --check --cache`, {
       stdio: 'inherit',
     }),