@pubinfo/core 2.0.0-beta.1

package/src/layout/composables/useHotkey.ts

@@ -0,0 +1,49 @@
+import type { useMenuStore, useSettingsStore } from '@/stores';
+import hotkeys from 'hotkeys-js';
+import useMainPage from './useMainPage';
+import useMenu from './useMenu';
+
+export function useHotkey({
+  menuStore,
+  settingsStore,
+}: {
+  menuStore: ReturnType<typeof useMenuStore>
+  settingsStore: ReturnType<typeof useSettingsStore>
+}) {
+  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/layout/composables/useMainPage.ts

@@ -0,0 +1,68 @@
+import { useSettingsStore, useTabbarStore } from '@/stores';
+import useTabbar from './useTabbar';
+
+/**
+ * 用于主页面功能的自定义钩子。
+ * @returns 包含以下函数的对象：
+ *   - reload: 重新加载当前页面。
+ *   - setCustomTitle: 为当前页面设置自定义标题。
+ *   - resetCustomTitle: 重置当前页面的自定义标题。
+ *   - maximize: 设置主页面的最大化状态。
+ */
+export default function useMainPage() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const settingsStore = useSettingsStore();
+  const tabbarStore = useTabbarStore();
+
+  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/layout/composables/useMenu.ts

@@ -0,0 +1,29 @@
+import type { Menu } from '#/menu';
+import { useMenuStore, useSettingsStore } from '@/stores';
+import { message } from 'ant-design-vue';
+
+/**
+ * 用于管理菜单功能的自定义组合函数。
+ * @returns 一个包含 `switchTo` 函数的对象。
+ */
+export default function useMenu() {
+  const router = useRouter();
+
+  const settingsStore = useSettingsStore();
+  const menuStore = useMenuStore();
+
+  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,
+  };
+}

package/src/layout/composables/useTabbar.ts

@@ -0,0 +1,165 @@
+import type { RouteLocationRaw } from 'vue-router';
+import { useSettingsStore, useTabbarStore } from '@/stores';
+import Message from 'vue-m-message';
+
+export default function useTabbar() {
+  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;
+  }
+
+  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/layout/composables/useTitle.ts

@@ -0,0 +1,41 @@
+import { useSettingsStore } from '@/stores';
+import { useI18n } from 'vue-i18n';
+
+export function useTitle(appTitle: string) {
+  const settingsStore = useSettingsStore();
+  const { t, te } = useI18n();
+  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
+          || (
+            routeInfo.meta.breadcrumbNeste?.at(-1)?.i18n
+              ? generateI18nTitle(routeInfo.meta.breadcrumbNeste?.at(-1)?.i18n, settingsStore.title)
+              : generateI18nTitle(routeInfo.meta.i18n, settingsStore.title)
+          );
+        document.title = `${title} - ${appTitle}`;
+      }
+      else {
+        document.title = appTitle;
+      }
+    },
+    {
+      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;
+  }
+  return {
+    generateI18nTitle,
+  };
+}

package/src/layout/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/layout/composables/useWatermark.ts

