@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean
+    onIcon?: string
+    offIcon?: string
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+}>();
+
+const enabled = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<template>
+  <label class="switch">
+    <input v-model="enabled" type="checkbox">
+    <span class="bg-[#d6d3d1] dark:bg-stone-5" />
+  </label>
+</template>
+
+<style scoped lang="css">
+.switch {
+  --at-apply: cursor-pointer scale-75;
+}
+
+.switch input {
+  --at-apply: hidden;
+}
+
+.switch input + span {
+  --at-apply: relative block w-12 h-7 rounded-14px transition-all duration-300 ease;
+}
+
+.switch input + span::before,
+.switch input + span::after {
+  --at-apply: absolute block content-empty transition-all duration-300 ease;
+}
+
+.switch input + span::before {
+  --at-apply: top-5px left-5px size-18px border-5px border-solid border-white dark:border-dark rounded-9px;
+}
+
+.switch input + span::after {
+  --at-apply: top-5px left-32px w-6px h-18px bg-white rounded-4/10 op-0 dark:bg-stone-7;
+  transform-origin: 50% 50%;
+}
+
+.switch input + span:active {
+  --at-apply: scale-92;
+}
+
+.switch input:checked + span {
+  --at-apply: bg-ui-primary;
+  box-shadow: 0 8px 16px -1px rgba(var(--ui-primary), 0.2);
+}
+
+.switch input:checked + span::before {
+  --at-apply: w-0 ml-27px bg-white dark:bg-stone-7 border-3px rounded-3px;
+}
+
+.switch input:checked + span::after {
+  animation: blob-checked 0.35s linear forwards 0.2s;
+}
+
+.switch input:not(:checked) + span::before {
+  animation: blob 0.85s linear forwards 0.2s;
+}
+
+@keyframes blob {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.94);
+  }
+
+  60% {
+    transform: scale(0.96, 1.06);
+  }
+}
+
+@keyframes blob-checked {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  30% {
+    transform: scaleX(1.44);
+  }
+
+  70% {
+    transform: scaleX(1.18);
+  }
+
+  50%,
+  99% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scaleX(1);
+  }
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    text?: string
+  }>(),
+  {
+    text: '',
+  },
+);
+</script>
+
+<template>
+  <VTooltip v-bind="$attrs">
+    <slot />
+    <template #popper>
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </template>
+  </VTooltip>
+</template>

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

