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

apps/backend-mock/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。由于 sqlite 安装需要在本地进行编译，所以这里接口是直接返回的。线上环境不再提供mock集成，可自行部署服务或者对接真实数据，同步 mock.js等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了 真是的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。
+Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供mock集成，可自行部署服务或者对接真实数据，mock.js 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。
 
 ## Running the app
 

apps/web-antd/package.json

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

apps/web-ele/package.json

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

apps/web-naive/package.json

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

docs/package.json

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

docs/src/guide/essentials/settings.md

@@ -189,6 +189,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
     name: 'Vben Admin',
+    preferencesButtonPosition: 'fixed',
     watermark: false,
   },
   breadcrumb: {
@@ -260,7 +261,8 @@ const defaultPreferences: Preferences = {
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',
     radius: '0.5',
-    semiDarkMenu: true,
+    semiDarkHeader: false,
+    semiDarkSidebar: true,
   },
   transition: {
     enable: true,
@@ -318,6 +320,8 @@ interface AppPreferences {
   loginExpiredMode: LoginExpiredModeType;
   /** 应用名 */
   name: string;
+  /** 偏好设置按钮位置 */
+  preferencesButtonPosition: PreferencesButtonPositionType;
   /**
    * @zh_CN 是否开启水印
    */
@@ -452,8 +456,10 @@ interface ThemePreferences {
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
+  /** 是否开启半深色header（只在theme='light'时生效） */
+  semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
+  semiDarkSidebar: boolean;
 }
 
 interface TransitionPreferences {

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

@@ -107,9 +107,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -117,6 +114,9 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   --sidebar-deep: 210 11.11% 96.47%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }
@@ -206,14 +206,12 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
+  --header: 222.34deg 10.43% 12.27%;
 
   color-scheme: dark;
 }
@@ -228,7 +226,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 ### 默认主题下：
 
 ```css
-/*  */
 :root {
   /* Background color for <Card /> */
   --card: 0 0% 30%;
@@ -238,10 +235,11 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 ### 黑暗模式下
 
 ```css
-/*  */
+.dark,
-:root {
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
   /* Background color for <Card /> */
-  --card: 0 0% 30%;
+  --card: 222.34deg 10.43% 12.27%;
 }
 ```
 
@@ -333,7 +331,7 @@ type BuiltinThemeType =
 
   /* 主体区域背景色 */
   --background-deep: 210 11.11% 96.47%;
-  --foreground: 210 6% 21%;
+  --foreground: 222 84% 5%;
 
   /* Background color for <Card /> */
   --card: 0 0% 100%;
@@ -344,8 +342,12 @@ type BuiltinThemeType =
   --popover-foreground: 222.2 84% 4.9%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 210 40% 96.1%;
+
-  --muted-foreground: 215.4 16.3% 46.9%;
+  /* --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%; */
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
 
   /* 主题颜色 */
 
@@ -403,16 +405,16 @@ type BuiltinThemeType =
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 0 0% 100%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }
@@ -717,8 +719,13 @@ type BuiltinThemeType =
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 220deg 6.82% 17.25%;
+
-  --muted-foreground: 215 20.2% 65.1%;
+  /* --muted: 220deg 6.82% 17.25%; */
+
+  /* --muted-foreground: 215 20.2% 65.1%; */
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
 
   /* 主题颜色 */
 
@@ -745,16 +752,16 @@ type BuiltinThemeType =
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 0deg 0% 100% / 8%;
+  --accent: 216 5% 19%;
-  --accent-hover: 0deg 0% 100% / 12%;
+  --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 0deg 0% 100% / 12%;
+  --heavy: 216 5% 24%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
-  --border: 240 3.7% 15.9%;
+  --border: 240 3.7% 22%;
 
   /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
   --input: 0deg 0% 100% / 10%;
@@ -775,15 +782,15 @@ type BuiltinThemeType =
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 222.34deg 10.43% 12.27%;
+
   color-scheme: dark;
 }
 
@@ -810,6 +817,7 @@ type BuiltinThemeType =
   --ring: 263.4 70% 50.4%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 
 .dark[data-theme='pink'],
@@ -835,6 +843,7 @@ type BuiltinThemeType =
   --ring: 346.8 77.2% 49.8%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='rose'],
@@ -860,6 +869,7 @@ type BuiltinThemeType =
   --ring: 0 72.2% 50.6%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='sky-blue'],
@@ -885,6 +895,7 @@ type BuiltinThemeType =
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='deep-blue'],
@@ -910,6 +921,7 @@ type BuiltinThemeType =
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='green'],
@@ -935,6 +947,7 @@ type BuiltinThemeType =
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='deep-green'],
@@ -960,6 +973,7 @@ type BuiltinThemeType =
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='orange'],
@@ -985,6 +999,7 @@ type BuiltinThemeType =
   --ring: 20.5 90.2% 48.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='yellow'],
@@ -1010,6 +1025,7 @@ type BuiltinThemeType =
   --ring: 35.5 91.7% 32.9%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='zinc'],
@@ -1035,6 +1051,7 @@ type BuiltinThemeType =
   --ring: 240 4.9% 83.9%;
   --sidebar: 240 10% 3.9%;
   --sidebar-deep: 240 10% 3.9%;
+  --header: 240 4.9% 83.9%;
 }
 
 .dark[data-theme='neutral'],
@@ -1060,6 +1077,7 @@ type BuiltinThemeType =
   --ring: 0 0% 83.1%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='slate'],
@@ -1085,6 +1103,7 @@ type BuiltinThemeType =
   --ring: 212.7 26.8% 83.9;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='gray'],
@@ -1110,6 +1129,7 @@ type BuiltinThemeType =
   --ring: 216 12.2% 83.9%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 ```
 
@@ -1198,6 +1218,50 @@ export const overridesPreferences = defineOverridesPreferences({
 });
 ```
 
+## 自定义侧边栏颜色
+
+侧边栏颜色通过`--sidebar`变量来配置
+
+### 默认主题下：
+
+```css
+:root {
+  --sidebar: 0 0% 100%;
+}
+```
+
+### 黑暗模式下
+
+```css
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
+  --sidebar: 222.34deg 10.43% 12.27%;
+}
+```
+
+## 自定义顶栏颜色
+
+侧边栏颜色通过`--header`变量来配置
+
+### 默认主题下：
+
+```css
+:root {
+  --header: 0 0% 100%;
+}
+```
+
+### 黑暗模式下
+
+```css
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
+  --header: 222.34deg 10.43% 12.27%;
+}
+```
+
 ## 色弱模式
 
 一般用于特殊场景，将设置为色弱模式，你可以在`preferences.ts`中进行配置：

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

internal/node-utils/src/spinner.ts

@@ -1,4 +1,4 @@
-import ora, { Ora } from 'ora';
+import ora, { type Ora } from 'ora';
 
 interface SpinnerOptions {
   failedText?: string;

internal/tailwind-config/package.json

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

internal/tailwind-config/src/index.ts

@@ -80,6 +80,9 @@ const customColors = {
     ...createColorsPalette('green'),
     foreground: 'hsl(var(--success-foreground))',
   },
+  header: {
+    DEFAULT: 'hsl(var(--header))',
+  },
   heavy: {
     DEFAULT: 'hsl(var(--heavy))',
     foreground: 'hsl(var(--heavy-foreground))',

internal/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-pro",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "private": true,
   "keywords": [
     "monorepo",

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

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

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

@@ -52,12 +52,12 @@
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 240 3.7% 15.9%;
+  --accent: 216 5% 19%;
-  --accent-hover: 240 3.7% 20.9%;
+  --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 240 3.7% 20.9%;
+  --heavy: 216 5% 24%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
@@ -82,15 +82,15 @@
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 222.34deg 10.43% 12.27%;
+
   color-scheme: dark;
 }
 
@@ -117,6 +117,7 @@
   --ring: 263.4 70% 50.4%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }
 
 .dark[data-theme='pink'],
@@ -142,6 +143,7 @@
   --ring: 346.8 77.2% 49.8%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='rose'],
@@ -167,6 +169,7 @@
   --ring: 0 72.2% 50.6%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='sky-blue'],
@@ -192,6 +195,7 @@
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='deep-blue'],
@@ -217,6 +221,7 @@
   --ring: 224.3 76.3% 48%;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='green'],
@@ -242,6 +247,7 @@
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='deep-green'],
@@ -267,6 +273,7 @@
   --ring: 142.4 71.8% 29.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='orange'],
@@ -292,6 +299,7 @@
   --ring: 20.5 90.2% 48.2%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='yellow'],
@@ -317,6 +325,7 @@
   --ring: 35.5 91.7% 32.9%;
   --sidebar: 20 14.3% 4.1%;
   --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
 }
 
 .dark[data-theme='zinc'],
@@ -342,6 +351,7 @@
   --ring: 240 4.9% 83.9%;
   --sidebar: 240 10% 3.9%;
   --sidebar-deep: 240 10% 3.9%;
+  --header: 240 4.9% 83.9%;
 }
 
 .dark[data-theme='neutral'],
@@ -367,6 +377,7 @@
   --ring: 0 0% 83.1%;
   --sidebar: 0 0% 3.9%;
   --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
 }
 
 .dark[data-theme='slate'],
@@ -392,6 +403,7 @@
   --ring: 212.7 26.8% 83.9;
   --sidebar: 222.2 84% 4.9%;
   --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
 }
 
 .dark[data-theme='gray'],
@@ -417,4 +429,5 @@
   --ring: 216 12.2% 83.9%;
   --sidebar: 224 71.4% 4.1%;
   --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
 }

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

@@ -8,7 +8,7 @@
 
   /* 主体区域背景色 */
   --background-deep: 210 11.11% 96.47%;
-  --foreground: 222 84% 5%;
+  --foreground: 210 6% 21%;
 
   /* Background color for <Card /> */
   --card: 0 0% 100%;
@@ -82,16 +82,16 @@
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 主体内容背景色 */
-  --content: 240 11% 96%;
-
   /* =============component & UI============= */
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 0 0% 100%;
   --menu: var(--sidebar);
 
+  /* header */
+  --header: 0 0% 100%;
+
   accent-color: var(--primary);
   color-scheme: light;
 }

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

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

packages/@core/base/icons/src/lucide.ts

@@ -38,7 +38,7 @@ export {
   RotateCw,
   Search,
   SearchX,
-  Settings2,
+  Settings,
   Sun,
   SunMoon,
   SwatchBook,

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/typings/src/app.d.ts

@@ -7,6 +7,13 @@ type LayoutType =
 
 type ThemeModeType = 'auto' | 'dark' | 'light';
 
+/**
+ * 偏好设置按钮位置
+ * fixed 固定在右侧
+ * header 顶栏
+ */
+type PreferencesButtonPositionType = 'fixed' | 'header';
+
 type BuiltinThemeType =
   | 'custom'
   | 'deep-blue'
@@ -92,6 +99,7 @@ export type {
   LoginExpiredModeType,
   NavigationStyleType,
   PageTransitionType,
+  PreferencesButtonPositionType,
   TabsStyleType,
   ThemeModeType,
 };

packages/@core/composables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -19,6 +19,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
     name: 'Vben Admin',
+    preferencesButtonPosition: 'fixed',
     watermark: false,
   },
   breadcrumb: {
@@ -90,7 +91,8 @@ const defaultPreferences: Preferences = {
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'auto',
     radius: '0.5',
-    semiDarkMenu: true,
+    semiDarkHeader: false,
+    semiDarkSidebar: true,
   },
   transition: {
     enable: true,

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

@@ -10,6 +10,7 @@ import type {
   LoginExpiredModeType,
   NavigationStyleType,
   PageTransitionType,
+  PreferencesButtonPositionType,
   TabsStyleType,
   ThemeModeType,
 } from '@vben-core/typings';
@@ -49,6 +50,8 @@ interface AppPreferences {
   loginExpiredMode: LoginExpiredModeType;
   /** 应用名 */
   name: string;
+  /** 偏好设置按钮位置 */
+  preferencesButtonPosition: PreferencesButtonPositionType;
   /**
    * @zh_CN 是否开启水印
    */
@@ -183,8 +186,10 @@ interface ThemePreferences {
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
+  /** 是否开启半深色header（只在theme='light'时生效） */
+  semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
+  semiDarkSidebar: boolean;
 }
 
 interface TransitionPreferences {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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-header.vue

@@ -36,6 +36,10 @@ interface Props {
    * 侧边菜单宽度
    */
   sidebarWidth: number;
+  /**
+   * 主题
+   */
+  theme: string | undefined;
   /**
    * 宽度
    */
@@ -76,15 +80,16 @@ function handleToggleMenu() {
 
 <template>
   <header
+    :class="theme"
     :style="style"
-    class="border-border bg-background top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
+    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
   >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>
     </div>
     <VbenIconButton
       v-if="showToggleBtn || isMobile"
-      class="my-0 ml-2 mr-1 rounded"
+      class="my-0 ml-2 mr-1 rounded-md"
       @click="handleToggleMenu"
     >
       <Menu class="size-4" />

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

@@ -24,9 +24,8 @@ interface Props {
   domVisible?: boolean;
   /**
    * 扩展区域宽度
-   * @default 180
    */
-  extraWidth?: number;
+  extraWidth: number;
   /**
    * 固定扩展区域
    * @default false
@@ -69,13 +68,12 @@ interface Props {
   /**
    * 主题
    */
-  theme?: string;
+  theme: string;
 
   /**
    * 宽度
-   * @default 180
    */
-  width?: number;
+  width: number;
   /**
    * zIndex
    * @default 0
@@ -87,7 +85,6 @@ const props = withDefaults(defineProps<Props>(), {
   collapseHeight: 42,
   collapseWidth: 48,
   domVisible: true,
-  extraWidth: 180,
   fixedExtra: false,
   isSidebarMixed: false,
   marginTop: 0,
@@ -95,8 +92,6 @@ const props = withDefaults(defineProps<Props>(), {
   paddingTop: 0,
   show: true,
   showCollapseButton: true,
-  theme: 'dark',
-  width: 180,
   zIndex: 0,
 });
 
@@ -181,10 +176,8 @@ const extraContentStyle = computed((): CSSProperties => {
 });
 
 const collapseStyle = computed((): CSSProperties => {
-  const { collapseHeight } = props;
-
   return {
-    height: `${collapseHeight}px`,
+    height: `${props.collapseHeight}px`,
   };
 });
 

packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts

@@ -0,0 +1,41 @@
+import type { LayoutType } from '@vben-core/typings';
+
+import type { VbenLayoutProps } from '../vben-layout';
+
+import { computed } from 'vue';
+
+export function useLayout(props: VbenLayoutProps) {
+  const currentLayout = computed(() =>
+    props.isMobile ? 'sidebar-nav' : (props.layout as LayoutType),
+  );
+
+  /**
+   * 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(() => currentLayout.value === 'full-content');
+
+  /**
+   * 是否侧边混合模式
+   */
+  const isSidebarMixedNav = computed(
+    () => currentLayout.value === 'sidebar-mixed-nav',
+  );
+
+  /**
+   * 是否为头部导航模式
+   */
+  const isHeaderNav = computed(() => currentLayout.value === 'header-nav');
+
+  /**
+   * 是否为混合导航模式
+   */
+  const isMixedNav = computed(() => currentLayout.value === 'mixed-nav');
+
+  return {
+    currentLayout,
+    isFullContent,
+    isHeaderNav,
+    isMixedNav,
+    isSidebarMixedNav,
+  };
+}

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

@@ -62,12 +62,6 @@ interface VbenLayoutProps {
    * @default 48
    */
   headerHeight?: number;
-  /**
-   * header高度增加高度
-   * 在顶部存在导航时，额外加高header高度
-   * @default 10
-   */
-  headerHeightOffset?: number;
   /**
    * 顶栏是否隐藏
    * @default false
@@ -78,6 +72,10 @@ interface VbenLayoutProps {
    * @default 'fixed'
    */
   headerMode?: LayoutHeaderModeType;
+  /**
+   * header 顶栏主题
+   */
+  headerTheme?: ThemeModeType;
   /**
    * 是否显示header切换侧边栏按钮
    * @default
@@ -133,11 +131,6 @@ interface VbenLayoutProps {
    * @default 80
    */
   sidebarMixedWidth?: number;
-  /**
-   * 侧边栏是否半深色
-   * @default false
-   */
-  sidebarSemiDark?: boolean;
   /**
    * 侧边栏
    * @default dark

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

@@ -13,6 +13,7 @@ import {
   LayoutSidebar,
   LayoutTabbar,
 } from './components';
+import { useLayout } from './hooks/use-layout';
 
 interface Props extends VbenLayoutProps {}
 
@@ -32,7 +33,6 @@ const props = withDefaults(defineProps<Props>(), {
   footerFixed: true,
   footerHeight: 32,
   headerHeight: 50,
-  headerHeightOffset: 10,
   headerHidden: false,
   headerMode: 'fixed',
   headerToggleSidebarButton: true,
@@ -43,7 +43,6 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarExtraCollapsedWidth: 60,
   sidebarHidden: false,
   sidebarMixedWidth: 80,
-  sidebarSemiDark: true,
   sidebarTheme: 'dark',
   sidebarWidth: 180,
   sideCollapseWidth: 60,
@@ -73,57 +72,23 @@ const {
 
 const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 
-const realLayout = computed(() =>
+const {
-  props.isMobile ? 'sidebar-nav' : props.layout,
+  currentLayout,
-);
+  isFullContent,
-
+  isHeaderNav,
-/**
+  isMixedNav,
- * 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+  isSidebarMixedNav,
- */
+} = useLayout(props);
-const fullContent = computed(() => realLayout.value === 'full-content');
-
-/**
- * 是否侧边混合模式
- */
-const isSidebarMixedNav = computed(
-  () => realLayout.value === 'sidebar-mixed-nav',
-);
-
-/**
- * 是否为头部导航模式
- */
-const isHeaderNav = computed(() => realLayout.value === 'header-nav');
-
-/**
- * 是否为混合导航模式
- */
-const isMixedNav = computed(() => realLayout.value === 'mixed-nav');
 
 /**
  * 顶栏是否自动隐藏
  */
 const isHeaderAutoMode = computed(() => props.headerMode === 'auto');
 
-/**
- * header区域高度
- */
-const getHeaderHeight = computed(() => {
-  const { headerHeight, headerHeightOffset } = props;
-
-  // if (!headerVisible) {
-  //   return 0;
-  // }
-
-  // 顶部存在导航时，增加10
-  const offset = isMixedNav.value || isHeaderNav.value ? headerHeightOffset : 0;
-
-  return headerHeight + offset;
-});
-
 const headerWrapperHeight = computed(() => {
   let height = 0;
   if (props.headerVisible && !props.headerHidden) {
-    height += getHeaderHeight.value;
+    height += props.headerHeight;
   }
   if (props.tabbarEnable) {
     height += props.tabbarHeight;
@@ -151,8 +116,8 @@ const sidebarEnableState = computed(() => {
  * 侧边区域离顶部高度
  */
 const sidebarMarginTop = computed(() => {
-  const { isMobile } = props;
+  const { headerHeight, isMobile } = props;
-  return isMixedNav.value && !isMobile ? getHeaderHeight.value : 0;
+  return isMixedNav.value && !isMobile ? headerHeight : 0;
 });
 
 /**
@@ -195,30 +160,13 @@ const sidebarExtraWidth = computed(() => {
 /**
  * 是否侧边栏模式，包含混合侧边
  */
-const isSideMode = computed(() =>
+const isSideMode = computed(
-  ['mixed-nav', 'sidebar-mixed-nav', 'sidebar-nav'].includes(realLayout.value),
+  () =>
+    currentLayout.value === 'mixed-nav' ||
+    currentLayout.value === 'sidebar-mixed-nav' ||
+    currentLayout.value === 'sidebar-nav',
 );
 
-const showSidebar = computed(() => {
-  // if (isMixedNav.value && !props.sideHidden) {
-  //   return false;
-  // }
-  return isSideMode.value && sidebarEnable.value;
-});
-
-const sidebarFace = computed(() => {
-  const { sidebarSemiDark, sidebarTheme } = props;
-  const isDark = sidebarTheme === 'dark' || sidebarSemiDark;
-  return {
-    theme: isDark ? 'dark' : 'light',
-  };
-});
-
-/**
- * 遮罩可见性
- */
-const maskVisible = computed(() => !sidebarCollapse.value && props.isMobile);
-
 /**
  * header fixed值
  */
@@ -232,13 +180,25 @@ const headerFixed = computed(() => {
   );
 });
 
+const showSidebar = computed(() => {
+  // if (isMixedNav.value && !props.sideHidden) {
+  //   return false;
+  // }
+  return isSideMode.value && sidebarEnable.value;
+});
+
+/**
+ * 遮罩可见性
+ */
+const maskVisible = computed(() => !sidebarCollapse.value && props.isMobile);
+
 const mainStyle = computed(() => {
   let width = '100%';
   let sidebarAndExtraWidth = 'unset';
   if (
     headerFixed.value &&
-    realLayout.value !== 'header-nav' &&
+    currentLayout.value !== 'header-nav' &&
-    realLayout.value !== 'mixed-nav' &&
+    currentLayout.value !== 'mixed-nav' &&
     showSidebar.value &&
     !props.isMobile
   ) {
@@ -253,7 +213,7 @@ const mainStyle = computed(() => {
         ? getSideCollapseWidth.value
         : props.sidebarMixedWidth;
       const sideWidth = sidebarExtraCollapse.value
-        ? getSideCollapseWidth.value
+        ? props.sidebarExtraCollapsedWidth
         : props.sidebarWidth;
 
       // 100% - 侧边菜单混合宽度 - 菜单宽度
@@ -312,7 +272,7 @@ const contentStyle = computed((): CSSProperties => {
   return {
     marginTop:
       fixed &&
-      !fullContent.value &&
+      !isFullContent.value &&
       !headerIsHidden.value &&
       (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
         ? `${headerWrapperHeight.value}px`
@@ -330,11 +290,11 @@ const headerZIndex = computed(() => {
 const headerWrapperStyle = computed((): CSSProperties => {
   const fixed = headerFixed.value;
   return {
-    height: fullContent.value ? '0' : `${headerWrapperHeight.value}px`,
+    height: isFullContent.value ? '0' : `${headerWrapperHeight.value}px`,
     left: isMixedNav.value ? 0 : mainStyle.value.sidebarAndExtraWidth,
     position: fixed ? 'fixed' : 'static',
     top:
-      headerIsHidden.value || fullContent.value
+      headerIsHidden.value || isFullContent.value
         ? `-${headerWrapperHeight.value}px`
         : 0,
     width: mainStyle.value.width,
@@ -403,7 +363,10 @@ watch(
   watch(
     [() => props.headerMode, () => mouseY.value],
     () => {
-      if (!isHeaderAutoMode.value || isMixedNav.value || fullContent.value) {
+      if (!isHeaderAutoMode.value || isMixedNav.value || isFullContent.value) {
+        if (props.headerMode !== 'auto-scroll') {
+          headerIsHidden.value = false;
+        }
         return;
       }
       headerIsHidden.value = true;
@@ -439,7 +402,7 @@ watch(
       if (
         props.headerMode !== 'auto-scroll' ||
         isMixedNav.value ||
-        fullContent.value
+        isFullContent.value
       ) {
         return;
       }
@@ -465,8 +428,6 @@ function handleOpenMenu() {
 
 <template>
   <div class="relative flex min-h-full w-full">
-    <slot name="preferences"></slot>
-    <slot name="floating-groups"></slot>
     <LayoutSidebar
       v-if="sidebarEnableState"
       v-model:collapse="sidebarCollapse"
@@ -478,12 +439,12 @@ function handleOpenMenu() {
       :dom-visible="!isMobile"
       :extra-width="sidebarExtraWidth"
       :fixed-extra="sidebarExpandOnHover"
-      :header-height="isMixedNav ? 0 : getHeaderHeight"
+      :header-height="isMixedNav ? 0 : headerHeight"
       :is-sidebar-mixed="isSidebarMixedNav"
       :margin-top="sidebarMarginTop"
       :mixed-width="sidebarMixedWidth"
       :show="showSidebar"
-      :theme="sidebarFace.theme"
+      :theme="sidebarTheme"
       :width="getSidebarWidth"
       :z-index="sidebarZIndex"
       @leave="() => emit('sideMouseLeave')"
@@ -518,12 +479,13 @@ function handleOpenMenu() {
         <LayoutHeader
           v-if="headerVisible"
           :full-width="!isSideMode"
-          :height="getHeaderHeight"
+          :height="headerHeight"
           :is-mixed-nav="isMixedNav"
           :is-mobile="isMobile"
-          :show="!fullContent && !headerHidden"
+          :show="!isFullContent && !headerHidden"
           :show-toggle-btn="showHeaderToggleButton"
           :sidebar-width="sidebarWidth"
+          :theme="headerTheme"
           :width="mainStyle.width"
           :z-index="headerZIndex"
           @open-menu="handleOpenMenu"
@@ -563,7 +525,7 @@ function handleOpenMenu() {
         v-if="footerEnable"
         :fixed="footerFixed"
         :height="footerHeight"
-        :show="!fullContent"
+        :show="!isFullContent"
         :width="footerWidth"
         :z-index="zIndex"
       >

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

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

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

@@ -479,8 +479,8 @@ $namespace: vben;
   }
 
   &.is-horizontal:not(.is-rounded) {
-    --menu-item-height: 60px;
+    --menu-item-height: 40px;
-    --menu-item-radius: 0px;
+    --menu-item-radius: 6px;
   }
 
   &.is-horizontal.is-rounded {
@@ -498,13 +498,13 @@ $namespace: vben;
     --menu-background-color: transparent;
 
     &.is-dark {
-      --menu-item-hover-color: var(--foreground);
+      --menu-item-hover-color: hsl(var(--accent-foreground));
       --menu-item-hover-background-color: hsl(var(--accent));
-      --menu-item-active-color: hsl(var(--foreground));
+      --menu-item-active-color: hsl(var(--accent-foreground));
       --menu-item-active-background-color: hsl(var(--accent));
       --menu-submenu-active-color: hsl(var(--foreground));
       --menu-submenu-active-background-color: hsl(var(--accent));
-      --menu-submenu-hover-color: hsl(var(--foreground));
+      --menu-submenu-hover-color: hsl(var(--accent-foreground));
       --menu-submenu-hover-background-color: hsl(var(--accent));
     }
 
@@ -514,7 +514,7 @@ $namespace: vben;
       --menu-item-hover-background-color: hsl(var(--accent));
       --menu-item-hover-color: hsl(var(--primary));
       --menu-submenu-active-color: hsl(var(--primary));
-      --menu-submenu-active-background-color: hsl(var(--primary) / 30%);
+      --menu-submenu-active-background-color: hsl(var(--primary) / 15%);
       --menu-submenu-hover-color: hsl(var(--primary));
       --menu-submenu-hover-background-color: hsl(var(--accent));
     }
@@ -776,7 +776,7 @@ $namespace: vben;
   &.is-active {
     div[data-state='open'] > .#{$namespace}-sub-menu-content,
     > .#{$namespace}-sub-menu-content {
-      font-weight: 500;
+      // font-weight: 500;
       color: var(--menu-submenu-active-color);
       text-decoration: none;
       cursor: pointer;

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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/index.ts

@@ -22,6 +22,7 @@ export * from './scrollbar';
 export * from './segmented';
 export * from './sheet';
 export * from './spinner';
+export * from './swap';
 export * from './tooltip';
 export * from './ui/alert-dialog';
 export * from './ui/avatar';

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

@@ -1 +1 @@
-export { default as Spinner } from './spinner.vue';
+export { default as VbenSpinner } from './spinner.vue';

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

@@ -0,0 +1 @@
+export { default as VbenSwap } from './swap.vue';

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

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+interface Props {
+  /**
+   * @zh_CN 交换模式
+   */
+  mode?: 'flip' | 'rotate';
+  /**
+   * @zh_CN 开启时的样式
+   */
+  offClass?: string;
+  /**
+   * @zh_CN 关闭时的样式
+   */
+  onClass?: string;
+}
+
+defineOptions({
+  name: 'Swap',
+});
+
+withDefaults(defineProps<Props>(), {
+  mode: 'rotate',
+  onClass: '',
+});
+</script>
+
+<template>
+  <label
+    :class="{
+      'swap-flip': mode === 'flip',
+      'swap-rotate': mode === 'rotate',
+    }"
+    class="swap"
+  >
+    <input class="hidden" type="checkbox" />
+
+    <div :class="onClass" class="swap-on">
+      <slot name="swap-on"></slot>
+    </div>
+
+    <div :class="offClass" class="swap-off">
+      <slot name="swap-off"></slot>
+    </div>
+  </label>
+</template>
+
+<style scoped>
+.swap {
+  @apply relative inline-grid cursor-pointer select-none place-content-center;
+}
+
+.swap > * {
+  @apply col-start-1 row-start-1 duration-300 ease-out;
+
+  transition-property: transform, opacity;
+}
+
+.swap-rotate .swap-on,
+.swap-rotate .swap-indeterminate,
+.swap-rotate input:indeterminate ~ .swap-on {
+  @apply rotate-45;
+}
+
+.swap-rotate input:checked ~ .swap-off,
+.swap-active:where(.swap-rotate) .swap-off,
+.swap-rotate input:indeterminate ~ .swap-off {
+  @apply -rotate-45;
+}
+
+.swap-rotate input:checked ~ .swap-on,
+.swap-active:where(.swap-rotate) .swap-on,
+.swap-rotate input:indeterminate ~ .swap-indeterminate {
+  @apply rotate-0;
+}
+
+.swap-flip {
+  transform-style: preserve-3d;
+  perspective: 16em;
+}
+
+.swap-flip .swap-on,
+.swap-flip .swap-indeterminate,
+.swap-flip input:indeterminate ~ .swap-on {
+  @apply opacity-100;
+
+  transform: rotateY(180deg);
+  backface-visibility: hidden;
+}
+
+.swap-flip input:checked ~ .swap-off,
+.swap-active:where(.swap-flip) .swap-off,
+.swap-flip input:indeterminate ~ .swap-off {
+  @apply opacity-100;
+
+  transform: rotateY(-180deg);
+  backface-visibility: hidden;
+}
+
+.swap-flip input:checked ~ .swap-on,
+.swap-active:where(.swap-flip) .swap-on,
+.swap-flip input:indeterminate ~ .swap-indeterminate {
+  transform: rotateY(0deg);
+}
+
+.swap input {
+  @apply appearance-none;
+}
+
+.swap .swap-on,
+.swap .swap-indeterminate,
+.swap input:indeterminate ~ .swap-on {
+  @apply opacity-0;
+}
+
+.swap input:checked ~ .swap-off,
+.swap-active .swap-off,
+.swap input:indeterminate ~ .swap-off {
+  @apply opacity-0;
+}
+
+.swap input:checked ~ .swap-on,
+.swap-active .swap-on,
+.swap input:indeterminate ~ .swap-indeterminate {
+  @apply opacity-100;
+}
+</style>

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

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border fixed inset-0 z-[1000] grid place-items-center overflow-y-auto bg-black/80"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border fixed inset-0 z-[1000] grid place-items-center overflow-y-auto border bg-black/80"
     >
       <DialogContent
         :class="

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared';
 
@@ -11,7 +11,7 @@ import {
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & HoverCardContentProps>(),
+  defineProps<{ class?: any } & HoverCardContentProps>(),
   {
     sideOffset: 4,
   },

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

@@ -9,10 +9,10 @@ export const sheetVariants = cva(
     variants: {
       side: {
         bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          'inset-y-0 right-0 h-full w-3/4 border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
       },
     },

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     defaultVariants: {
       variant: 'default',

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

@@ -41,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] overflow-hidden rounded-sm px-4 py-2 text-xs shadow-md',
+          'bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float z-[1000] overflow-hidden rounded-sm border px-4 py-2 text-xs',
           props.class,
         )
       "

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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

@@ -109,7 +109,7 @@ function scrollIntoView() {
                 <!-- divider -->
                 <div
                   v-if="i !== 0 && tab.key !== active"
-                  class="tabs-chrome__divider bg-foreground/80 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
+                  class="tabs-chrome__divider bg-foreground/60 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
                 ></div>
                 <!-- background -->
                 <div

packages/constants/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/constants --workspace
+pnpm add @vben/constants
 ```
 
 ### 使用

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/chart-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/chart-ui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/hooks/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/hooks --workspace
+pnpm add @vben/hooks
 ```
 
 ### 使用

packages/effects/hooks/package.json

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

packages/effects/layouts/package.json

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

packages/effects/layouts/src/basic/content/content.vue

@@ -10,7 +10,7 @@ import { RouterView } from 'vue-router';
 import { useContentHeight } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
 import { storeToRefs, useTabbarStore } from '@vben/stores';
-import { Spinner } from '@vben-core/shadcn-ui';
+import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 import { IFrameRouterView } from '../../iframe';
 import { useContentSpinner } from './use-content-spinner';
@@ -86,7 +86,7 @@ function transformComponent(
 
 <template>
   <div class="relative h-full">
-    <Spinner
+    <VbenSpinner
       v-if="preferences.transition.loading"
       :spinning="spinning"
       :style="contentStyles"

packages/effects/layouts/src/basic/header/header.vue

@@ -5,7 +5,12 @@ import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
 
-import { GlobalSearch, LanguageToggle, ThemeToggle } from '../../widgets';
+import {
+  GlobalSearch,
+  LanguageToggle,
+  PreferencesButton,
+  ThemeToggle,
+} from '../../widgets';
 
 interface Props {
   /**
@@ -26,34 +31,44 @@ const accessStore = useAccessStore();
 const { globalSearchShortcutKey } = usePreferences();
 const slots = useSlots();
 const rightSlots = computed(() => {
-  const list = [{ index: 30, name: 'user-dropdown' }];
+  const list = [{ index: 100, name: 'user-dropdown' }];
   if (preferences.widget.globalSearch) {
     list.push({
       index: 5,
       name: 'global-search',
     });
   }
-  if (preferences.widget.themeToggle) {
+
+  if (
+    preferences.app.enablePreferences &&
+    preferences.app.preferencesButtonPosition === 'header'
+  ) {
     list.push({
       index: 10,
+      name: 'preferences',
+    });
+  }
+  if (preferences.widget.themeToggle) {
+    list.push({
+      index: 15,
       name: 'theme-toggle',
     });
   }
   if (preferences.widget.languageToggle) {
     list.push({
-      index: 15,
+      index: 20,
       name: 'language-toggle',
     });
   }
   if (preferences.widget.fullscreen) {
     list.push({
-      index: 20,
+      index: 25,
       name: 'fullscreen',
     });
   }
   if (preferences.widget.notification) {
     list.push({
-      index: 25,
+      index: 30,
       name: 'notification',
     });
   }
@@ -66,6 +81,7 @@ const rightSlots = computed(() => {
   });
   return list.sort((a, b) => a.index - b.index);
 });
+
 const leftSlots = computed(() => {
   const list: any[] = [];
 
@@ -108,8 +124,12 @@ const leftSlots = computed(() => {
             class="mr-4"
           />
         </template>
+
+        <template v-else-if="slot.name === 'preferences'">
+          <PreferencesButton class="mr-2" />
+        </template>
         <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle class="mr-2" />
+          <ThemeToggle class="mr-2 mt-[2px]" />
         </template>
         <template v-else-if="slot.name === 'language-toggle'">
           <LanguageToggle class="mr-2" />

packages/effects/layouts/src/basic/layout.vue

@@ -41,17 +41,19 @@ const {
   isSideMixedNav,
   layout,
   sidebarCollapsed,
+  theme,
 } = usePreferences();
 const userStore = useUserStore();
 const { updateWatermark } = useWatermark();
 const lockStore = useLockStore();
 
-const headerMenuTheme = computed(() => {
+const sidebarTheme = computed(() => {
-  return isDark.value ? 'dark' : 'light';
+  const dark = isDark.value || preferences.theme.semiDarkSidebar;
+  return dark ? 'dark' : 'light';
 });
 
-const theme = computed(() => {
+const headerTheme = computed(() => {
-  const dark = isDark.value || preferences.theme.semiDarkMenu;
+  const dark = isDark.value || preferences.theme.semiDarkHeader;
   return dark ? 'dark' : 'light';
 });
 
@@ -160,6 +162,7 @@ const headerSlots = computed(() => {
     :footer-fixed="preferences.footer.fixed"
     :header-hidden="preferences.header.hidden"
     :header-mode="preferences.header.mode"
+    :header-theme="headerTheme"
     :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
     :header-visible="preferences.header.enable"
     :is-mobile="preferences.app.isMobile"
@@ -170,8 +173,7 @@ const headerSlots = computed(() => {
     :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
     :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
     :sidebar-hidden="preferences.sidebar.hidden"
-    :sidebar-semi-dark="preferences.theme.semiDarkMenu"
+    :sidebar-theme="sidebarTheme"
-    :sidebar-theme="theme"
     :sidebar-width="preferences.sidebar.width"
     :tabbar-enable="preferences.tabbar.enable"
     :tabbar-height="preferences.tabbar.height"
@@ -192,14 +194,6 @@ const headerSlots = computed(() => {
         updatePreferences({ sidebar: { extraCollapse: value } })
     "
   >
-    <template v-if="preferences.app.enablePreferences" #preferences>
-      <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout" />
-    </template>
-
-    <template #floating-groups>
-      <VbenBackTop />
-    </template>
-
     <!-- logo -->
     <template #logo>
       <VbenLogo
@@ -208,7 +202,7 @@ const headerSlots = computed(() => {
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
         :text="preferences.app.name"
-        :theme="showHeaderNav ? headerMenuTheme : theme"
+        :theme="showHeaderNav ? headerTheme : theme"
       />
     </template>
     <!-- 头部区域 -->
@@ -230,7 +224,7 @@ const headerSlots = computed(() => {
             :default-active="headerActive"
             :menus="wrapperMenus(headerMenus)"
             :rounded="isMenuRounded"
-            :theme="headerMenuTheme"
+            :theme="headerTheme"
             class="w-full"
             mode="horizontal"
             @select="handleMenuSelect"
@@ -256,7 +250,7 @@ const headerSlots = computed(() => {
         :default-active="sidebarActive"
         :menus="wrapperMenus(sidebarMenus)"
         :rounded="isMenuRounded"
-        :theme="theme"
+        :theme="sidebarTheme"
         mode="vertical"
         @select="handleMenuSelect"
       />
@@ -267,7 +261,7 @@ const headerSlots = computed(() => {
         :active-path="extraActiveMenu"
         :menus="wrapperMenus(headerMenus)"
         :rounded="isMenuRounded"
-        :theme="theme"
+        :theme="sidebarTheme"
         @default-select="handleDefaultSelect"
         @enter="handleMenuMouseEnter"
         @select="handleMixedMenuSelect"
@@ -280,7 +274,7 @@ const headerSlots = computed(() => {
         :collapse="preferences.sidebar.extraCollapse"
         :menus="wrapperMenus(extraMenus)"
         :rounded="isMenuRounded"
-        :theme="theme"
+        :theme="sidebarTheme"
       />
     </template>
     <template #side-extra-title>
@@ -325,6 +319,19 @@ const headerSlots = computed(() => {
       <Transition v-if="preferences.widget.lockScreen" name="slide-up">
         <slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
       </Transition>
+
+      <template
+        v-if="
+          preferences.app.enablePreferences &&
+          preferences.app.preferencesButtonPosition === 'fixed'
+        "
+      >
+        <Preferences
+          class="z-100 fixed bottom-20 right-0"
+          @clear-preferences-and-logout="clearPreferencesAndLogout"
+        />
+      </template>
+      <VbenBackTop />
     </template>
   </VbenAdminLayout>
 </template>

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

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben/preferences';
 import { useTabbarStore } from '@vben/stores';
-import { Spinner } from '@vben-core/shadcn-ui';
+import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 defineOptions({ name: 'IFrameRouterView' });
 
@@ -73,7 +73,7 @@ function showSpinning(index: number) {
         v-show="routeShow(item)"
         class="relative size-full"
       >
-        <Spinner :spinning="showSpinning(index)" />
+        <VbenSpinner :spinning="showSpinning(index)" />
         <iframe
           :src="item.meta.iframeSrc as string"
           class="size-full"

packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue

@@ -54,9 +54,6 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarDragable" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.dragable') }}
   </SwitchItem>
-  <SelectItem v-model="tabbarStyleType" :items="styleItems">
-    {{ $t('preferences.tabbar.styleType.title') }}
-  </SelectItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}
   </SwitchItem>
@@ -69,4 +66,7 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarShowMaximize" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.showMaximize') }}
   </SwitchItem>
+  <SelectItem v-model="tabbarStyleType" :items="styleItems">
+    {{ $t('preferences.tabbar.styleType.title') }}
+  </SelectItem>
 </template>

packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { computed } from 'vue';
+
 import { $t } from '@vben/locales';
 
+import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
 
 defineOptions({
@@ -14,6 +19,20 @@ const widgetNotification = defineModel<boolean>('widgetNotification');
 const widgetThemeToggle = defineModel<boolean>('widgetThemeToggle');
 const widgetSidebarToggle = defineModel<boolean>('widgetSidebarToggle');
 const widgetLockScreen = defineModel<boolean>('widgetLockScreen');
+const appPreferencesButtonPosition = defineModel<string>(
+  'appPreferencesButtonPosition',
+);
+
+const positionItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.position.header'),
+    value: 'header',
+  },
+  {
+    label: $t('preferences.position.fixed'),
+    value: 'fixed',
+  },
+]);
 </script>
 
 <template>
@@ -38,4 +57,7 @@ const widgetLockScreen = defineModel<boolean>('widgetLockScreen');
   <SwitchItem v-model="widgetSidebarToggle">
     {{ $t('preferences.widget.sidebarToggle') }}
   </SwitchItem>
+  <SelectItem v-model="appPreferencesButtonPosition" :items="positionItems">
+    {{ $t('preferences.position.title') }}
+  </SelectItem>
 </template>

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -13,9 +13,8 @@ defineOptions({
 });
 
 const modelValue = defineModel<string>({ default: 'auto' });
-const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu', {
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
-  default: true,
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
-});
 
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
@@ -71,11 +70,14 @@ function nameView(name: string) {
     </template>
 
     <SwitchItem
-      v-model="themeSemiDarkMenu"
+      v-model="themeSemiDarkSidebar"
       :disabled="modelValue === 'dark'"
       class="mt-6"
     >
-      {{ $t('preferences.theme.darkMenu') }}
+      {{ $t('preferences.theme.darkSidebar') }}
+    </SwitchItem>
+    <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
+      {{ $t('preferences.theme.darkHeader') }}
     </SwitchItem>
   </div>
 </template>

packages/effects/layouts/src/widgets/preferences/index.ts

@@ -1,2 +1,3 @@
 export { default as Preferences } from './preferences.vue';
+export { default as PreferencesButton } from './preferences-button.vue';
 export * from './use-open-preferences';

packages/effects/layouts/src/widgets/preferences/preferences-button.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Settings } from '@vben/icons';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+
+import Preferences from './preferences.vue';
+</script>
+<template>
+  <Preferences>
+    <VbenIconButton>
+      <Settings class="size-4" />
+    </VbenIconButton>
+  </Preferences>
+</template>

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -7,13 +7,14 @@ import type {
   LayoutHeaderModeType,
   LayoutType,
   NavigationStyleType,
+  PreferencesButtonPositionType,
   ThemeModeType,
 } from '@vben/types';
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { Copy, RotateCw, Settings2 } from '@vben/icons';
+import { Copy, RotateCw, Settings } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
   clearPreferencesCache,
@@ -63,6 +64,9 @@ const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
 const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 const appWatermark = defineModel<boolean>('appWatermark');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
+const appPreferencesButtonPosition = defineModel<PreferencesButtonPositionType>(
+  'appPreferencesButtonPosition',
+);
 
 const transitionProgress = defineModel<boolean>('transitionProgress');
 const transitionName = defineModel<string>('transitionName');
@@ -73,7 +77,8 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
-const themeSemiDarkMenu = defineModel<boolean>('themeSemiDarkMenu');
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
 const sidebarWidth = defineModel<number>('sidebarWidth');
@@ -219,19 +224,21 @@ async function handleReset() {
 </script>
 
 <template>
-  <div class="z-100 fixed right-0 top-1/2">
+  <div>
     <VbenSheet
       v-model:open="openPreferences"
       :description="$t('preferences.subtitle')"
       :title="$t('preferences.title')"
     >
       <template #trigger>
-        <VbenButton
+        <slot name="trigger">
-          :title="$t('preferences.title')"
+          <VbenButton
-          class="bg-primary flex-col-center h-10 w-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
+            :title="$t('preferences.title')"
-        >
+            class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
-          <Settings2 class="size-5" />
+          >
-        </VbenButton>
+            <Settings class="size-5" />
+          </VbenButton>
+        </slot>
       </template>
       <template #extra>
         <div class="flex items-center">
@@ -274,7 +281,8 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.title')">
               <Theme
                 v-model="themeMode"
-                v-model:theme-semi-dark-menu="themeSemiDarkMenu"
+                v-model:theme-semi-dark-header="themeSemiDarkHeader"
+                v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
               />
             </Block>
             <Block :title="$t('preferences.theme.builtin.title')">
@@ -356,6 +364,9 @@ async function handleReset() {
             </Block>
             <Block :title="$t('preferences.widget.title')">
               <Widget
+                v-model:app-preferences-button-position="
+                  appPreferencesButtonPosition
+                "
                 v-model:widget-fullscreen="widgetFullscreen"
                 v-model:widget-global-search="widgetGlobalSearch"
                 v-model:widget-language-toggle="widgetLanguageToggle"

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

@@ -47,5 +47,9 @@ const listen = computed(() => {
 });
 </script>
 <template>
-  <PreferencesSheet v-bind="attrs" v-on="listen" />
+  <PreferencesSheet v-bind="attrs" v-on="listen">
+    <template #trigger>
+      <slot></slot>
+    </template>
+  </PreferencesSheet>
 </template>

packages/effects/request/package.json

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

packages/icons/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/icons --workspace
+pnpm add @vben/icons
 ```
 
 ### 使用

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/locales/src/langs/en-US.json

