feat: header右侧支持n个自定义位置插槽，插槽命名方式header-index，根据index大小排序。

框架默认插槽user-dropdown的index:20，notification的index:10 (#4034)

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

@@ -118,6 +118,7 @@ function handleMakeAll() {
 
 <template>
   <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <!--    <template #header-1>插槽1</template>-->
     <template #user-dropdown>
       <UserDropdown
         :avatar

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+
 import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
@@ -22,6 +24,23 @@ withDefaults(defineProps<Props>(), {
 
 const accessStore = useAccessStore();
 const { globalSearchShortcutKey } = usePreferences();
+const slots = useSlots();
+const headerSlots = computed(() => {
+  const list = [{ index: 20, name: 'user-dropdown' }];
+  if (preferences.widget.globalSearch) {
+    list.push({
+      index: 10,
+      name: 'notification',
+    });
+  }
+  Object.keys(slots).forEach((key) => {
+    const name = key.split('-');
+    if (key.startsWith('header-')) {
+      list.push({ index: Number(name[1]), name: key });
+    }
+  });
+  return list.sort((a, b) => a.index - b.index);
+});
 </script>
 
 <template>
@@ -41,7 +60,8 @@ const { globalSearchShortcutKey } = usePreferences();
     <ThemeToggle v-if="preferences.widget.themeToggle" class="mr-2" />
     <LanguageToggle v-if="preferences.widget.languageToggle" class="mr-2" />
     <VbenFullScreen v-if="preferences.widget.fullscreen" class="mr-2" />
-    <slot v-if="preferences.widget.notification" name="notification"></slot>
-    <slot name="user-dropdown"></slot>
+    <!--    <slot v-if="preferences.widget.notification" name="notification"></slot>-->
+    <!--    <slot name="user-dropdown"></slot>-->
+    <slot v-for="slot in headerSlots" :name="slot.name"></slot>
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, useSlots, watch } from 'vue';
 
 import { useWatermark } from '@vben/hooks';
 import { $t } from '@vben/locales';
@@ -147,6 +147,16 @@ watch(
     immediate: true,
   },
 );
+const slots = useSlots();
+const headerSlots = computed(() => {
+  const array: string[] = [];
+  Object.keys(slots).forEach((key: string) => {
+    if (key.startsWith('header-')) {
+      array.push(key);
+    }
+  });
+  return array;
+});
 </script>
 
 <template>
@@ -239,6 +249,9 @@ watch(
         <template #notification>
           <slot name="notification"></slot>
         </template>
+        <template v-for="item in headerSlots" #[item]>
+          <slot :name="item"></slot>
+        </template>
       </LayoutHeader>
     </template>
     <!-- 侧边菜单区域 -->