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

package/src/built-in/layout-component/components/Topbar/Tabbar/MoreAction.vue

@@ -2,7 +2,6 @@
 import type { Tabbar } from '#/tabbar';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
-import { useI18n } from 'vue-i18n';
 import EpClose from '~icons/ep/close';
 import EpSearch from '~icons/ep/search';
 import PhArrowLineLeft from '~icons/ph/arrow-line-left';
@@ -13,8 +12,8 @@ import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
 import { useGlobalSearch } from '../../../composables/useGlobalSearch';
-import useTabbar from '../../../composables/useTabbar';
-import Search from '../../Tools/Search.vue';
+import { useTabbar } from '../../../composables/useTabbar';
+import Search from '../../Tools/SearchPanel.vue';
 
 defineOptions({
   name: 'TabbarMoreAction',
@@ -22,12 +21,10 @@ defineOptions({
 
 const router = useRouter();
 
-const { settingsStore, tabbarStore, generateI18nTitle } = useContext();
+const { settingsStore, tabbarStore, generateTitle } = useContext();
 
 const tabbar = useTabbar();
 
-const { t } = useI18n();
-
 const activedTabId = computed(() => tabbar.getId());
 
 const dropdownTabContainerRef = ref();
@@ -99,22 +96,22 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
       <template #dropdown>
         <div class="quick-button">
           <button v-if="settingsStore.settings.navSearch.enable" class="button" @click="actionCommand('search-tabs')">
-            <HTooltip :text="t('app.tabbar.searchTabs')">
+            <HTooltip text="搜索标签页">
               <EpSearch />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseOtherSide()" @click="actionCommand('other-side')">
-            <HTooltip :text="t('app.tabbar.closeOtherSide')">
+            <HTooltip text="关闭其它标签页">
               <EpClose />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseLeftSide()" @click="actionCommand('left-side')">
-            <HTooltip :text="t('app.tabbar.closeLeftSide')">
+            <HTooltip text="关闭左侧标签页">
               <PhArrowLineLeft />
             </HTooltip>
           </button>
           <button class="button" :disabled="!tabbar.checkCloseRightSide()" @click="actionCommand('right-side')">
-            <HTooltip :text="t('app.tabbar.closeRightSide')">
+            <HTooltip text="关闭右侧标签页">
               <PhArrowLineRight />
             </HTooltip>
           </button>
@@ -127,9 +124,9 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
                 'no-drag': element.isPermanent || element.isPin,
               }"
             >
-              <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(element.title)" @click="router.push(element.fullPath)">
+              <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)" @click="router.push(element.fullPath)">
                 <PubinfoIcon v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)" :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!" />
-                {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(element.i18n, element.title) }}
+                {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title) }}
               </div>
               <div v-if="!element.isPermanent && element.isPin" class="action-icon" @click.stop="tabbarStore.unPin(element.tabId)">
                 <RiPushpin2Fill />

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

@@ -4,15 +4,14 @@ import ContextMenu from '@imengyu/vue3-context-menu';
 import { useMagicKeys } from '@vueuse/core';
 import hotkeys from 'hotkeys-js';
 import Sortable from 'sortablejs';
-import { useI18n } from 'vue-i18n';
 import Message from 'vue-m-message';
 import RiCloseFill from '~icons/ri/close-fill';
 import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
 import { PubinfoIcon } from '@/features/components';
 import { storage } from '@/utils';
 import { useContext } from '../../../composables/useContext';
-import useMainPage from '../../../composables/useMainPage';
-import useTabbar from '../../../composables/useTabbar';
+import { useMainPage } from '../../../composables/useMainPage';
+import { useTabbar } from '../../../composables/useTabbar';
 import MoreAction from './MoreAction.vue';
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';
 
