@pubinfo/core 2.0.15 → 2.1.1

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useCssVar } from '@vueuse/core';
-import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import Tabbar from './Tabbar/index.vue';
 import Toolbar from './Toolbar/index.vue';
 
@@ -8,110 +7,10 @@ defineOptions({
   name: 'Topbar',
 });
 
-const { settingsStore, routeStore } = useContext();
-const route = useRoute();
-
-/**
- * 计算属性：是否开启工具栏
- *
- * @return {boolean}
- */
-const enableToolbar = computed(() => {
-  return !(
-    (
-      settingsStore.settings.menu.menuMode === 'head'
-      && !settingsStore.settings.menu.enableSubMenuCollapseButton
-      && !settingsStore.settings.favorites.enable
-      && !settingsStore.settings.breadcrumb.enable
-    ) || (
-      settingsStore.settings.menu.menuMode === 'only-head'
-      && !settingsStore.settings.favorites.enable
-      && !settingsStore.settings.breadcrumb.enable
-    )
-  );
-});
-
-// 统一在 Topbar 内控制是否渲染 Tabbar/Toolbar（结合全局设置与路由 meta）
-const showTabbar = computed(() => {
-  // 路由可通过 meta.layout.tabs 显隐，默认显示
-  const routeAllow = (routeStore.getRemoteAppRouteById(route)?.meta as any)?.layout?.tabs ?? true;
-  return settingsStore.settings.tabbar.enable && routeAllow;
-});
-
-const showToolbar = computed(() => {
-  // 路由可通过 meta.layout.toolbar 显隐，默认显示
-  const routeAllow = (routeStore.getRemoteAppRouteById(route)?.meta as any)?.layout?.toolbar ?? true;
-  return enableToolbar.value && routeAllow;
-});
-
-const scrollTop = ref(0);
-const scrollOnHide = ref(false);
-const globalTabbarHeight = useCssVar('--g-tabbar-height', document.documentElement || document.body);
-const globalToolBarHeight = useCssVar('--g-toolbar-height', document.documentElement || document.body);
-
-const topbarHeight = computed(() => {
-  const tabbarHeight = showTabbar.value
-    ? Number.parseInt(globalTabbarHeight.value!)
-    : 0;
-  const toolbarHeight = showToolbar.value
-    ? Number.parseInt(globalToolBarHeight.value!)
-    : 0;
-  return tabbarHeight + toolbarHeight;
-});
-onMounted(() => {
-  window.addEventListener('scroll', onScroll);
-});
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll);
-});
-function onScroll() {
-  scrollTop.value = (document.documentElement || document.body).scrollTop;
-}
-watch(scrollTop, (val, oldVal) => {
-  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
-});
+const { show } = useLayoutVisible();
 </script>
 
 <template>
-  <div
-    class="topbar-container"
-    :class="{
-      'has-tabbar': showTabbar,
-      'has-toolbar': showToolbar,
-      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
-      'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
-      'hide': scrollOnHide,
-      'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
-    }"
-    data-fixed-calc-width
-  >
-    <Tabbar v-if="showTabbar" />
-    <Toolbar v-if="showToolbar" />
-  </div>
+  <Tabbar v-if="show.tabbar" />
+  <Toolbar v-if="show.toolbar" />
 </template>
-
-<style scoped>
-.topbar-container {
-  --at-apply: absolute top-0 z-100 flex flex-col;
-  box-shadow: 0 1px 0 0 var(--g-border-color);
-  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
-}
-
-.topbar-container.topbar-fixed,
-.topbar-container.topbar-sticky {
-  --at-apply: fixed;
-}
-
-.topbar-container.topbar-fixed.shadow,
-.topbar-container.topbar-sticky.shadow {
-  box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
-}
-
-.topbar-container.topbar-sticky.hide {
-  top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
-}
-
-.topbar-container.switch-tabbar-toolbar {
-  flex-direction: column-reverse;
-}
-</style>

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/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/pinia-plugin/index.ts

@@ -1,9 +1,9 @@
 import type { ModuleOptions } from '@/core';
-import { createPersistedState } from 'pinia-plugin-persistedstate';
 import { createCleanupPlugin } from './plugins/cleanup';
 import { createFavoritesStoragePlugin } from './plugins/favoritesStorage';
 import { createIframeCachePlugin } from './plugins/iframeCache';
 import { createPersistedStateOptions } from './plugins/persist';
+import { createSyncedPersistedState } from './plugins/persistedstate';
 import { createTabbarStoragePlugin } from './plugins/tabbarStorage';
 /**
  * pinia 统一注册插件
@@ -15,7 +15,7 @@ export function PiniaPlugin(): ModuleOptions {
       const { store } = ctx;
 
       // 持久化
-      store.use(createPersistedState(createPersistedStateOptions()));
+      store.use(createSyncedPersistedState(createPersistedStateOptions()));
 
       // 各个store的副作用
       store.use(createCleanupPlugin);

package/src/built-in/pinia-plugin/plugins/persist.ts

@@ -1,10 +1,20 @@
-import type { PluginOptions, Serializer } from 'pinia-plugin-persistedstate';
-import { storage } from '@/utils';
+import type { StateTree } from 'pinia';
+import type { Serializer, SyncedPersistedStateOptions } from './persistedstate';
+import { destr } from 'destr';
+import { storage } from '../../../utils/storage';
 
 export function customSerializer(): Serializer {
   return {
     deserialize: (value) => {
-      return JSON.parse(value);
+      if (!value) {
+        return {};
+      }
+      const parsed = destr<StateTree | null>(value);
+      if (parsed && typeof parsed === 'object') {
+        return parsed;
+      }
+      console.warn('[pinia:persist] invalid persisted state detected, fallback to empty state');
+      return {};
     },
     serialize: (value) => {
       return JSON.stringify(value);
@@ -12,10 +22,11 @@ export function customSerializer(): Serializer {
   };
 }
 
-export function createPersistedStateOptions(): PluginOptions {
+export function createPersistedStateOptions(): SyncedPersistedStateOptions {
   return {
     storage: storage.local,
     key: id => `_${id}`,
     serializer: customSerializer(),
+    storageArea: 'local',
   };
 }