feat: add support for custom slot header-index, sorted by index (#4039)

* feat: header右侧支持n个自定义位置插槽，插槽命名方式header-index，根据index大小排序。
框架默认插槽user-dropdown的index:20，notification的index:10 (#4034)

* chore: 将默认组件加入排序

* chore: 更改slot命名方式支持header左侧自定义插槽，命名方式：header-right-n，header-left-n，具体位置看README

---------

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MenuRecordRaw } from '@vben/types';
 
-import { computed, watch } from 'vue';
+import { computed, useSlots, watch } from 'vue';
 
 import { useWatermark } from '@vben/hooks';
 import { $t } from '@vben/locales';
@@ -136,11 +136,8 @@ watch(
   () => preferences.app.watermark,
   async (val) => {
     if (val) {
-      // await nextTick();
-
-      updateWatermark({
+      await updateWatermark({
         content: `${preferences.app.name} 用户名: ${userStore.userInfo?.username}`,
-        // parent: contentRef.value,
       });
     }
   },
@@ -148,6 +145,11 @@ watch(
     immediate: true,
   },
 );
+
+const slots = useSlots();
+const headerSlots = computed(() => {
+  return Object.keys(slots).filter((key) => key.startsWith('header-'));
+});
 </script>
 
 <template>
@@ -240,6 +242,9 @@ watch(
         <template #notification>
           <slot name="notification"></slot>
         </template>
+        <template v-for="item in headerSlots" #[item]>
+          <slot :name="item"></slot>
+        </template>
       </LayoutHeader>
     </template>
     <!-- 侧边菜单区域 -->