@pubinfo/core 2.2.4 → 2.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -32,9 +32,9 @@
     "pinia": "^3.0.4",
     "vue": "^3.5.28",
     "vue-router": "^5.0.2",
-    "@pubinfo/devtools": "2.2.4",
-    "@pubinfo/vite": "2.2.4",
-    "@pubinfo/config": "2.2.4"
+    "@pubinfo/config": "2.2.5",
+    "@pubinfo/vite": "2.2.5",
+    "@pubinfo/devtools": "2.2.5"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.17",
@@ -64,7 +64,7 @@
     "unctx": "^2.5.0",
     "vue-m-message": "^4.0.2",
     "zxcvbn": "^4.4.2",
-    "@pubinfo/shared": "2.2.4"
+    "@pubinfo/shared": "2.2.5"
   },
   "devDependencies": {
     "@alova/mock": "^2.0.18",
@@ -94,8 +94,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.28",
     "vue-router": "^5.0.2",
-    "@pubinfo/config": "2.2.4",
-    "@pubinfo/vite": "2.2.4"
+    "@pubinfo/config": "2.2.5",
+    "@pubinfo/vite": "2.2.5"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

package/src/built-in/layout-component/Layout.vue

@@ -29,6 +29,7 @@ const props = withDefaults(
     showSidebar: true,
     showTabbar: true,
     showToolbar: true,
+    showBreadcrumb: true,
   },
 );
 
@@ -39,6 +40,7 @@ const routeInfo = useRoute();
 const { auth } = useAuth();
 const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth(props);
+const slots = useSlots();
 useHotkey();
 useWatermark();
 