@@ -0,0 +1,36 @@
+import type { InjectionKey } from 'vue';
+import type {
+  useFavoritesStore,
+  useIframeStore,
+  useKeepAliveStore,
+  useMenuStore,
+  useRouteStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/features/stores';
+
+interface LayoutContext {
+  settingsStore: ReturnType<typeof useSettingsStore>
+  keepAliveStore: ReturnType<typeof useKeepAliveStore>
+  iframeStore: ReturnType<typeof useIframeStore>
+  userStore: ReturnType<typeof useUserStore>
+  menuStore: ReturnType<typeof useMenuStore>
+  routeStore: ReturnType<typeof useRouteStore>
+  tabbarStore: ReturnType<typeof useTabbarStore>
+  favoritesStore: ReturnType<typeof useFavoritesStore>
+
+  appTitle: string
+  isDev: boolean
+  generateTitle: (titile?: string | (() => any)) => string
+}
+
+const layoutInjectionKey = Symbol.for('pubinfo.layout') as InjectionKey<LayoutContext>;
+
+export function createContext(options: LayoutContext) {
+  provide(layoutInjectionKey, options);
+}
+
+export function useContext() {
+  return inject(layoutInjectionKey)!;
+}

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

@@ -0,0 +1,72 @@
+import { useContext } from './useContext';
+
+/**
+ * 获取指定元素的计算样式属性值
+ * @param property - 要获取的样式属性
+ * @param root - 根元素，默认为 document.documentElement
+ * @returns 样式属性值的整数形式
+ */
+export function useGetComputedStyle(property: string, root: HTMLElement = document.documentElement) {
+  return getComputedStyle(root).getPropertyValue(property).trim();
+}
+
+type unit = string;
+
+/**
+ * 根据各种设置和条件计算主侧边栏和子侧边栏的实际宽度。
+ * @returns 包含主侧边栏和子侧边栏实际宽度的计算属性对象。
+ */
+export function useGetSidebarActualWidth() {
+  const { settingsStore, menuStore } = useContext();
+
+  const mainSidebarActualWidth = computed<unit>(() => {
+    const menuMode = settingsStore.settings.menu.menuMode;
+    const isMobile = settingsStore.mode !== 'mobile';
+    const isSingle = menuMode === 'single';
+    const isHeadAndOnlyHead = ['head', 'only-head'].includes(menuMode);
+    if (isSingle || (isHeadAndOnlyHead && isMobile)) {
+      return '0px';
+    }
+    else {
+      return useGetComputedStyle('--g-main-sidebar-width');
+    }
+  });
+
+  /**
+   * subSidebarActualWidth 的计算属性，用于获取子侧边栏的实际宽度。
+   * 它考虑了各种设置和条件来确定最终的宽度。
+   * @returns 子侧边栏的实际宽度（以像素为单位）。
+   */
+  const subSidebarActualWidth = computed<unit>(() => {
+    let actualWidth = useGetComputedStyle('--g-sub-sidebar-width');
+    const _subSidebarActualWidth = settingsStore.settings.menu.subMenuCollapse;
+    const subMenuOnlyOneHide = settingsStore.settings.menu.subMenuOnlyOneHide;
+    const menuMode = settingsStore.settings.menu.menuMode;
+    const isMobile = settingsStore.mode !== 'mobile';
+    const onlySideOrHead = ['only-side', 'only-head'].includes(menuMode);
+
+    if (_subSidebarActualWidth && isMobile) {
+      actualWidth = useGetComputedStyle('--g-sub-sidebar-collapse-width');
+    }
+
+    if (onlySideOrHead && isMobile) {
+      actualWidth = '0px';
+    }
+    if (
+      subMenuOnlyOneHide
+      && menuStore.sidebarMenus.length === 1
+      && (
+        !menuStore.sidebarMenus[0].children
+        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+      )
+    ) {
+      actualWidth = '0px';
+    }
+    return actualWidth;
+  });
+
+  return {
+    mainSidebarActualWidth,
+    subSidebarActualWidth,
+  };
+}

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

@@ -0,0 +1,87 @@
+import { ref, shallowRef } from 'vue';
+
+type SearchType = 'menu' | 'tab';
+
+const isShow = ref(false);
+const searchType = ref<SearchType>('menu');
+const panelRegistry = new Map<symbol, number>();
+const activePanelId = shallowRef<symbol | null>(null);
+
+function updateActivePanel() {
+  let candidate: symbol | null = null;
+  let highestPriority = Number.NEGATIVE_INFINITY;
+  panelRegistry.forEach((priority, id) => {
+    if (priority > highestPriority) {
+      highestPriority = priority;
+      candidate = id;
+    }
+  });
+  activePanelId.value = candidate;
+}
+
+function registerPanel(id: symbol, priority = 0) {
+  panelRegistry.set(id, priority);
+  updateActivePanel();
+}
+
+function unregisterPanel(id: symbol) {
+  if (!panelRegistry.has(id)) {
+    return;
+  }
+  panelRegistry.delete(id);
+  updateActivePanel();
+}
+
+function setPanelPriority(id: symbol, priority: number) {
+  if (!panelRegistry.has(id)) {
+    return;
+  }
+  panelRegistry.set(id, priority);
+  updateActivePanel();
+}
+
+function open(type?: SearchType) {
+  if (type) {
+    searchType.value = type;
+  }
+  isShow.value = true;
+}
+
+function close() {
+  isShow.value = false;
+}
+
+function toggle(type?: SearchType) {
+  if (!isShow.value) {
+    if (type) {
+      searchType.value = type;
+    }
+    isShow.value = true;
+  }
+  else {
+    isShow.value = false;
+  }
+}
+
+/**
+ * 全局搜索服务
+ * 可以支持多处挂载，只需要使用 `useGlobalSearch` 开启即可
+ * 这样可以避免如果使用快捷键可能会多处开启 search 的问题
+ *
+ * close [#38](https://github.com/wsypower/pubinfo/issues/38)
+ */
+export function useGlobalSearch() {
+  return {
+    isShow,
+    searchType,
+    activePanelId,
+    open,
+    close,
+    toggle,
+    registerPanel,
+    unregisterPanel,
+    setPanelPriority,
+  };
+}
+
+export type { SearchType };

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

@@ -0,0 +1,45 @@
+import hotkeys from 'hotkeys-js';
+import { useContext } from './useContext';
+import { useMainPage } from './useMainPage';
+import { useMenu } from './useMenu';
+
+export function useHotkey() {
+  const { settingsStore, menuStore } = useContext();
+
+  const mainPage = useMainPage();
+  const menu = useMenu();
+
+  onMounted(() => {
+    hotkeys('f5', (e) => {
+      if (settingsStore.settings.toolbar.enablePageReload) {
+        e.preventDefault();
+        mainPage.reload();
+      }
+    });
+
+    hotkeys('alt+`', (e) => {
+      if (settingsStore.settings.menu.enableHotkeys) {
+        e.preventDefault();
+        menu.switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0);
+      }
+    });
+
+    hotkeys('alt+up,alt+down', (e, handle) => {
+      e.preventDefault();
+      switch (handle.key) {
+        case 'alt+up':
+          mainPage.maximize(true);
+          break;
+        case 'alt+down':
+          mainPage.maximize(false);
+          break;
+      }
+    });
+  });
+
+  onUnmounted(() => {
+    hotkeys.unbind('f5');
+    hotkeys.unbind('alt+`');
+    hotkeys.unbind('alt+up,alt+down');
+  });
+}

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

