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

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

@@ -13,8 +13,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',

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

@@ -11,8 +11,8 @@ 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';
 

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/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,8 +1,7 @@
+import type { useSettingsStore } from '@/features/stores';
 import { useI18n } from 'vue-i18n';
-import { useSettingsStore } from '@/features/stores';
 
-export function useTitle(appTitle: string) {
-  const settingsStore = useSettingsStore();
+export function useTitle(appTitle: string, settingsStore: ReturnType<typeof useSettingsStore>) {
   const { t, te } = useI18n();
   const routeInfo = useRoute();
   watch(

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 { generateI18nTitle } = useTitle(props.appTitle, settingsStore);
 
     createContext({
       settingsStore,
@@ -58,7 +58,11 @@ export const Provider = defineComponent({
     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';

package/src/built-in/settings/router.ts

@@ -106,7 +106,11 @@ function hitCache(
   cache?: RouterMetaRawBaseOptions['cache'],
   noCache?: RouterMetaRawBaseOptions['noCache'],
 ) {
-  return cache && matched(name, cache) && !matched(name, noCache);
+  if (typeof cache === 'boolean') {
+    return cache && !matched(name, noCache);
+  }
+
+  return matched(name, cache) && !matched(name, noCache);
 }
 
 function matched(

package/src/features/stores/utils/routerHelper.ts

@@ -136,6 +136,7 @@ function transformMenuAndIframe(route: BackEndRoute, parent: API.PubResourceTree
   const menuRouteChildren: BackEndRoute[] = [
     {
       path: '',
+      name: route.name,
       component: replaceComponent(route.component, route.meta?.scope),
       meta: {
         ...route.meta,
@@ -155,6 +156,7 @@ function transformMenuAndIframe(route: BackEndRoute, parent: API.PubResourceTree
       menuRoute = {
         ...route,
         path: startsWithSlash(route.path),
+        name: undefined,
         component: setupDefaultLayout(),
         children: menuRouteChildren,
       };
@@ -165,6 +167,7 @@ function transformMenuAndIframe(route: BackEndRoute, parent: API.PubResourceTree
       menuRoute = {
         ...route,
         path: route.path,
+        name: undefined,
         component: undefined,
         children: menuRouteChildren,
       };

package/src/index.ts

@@ -78,22 +78,21 @@ export function createPubinfo(options: PubinfoOptions) {
   });
 }
 
+export { RESPONSE_CODE } from './built-in/authentication';
 export {
-  BackTop,
   Copyright,
   Layout,
   LayoutContent,
   LayoutHeader,
   LayoutProvider,
+  LayoutSidebar,
+  LayoutTopbar,
   Logo,
-  Menu,
-  RESPONSE_CODE,
-  SettingBar,
-  Sidebar,
+  Tool,
   Tools,
-  Topbar,
-} from './built-in';
-export { eventBus } from './built-in/layout-component/utils';
+} from './built-in/layout-component';
+export type { DropdownMenu, DropdownMenuRender } from './built-in/layout-component';
+export { updateWatermark } from './built-in/layout-component/composables/useWatermark';
 
 export {
   createRequest,
@@ -103,7 +102,6 @@ export {
   getAllRouteModules,
   readProjectModules,
 } from './core';
-
 export * from './core/interface';
 
 export * from './features';

package/dist/built-in/layout-component/utils/eventBus.d.ts

@@ -1,5 +0,0 @@
-interface MittTypes {
-    [key: PropertyKey]: any;
-}
-export declare const eventBus: import('mitt').Emitter<MittTypes>;
-export {};

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

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../composables/useContext';
-
-defineOptions({
-  name: 'DayNightSwitch',
-});
-
-const { settingsStore } = useContext();
-</script>
-
-<template>
-  <label v-if="settingsStore.settings.toolbar.enableColorScheme" class="day-night">
-    <div
-      class="animate-icon"
-      :class="{
-        'animate-icon-day': settingsStore.settings.app.colorScheme !== 'dark',
-      }"
-    />
-  </label>
-</template>
-
-<style scoped>
-.day-night {
-  --at-apply: size-11 cursor-pointer scale-45;
-}
-
-.animate-icon {
-  --at-apply: relative size-38px rounded-1/2 ;
-  box-shadow: inset 16px -16px 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 w-[inherit] h-[inherit] content-empty rounded-[inherit] left-0 top-0;
-  transition: background 0.3s ease;
-}
-
-.animate-icon::after {
-  --at-apply: absolute top-1/2 left-1/2 size-2 -ml-1 mr-0 -mt-1 mb-0 rounded-[50%] content-empty;
-  box-shadow:
-    0 -23px 0 #ffce6e,
-    0 23px 0 #ffce6e,
-    23px 0 0 #ffce6e,
-    -23px 0 0 #ffce6e,
-    15px 15px 0 #ffce6e,
-    -15px 15px 0 #ffce6e,
-    15px -15px 0 #ffce6e,
-    -15px -15px 0 #ffce6e;
-  transition: all 0.3s ease;
-  transform: scale(0);
-}
-
-.animate-icon-day {
-  --at-apply: size-11;
-  box-shadow: inset 32px -32px 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.5);
-}
-</style>

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

@@ -1,8 +0,0 @@
-// TODO 考虑优化掉
-import mitt from 'mitt';
-
-interface MittTypes {
-  [key: PropertyKey]: any
-}
-
-export const eventBus = mitt<MittTypes>();