@@ -23,15 +22,13 @@ defineOptions({
 const route = useRoute();
 const router = useRouter();
 
-const { settingsStore, tabbarStore, generateI18nTitle } = useContext();
+const { settingsStore, tabbarStore, generateTitle } = useContext();
 
 const tabbar = useTabbar();
 const mainPage = useMainPage();
 
 const keys = useMagicKeys({ reactive: true });
 
-const { t } = useI18n();
-
 const activedTabId = computed(() => tabbar.getId());
 const isShowMoreAction = computed(() => tabbarStore.list.length > 1 && (tabbar.checkCloseOtherSide() || tabbar.checkCloseLeftSide() || tabbar.checkCloseRightSide()));
 
@@ -162,13 +159,13 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
     customClass: 'tabbar-contextmenu',
     items: [
       {
-        label: t('app.tabbar.reload'),
+        label: '重新加载',
         icon: 'i-ri-refresh-line',
         disabled: routeItem.tabId !== activedTabId.value,
         onClick: () => mainPage.reload(),
       },
       {
-        label: t('app.tabbar.close'),
+        label: '关闭标签页',
         icon: 'i-ri-close-line',
         disabled: tabbarStore.list.length <= 1 || routeItem.isPin || routeItem.isPermanent,
         divided: true,
@@ -177,7 +174,7 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
         },
       },
       {
-        label: routeItem.isPin ? t('app.tabbar.unpin') : t('app.tabbar.pin'),
+        label: routeItem.isPin ? '取消固定' : '固定',
         icon: routeItem.isPin ? 'i-lucide-pin-off' : 'i-lucide-pin',
         // 主页不允许被固定，因为如果固定主页且主页未启用，会导致登录时进入路由死循环状态
         disabled: routeItem.fullPath === '/' || routeItem.isPermanent,
@@ -191,7 +188,7 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
         },
       },
       {
-        label: t('app.tabbar.maximize'),
+        label: '最大化',
         icon: 'i-ri-picture-in-picture-exit-line',
         onClick: () => {
           if (routeItem.tabId !== activedTabId.value) {
@@ -202,21 +199,21 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
         },
       },
       {
-        label: t('app.tabbar.closeOtherSide'),
+        label: '关闭其它标签页',
         disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
         onClick: () => {
           tabbar.closeOtherSide(routeItem.tabId);
         },
       },
       {
-        label: t('app.tabbar.closeLeftSide'),
+        label: '关闭左侧标签页',
         disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
         onClick: () => {
           tabbar.closeLeftSide(routeItem.tabId);
         },
       },
       {
-        label: t('app.tabbar.closeRightSide'),
+        label: '关闭右侧标签页',
         disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
         onClick: () => {
           tabbar.closeRightSide(routeItem.tabId);
@@ -319,7 +316,7 @@ onUnmounted(() => {
             'actived': element.tabId === activedTabId,
             'no-drag': element.isPermanent || element.isPin,
           }"
-          :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(element.i18n, element.title)"
+          :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)"
           @click="router.push(element.fullPath)"
           @dblclick="settingsStore.setMainPageMaximize()"
           @contextmenu="onTabbarContextmenu($event, element)"
@@ -333,7 +330,7 @@ onUnmounted(() => {
                 :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
                 class="icon"
               />
-              {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateI18nTitle(element.i18n, element.title) }}
+              {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title) }}
             </div>
             <div v-if="!element.isPermanent && element.isPin" class="action-icon" @click.stop="tabbarStore.unPin(element.tabId)" @dblclick.stop>
               <RiPushpin2Fill text="10px" />

package/src/built-in/layout-component/components/Topbar/Toolbar/Favorites.vue

@@ -2,7 +2,6 @@
 import { isUndefined } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
-import { useI18n } from 'vue-i18n';
 import FluentDelete24Filled from '~icons/fluent/delete-24-filled';
 import FluentStarAdd16Regular from '~icons/fluent/star-add-16-regular';
 import FluentStarDismiss16Regular from '~icons/fluent/star-dismiss-16-regular';
@@ -15,9 +14,7 @@ defineOptions({
 
 const route = useRoute();
 const router = useRouter();
-const { favoritesStore, routeStore, generateI18nTitle } = useContext();
-const { t } = useI18n();
-
+const { favoritesStore, routeStore, generateTitle } = useContext();
 const favoritesContainerRef = ref<HTMLElement | null>(null);
 
 let _favoritesSortable: Sortable | null = null;
@@ -46,7 +43,7 @@ watch(favoritesContainerRef, (newSortableContainer) => {
   <div class="favorites-container w-80 dark:bg-[var(--g-container-bg)]">
     <div class="flex items-center justify-between px-4 py-3">
       <div class="text-sm font-bold">
-        {{ t('app.tabbar.favorites.my-favorites') }}
+        {{ '我的收藏夾' }}
       </div>
       <template v-if="favoritesStore.canAdd(route.fullPath, routeStore.routes)">
         <FluentStarAdd16Regular
@@ -81,13 +78,13 @@ watch(favoritesContainerRef, (newSortableContainer) => {
         <div
           v-for="item in favoritesStore.list"
           :key="item.fullPath"
-          :title="generateI18nTitle(item.i18n, item.title)"
+          :title="generateTitle(item.title)"
           class="draggable-item relative w-[calc(50%-0.25rem)] flex cursor-pointer items-center gap-1 rounded px-2 py-2 ring-1 ring-stone-3 ring-inset hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50"
           @click="router.push(item.fullPath)"
         >
           <PubinfoIcon v-if="item.icon" :name="item.icon" :size="18" />
           <div class="name flex-1 truncate pe-4">
-            {{ generateI18nTitle(item.i18n, item.title) }}
+            {{ generateTitle(item.title) }}
           </div>
           <FluentDelete24Filled
             text-12px

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

@@ -17,7 +17,7 @@ defineOptions({
 const route = useRoute();
 const router = useRouter();
 
-const { settingsStore, menuStore, generateI18nTitle } = useContext();
+const { settingsStore, menuStore, generateTitle } = useContext();
 
 /**
  * 计算属性：是否启用子菜单折叠按钮
@@ -52,7 +52,7 @@ const breadcrumbIsShow = computed(() =>
 function createHomeBreadcrumb() {
   return {
     path: '/',
-    title: generateI18nTitle('route.home', settingsStore.settings.home.title),
+    title: generateTitle(settingsStore.settings.home.title),
   };
 }
 
@@ -78,7 +78,7 @@ const breadcrumbList = computed(() => {
       breadcrumbList.push({
         path: `__MAIN__${index}`,
         mainIndex: index,
-        title: generateI18nTitle(menuStore.allMenus[index].meta?.i18n, menuStore.allMenus[index].meta?.title),
+        title: generateTitle(menuStore.allMenus[index].meta?.title),
       });
     }
   }
@@ -88,7 +88,7 @@ const breadcrumbList = computed(() => {
       if (item.hide === false) {
         breadcrumbList.push({
           path: item.path,
-          title: generateI18nTitle(item.i18n, item.title),
+          title: generateTitle(item.title),
         });
       }
     });
@@ -155,14 +155,14 @@ function getCurrentBreadcrumb(path: string) {
     const main = menuStore.allMenus[idx];
     if (main) {
       const mapNode = (r: any): any => ({
-        title: generateI18nTitle(r.meta?.i18n, r.meta?.title),
+        title: generateTitle(r.meta?.title),
         path: r.path,
         children: (r.children || [])
           .filter((c: any) => c.meta?.sidebar !== false)
           .map((c: any) => mapNode(c)),
       });
       return {
-        title: generateI18nTitle(main.meta?.i18n, main.meta?.title),
+        title: generateTitle(main.meta?.title),
         path,
         children: (main.children || [])
           .filter(c => c.meta?.sidebar !== false)

package/src/built-in/layout-component/components/ui/HDropdownMenu.vue

@@ -1,20 +1,13 @@
 <script setup lang="ts">
+import type { DropdownMenu } from '../Tools/interface';
 import { PubinfoIcon } from '@/features/components';
 
 const props = defineProps<{
-  items: {
-    icon?: string
-    label: string
-    disabled?: boolean
-    hide?: boolean
-    handle?: () => void
-  }[][]
+  items: DropdownMenu[]
 }>();
 
 const myItems = computed(() => {
-  return props.items.map((item) => {
-    return item.filter(v => !v.hide);
-  }).filter(v => v.length);
+  return props.items.filter(item => !item?.hide);
 });
 </script>
 
@@ -27,23 +20,23 @@ const myItems = computed(() => {
     :auto-hide="false"
   >
     <slot />
+
     <template #popper>
-      <div
-        v-for="(item, index) in myItems"
-        :key="index"
-        class="p-1 dark:bg-[var(--g-container-bg)]"
-        border-b="~ solid stone-2 dark:stone-7 last:size-0"
-      >
-        <button
-          v-for="(v, i) in item"
-          :key="i"
-          :disabled="v.disabled"
-          class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
-          @click="v.handle"
-        >
-          <PubinfoIcon v-if="v.icon" :name="v.icon" />
-          {{ v.label }}
-        </button>
+      <div class="dark:bg-[var(--g-container-bg)] py-1">
+        <template v-for="(item, index) in myItems" :key="index">
+          <div v-if="item?.key === 'divider'" border-b="~ solid stone-2 dark:stone-7 last:size-0" class="my-1" />
+
+          <div v-else class="px-1">
+            <button
+              :disabled="item.disabled"
+              class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
+              @click="item?.onClick"
+            >
+              <PubinfoIcon v-if="item?.icon" :name="item.icon" />
+              {{ item?.label }}
+            </button>
+          </div>
+        </template>
       </div>
     </template>
   </VMenu>

package/src/built-in/layout-component/composables/useContext.ts

@@ -22,7 +22,7 @@ interface LayoutContext {
 
   appTitle: string
   isDev: boolean
-  generateI18nTitle: any
+  generateTitle: (titile?: string | (() => any)) => string
 }
 
 const layoutInjectionKey: InjectionKey<LayoutContext> = Symbol('Layout');

package/src/built-in/layout-component/composables/useGetComputedStyle.ts

@@ -1,4 +1,4 @@
-import { useMenuStore, useSettingsStore } from '@/features/stores';
+import { useContext } from './useContext';
 
 /**
  * 获取指定元素的计算样式属性值
@@ -17,8 +17,7 @@ type unit = `${string}px`;
  * @returns 包含主侧边栏和子侧边栏实际宽度的计算属性对象。
  */
 export function useGetSidebarActualWidth() {
-  const settingsStore = useSettingsStore();
-  const menuStore = useMenuStore();
+  const { settingsStore, menuStore } = useContext();
 
   const mainSidebarActualWidth = computed<unit>(() => {
     const menuMode = settingsStore.settings.menu.menuMode;

package/src/built-in/layout-component/composables/useHotkey.ts

@@ -1,15 +1,11 @@
-import type { useMenuStore, useSettingsStore } from '@/features/stores';
 import hotkeys from 'hotkeys-js';
-import useMainPage from './useMainPage';
-import useMenu from './useMenu';
+import { useContext } from './useContext';
+import { useMainPage } from './useMainPage';
+import { useMenu } from './useMenu';
+
+export function useHotkey() {
+  const { settingsStore, menuStore } = useContext();
 
-export function useHotkey({
-  menuStore,
-  settingsStore,
-}: {
-  menuStore: ReturnType<typeof useMenuStore>
-  settingsStore: ReturnType<typeof useSettingsStore>
-}) {
   const mainPage = useMainPage();
   const menu = useMenu();
 

package/src/built-in/layout-component/composables/useMainPage.ts

@@ -1,5 +1,5 @@
-import { useSettingsStore, useTabbarStore } from '@/features/stores';
-import useTabbar from './useTabbar';
+import { useContext } from './useContext';
+import { useTabbar } from './useTabbar';
 
 /**
  * 用于主页面功能的自定义钩子。
@@ -9,13 +9,12 @@ import useTabbar from './useTabbar';
  *   - resetCustomTitle: 重置当前页面的自定义标题。
  *   - maximize: 设置主页面的最大化状态。
  */
-export default function useMainPage() {
+export function useMainPage() {
+  const { settingsStore, tabbarStore } = useContext();
+
   const route = useRoute();
   const router = useRouter();
 
-  const settingsStore = useSettingsStore();
-  const tabbarStore = useTabbarStore();
-
   const tabbar = useTabbar();
 
   /**

package/src/built-in/layout-component/composables/useMenu.ts

@@ -1,17 +1,15 @@
 import type { Menu } from '#/menu';
 import { message } from 'ant-design-vue';
-import { useMenuStore, useSettingsStore } from '@/features/stores';
+import { useContext } from './useContext';
 
 /**
  * 用于管理菜单功能的自定义组合函数。
  * @returns 一个包含 `switchTo` 函数的对象。
  */
-export default function useMenu() {
+export function useMenu() {
+  const { settingsStore, menuStore } = useContext();
   const router = useRouter();
 
-  const settingsStore = useSettingsStore();
-  const menuStore = useMenuStore();
-
   function switchTo(index: number | string, mainRouter?: Menu.recordMainRaw) {
     if (mainRouter && mainRouter.meta?.isDev) {
       message.info('暂未上线，敬请期待！');

package/src/built-in/layout-component/composables/useTabbar.ts

@@ -1,14 +1,12 @@
 import type { RouteLocationRaw } from 'vue-router';
 import Message from 'vue-m-message';
-import { useSettingsStore, useTabbarStore } from '@/features/stores';
+import { useContext } from './useContext';
 
-export default function useTabbar() {
+export function useTabbar() {
+  const { settingsStore, tabbarStore } = useContext();
   const route = useRoute();
   const router = useRouter();
 
-  const settingsStore = useSettingsStore();
-  const tabbarStore = useTabbarStore();
-
   function getId() {
     return settingsStore.settings.tabbar.mergeTabsBy === 'activeMenu' ? (route.meta.activeMenu ?? route.fullPath) : route.fullPath;
   }

package/src/built-in/layout-component/composables/useTitle.ts

@@ -1,10 +1,8 @@
-import { useI18n } from 'vue-i18n';
-import { useSettingsStore } from '@/features/stores';
+import type { useSettingsStore } from '@/features/stores';
 
-export function useTitle(appTitle: string) {
-  const settingsStore = useSettingsStore();
-  const { t, te } = useI18n();
+export function useTitle(appTitle: string, settingsStore: ReturnType<typeof useSettingsStore>) {
   const routeInfo = useRoute();
+
   watch(
     [
       () => settingsStore.settings.app.enableDynamicTitle,
@@ -14,11 +12,7 @@ export function useTitle(appTitle: string) {
     () => {
       if (settingsStore.settings.app.enableDynamicTitle && settingsStore.title) {
         const title = settingsStore.customTitleList.find(item => item.fullPath === routeInfo.fullPath)?.title
-          || (
-            routeInfo.meta.breadcrumbNeste?.at(-1)?.i18n
-              ? generateI18nTitle(routeInfo.meta.breadcrumbNeste?.at(-1)?.i18n, settingsStore.title)
-              : generateI18nTitle(routeInfo.meta.i18n, settingsStore.title)
-          );
+          || generateTitle(settingsStore.title);
         document.title = `${title} - ${appTitle}`;
       }
       else {
@@ -28,14 +22,13 @@ export function useTitle(appTitle: string) {
     {
       deep: true,
     });
-  function generateI18nTitle(key?: string, defaultTitle: string | (() => any) = t('route.undefined')) {
-    return (settingsStore.settings.toolbar.enableI18n && !!key && te(key))
-      ? t(key)
-      : typeof defaultTitle === 'function'
-        ? defaultTitle()
-        : defaultTitle;
+
+  function generateTitle(defaultTitle: string | (() => any) = '[ 无标题 ]') {
+    return typeof defaultTitle === 'function'
+      ? defaultTitle()
+      : defaultTitle;
   }
   return {
-    generateI18nTitle,
+    generateTitle,
   };
 }

package/src/built-in/layout-component/composables/useWatermark.ts

@@ -1,12 +1,16 @@
-import { useSettingsStore, useUserStore } from '@/features/stores';
-import { eventBus, watermark } from '../utils';
+import mitt from 'mitt';
+import { watermark } from '../utils';
+import { useContext } from './useContext';
 
-export default function useWatermark() {
-  const settingsStore = useSettingsStore();
-  const userStore = useUserStore();
+const eventBus = mitt();
+
+export function useWatermark() {
+  const { settingsStore, userStore } = useContext();
   const { init, remove } = watermark();
 
-  eventBus.on('updateWatermark', () => {
+  eventBus.on('updateWatermark', updateWatermark);
+
+  function updateWatermark() {
     if (settingsStore.settings.watermark.enable) {
       loadWatermark();
       window.addEventListener('resize', loadWatermark);
@@ -15,13 +19,17 @@ export default function useWatermark() {
       removeWatermark();
       window.removeEventListener('resize', loadWatermark);
     }
-  });
+  }
 
-  watch(() => settingsStore.settings.app.colorScheme, () => {
-    if (settingsStore.settings.watermark.enable) {
-      loadWatermark();
-    }
-  }, { immediate: true });
+  watch(
+    () => settingsStore.settings.app.colorScheme,
+    () => {
+      if (settingsStore.settings.watermark.enable) {
+        loadWatermark();
+      }
+    },
+    { immediate: true },
+  );
 
   function getTextVal() {
     const type = settingsStore.settings.watermark.text;
@@ -63,5 +71,10 @@ export default function useWatermark() {
   return {
     loadWatermark,
     removeWatermark,
+    updateWatermark,
   };
 }
+
+export function updateWatermark() {
+  eventBus.emit('updateWatermark');
+}

package/src/built-in/layout-component/index.ts

@@ -7,18 +7,17 @@ import { Provider as LayoutProvider } from './provider';
 import Layout from './Layout.vue';
 import LayoutContent from './components/Content/index.vue';
 import LayoutHeader from './components/Header/index.vue';
+import LayoutSidebar from './components/Sidebar/index.vue';
+import LayoutTopbar from './components/Topbar/index.vue';
 
 import Logo from './components/Logo/index.vue';
-import Menu from './components/Menu/index.vue';
 import Tools from './components/Tools/index.vue';
+import Fullscreen from './components/Tools/Fullscreen.vue';
+import PageReload from './components/Tools/PageReload.vue';
+import DarkModeToggle from './components/Tools/DarkModeToggle.vue';
 
-import Topbar from './components/Topbar/index.vue';
-import Sidebar from './components/Sidebar/index.vue';
 import Copyright from './components/Copyright/index.vue';
 
-import SettingBar from './components/SettingBar/index.vue';
-import BackTop from './components/BackTop/index.vue';
-
 import FloatingVue from 'floating-vue';
 import Message from 'vue-m-message';
 import 'vue-m-message/dist/style.css';
@@ -62,20 +61,30 @@ export function LayoutComponent(): ModuleOptions {
   };
 }
 
+export type { DropdownMenu, DropdownMenuRender } from './components/Tools/interface';
+
+export const Tool = {
+  Fullscreen,
+  PageReload,
+  DarkModeToggle,
+};
+
+Layout.Provider = LayoutProvider;
+Layout.Header = LayoutHeader;
+Layout.Content = LayoutContent;
+Layout.Sidebar = LayoutSidebar;
+Layout.Topbar = LayoutTopbar;
+
 export {
   LayoutProvider,
   Layout,
   LayoutContent,
   LayoutHeader,
+  LayoutSidebar,
+  LayoutTopbar,
 
   Logo,
-  Menu,
   Tools,
 
-  Topbar,
-  Sidebar,
   Copyright,
-
-  SettingBar,
-  BackTop,
 };

package/src/built-in/layout-component/provider.ts

@@ -38,7 +38,7 @@ export const Provider = defineComponent({
     const tabbarStore = useTabbarStore();
     const favoritesStore = useFavoritesStore();
 
-    const { generateI18nTitle } = useTitle(props.appTitle);
+    const { generateTitle } = useTitle(props.appTitle, settingsStore);
 
     createContext({
       settingsStore,
@@ -52,13 +52,17 @@ export const Provider = defineComponent({
 
       appTitle: props.appTitle,
       isDev: props.isDev,
-      generateI18nTitle,
+      generateTitle,
     });
 
     return () => h(
       PubinfoProvider,
       {},
-      () => slots?.default?.(),
+      () => slots?.default?.({
+        allMenus: menuStore.allMenus,
+        sidebarMenus: menuStore.sidebarMenus,
+        activedMenuIndex: menuStore.actived,
+      }),
     );
   },
 });

package/src/built-in/layout-component/utils/index.ts

@@ -1,3 +1,2 @@
-export * from './eventBus';
 export * from './injectionKeys';
 export * from './watermark';