@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,163 @@
+import type { RouteLocationRaw } from 'vue-router';
+import Message from 'vue-m-message';
+import { useContext } from './useContext';
+
+export function useTabbar() {
+  const { settingsStore, tabbarStore } = useContext();
+  const route = useRoute();
+  const router = useRouter();
+
+  function getId() {
+    return settingsStore.settings.tabbar.mergeTabsBy === 'activeMenu' ? (route.meta.activeMenu ?? route.fullPath) : route.fullPath;
+  }
+
+  function open(to: RouteLocationRaw) {
+    const index = tabbarStore.list.findIndex(item => item.tabId === getId());
+    tabbarStore.$patch({
+      leaveIndex: index,
+    });
+    router.push(to);
+  }
+
+  function go(delta: number) {
+    const tabId = getId();
+    router.go(delta);
+    tabbarStore.remove(tabId);
+  }
+
+  function close(to: RouteLocationRaw) {
+    const tabId = getId();
+    router.push(to).then(() => {
+      tabbarStore.remove(tabId);
+    });
+  }
+
+  function closeById(tabId = getId()) {
+    const activedTabId = getId();
+    if (tabbarStore.list.some(item => item.tabId === tabId)) {
+      if (tabbarStore.list.length > 1) {
+        // 如果关闭的标签正好是当前路由
+        if (tabId === activedTabId) {
+          const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+          if (index < tabbarStore.list.length - 1) {
+            close(tabbarStore.list[index + 1].fullPath);
+          }
+          else {
+            close(tabbarStore.list[index - 1].fullPath);
+          }
+        }
+        else {
+          tabbarStore.remove(tabId);
+        }
+      }
+      else {
+        Message.error('当前只有一个标签页，已阻止关闭');
+      }
+    }
+    else {
+      Message.error('关闭的页面不存在');
+    }
+  }
+
+  /**
+   * 关闭两侧标签页
+   */
+  function closeOtherSide(tabId = getId()) {
+    const activedTabId = getId();
+    // 如果操作的是非当前路由标签页，则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+      router.push(tabbarStore.list[index].fullPath);
+    }
+    tabbarStore.removeOtherSide(tabId);
+  }
+
+  /**
+   * 关闭左侧标签页
+   */
+  function closeLeftSide(tabId = getId()) {
+    const activedTabId = getId();
+    // 如果操作的是非当前路由标签页，需要判断当前标签页是否在指定标签页左侧，如果是则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+      const activedIndex = tabbarStore.list.findIndex(item => item.tabId === activedTabId);
+      if (activedIndex < index) {
+        router.push(tabbarStore.list[index].fullPath);
+      }
+    }
+    tabbarStore.removeLeftSide(tabId);
+  }
+
+  /**
+   * 关闭右侧标签页
+   */
+  function closeRightSide(tabId = getId()) {
+    const activedTabId = getId();
+    // 如果操作的是非当前路由标签页，需要判断当前标签页是否在指定标签页右侧，如果是则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+      const activedIndex = tabbarStore.list.findIndex(item => item.tabId === activedTabId);
+      if (activedIndex > index) {
+        router.push(tabbarStore.list[index].fullPath);
+      }
+    }
+    tabbarStore.removeRightSide(tabId);
+  }
+
+  /**
+   * 校验指定标签两侧是否有可关闭的标签
+   */
+  function checkCloseOtherSide(tabId = getId()) {
+    return tabbarStore.list.some((item) => {
+      return !item.isPermanent && !item.isPin && item.tabId !== tabId;
+    });
+  }
+
+  /**
+   * 校验指定标签左侧是否有可关闭的标签
+   */
+  function checkCloseLeftSide(tabId = getId()) {
+    let flag = true;
+    if (tabId === tabbarStore.list[0]?.tabId) {
+      flag = false;
+    }
+    else {
+      const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+      flag = tabbarStore.list.some((item, i) => {
+        return i < index && !item.isPermanent && !item.isPin && item.tabId !== tabId;
+      });
+    }
+    return flag;
+  }
+
+  /**
+   * 校验指定标签右侧是否有可关闭的标签
+   */
+  function checkCloseRightSide(tabId = getId()) {
+    let flag = true;
+    if (tabId === tabbarStore.list.at(-1)?.tabId) {
+      flag = false;
+    }
+    else {
+      const index = tabbarStore.list.findIndex(item => item.tabId === tabId);
+      flag = tabbarStore.list.some((item, i) => {
+        return i >= index && !item.isPermanent && !item.isPin && item.tabId !== tabId;
+      });
+    }
+    return flag;
+  }
+
+  return {
+    getId,
+    open,
+    go,
+    close,
+    closeById,
+    closeOtherSide,
+    closeLeftSide,
+    closeRightSide,
+    checkCloseOtherSide,
+    checkCloseLeftSide,
+    checkCloseRightSide,
+  };
+}

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