@@ -0,0 +1,87 @@
+import type { RouterMetaRawBaseOptions } from '#/vue-router';
+import type { RequiredDeep } from 'type-fest';
+import type { LayoutProps } from '../interface';
+import { useContext } from './useContext';
+
+const visibleInjectionKey = Symbol.for('pubinfo.layout.visible') as InjectionKey<LayoutProps>;
+
+export function createLayoutVisible(props: LayoutProps) {
+  provide(visibleInjectionKey, props);
+}
+
+/**
+ * 判断布局组件内各个部分的展示
+ */
+export function useLayoutVisible(_props?: LayoutProps) {
+  const { routeStore, settingsStore, menuStore } = useContext();
+  const props = inject(visibleInjectionKey, _props);
+
+  const route = useRoute();
+
+  const show = computed(() => {
+    // 应用级 meta.layout 配置
+    const appMetaData: RequiredDeep<RouterMetaRawBaseOptions['layout']> = {
+      header: true,
+      sidebar: true,
+      tabs: true,
+      toolbar: true,
+      ...routeStore.getRemoteAppRouteById(route)?.meta?.layout,
+    };
+
+    // 侧边栏菜单的菜单数据
+    const sidebarMenus = menuStore.sidebarMenus;
+
+    // 菜单模式
+    const { menuMode, subMenuOnlyOneHide, enableSubMenuCollapseButton } = settingsStore.settings.menu;
+
+    const mode = settingsStore.mode;
+    const tabbarEnable = settingsStore.settings.tabbar.enable;
+    const favoritesEnable = settingsStore.settings.favorites.enable;
+    const breadcrumbEnable = settingsStore.settings.breadcrumb.enable;
+
+    return {
+      /** 顶部栏 */
+      header: mode === 'pc' && ['head', 'only-head'].includes(menuMode) && appMetaData.header && props?.showHeader,
+
+      /** 主侧边栏 */
+      mainSidebar: ((mode === 'mobile' && menuMode !== 'single') || ['side', 'only-side'].includes(menuMode)) && props?.showSidebar,
+
+      /** 副侧边栏 */
+      subSidebar: (
+        mode === 'mobile' || (
+          ['side', 'head', 'single'].includes(menuMode)
+          && sidebarMenus.length > 0
+          && !(
+            subMenuOnlyOneHide
+            && sidebarMenus.length === 1
+            && (
+              !sidebarMenus[0].children
+              || sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+            )
+          )
+        )
+      ) && appMetaData.sidebar && props?.showSidebar,
+
+      /** 标签栏 */
+      tabbar: tabbarEnable && appMetaData.tabs && props?.showTabbar,
+
+      /** 工具栏 */
+      toolbar: !(
+        (
+          menuMode === 'head'
+          && !enableSubMenuCollapseButton
+          && !favoritesEnable
+          && !breadcrumbEnable
+        ) || (
+          menuMode === 'only-head'
+          && !favoritesEnable
+          && !breadcrumbEnable
+        )
+      ) && appMetaData.toolbar && props?.showToolbar,
+    };
+  });
+
+  return {
+    show,
+  };
+}

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

@@ -0,0 +1,67 @@
+import { useContext } from './useContext';
+import { useTabbar } from './useTabbar';
+
+/**
+ * 用于主页面功能的自定义钩子。
+ * @returns 包含以下函数的对象：
+ *   - reload: 重新加载当前页面。
+ *   - setCustomTitle: 为当前页面设置自定义标题。
+ *   - resetCustomTitle: 重置当前页面的自定义标题。
+ *   - maximize: 设置主页面的最大化状态。
+ */
+export function useMainPage() {
+  const { settingsStore, tabbarStore } = useContext();
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const tabbar = useTabbar();
+
+  /**
+   * 重新加载当前页面，通过导航到 'reload' 路由。
+   */
+  function reload() {
+    router.push({
+      name: 'Reload',
+    });
+  }
+
+  /**
+   * 设置自定义标题
+   * @param title - 标题字符串
+   */
+  function setCustomTitle(title: string) {
+    settingsStore.setCustomTitle(route.fullPath, title);
+    if (settingsStore.settings.tabbar.enable) {
+      tabbarStore.setCustomTitle({
+        tabId: tabbar.getId(),
+        title,
+      });
+    }
+  }
+
+  /**
+   * 重置自定义标题
+   */
+  function resetCustomTitle() {
+    settingsStore.resetCustomTitle(route.fullPath);
+    if (settingsStore.settings.tabbar.enable) {
+      tabbarStore.resetCustomTitle(tabbar.getId());
+    }
+  }
+
+  /**
+   * 最大化或还原主页面，根据给定的状态。
+   * @param status - 表示是否最大化或还原主页面的状态。
+   */
+  function maximize(status: boolean) {
+    settingsStore.setMainPageMaximize(status);
+  }
+
+  return {
+    reload,
+    setCustomTitle,
+    resetCustomTitle,
+    maximize,
+  };
+}

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

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