@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import type { Tabbar } from '#/tabbar';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Sortable from 'sortablejs';
+import EpClose from '~icons/ep/close';
+import EpSearch from '~icons/ep/search';
+import PhArrowLineLeft from '~icons/ph/arrow-line-left';
+import PhArrowLineRight from '~icons/ph/arrow-line-right';
+import RiArrowDownSFill from '~icons/ri/arrow-down-s-fill';
+import RiCloseFill from '~icons/ri/close-fill';
+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/SearchPanel.vue';
+
+defineOptions({
+  name: 'TabbarMoreAction',
+});
+
+const router = useRouter();
+
+const { settingsStore, tabbarStore, generateTitle, routeStore } = useContext();
+
+const tabbar = useTabbar();
+
+const activedTabId = computed(() => tabbar.getId());
+
+const dropdownTabContainerRef = ref();
+const { toggle: toggleGlobalSearch } = useGlobalSearch();
+
+const isDragging = ref(false);
+
+let dropdownTabSortable: Sortable;
+watch(() => dropdownTabContainerRef.value, (val) => {
+  if (val) {
+    dropdownTabSortable = new Sortable(dropdownTabContainerRef.value.$el, {
+      animation: 200,
+      ghostClass: 'ghost',
+      draggable: '.tab',
+      filter: '.no-drag',
+      onStart: () => {
+        isDragging.value = true;
+      },
+      onEnd: () => {
+        isDragging.value = false;
+      },
+      onUpdate: (e) => {
+        if (e.newIndex !== undefined && e.oldIndex !== undefined) {
+          tabbarStore.sort(e.newIndex, e.oldIndex);
+        }
+      },
+    });
+  }
+});
+
+function actionCommand(command: 'search-tabs' | 'other-side' | 'left-side' | 'right-side') {
+  switch (command) {
+    case 'search-tabs':
+      toggleGlobalSearch('tab');
+      break;
+    case 'other-side':
+      tabbar.closeOtherSide();
+      break;
+    case 'left-side':
+      tabbar.closeLeftSide();
+      break;
+    case 'right-side':
+      tabbar.closeRightSide();
+      break;
+  }
+}
+
+function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon: Tabbar.recordRaw['activeIcon']) {
+  if (activeIcon === 'system-point') {
+    activeIcon = '';
+  }
+  let name;
+  if ((!isActive && icon) || (isActive && !activeIcon)) {
+    name = icon;
+  }
+  else if (isActive && activeIcon) {
+    name = activeIcon;
+  }
+  return name;
+}
+
+// 解析 fullPath 的纯路径部分（去掉 query/hash）
+function stripPath(fullPath: string) {
+  return fullPath.split(/[?#]/)[0];
+}
+
+// 解析该 tab 的 iconOptions（优先使用实际匹配的路由记录，兼容动态路由）
+function resolveIconOptions(element: Tabbar.recordRaw): undefined | {
+  boxType?: 'square' | 'prism' | 'null'
+  angle?: number | string
+  background?: any
+  radius?: number | string
+  iconColor?: string
+} {
+  const resolved = router.resolve(element.fullPath);
+  const matched = [...(resolved.matched as any[])].reverse();
+  const matchedRecordWithIcon = matched.find(record => (record?.meta as any)?.iconOptions);
+  if (matchedRecordWithIcon?.meta?.iconOptions) {
+    return matchedRecordWithIcon.meta.iconOptions as any;
+  }
+
+  const pathOnly = stripPath(element.fullPath);
+  const all = [...routeStore.flatSystemRoutes, ...routeStore.flatRoutes] as any[];
+  let record = element.routeName
+    ? all.find(r => r.name === element.routeName)
+    : undefined;
+
+  if (!record) {
+    record = all.find(r => r.path === pathOnly);
+  }
+
+  let options = (record?.meta as any)?.iconOptions;
+  if (!options && record?.meta?.breadcrumbNeste?.length) {
+    const found = [...record.meta.breadcrumbNeste].reverse().find((it: any) => it?.iconOptions);
+    options = found?.iconOptions;
+  }
+  return options;
+}
+
+type ResolvedIconOptions = ReturnType<typeof resolveIconOptions>;
+
+const dropdownIconOptions = computed<Record<string, ResolvedIconOptions>>(() => {
+  return tabbarStore.list.reduce<Record<string, ResolvedIconOptions>>((acc, element) => {
+    acc[element.tabId] = resolveIconOptions(element);
+    return acc;
+  }, {} as Record<string, ResolvedIconOptions>);
+});
+
+function computeBoxType(options: ResolvedIconOptions): 'square' | 'prism' | undefined {
+  const bt = options?.boxType;
+  return bt && bt !== 'null' ? bt : undefined;
+}
+
+function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
+  return options?.iconColor || undefined;
+}
+</script>
+
+<template>
+  <div>
+    <HDropdown placement="bottom-end" popper-class="tabbar-dropdown">
+      <div class="h-6 w-6 flex-center cursor-pointer rounded-1 bg-[var(--g-container-bg)] text-lg shadow transition-background-color transition-shadow">
+        <RiArrowDownSFill text="15px" />
+      </div>
+      <template #dropdown>
+        <div class="quick-button">
+          <button v-if="settingsStore.settings.navSearch.enable" class="button" @click="actionCommand('search-tabs')">
+            <HTooltip text="搜索标签页">
+              <EpSearch />
+            </HTooltip>
+          </button>
+          <button class="button" :disabled="!tabbar.checkCloseOtherSide()" @click="actionCommand('other-side')">
+            <HTooltip text="关闭其它标签页">
+              <EpClose />
+            </HTooltip>
+          </button>
+          <button class="button" :disabled="!tabbar.checkCloseLeftSide()" @click="actionCommand('left-side')">
+            <HTooltip text="关闭左侧标签页">
+              <PhArrowLineLeft />
+            </HTooltip>
+          </button>
+          <button class="button" :disabled="!tabbar.checkCloseRightSide()" @click="actionCommand('right-side')">
+            <HTooltip text="关闭右侧标签页">
+              <PhArrowLineRight />
+            </HTooltip>
+          </button>
+        </div>
+        <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="max-h-[300px]">
+          <TransitionGroup ref="dropdownTabContainerRef" :name="!isDragging ? 'dropdown-tab' : undefined" tag="div" class="tabs" :class="{ dragging: isDragging }">
+            <div
+              v-for="element in tabbarStore.list" :key="element.tabId" class="tab" :class="{
+                'actived': element.tabId === activedTabId,
+                'no-drag': element.isPermanent || element.isPin,
+              }"
+            >
+              <div :key="element.tabId" class="title" :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)" @click="router.push(element.fullPath)">
+                <template v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)">
+                  <PubinfoIcon
+                    v-if="computeBoxType(dropdownIconOptions[element.tabId])"
+                    small
+                    :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                    :box="(computeBoxType(dropdownIconOptions[element.tabId]) as 'square' | 'prism')"
+                    :size="16"
+                    :angle="dropdownIconOptions[element.tabId]?.angle"
+                    :background="dropdownIconOptions[element.tabId]?.background"
+                    :radius="dropdownIconOptions[element.tabId]?.radius"
+                    :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? (getSafeIconColor(dropdownIconOptions[element.tabId]) || '#ffffff') : undefined"
+                  />
+                  <PubinfoIcon
+                    v-else
+                    :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                    :size="16"
+                    :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? getSafeIconColor(dropdownIconOptions[element.tabId]) : undefined"
+                  />
+                </template>
+                {{ element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title) }}
+              </div>
+              <div v-if="!element.isPermanent && element.isPin" class="action-icon" @click.stop="tabbarStore.unPin(element.tabId)">
+                <RiPushpin2Fill />
+              </div>
+              <div v-else-if="!element.isPermanent && tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+                <RiCloseFill />
+              </div>
+            </div>
+          </TransitionGroup>
+        </OverlayScrollbarsComponent>
+      </template>
+    </HDropdown>
+
+    <Search />
+  </div>
+</template>
+
+<style>
+.tabbar-dropdown .quick-button {
+  --at-apply: flex items-center justify-between pt-[15px] pb-2.5 px-[15px];
+}
+
+.tabbar-dropdown .quick-button .button {
+  --at-apply: flex items-center justify-center w-8 h-8 cursor-pointer bg-[--g-bg]
+  transition-[colors] duration-[0.3s] rounded-[5px] border-0 [outline:none];
+}
+
+.tabbar-dropdown .quick-button .button:hover:not(:disabled) {
+  --at-apply: text-ui-primary;
+}
+
+.tabbar-dropdown .quick-button .button:disabled {
+  --at-apply: cursor-not-allowed;
+}
+
+.tabbar-dropdown .quick-button .button i {
+  font-size: 16px !important;
+}
+
+.tabbar-dropdown .tabs {
+  --at-apply: w-200px pt-0 pb-2.5 px-0;
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover:not(.actived) {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover .action-icon {
+  --at-apply: op-100;
+}
+
+.tabbar-dropdown .tabs .tab {
+  --at-apply: relative h-[30px] bg-[--g-container-bg] mx-[15px] my-0 px-[5px] py-0 rounded-[5px];
+  width: calc(100% - 30px);
+  transition: background-color 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab.actived {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs .tab.ghost {
+  --at-apply: op-0;
+}
+
+.tabbar-dropdown .tabs .tab:hover .title {
+  opacity: 1;
+  margin-inline-end: 20px;
+  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
+  transition: all 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab * {
+  user-select: none;
+}
+
+.tabbar-dropdown .tabs .tab .title {
+  --at-apply: relative flex gap-[5px] items-center
+  h-full overflow-hidden text-sm whitespace-nowrap cursor-pointer opacity-70;
+
+  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+  transition: all 0.3s;
+}
+
+[dir="rtl"] .tabbar-dropdown .tabs .tab .title {
+  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
+}
+
+.tabbar-dropdown .tabs .tab .title i {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon {
+  --at-apply: absolute z-10 w-[1.5em] h-[1.5em] text-[8px] text-[--g-tabbar-tab-color]
+  opacity-0 transition-all duration-[0.3s] -mt-1.5 rounded-[50%] top-2/4;
+  inset-inline-end: 6px;
+  pointer-events: all;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon:hover {
+  background-color: var(--g-bg);
+  box-shadow: 0 0 0 1px var(--g-border-color);
+}
+</style>
+
+<style scoped>
+.dropdown-tab-enter-from,
+.dropdown-tab-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.dropdown-tab-enter-active {
+  transition: all 0.3s;
+}
+
+.dropdown-tab-leave-active {
+  position: absolute !important;
+  transition: all 0.3s;
+}
+
+.dropdown-tab-move {
+  transition: transform 0.3s;
+}
+</style>