@@ -0,0 +1,34 @@
+import type { useSettingsStore } from '@/features/stores';
+
+export function useTitle(appTitle: string, settingsStore: ReturnType<typeof useSettingsStore>) {
+  const routeInfo = useRoute();
+
+  watch(
+    [
+      () => settingsStore.settings.app.enableDynamicTitle,
+      () => settingsStore.title,
+      () => settingsStore.customTitleList,
+    ],
+    () => {
+      if (settingsStore.settings.app.enableDynamicTitle && settingsStore.title) {
+        const title = settingsStore.customTitleList.find(item => item.fullPath === routeInfo.fullPath)?.title
+          || generateTitle(settingsStore.title);
+        document.title = `${title} - ${appTitle}`;
+      }
+      else {
+        document.title = appTitle;
+      }
+    },
+    {
+      deep: true,
+    });
+
+  function generateTitle(defaultTitle: string | (() => any) = '[ 无标题 ]') {
+    return typeof defaultTitle === 'function'
+      ? defaultTitle()
+      : defaultTitle;
+  }
+  return {
+    generateTitle,
+  };
+}

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

@@ -0,0 +1,16 @@
+export default function useViewTransition(callback: () => void) {
+  function startViewTransition() {
+    if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      callback();
+      return;
+    }
+
+    return document.startViewTransition(async () => {
+      await Promise.resolve(callback());
+    });
+  }
+
+  return {
+    startViewTransition,
+  };
+}

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

@@ -0,0 +1,80 @@
+import mitt from 'mitt';
+import { watermark } from '../utils';
+import { useContext } from './useContext';
+
+const eventBus = mitt();
+
+export function useWatermark() {
+  const { settingsStore, userStore } = useContext();
+  const { init, remove } = watermark();
+
+  eventBus.on('updateWatermark', updateWatermark);
+
+  function updateWatermark() {
+    if (settingsStore.settings.watermark.enable) {
+      loadWatermark();
+      window.addEventListener('resize', loadWatermark);
+    }
+    else {
+      removeWatermark();
+      window.removeEventListener('resize', loadWatermark);
+    }
+  }
+
+  watch(
+    () => settingsStore.settings.app.colorScheme,
+    () => {
+      if (settingsStore.settings.watermark.enable) {
+        loadWatermark();
+      }
+    },
+    { immediate: true },
+  );
+
+  function getTextVal() {
+    const type = settingsStore.settings.watermark.text;
+    switch (type) {
+      case 'U':
+        return `${userStore.user.account}`;
+      case 'O':
+        return `${userStore.userOrgName}`;
+      case 'OU':
+        return `${userStore.userOrgName}  ${userStore.user.account}`;
+      default:
+        return type;
+    }
+  }
+
+  function loadWatermark() {
+    // 水印更多设置请查看 watermark.ts
+    init({
+      text: getTextVal(),
+      width: settingsStore.settings.watermark.width, // 150
+      x: settingsStore.settings.watermark.x, // 0
+      y: settingsStore.settings.watermark.y, // 0
+      x_space: settingsStore.settings.watermark.x_space, // 50
+      y_space: settingsStore.settings.watermark.y_space, // 50
+      alpha: settingsStore.settings.watermark.alpha, // 0.1
+      color: settingsStore.settings.app.colorScheme === 'light' ? 'black' : 'white',
+    });
+  }
+
+  function removeWatermark() {
+    try {
+      remove();
+    }
+    catch (err) {
+      // 忽略报错
+    }
+  }
+
+  return {
+    loadWatermark,
+    removeWatermark,
+    updateWatermark,
+  };
+}
+
+export function updateWatermark() {
+  eventBus.emit('updateWatermark');
+}

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