@@ -0,0 +1,67 @@
+import { useSettingsStore, useUserStore } from '@/stores';
+import { eventBus, watermark } from '@/utils';
+
+export default function useWatermark() {
+  const settingsStore = useSettingsStore();
+  const userStore = useUserStore();
+  const { init, remove } = watermark();
+
+  eventBus.on('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.account}`;
+      case 'O':
+        return `${userStore.userOrgName}`;
+      case 'OU':
+        return `${userStore.userOrgName}  ${userStore.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,
+  };
+}

package/src/layout/index.ts

@@ -0,0 +1,59 @@
+/* eslint-disable perfectionist/sort-imports */
+/* eslint-disable perfectionist/sort-named-exports */
+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 Logo from './components/Logo/index.vue';
+import Menu from './components/Menu/index.vue';
+import Tools from './components/Tools/index.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 type { App } from '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 setupLayout({ app }: { app: App }) {
+  app.use(Message);
+  app.use(FloatingVue, {
+    distance: 12,
+    themes: {
+      'more-appley': {
+        placement: 'bottom',
+      },
+      'not-cursor': {
+        placement: 'bottom',
+      },
+      'dropdown-tree': {
+        $extend: 'menu',
+      },
+    },
+  });
+}
+
+export {
+  LayoutProvider,
+  Layout,
+  LayoutContent,
+  LayoutHeader,
+
+  Logo,
+  Menu,
+  Tools,
+
+  Topbar,
+  Sidebar,
+  Copyright,
+
+  SettingBar,
+  BackTop,
+};

package/src/layout/provider.ts

@@ -0,0 +1,61 @@
+import {
+  useFavoritesStore,
+  useIframeStore,
+  useKeepAliveStore,
+  useMenuStore,
+  useNotificationStore,
+  useRouteStore,
+  useSettingsStore,
+  useTabbarStore,
+  useUserStore,
+} from '@/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,
+    },
+    // locale: {
+    //   type: Object,
+    // },
+  },
+  setup(props, { slots }) {
+    const settingsStore = useSettingsStore();
+    const menuStore = useMenuStore();
+    const keepAliveStore = useKeepAliveStore();
+    const iframeStore = useIframeStore();
+    const userStore = useUserStore();
+    const notificationStore = useNotificationStore();
+    const routeStore = useRouteStore();
+    const tabbarStore = useTabbarStore();
+    const favoritesStore = useFavoritesStore();
+
+    const { generateI18nTitle } = useTitle(props.appTitle);
+
+    createContext({
+      settingsStore,
+      menuStore,
+      keepAliveStore,
+      iframeStore,
+      userStore,
+      notificationStore,
+      routeStore,
+      tabbarStore,
+      favoritesStore,
+
+      appTitle: props.appTitle,
+      isDev: props.isDev,
+      generateI18nTitle,
+    });
+
+    return () => slots?.default?.();
+  },
+});

package/src/layout/ui-kit/HBadge.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: string | number | boolean
+}>();
+
+const show = computed(() => {
+  switch (typeof props.value) {
+    case 'string':
+      return props.value.length > 0;
+    case 'number':
+      return props.value > 0;
+    case 'boolean':
+      return props.value;
+    default:
+      return props.value !== undefined && props.value !== null;
+  }
+});
+
+const transitionClass = ref({
+  enterActiveClass: 'ease-in-out duration-500',
+  enterFromClass: 'opacity-0',
+  enterToClass: 'opacity-100',
+  leaveActiveClass: 'ease-in-out duration-500',
+  leaveFromClass: 'opacity-100',
+  leaveToClass: 'opacity-0',
+});
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <slot />
+    <Transition v-bind="transitionClass">
+      <span
+        v-if="show"
+        class="absolute left-[50%] top-0 z-20 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light -translate-y-[50%] dark:ring-dark"
+      >
+        {{ value }}
+      </span>
+    </Transition>
+  </div>
+</template>

package/src/layout/ui-kit/HButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    block?: boolean
+    outline?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    block: false,
+    outline: false,
+    disabled: false,
+  },
+);
+
+const buttonClass = computed(() => [
+  'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
+  props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
+  props.outline
+    ? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
+    : 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
+]);
+</script>
+
+<template>
+  <button :disabled="disabled" :class="buttonClass">
+    <slot />
+  </button>
+</template>

package/src/layout/ui-kit/HCheckList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number | undefined
+    options: {
+      label?: string | number
+      icon?: string
+      value: string | number
+      disabled?: boolean
+    }[]
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number]
+  'change': [string | number | undefined]
+}>();
+
+watch(() => props.modelValue, (val) => {
+  emit('change', val);
+});
+function update(value: string | number) {
+  emit('update:modelValue', value);
+}
+</script>
+
+<template>
+  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      :disabled="disabled || option.disabled"
+      class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)"
+      :class="{ 'text-ui-text bg-ui-primary': modelValue === option.value }"
+      @click="update(option.value)"
+    >
+      <PubinfoIcon v-if="option.icon" :name="option.icon" />
+      <template v-else>
+        {{ option.label }}
+      </template>
+    </button>
+  </div>
+</template>