@pubinfo/core 2.0.0-rc.2 → 2.0.0-rc.4

package/src/built-in/layout-component/components/Tools/DarkModeToggle.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import useViewTransition from '../../composables/useViewTransition';
+
+defineOptions({
+  name: 'DarkModeToggle',
+});
+
+const { settingsStore } = useContext();
+
+function toggleColorScheme(event: MouseEvent) {
+  const { startViewTransition } = useViewTransition(async () => {
+    const colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark';
+    settingsStore.setColorScheme(colorScheme);
+    await settingsStore.setPreferencesSetting({
+      app: {
+        colorScheme,
+      },
+    });
+  });
+
+  nextTick(() => {
+    startViewTransition()?.ready.then(() => {
+      const x = event.clientX;
+      const y = event.clientY;
+      const endRadius = Math.hypot(
+        Math.max(x, innerWidth - x),
+        Math.max(y, innerHeight - y),
+      );
+      const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${endRadius}px at ${x}px ${y}px)`,
+      ];
+      document.documentElement.animate(
+        {
+          clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
+        },
+        {
+          duration: 300,
+          easing: 'ease-out',
+          pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
+        },
+      );
+    });
+  });
+}
+</script>
+
+<template>
+  <div
+    v-if="settingsStore.settings.toolbar.enableColorScheme"
+    class="inline-flex items-center justify-center cursor-pointer"
+    @click="toggleColorScheme"
+  >
+    <div
+      class="animate-icon"
+      :class="{
+        'animate-icon-day': settingsStore.settings.app.colorScheme !== 'dark',
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.animate-icon {
+  --at-apply: relative size-[20px] rounded-1/2 inline-block align-middle;
+  box-shadow: inset 6px -6px 0 0 #fff; /* 比例缩小 */
+  transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
+  transform: scale(1) rotate(-2deg);
+}
+
+.animate-icon::before {
+  --at-apply: absolute size-[20px] content-empty rounded-[inherit] left-0 top-0 block;
+  transition: background 0.3s ease;
+}
+
+.animate-icon::after {
+  --at-apply: absolute top-1/2 left-1/2 size-1 -ml-0.5 -mt-0.5 rounded-[50%] content-empty block;
+  box-shadow:
+    0 -12px 0 #ffce6e,
+    0 12px 0 #ffce6e,
+    12px 0 0 #ffce6e,
+    -12px 0 0 #ffce6e,
+    8px 8px 0 #ffce6e,
+    -8px 8px 0 #ffce6e,
+    8px -8px 0 #ffce6e,
+    -8px -8px 0 #ffce6e;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+
+.animate-icon-day {
+  --at-apply: size-5;
+  box-shadow: inset 10px -10px 0 0 #fff; /* 缩小后的太阳核心 */
+  transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
+  transform: scale(0.5) rotate(0deg);
+}
+
+.animate-icon-day::before {
+  background: #ffce6e;
+  transition: background 0.3s ease 0.1s;
+}
+
+.animate-icon-day::after {
+  transition: transform 0.5s ease 0.15s;
+  transform: scale(1.2);
+}
+</style>

package/src/built-in/layout-component/components/Tools/Fullscreen.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core';
+import FluentFullScreenMaximize16Filled from '~icons/fluent/full-screen-maximize-16-filled';
+import FluentFullScreenMinimize16Filled from '~icons/fluent/full-screen-minimize-16-filled';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'Fullscreen',
+});
+
+const { isFullscreen, toggle } = useFullscreen();
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <div
+    v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen"
+    class="size-5 cursor-pointer"
+    @click="toggle"
+  >
+    <FluentFullScreenMinimize16Filled v-if="isFullscreen" text="16px" />
+    <FluentFullScreenMaximize16Filled v-else text="16px" />
+  </div>
+</template>

package/src/built-in/layout-component/components/Tools/PageReload.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import FluentArrowSync16Filled from '~icons/fluent/arrow-sync-16-filled';
+import { useContext } from '../../composables/useContext';
+import { useMainPage } from '../../composables/useMainPage';
+
+defineOptions({
+  name: 'PageReload',
+});
+
+const { settingsStore } = useContext();
+const mainPage = useMainPage();
+</script>
+
+<template>
+  <div
+    v-if="settingsStore.settings.toolbar.enablePageReload"
+    class="size-5 cursor-pointer"
+    @click="mainPage.reload()"
+  >
+    <FluentArrowSync16Filled text="16px" />
+  </div>
+</template>

package/src/built-in/layout-component/components/Tools/SearchBar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import IconamoonSearch from '~icons/iconamoon/search';
+import { useContext } from '../../composables/useContext';
+import { useGlobalSearch } from '../../composables/useGlobalSearch';
+
+defineOptions({
+  name: 'SearchBar',
+});
+
+const { settingsStore } = useContext();
+const { toggle: toggleSearch } = useGlobalSearch();
+
+const searchComponentsClass = computed(() => {
+  const componentsClass = {
+    'side': 'ring-1 ',
+    'head': 'bg-[var(--g-header-menu-active-bg)]',
+    'single': ' ring-1',
+    'only-side': 'ring-1',
+    'only-head': ' bg-[var(--g-header-menu-active-bg)]',
+  };
+  const menuMode = settingsStore.settings.menu.menuMode;
+  return componentsClass[menuMode];
+});
+</script>
+
+<template>
+  <span
+    v-if="settingsStore.settings.navSearch.enable"
+    class="group inline-flex cursor-pointer items-center gap-1 rounded-2 px-2 py-1.5 hover:ring-1 ring-inset transition ring-stone-3 dark:ring-stone-7"
+    :class="searchComponentsClass"
+    @click="toggleSearch('menu')"
+  >
+    <IconamoonSearch text="14px" />
+    <span class="text-sm  transition ">{{ '搜索' }}</span>
+    <HKbd
+      v-if="settingsStore.settings.navSearch.enableHotkeys"
+      class="ml-2"
+    >
+      {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S
+    </HKbd>
+  </span>
+</template>

package/src/built-in/layout-component/components/Tools/{Search.vue → SearchPanel.vue}

@@ -6,7 +6,6 @@ import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot
 import hotkeys from 'hotkeys-js';
 import { cloneDeep } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
-import { useI18n } from 'vue-i18n';
 import AntDesignCaretDownFilled from '~icons/ant-design/caret-down-filled';
 import AntDesignCaretUpFilled from '~icons/ant-design/caret-up-filled';
 import EpSearch from '~icons/ep/search';
@@ -22,7 +21,7 @@ import Breadcrumb from './Breadcrumb/index.vue';
 import BreadcrumbItem from './Breadcrumb/item.vue';
 
 defineOptions({
-  name: 'ToolsSearch',
+  name: 'SearchPanel',
 });
 
 const overlayTransitionClass = ref({
@@ -45,17 +44,14 @@ const transitionClass = computed(() => {
   };
 });
 
-const { t } = useI18n();
-
 const router = useRouter();
-const { settingsStore, routeStore, tabbarStore, generateI18nTitle } = useContext();
+const { settingsStore, routeStore, tabbarStore, generateTitle } = useContext();
 
 type searchTypes = 'menu' | 'tab';
 interface listTypes {
   path: string
   icon?: string
   title?: string | (() => string)
-  i18n?: string
   link?: string
   breadcrumb: any[]
 }
@@ -76,13 +72,13 @@ const resultList = computed(() => {
   let result = [];
   result = sourceList.value.filter((item) => {
     let flag = false;
-    if (generateI18nTitle(item.i18n, item.title).toString().includes(searchInput.value)) {
+    if (generateTitle(item.title).toString().includes(searchInput.value)) {
       flag = true;
     }
     if (item.path.includes(searchInput.value)) {
       flag = true;
     }
-    if (item.breadcrumb.some((b: { i18n: any, title: any }) => generateI18nTitle(b.i18n, b.title).toString().includes(searchInput.value))) {
+    if (item.breadcrumb.some((b: { title: any }) => generateTitle(b.title).toString().includes(searchInput.value))) {
       flag = true;
     }
     return flag;
@@ -155,27 +151,24 @@ function hasChildren(item: RouteRecordRaw) {
   }
   return flag;
 }
-function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string), i18n?: string }[]) {
+function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
   arr.forEach((item) => {
     if (item.meta?.sidebar !== false) {
       const breadcrumbTemp = cloneDeep(breadcrumb) || [];
       if (item.children && hasChildren(item)) {
         breadcrumbTemp.push({
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
         });
         getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp);
       }
       else {
         breadcrumbTemp.push({
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
         });
         sourceList.value.push({
           path: resolveRoutePath(basePath, item.path),
           icon: item.meta?.icon ?? icon,
           title: item.meta?.title,
-          i18n: item.meta?.i18n,
           link: item.meta?.link,
           breadcrumb: breadcrumbTemp,
         });
@@ -190,7 +183,6 @@ function getSourceListByTabs(arr: Tabbar.recordRaw[]) {
       icon: item.icon,
       title: item.title,
       path: item.fullPath,
-      i18n: item.i18n,
       breadcrumb: [],
     });
   });
@@ -285,8 +277,8 @@ defineExpose({
                 v-if="settingsStore.settings.tabbar.enable"
                 v-model="searchType"
                 :options="[
-                  { label: t('app.search.type.menu'), value: 'menu' },
-                  { label: t('app.search.type.tab'), value: 'tab' },
+                  { label: '搜索导航菜单', value: 'menu' },
+                  { label: '搜索标签页', value: 'tab' },
                 ]"
                 class="mb-4 flex!"
                 @click.stop
@@ -298,7 +290,7 @@ defineExpose({
                   <input
                     ref="searchInputRef"
                     v-model="searchInput"
-                    :placeholder="t('app.search.input')"
+                    placeholder="搜索页面，支持标题、URL模糊查询"
                     class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5"
                     @keydown.esc="toggle()"
                     @keydown.up.prevent="keyUp"
@@ -332,10 +324,10 @@ defineExpose({
                           :class="{ 'scale-120 text-ui-primary': index === actived }"
                         />
                         <div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
-                          <div class="truncate text-base font-bold">{{ generateI18nTitle(item.i18n, item.title) }}</div>
+                          <div class="truncate text-base font-bold">{{ generateTitle(item.title) }}</div>
                           <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
                             <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                              {{ generateI18nTitle(bc.i18n, bc.title) }}
+                              {{ generateTitle(bc.title) }}
                             </BreadcrumbItem>
                           </Breadcrumb>
                         </div>
@@ -357,7 +349,7 @@ defineExpose({
                       <HKbd>
                         <IonMdReturnLeft text="14px" />
                       </HKbd>
-                      <span>{{ t('app.search.enter') }}</span>
+                      <span>{{ '访问' }}</span>
                     </div>
                     <div class="inline-flex items-center gap-1 text-xs">
                       <HKbd>
@@ -366,14 +358,14 @@ defineExpose({
                       <HKbd>
                         <AntDesignCaretDownFilled text="14px" />
                       </HKbd>
-                      <span>{{ t('app.search.up_down') }}</span>
+                      <span>{{ '切换' }}</span>
                     </div>
                   </div>
                   <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
                     <HKbd>
                       ESC
                     </HKbd>
-                    <span>{{ t('app.search.esc') }}</span>
+                    <span>{{ '退出' }}</span>
                   </div>
                 </div>
               </div>

package/src/built-in/layout-component/components/Tools/index.vue

@@ -1,130 +1,105 @@
 <script setup lang="ts">
-import { useFullscreen } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
+import type { DropdownMenuRender } from './interface';
 import CarbonUserAvatarFilledAlt from '~icons/carbon/user-avatar-filled-alt';
-import FluentArrowSync16Filled from '~icons/fluent/arrow-sync-16-filled';
-import FluentFullScreenMaximize16Filled from '~icons/fluent/full-screen-maximize-16-filled';
-import FluentFullScreenMinimize16Filled from '~icons/fluent/full-screen-minimize-16-filled';
-import IconamoonSearch from '~icons/iconamoon/search';
 import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
-import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
 
+import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
 import { useContext } from '../../composables/useContext';
-import { useGlobalSearch } from '../../composables/useGlobalSearch';
-import useMainPage from '../../composables/useMainPage';
-import useViewTransition from '../../composables/useViewTransition';
-import DayNightSwitch from './DayNightSwitch.vue';
+import DarkModeToggle from './DarkModeToggle.vue';
+import Fullscreen from './Fullscreen.vue';
 import HotkeysIntro from './HotkeysIntro.vue';
+import PageReload from './PageReload.vue';
 import Preferences from './Preferences/index.vue';
-import Search from './Search.vue';
+import SearchBar from './SearchBar.vue';
+import SearchPanel from './SearchPanel.vue';
 
 defineOptions({
   name: 'Tools',
 });
 
-const router = useRouter();
-const { settingsStore, userStore, generateI18nTitle } = useContext();
-
-const { t } = useI18n();
-
-const mainPage = useMainPage();
-const { isFullscreen, toggle } = useFullscreen();
+const props = withDefaults(
+  defineProps<{
+    // 用户菜单渲染函数
+    dropdownMenuRender?: DropdownMenuRender
+  }>(),
+  {
+    dropdownMenuRender: (({ Home, Preferences, Hotkeys, Org, Profile, Password, Logout, Divider }) => {
+      return [Home, Preferences, Divider, Hotkeys, Divider, Org, Profile, Password, Logout];
+    }) as DropdownMenuRender,
+  },
+);
 
-const { toggle: toggleSearch } = useGlobalSearch();
+const router = useRouter();
+const { settingsStore, userStore, generateTitle } = useContext();
 
 const hotkeysIntroRef = ref();
 const preferencesRef = ref();
 
-const userMenu = computed(() => [
-  [
-    {
-      label: generateI18nTitle('route.home', settingsStore.settings.home.title),
+const userMenu = computed(() => {
+  return {
+    Home: {
+      key: 'home',
+      label: generateTitle(settingsStore.settings.home.title),
       icon: 'i-ant-design:home-twotone',
-      handle: () => router.push({ name: 'Home' }),
+      onClick: () => router.push({ name: 'Home' }),
       hide: !settingsStore.settings.home.enable,
     },
-    {
-      label: t('app.preferences'),
+    Preferences: {
+      key: 'preferences',
+      label: '个人偏好设置',
       icon: 'i-iconamoon-star-duotone',
-      handle: () => preferencesRef.value?.open?.(),
+      onClick: () => preferencesRef.value?.open?.(),
       hide: !settingsStore.settings.app.enableUserPreferences,
     },
-  ],
-  [
-    {
-      label: t('app.hotkeys'),
+    Hotkeys: {
+      key: 'hotkeys',
+      label: '快捷键介绍',
       icon: 'i-iconamoon-lightning-2-duotone',
-      handle: () => hotkeysIntroRef.value?.open?.(),
+      onClick: () => hotkeysIntroRef.value?.open?.(),
       hide: settingsStore.mode !== 'pc',
     },
-  ],
-  [
-    {
-      label: t('app.changeOrg'),
+    Org: {
+      key: 'org',
+      label: '切换组织',
       icon: 'i-iconamoon-synchronize-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangeOrganization',
         params: { orgId: userStore.user.orgId },
       }),
       hide: userStore.user.orgList.length <= 1,
     },
-    {
-      label: t('route.personal.profile'),
+    Profile: {
+      key: 'profile',
+      label: '个人中心',
       icon: 'i-iconamoon-profile-duotone',
-      handle: () => router.push({ name: 'Profile' }),
+      onClick: () => router.push({ name: 'Profile' }),
     },
-    {
-      label: t('app.changePassword'),
+    Password: {
+      key: 'password',
+      label: '修改密码',
       icon: 'i-iconamoon-lock-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangePassword',
         params: {
           changePassWordToken: userStore.user.token,
         },
       }),
     },
-    {
-      label: t('app.logout'),
+    Logout: {
+      key: 'logout',
+      label: '退出登录',
       icon: 'i-iconamoon-arrow-left-3-square-duotone',
-      handle: () => userStore.logout(),
+      onClick: () => userStore.logout(),
     },
-  ],
-]);
-
-function toggleColorScheme(event: MouseEvent) {
-  const { startViewTransition } = useViewTransition(async () => {
-    const colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark';
-    settingsStore.setColorScheme(colorScheme);
-    await settingsStore.setPreferencesSetting({
-      app: {
-        colorScheme,
-      },
-    });
-  });
+    Divider: {
+      key: 'divider',
+    },
+  };
+});
 
-  startViewTransition()?.ready.then(() => {
-    const x = event.clientX;
-    const y = event.clientY;
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    );
-    const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-    ];
-    document.documentElement.animate(
-      {
-        clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
-      },
-      {
-        duration: 300,
-        easing: 'ease-out',
-        pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
-      },
-    );
-  });
-}
+const menus = computed(() => {
+  return props.dropdownMenuRender?.(userMenu.value);
+});
 
 const avatarError = ref(false);
 
@@ -133,73 +108,33 @@ watch(() => userStore.user.avatar, () => {
     avatarError.value = false;
   }
 });
-
-const searchComponentsClass = computed(() => {
-  const componentsClass = {
-    'side': 'ring-1 ',
-    'head': 'bg-[var(--g-header-menu-active-bg)]',
-    'single': ' ring-1',
-    'only-side': 'ring-1',
-    'only-head': ' bg-[var(--g-header-menu-active-bg)]',
-  };
-  const menuMode = settingsStore.settings.menu.menuMode;
-  return componentsClass[menuMode];
-});
 </script>
 
 <template>
   <div class="tools flex items-center gap-4 whitespace-nowrap px-4">
-    <span
-      v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'"
-      class="group inline-flex cursor-pointer items-center gap-1 rounded-2 px-2 py-1.5 hover:ring-1 ring-inset transition ring-stone-3 dark:ring-stone-7"
-      :class="searchComponentsClass"
-      @click="toggleSearch('menu')"
-    >
-      <IconamoonSearch text="14px" />
-      <span class="text-sm  transition ">{{ t('app.search.text') }}</span>
-      <HKbd
-        v-if="settingsStore.settings.navSearch.enableHotkeys"
-        class="ml-2"
-      >{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
-    </span>
-    <div class="flex items-center empty:hidden">
-      <span
-        v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'mobile'"
-        class="item"
-        @click="toggleSearch('menu')"
-      >
-        <IconamoonSearch text="14px" />
-      </span>
-      <span
-        v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen"
-        class="item"
-        @click="toggle"
-      >
-        <FluentFullScreenMinimize16Filled v-if="isFullscreen" text="16px" />
-        <FluentFullScreenMaximize16Filled v-else text="16px" />
-      </span>
-      <span
-        v-if="settingsStore.settings.toolbar.enablePageReload"
-        class="item"
-        @click="mainPage.reload()"
-      >
-        <FluentArrowSync16Filled text="15px" />
-      </span>
-      <DayNightSwitch @click="toggleColorScheme" />
+    <SearchBar />
+
+    <div class="flex items-center empty:hidden gap-3">
+      <slot name="default">
+        <Fullscreen />
+        <PageReload />
+        <DarkModeToggle />
+      </slot>
     </div>
+
     <div flex-center cursor-pointer gap-1>
       <img
         v-if="userStore.user.avatar && !avatarError"
         :src="userStore.user.avatar"
         :onerror="() => (avatarError = true)"
-        class="h-[24px] w-[24px] rounded-full"
+        class="size-[24px] rounded-full"
       >
       <CarbonUserAvatarFilledAlt v-else text="20px" mr-2px />
       <div class="flex-center cursor-pointer">
         {{ userStore.userOrgName }}
       </div>
-      <PhLineVerticalThin />
-      <HDropdownMenu :items="userMenu">
+      <PhLineVerticalThin v-if="userStore?.userOrgName" />
+      <HDropdownMenu :items="menus">
         <div flex-center cursor-pointer gap-1>
           {{ userStore.user.account }}
           <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
@@ -208,13 +143,7 @@ const searchComponentsClass = computed(() => {
     </div>
 
     <HotkeysIntro ref="hotkeysIntroRef" />
-    <Search />
+    <SearchPanel />
     <Preferences v-if="settingsStore.settings.app.enableUserPreferences" ref="preferencesRef" />
   </div>
 </template>
-
-<style scoped>
-.item {
-  --at-apply: flex px-2 py-1 cursor-pointer;
-}
-</style>

package/src/built-in/layout-component/components/Tools/interface.ts

@@ -0,0 +1,27 @@
+export interface DropdownMenu {
+  key?: string | 'divider'
+  icon?: string
+  label?: string
+  disabled?: boolean
+  hide?: boolean
+  onClick?: () => void
+}
+
+export type DropdownMenuRender = (items: {
+  /** 主页 */
+  Home: DropdownMenu
+  /** 个人偏好设置 */
+  Preferences: DropdownMenu
+  /** 快捷键介绍 */
+  Hotkeys: DropdownMenu
+  /** 切换组织 */
+  Org: DropdownMenu
+  /** 个人中心 */
+  Profile: DropdownMenu
+  /** 修改密码 */
+  Password: DropdownMenu
+  /** 登出 */
+  Logout: DropdownMenu
+  /** 分割线 */
+  Divider: DropdownMenu
+}) => DropdownMenu[];