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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,15 +24,15 @@
     "vue": "^3.5.17",
     "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.2",
-    "@pubinfo/vite": "2.0.0-rc.2"
+    "@pubinfo/config": "2.0.0-rc.3",
+    "@pubinfo/vite": "2.0.0-rc.3"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
     "@ant-design/icons-vue": "^7.0.1",
     "@headlessui/vue": "^1.7.23",
     "@imengyu/vue3-context-menu": "^1.5.1",
-    "@pubinfo/pro-components": "^1.7.1",
+    "@pubinfo/pro-components": "^1.7.3",
     "@unocss/reset": "^66.4.2",
     "@vueuse/core": "^13.7.0",
     "@vueuse/integrations": "^13.5.0",
@@ -60,8 +60,8 @@
   "devDependencies": {
     "@iconify/json": "^2.2.354",
     "@iconify/vue": "^5.0.0",
-    "@pubinfo/openapi": "^0.8.4",
-    "@pubinfo/preset-openapi": "^0.8.4",
+    "@pubinfo/openapi": "^0.9.0",
+    "@pubinfo/preset-openapi": "^0.9.0",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.5",
     "@types/nprogress": "^0.2.3",
@@ -82,11 +82,11 @@
     "vue": "^3.5.17",
     "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.2",
-    "@pubinfo/vite": "2.0.0-rc.2"
+    "@pubinfo/config": "2.0.0-rc.3",
+    "@pubinfo/vite": "2.0.0-rc.3"
   },
   "scripts": {
-    "dev": "vite build -w -m watch --sourcemap",
+    "dev": "vite build -w -m watch",
     "build": "vite build",
     "openapi": "pnpx @pubinfo/openapi generate"
   }

package/src/built-in/layout-component/Layout.vue

@@ -4,30 +4,23 @@ import BackTop from './components/BackTop/index.vue';
 import LayoutContent from './components/Content/index.vue';
 import Copyright from './components/Copyright/index.vue';
 import LayoutHeader from './components/Header/index.vue';
-
 import SettingBar from './components/SettingBar/index.vue';
-// import Sidebar from './components/Sidebar/index.vue';
-import MainSidebar from './components/Sidebar/MainSidebar.vue';
-import SubSidebar from './components/Sidebar/SubSidebar.vue';
-import Topbar from './components/Topbar/index.vue';
+import LayoutSidebar from './components/Sidebar/index.vue';
+import LayoutTopbar from './components/Topbar/index.vue';
+
 import { useContext } from './composables/useContext';
 import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
 import { useHotkey } from './composables/useHotkey';
-import useWatermark from './composables/useWatermark';
+import { useWatermark } from './composables/useWatermark';
 
 defineOptions({
   name: 'Layout',
 });
 
 const routeInfo = useRoute();
-const { settingsStore, menuStore } = useContext();
+const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
-
-useHotkey({
-  settingsStore,
-  menuStore,
-});
-
+useHotkey();
 useWatermark();
 
 watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
