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

package.json

@@ -99,7 +99,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.12.0"
   },
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@9.15.1",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {

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

@@ -38,6 +38,7 @@ type BuiltinThemeType =
 type ContentCompactType = 'compact' | 'wide';
 
 type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
 
 /**
  * 登录过期模式
@@ -95,6 +96,7 @@ export type {
   BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -46,6 +46,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   "header": {
     "enable": true,
     "hidden": false,
+    "menuAlign": "start",
     "mode": "fixed",
   },
   "logo": {

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

@@ -46,6 +46,7 @@ const defaultPreferences: Preferences = {
   header: {
     enable: true,
     hidden: false,
+    menuAlign: 'start',
     mode: 'fixed',
   },
   logo: {

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

@@ -5,6 +5,7 @@ import type {
   BuiltinThemeType,
   ContentCompactType,
   DeepPartial,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,
@@ -104,6 +105,8 @@ interface HeaderPreferences {
   enable: boolean;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
+  /** 顶栏菜单位置 */
+  menuAlign: LayoutHeaderMenuAlignType;
   /** header显示模式 */
   mode: LayoutHeaderModeType;
 }

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

@@ -332,6 +332,7 @@ function removeMenuItem(item: MenuItemRegistered) {
       is(theme, true),
       is('rounded', rounded),
       is('collapse', collapse),
+      is('menu-align', mode === 'horizontal'),
     ]"
     :style="menuStyle"
     role="menu"
@@ -423,6 +424,10 @@ $namespace: vben;
   opacity: 1;
 }
 
+.is-menu-align {
+  justify-content: var(--menu-align, start);
+}
+
 .#{$namespace}-menu__popup-container,
 .#{$namespace}-menu {
   --menu-title-width: 140px;

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