@@ -179,6 +179,11 @@
     "dynamicTitle": "Dynamic Title",
     "watermark": "Watermark",
     "checkUpdates": "Periodic update check",
+    "position": {
+      "title": "Preferences Postion",
+      "header": "Header",
+      "fixed": "Fixed"
+    },
     "sidebar": {
       "title": "Sidebar",
       "width": "Width",
@@ -243,7 +248,8 @@
       "radius": "Radius",
       "light": "Light",
       "dark": "Dark",
-      "darkMenu": "Semi Dark Menu",
+      "darkSidebar": "Semi Dark Sidebar",
+      "darkHeader": "Semi Dark Header",
       "weakMode": "Weak Mode",
       "grayMode": "Gray Mode",
       "builtin": {

packages/locales/src/langs/zh-CN.json

@@ -179,6 +179,11 @@
     "dynamicTitle": "动态标题",
     "watermark": "水印",
     "checkUpdates": "定时检查更新",
+    "position": {
+      "title": "偏好设置位置",
+      "header": "顶栏",
+      "fixed": "固定"
+    },
     "sidebar": {
       "title": "侧边栏",
       "width": "宽度",
@@ -243,7 +248,8 @@
       "radius": "圆角",
       "light": "浅色",
       "dark": "深色",
-      "darkMenu": "深色菜单",
+      "darkSidebar": "深色侧边栏",
+      "darkHeader": "深色顶栏",
       "weakMode": "色弱模式",
       "grayMode": "灰色模式",
       "builtin": {

packages/preferences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/styles/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/styles --workspace
+pnpm add @vben/styles
 ```
 
 ### 使用

packages/styles/package.json

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

packages/types/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/types --workspace
+pnpm add @vben/types
 ```
 
 ### 使用

packages/types/package.json

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

packages/utils/README.md

@@ -9,7 +9,7 @@
 ```bash
 # 进入目标应用目录，例如 apps/xxxx-app
 # cd apps/xxxx-app
-pnpm add @vben/utils --workspace
+pnpm add @vben/utils
 ```
 
 ### 使用

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "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.0.1",
+  "version": "5.1.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

scripts/turbo-run/package.json

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

scripts/vsh/package.json

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