@@ -0,0 +1,105 @@
+/* eslint-disable perfectionist/sort-imports */
+/* eslint-disable perfectionist/sort-named-exports */
+import type { ModuleOptions } from '@/core';
+import { defineSystemRoutes } from '@/features';
+
+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 LayoutHeaderMenu from './components/Header/HeaderMenu.vue';
+import LayoutHeaderFullMenu from './components/Header/HeaderFullMenu/index.vue';
+import LayoutHeaderThinMenu from './components/Header/HeaderThinMenu.vue';
+
+import LayoutSidebar from './components/Sidebar/index.vue';
+import LayoutTopbar from './components/Topbar/index.vue';
+
+import Logo from './components/Logo/index.vue';
+import Tools from './components/Tools/index.vue';
+import NotAllowed from './components/NotAllowed/index.vue';
+import Fullscreen from './components/Tools/Fullscreen.vue';
+import PageReload from './components/Tools/PageReload.vue';
+import DarkModeToggle from './components/Tools/DarkModeToggle.vue';
+
+import Copyright from './components/Copyright/index.vue';
+
+import FloatingVue from 'floating-vue';
+import Message from 'vue-m-message';
+import 'vue-m-message/dist/style.css';
+import 'floating-vue/dist/style.css';
+
+/**
+ * 布局组件
+ */
+export function LayoutComponent(): ModuleOptions {
+  defineSystemRoutes([{
+    path: 'reload',
+    name: 'Reload',
+    component: () => import('./pages/reload/index.vue'),
+    meta: {
+      title: '重新加载',
+      breadcrumb: false,
+    },
+  }]);
+
+  return {
+    name: 'built-in:layout-component',
+    setup(ctx) {
+      const { app } = ctx;
+
+      app.use(Message);
+      app.use(FloatingVue, {
+        distance: 12,
+        themes: {
+          'more-appley': {
+            placement: 'bottom',
+          },
+          'not-cursor': {
+            placement: 'bottom',
+          },
+          'dropdown-tree': {
+            $extend: 'menu',
+          },
+        },
+      });
+    },
+  };
+}
+
+export type { DropdownMenu, DropdownMenuRender } from './components/Tools/interface';
+
+export const Tool = {
+  Fullscreen,
+  PageReload,
+  DarkModeToggle,
+};
+
+Layout.Provider = LayoutProvider;
+Layout.Header = LayoutHeader;
+Layout.HeaderMenu = LayoutHeaderMenu;
+Layout.HeaderFullMenu = LayoutHeaderFullMenu;
+Layout.HeaderThinMenu = LayoutHeaderThinMenu;
+Layout.Header = LayoutHeader;
+Layout.Content = LayoutContent;
+Layout.Sidebar = LayoutSidebar;
+Layout.Topbar = LayoutTopbar;
+
+export {
+  LayoutProvider,
+  Layout,
+  LayoutContent,
+
+  LayoutHeader,
+  LayoutHeaderMenu,
+  LayoutHeaderFullMenu,
+  LayoutHeaderThinMenu,
+
+  LayoutSidebar,
+  LayoutTopbar,
+
+  Logo,
+  Tools,
+  NotAllowed,
+  Copyright,
+};

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

@@ -0,0 +1,25 @@
+export interface LayoutProps {
+  /**
+   * 是否展示头部
+   * @default true
+   */
+  showHeader?: boolean
+
+  /**
+   * 是否展示侧边栏
+   * @default true
+   */
+  showSidebar?: boolean
+
+  /**
+   * 是否展示标签栏
+   * @default true
+   */
+  showTabbar?: boolean
+
+  /**
+   * 是否展示工具栏
+   * @default true
+   */
+  showToolbar?: boolean
+}

package/src/built-in/layout-component/pages/reload/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const router = useRouter();
+
+onMounted(() => {
+  router.go(-1);
+});
+</script>
+
+<template>
+  <div />
+</template>

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

@@ -0,0 +1,65 @@
+import { h } from 'vue';
+import { PubinfoProvider } from '@/features/components';
+import {
+  useFavoritesStore,
+  useIframeStore,
+  useKeepAliveStore,
+  useMenuStore,
+  useRouteStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/features/stores';
+import { createContext } from './composables/useContext';
+import { useTitle } from './composables/useTitle';
+
+export const Provider = defineComponent({
+  name: 'LayoutProvider',
+  props: {
+    appTitle: {
+      type: String,
+      default: '网站标题',
+    },
+    isDev: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    const settingsStore = useSettingsStore();
+    const menuStore = useMenuStore();
+    const keepAliveStore = useKeepAliveStore();
+    const iframeStore = useIframeStore();
+    const userStore = useUserStore();
+    const routeStore = useRouteStore();
+    const tabbarStore = useTabbarStore();
+    const favoritesStore = useFavoritesStore();
+
+    const { generateTitle } = useTitle(props.appTitle, settingsStore);
+
+    createContext({
+      settingsStore,
+      menuStore,
+      keepAliveStore,
+      iframeStore,
+      userStore,
+      routeStore,
+      tabbarStore,
+      favoritesStore,
+
+      appTitle: props.appTitle,
+      isDev: props.isDev,
+      generateTitle,
+    });
+
+    return () => h(
+      PubinfoProvider,
+      {},
+      () => slots?.default?.({
+        allMenus: menuStore.allMenus,
+        sidebarMenus: menuStore.sidebarMenus,
+        activedMenuIndex: menuStore.actived,
+      }),
+    );
+  },
+});

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

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

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

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue';
+
+export function createInjectionKey<T = any>(key: string): InjectionKey<T> {
+  return key as unknown as InjectionKey<T>;
+}