@@ -133,7 +133,10 @@ function clearPreferencesAndLogout() {
   >
     <slot :name="slot.name"></slot>
   </template>
-  <div class="flex h-full min-w-0 flex-1 items-center">
+  <div
+    :class="`menu-align-${preferences.header.menuAlign}`"
+    class="flex h-full min-w-0 flex-1 items-center"
+  >
     <slot name="menu"></slot>
   </div>
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
@@ -166,3 +169,16 @@ function clearPreferencesAndLogout() {
     </template>
   </div>
 </template>
+<style lang="scss" scoped>
+.menu-align-start {
+  --menu-align: start;
+}
+
+.menu-align-center {
+  --menu-align: center;
+}
+
+.menu-align-end {
+  --menu-align: end;
+}
+</style>

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

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import type { LayoutHeaderModeType, SelectOption } from '@vben/types';
+import type {
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  SelectOption,
+} from '@vben/types';
 
 import { $t } from '@vben/locales';
 
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
 
 defineProps<{ disabled: boolean }>();
 
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
 
 const localeItems: SelectOption[] = [
   {
@@ -29,6 +36,21 @@ const localeItems: SelectOption[] = [
     value: 'auto-scroll',
   },
 ];
+
+const headerMenuAlignItems: SelectOption[] = [
+  {
+    label: $t('preferences.header.menuAlignStart'),
+    value: 'start',
+  },
+  {
+    label: $t('preferences.header.menuAlignCenter'),
+    value: 'center',
+  },
+  {
+    label: $t('preferences.header.menuAlignEnd'),
+    value: 'end',
+  },
+];
 </script>
 
 <template>
@@ -42,4 +64,11 @@ const localeItems: SelectOption[] = [
   >
     {{ $t('preferences.mode') }}
   </SelectItem>
+  <ToggleItem
+    v-model="headerMenuAlign"
+    :disabled="!headerEnable"
+    :items="headerMenuAlignItems"
+  >
+    {{ $t('preferences.header.menuAlign') }}
+  </ToggleItem>
 </template>

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

@@ -4,6 +4,7 @@ import type {
   BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   NavigationStyleType,
@@ -94,6 +95,8 @@ const SidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
 
 const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
 const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
@@ -317,6 +320,7 @@ async function handleReset() {
             <Block :title="$t('preferences.header.title')">
               <Header
                 v-model:header-enable="headerEnable"
+                v-model:header-menu-align="headerMenuAlign"
                 v-model:header-mode="headerMode"
                 :disabled="isFullContent"
               />

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

@@ -138,7 +138,11 @@
     "modeStatic": "Static",
     "modeFixed": "Fixed",
     "modeAuto": "Auto hide & Show",
-    "modeAutoScroll": "Scroll to Hide & Show"
+    "modeAutoScroll": "Scroll to Hide & Show",
+    "menuAlign": "Menu Align",
+    "menuAlignStart": "Start",
+    "menuAlignEnd": "End",
+    "menuAlignCenter": "Center"
   },
   "footer": {
     "title": "Footer",

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

@@ -138,7 +138,11 @@
     "modeFixed": "固定",
     "modeAuto": "自动隐藏和显示",
     "modeAutoScroll": "滚动隐藏和显示",
-    "visible": "显示顶栏"
+    "visible": "显示顶栏",
+    "menuAlign": "菜单位置",
+    "menuAlignStart": "左侧",
+    "menuAlignEnd": "右侧",
+    "menuAlignCenter": "居中"
   },
   "footer": {
     "title": "底栏",

pnpm-workspace.yaml

@@ -23,20 +23,20 @@ catalog:
   '@ctrl/tinycolor': ^4.1.0
   '@eslint/js': ^9.17.0
   '@faker-js/faker': ^9.3.0
-  '@iconify/json': ^2.2.286
+  '@iconify/json': ^2.2.289
   '@iconify/tailwind': ^1.2.0
   '@iconify/vue': ^4.2.0
   '@intlify/core-base': ^10.0.5
-  '@intlify/unplugin-vue-i18n': ^6.0.1
+  '@intlify/unplugin-vue-i18n': ^6.0.2
   '@jspm/generator': ^2.4.1
   '@manypkg/get-packages': ^2.2.2
-  '@nolebase/vitepress-plugin-git-changelog': ^2.11.1
+  '@nolebase/vitepress-plugin-git-changelog': ^2.12.0
   '@playwright/test': ^1.49.1
   '@pnpm/workspace.read-manifest': ^1000.0.1
   '@stylistic/stylelint-plugin': ^3.1.1
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.62.8
+  '@tanstack/vue-query': ^5.62.9
   '@tanstack/vue-store': ^0.6.0
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
@@ -51,29 +51,29 @@ catalog:
   '@types/qrcode': ^1.5.5
   '@types/sortablejs': ^1.15.8
   '@typescript-eslint/eslint-plugin': ^8.18.1
-  '@typescript-eslint/parser': ^8.18.1
+  '@typescript-eslint/parser': ^8.18.2
-  '@vee-validate/zod': ^4.14.7
+  '@vee-validate/zod': ^4.15.0
   '@vite-pwa/vitepress': ^0.5.3
   '@vitejs/plugin-vue': ^5.2.1
   '@vitejs/plugin-vue-jsx': ^4.1.1
   '@vue/reactivity': ^3.5.13
   '@vue/shared': ^3.5.13
   '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^12.0.0
+  '@vueuse/core': ^12.2.0
-  '@vueuse/integrations': ^12.0.0
+  '@vueuse/integrations': ^12.2.0
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.20
   axios: ^1.7.9
   axios-mock-adapter: ^2.1.0
   cac: ^6.7.14
-  chalk: ^5.4.0
+  chalk: ^5.4.1
   cheerio: 1.0.0
   circular-dependency-scanner: ^2.3.0
   class-variance-authority: ^0.7.1
   clsx: ^2.1.1
   commitlint-plugin-function-rules: ^4.0.1
-  consola: ^3.3.0
+  consola: ^3.3.3
   cross-env: ^7.0.3
   cspell: ^8.17.1
   cssnano: ^7.0.6
@@ -83,7 +83,7 @@ catalog:
   defu: ^6.1.4
   depcheck: ^1.4.7
   dotenv: ^16.4.7
-  echarts: ^5.5.1
+  echarts: ^5.6.0
   element-plus: ^2.9.1
   eslint: ^9.17.0
   eslint-config-turbo: ^2.3.3
@@ -124,13 +124,13 @@ catalog:
   ora: ^8.1.1
   pinia: 2.2.2
   pinia-plugin-persistedstate: ^4.2.0
-  pkg-types: ^1.2.1
+  pkg-types: ^1.3.0
   playwright: ^1.49.1
   postcss: ^8.4.49
   postcss-antd-fixes: ^0.2.0
   postcss-html: ^1.7.0
   postcss-import: ^16.1.0
-  postcss-preset-env: ^10.1.2
+  postcss-preset-env: ^10.1.3
   postcss-scss: ^4.0.9
   prettier: ^3.4.2
   prettier-plugin-tailwindcss: ^0.6.9
@@ -139,8 +139,8 @@ catalog:
   radix-vue: ^1.9.11
   resolve.exports: ^2.0.3
   rimraf: ^6.0.1
-  rollup: ^4.28.1
+  rollup: ^4.29.1
-  rollup-plugin-visualizer: ^5.12.0
+  rollup-plugin-visualizer: ^5.13.1
   sass: 1.80.6
   sortablejs: ^1.15.6
   stylelint: ^16.12.0
@@ -152,16 +152,16 @@ catalog:
   stylelint-order: ^6.0.4
   stylelint-prettier: ^5.0.2
   stylelint-scss: ^6.10.0
-  tailwind-merge: ^2.5.5
+  tailwind-merge: ^2.6.0
   tailwindcss: ^3.4.17
   tailwindcss-animate: ^1.0.7
   theme-colors: ^0.1.0
   turbo: ^2.3.3
   typescript: 5.6.3
-  unbuild: ^3.0.1
+  unbuild: ^3.1.0
   unplugin-element-plus: ^0.8.0
-  vee-validate: ^4.14.7
+  vee-validate: ^4.15.0
-  vite: ^6.0.5
+  vite: ^6.0.6
   vite-plugin-compression: ^0.5.1
   vite-plugin-dts: 4.2.1
   vite-plugin-html: ^3.2.2