@@ -140,7 +142,11 @@ watch(scrollTop, (val, oldVal) => {
             data-fixed-calc-width
           >
             <slot name="topbar">
-              <LayoutTopbar />
+              <LayoutTopbar>
+                <template v-if="slots.breadcrumb" #breadcrumb="slotProps">
+                  <slot name="breadcrumb" v-bind="slotProps" />
+                </template>
+              </LayoutTopbar>
             </slot>
           </div>
 

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router';
+import type { BreadcrumbSlotItem, BreadcrumbSlotProps } from '../interface';
 import { cloneDeep } from 'lodash-es';
 import { compile } from 'path-to-regexp';
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
+import { useLayoutVisible } from '../../../composables/useLayoutVisible';
 import Breadcrumb from '../../Tools/Breadcrumb/index.vue';
 import BreadcrumbItem from '../../Tools/Breadcrumb/item.vue';
 import Tools from '../../Tools/index.vue';
@@ -14,10 +16,15 @@ defineOptions({
   name: 'Toolbar',
 });
 
+defineSlots<{
+  breadcrumb?: (props: BreadcrumbSlotProps) => any
+}>();
+
 const route = useRoute();
 const router = useRouter();
 
 const { settingsStore, menuStore, generateTitle } = useContext();
+const { show } = useLayoutVisible();
 
 /**
  * 计算属性：是否启用子菜单折叠按钮
@@ -39,16 +46,6 @@ const enableSubMenuCollapseButton = computed(() => {
   );
 });
 
-/**
- * 顶部工具栏组件
- *
- * @returns {boolean}
- */
-const breadcrumbIsShow = computed(() =>
-  settingsStore.mode === 'pc'
-  && settingsStore.settings.breadcrumb.enable,
-);
-
 function createHomeBreadcrumb() {
   return {
     path: '/',
@@ -56,10 +53,8 @@ function createHomeBreadcrumb() {
   };
 }
 
-interface BreadcrumbItemNode { title: string, path: string, mainIndex?: number }
-
 const breadcrumbList = computed(() => {
-  const breadcrumbList: BreadcrumbItemNode[] = [];
+  const breadcrumbList: BreadcrumbSlotItem[] = [];
   if (settingsStore.settings.home.enable) {
     breadcrumbList.push(createHomeBreadcrumb());
   }
@@ -226,34 +221,35 @@ function onSelect(node: RouteRecordRaw, index: number) {
           <Favorites />
         </template>
       </HDropdown>
-      <Breadcrumb
-        v-if="breadcrumbIsShow"
-        class="breadcrumb"
-        :class="{
-          [`breadcrumb-${settingsStore.settings.breadcrumb.style}`]: settingsStore.settings.breadcrumb.style !== '',
-        }"
-      >
-        <TransitionGroup name="breadcrumb">
-          <BreadcrumbItem
-            v-for="(item, index) in breadcrumbList"
-            :key="`${index}_${item.path}_${item.title}`"
-          >
-            <HDropdownTree
-              :item="getCurrentBreadcrumb(item.path)"
-              :disabled="(index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length <= 1"
-              @select="onSelect($event, index)"
+      <slot v-if="show.breadcrumb" name="breadcrumb" :items="breadcrumbList">
+        <Breadcrumb
+          class="breadcrumb"
+          :class="{
+            [`breadcrumb-${settingsStore.settings.breadcrumb.style}`]: settingsStore.settings.breadcrumb.style !== '',
+          }"
+        >
+          <TransitionGroup name="breadcrumb">
+            <BreadcrumbItem
+              v-for="(item, index) in breadcrumbList"
+              :key="`${index}_${item.path}_${item.title}`"
             >
-              <span class="flex items-center gap-0.5">
-                <span>{{ item.title }}</span>
-                <PubinfoIcon
-                  v-if="(getCurrentBreadcrumb(item.path)?.children?.length > 1) && (index !== breadcrumbList.length - 1)"
-                  name="i-material-symbols-keyboard-arrow-down"
-                />
-              </span>
-            </HDropdownTree>
-          </BreadcrumbItem>
-        </TransitionGroup>
-      </Breadcrumb>
+              <HDropdownTree
+                :item="getCurrentBreadcrumb(item.path)"
+                :disabled="(index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length <= 1"
+                @select="onSelect($event, index)"
+              >
+                <span class="flex items-center gap-0.5">
+                  <span>{{ item.title }}</span>
+                  <PubinfoIcon
+                    v-if="(getCurrentBreadcrumb(item.path)?.children?.length > 1) && (index !== breadcrumbList.length - 1)"
+                    name="i-material-symbols-keyboard-arrow-down"
+                  />
+                </span>
+              </HDropdownTree>
+            </BreadcrumbItem>
+          </TransitionGroup>
+        </Breadcrumb>
+      </slot>
     </div>
 
     <Tools />

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { BreadcrumbSlotProps } from './interface';
 import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import Tabbar from './Tabbar/index.vue';
 import Toolbar from './Toolbar/index.vue';
@@ -7,10 +8,18 @@ defineOptions({
   name: 'Topbar',
 });
 
+const slots = defineSlots<{
+  breadcrumb?: (props: BreadcrumbSlotProps) => any
+}>();
+
 const { show } = useLayoutVisible();
 </script>
 
 <template>
   <Tabbar v-if="show.tabbar" />
-  <Toolbar v-if="show.toolbar" />
+  <Toolbar v-if="show.toolbar">
+    <template v-if="slots.breadcrumb" #breadcrumb="slotProps">
+      <slot name="breadcrumb" v-bind="slotProps" />
+    </template>
+  </Toolbar>
 </template>

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

@@ -0,0 +1,9 @@
+export interface BreadcrumbSlotItem {
+  title: string
+  path: string
+  mainIndex?: number
+}
+
+export interface BreadcrumbSlotProps {
+  items: BreadcrumbSlotItem[]
+}

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

@@ -38,6 +38,7 @@ export function useLayoutVisible(_props?: LayoutProps) {
     const tabbarEnable = settingsStore.settings.tabbar.enable;
     const favoritesEnable = settingsStore.settings.favorites.enable;
     const breadcrumbEnable = settingsStore.settings.breadcrumb.enable;
+    const breadcrumb = mode === 'pc' && breadcrumbEnable && props?.showBreadcrumb;
 
     return {
       /** 顶部栏 */
@@ -76,13 +77,16 @@ export function useLayoutVisible(_props?: LayoutProps) {
           menuMode === 'head'
           && !enableSubMenuCollapseButton
           && !favoritesEnable
-          && !breadcrumbEnable
+          && !breadcrumb
         ) || (
           menuMode === 'only-head'
           && !favoritesEnable
-          && !breadcrumbEnable
+          && !breadcrumb
         )
       ) && appMetaData.toolbar && props?.showToolbar,
+
+      /** 面包屑 */
+      breadcrumb,
     };
   });
 

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

@@ -68,6 +68,7 @@ export function LayoutComponent(): ModuleOptions {
 }
 
 export type { DropdownMenu, DropdownMenuRender } from './components/Tools/interface';
+export type { BreadcrumbSlotItem, BreadcrumbSlotProps } from './components/Topbar/interface';
 
 export const Tool = {
   Fullscreen,

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

@@ -22,4 +22,10 @@ export interface LayoutProps {
    * @default true
    */
   showToolbar?: boolean
+
+  /**
+   * 是否展示面包屑
+   * @default true
+   */
+  showBreadcrumb?: boolean
 }

package/src/index.ts

@@ -95,7 +95,7 @@ export {
   Tool,
   Tools,
 } from './built-in/layout-component';
-export type { DropdownMenu, DropdownMenuRender } from './built-in/layout-component';
+export type { BreadcrumbSlotItem, BreadcrumbSlotProps, DropdownMenu, DropdownMenuRender } from './built-in/layout-component';
 export { updateWatermark } from './built-in/layout-component/composables/useWatermark';
 
 export {