@@ -68,13 +61,9 @@ watch(() => routeInfo.path, () => {
           class="sidebar-container"
           :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
         >
-          <!-- TODO 这种写法会导致侧边栏模式的布局下，有样式问题 -->
-          <!-- <slot name="sidebar">
-              <Sidebar />
-            </slot> -->
-
-          <MainSidebar />
-          <SubSidebar />
+          <slot name="sidebar">
+            <LayoutSidebar />
+          </slot>
         </div>
 
         <div
@@ -85,7 +74,7 @@ watch(() => routeInfo.path, () => {
 
         <div class="main-container" :style="{ 'padding-bottom': routeInfo.meta.paddingBottom }">
           <slot name="topbar">
-            <Topbar />
+            <LayoutTopbar />
           </slot>
 
           <div class="main">
@@ -213,7 +202,7 @@ watch(() => routeInfo.path, () => {
   --at-apply: visible op-100;
 }
 
-.wrapper .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+.wrapper ::v-deep(.main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container) {
   --at-apply: left-[--g-main-sidebar-width];
 }
 

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

@@ -4,7 +4,7 @@ import { useElementSize } from '@vueuse/core';
 import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
-import useMenu from '../../../composables/useMenu';
+import { useMenu } from '../../../composables/useMenu';
 import More from './More.vue';
 import NotCursor from './NotCursor.vue';
 

package/src/built-in/layout-component/components/Sidebar/MainSidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
-import useMenu from '../../composables/useMenu';
+import { useMenu } from '../../composables/useMenu';
 import Logo from '../Logo/index.vue';
 import Menu from '../Menu/index.vue';
 

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

@@ -3,7 +3,7 @@ import MainSidebar from './MainSidebar.vue';
 import SubSidebar from './SubSidebar.vue';
 
 defineOptions({
-  name: 'Sidebar',
+  name: 'LayoutSidebar',
 });
 </script>
 

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,44 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+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 { t } = useI18n();
+
+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 ">{{ t('app.search.text') }}</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}

@@ -22,7 +22,7 @@ import Breadcrumb from './Breadcrumb/index.vue';
 import BreadcrumbItem from './Breadcrumb/item.vue';
 
 defineOptions({
-  name: 'ToolsSearch',
+  name: 'SearchPanel',
 });
 
 const overlayTransitionClass = ref({

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

@@ -1,130 +1,108 @@
 <script setup lang="ts">
-import { useFullscreen } from '@vueuse/core';
+import type { DropdownMenuRender } from './interface';
 import { useI18n } from 'vue-i18n';
 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 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 router = useRouter();
 const { settingsStore, userStore, generateI18nTitle } = useContext();
 
 const { t } = useI18n();
 
-const mainPage = useMainPage();
-const { isFullscreen, toggle } = useFullscreen();
-
-const { toggle: toggleSearch } = useGlobalSearch();
-
 const hotkeysIntroRef = ref();
 const preferencesRef = ref();
 
-const userMenu = computed(() => [
-  [
-    {
+const userMenu = computed(() => {
+  return {
+    Home: {
+      key: 'home',
       label: generateI18nTitle('route.home', 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,
     },
-    {
+    Preferences: {
+      key: 'preferences',
       label: t('app.preferences'),
       icon: 'i-iconamoon-star-duotone',
-      handle: () => preferencesRef.value?.open?.(),
+      onClick: () => preferencesRef.value?.open?.(),
       hide: !settingsStore.settings.app.enableUserPreferences,
     },
-  ],
-  [
-    {
+    Hotkeys: {
+      key: 'hotkeys',
       label: t('app.hotkeys'),
       icon: 'i-iconamoon-lightning-2-duotone',
-      handle: () => hotkeysIntroRef.value?.open?.(),
+      onClick: () => hotkeysIntroRef.value?.open?.(),
       hide: settingsStore.mode !== 'pc',
     },
-  ],
-  [
-    {
+    Org: {
+      key: 'org',
       label: t('app.changeOrg'),
       icon: 'i-iconamoon-synchronize-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangeOrganization',
         params: { orgId: userStore.user.orgId },
       }),
       hide: userStore.user.orgList.length <= 1,
     },
-    {
+    Profile: {
+      key: 'profile',
       label: t('route.personal.profile'),
       icon: 'i-iconamoon-profile-duotone',
-      handle: () => router.push({ name: 'Profile' }),
+      onClick: () => router.push({ name: 'Profile' }),
     },
-    {
+    Password: {
+      key: 'password',
       label: t('app.changePassword'),
       icon: 'i-iconamoon-lock-duotone',
-      handle: () => router.push({
+      onClick: () => router.push({
         name: 'ChangePassword',
         params: {
           changePassWordToken: userStore.user.token,
         },
       }),
     },
-    {
+    Logout: {
+      key: 'logout',
       label: t('app.logout'),
       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 +111,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 +146,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[];