@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,744 @@
+<script setup lang="ts">
+import type { Tabbar } from '#/tabbar';
+import ContextMenu from '@imengyu/vue3-context-menu';
+import { useMagicKeys } from '@vueuse/core';
+import hotkeys from 'hotkeys-js';
+import Sortable from 'sortablejs';
+import Message from 'vue-m-message';
+import RiCloseFill from '~icons/ri/close-fill';
+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 MoreAction from './MoreAction.vue';
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';
+
+defineOptions({
+  name: 'Tabbar',
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const { settingsStore, tabbarStore, generateTitle, routeStore } = useContext();
+
+const tabbar = useTabbar();
+const mainPage = useMainPage();
+
+const keys = useMagicKeys({ reactive: true });
+
+const activedTabId = computed(() => tabbar.getId());
+const isShowMoreAction = computed(() => tabbarStore.list.length > 1 && (tabbar.checkCloseOtherSide() || tabbar.checkCloseLeftSide() || tabbar.checkCloseRightSide()));
+
+const tabsRef = ref();
+const tabContainerRef = ref();
+const tabRef = shallowRef<HTMLElement[]>([]);
+onBeforeUpdate(() => {
+  tabRef.value = [];
+});
+/**
+ * 计算当前激活的 tab 的伪元素起始位置
+ */
+const activePseudoTabStart = computed(() => {
+  const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
+  // 如果没有找到对应的 tabId，或者 tabRef 为空，则返回 '0px'
+  if (index === -1 || !tabsRef.value || !tabRef.value.length) {
+    return '0px';
+  }
+  // 找到对应的 tab 元素
+  const targetElement = tabRef.value.find(item => Number.parseInt(item.dataset.index!) === index);
+  // 如果没有找到对应的 tab 元素，返回 '0px'
+  if (!targetElement) {
+    return '0px';
+  }
+  // 计算并返回目标元素的右边界与 tabs 容器的左边界之间的距离
+  return `${tabsRef.value.offsetWidth - (targetElement.getBoundingClientRect().right || 0)}px`;
+});
+
+const activePseudoTabWidth = computed(() => {
+  const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
+  // 如果没有找到对应的 tabId，或者 tabRef 为空，则返回 '0px'
+  if (index === -1 || !tabRef.value.length) {
+    return '0px';
+  }
+  // 找到对应的 tab 元素
+  const targetElement = tabRef.value.find(item => Number.parseInt(item.dataset.index!) === index);
+  // 如果没有找到对应的 tab 元素，返回 '0px'
+  return `${targetElement?.offsetWidth || 0}px`;
+});
+
+const isDragging = ref(false);
+let tabSortable: Sortable;
+onMounted(() => {
+  tabSortable = new Sortable(tabContainerRef.value.$el, {
+    animation: 200,
+    ghostClass: 'tab-ghost',
+    draggable: '.tab',
+    handle: '.drag-handle',
+    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);
+      }
+    },
+  });
+});
+watch([
+  () => settingsStore.mode,
+], (val) => {
+  nextTick(() => {
+    tabSortable?.option('disabled', val[0] === 'mobile');
+  });
+}, {
+  immediate: true,
+});
+
+watch(() => route.fullPath, (newPath, oldPath) => {
+  if (settingsStore.settings.tabbar.enable && newPath !== oldPath) {
+    tabbarStore.add(route).then(() => {
+      const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
+      if (index !== -1 && tabRef.value[index]) {
+        scrollTo(tabRef.value[index].offsetLeft);
+        tabbarScrollTip();
+      }
+    });
+  }
+}, {
+  immediate: true,
+  deep: true,
+});
+
+function tabbarScrollTip() {
+  if (tabContainerRef.value.$el.clientWidth > tabsRef.value.clientWidth && !storage.local.has('tabbarScrollTip')) {
+    storage.local.set('tabbarScrollTip', '');
+    Message.info('标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览', {
+      title: '温馨提示',
+      duration: 5000,
+      closable: true,
+      zIndex: 2000,
+    });
+  }
+}
+function tabbarMaximizeTip() {
+  if (!storage.local.has('tabbarMaximizeTip')) {
+    storage.local.set('tabbarMaximizeTip', '');
+    Message.info('可以通过双击标签栏进行最大化操作', {
+      title: '温馨提示',
+      duration: 5000,
+      closable: true,
+      zIndex: 2000,
+    });
+  }
+}
+function handlerMouserScroll(event: WheelEvent) {
+  tabsRef.value.scrollBy({
+    left: event.deltaY || event.detail,
+  });
+}
+function scrollTo(offsetLeft: number) {
+  tabsRef.value.scrollTo({
+    left: offsetLeft - 50,
+    behavior: 'smooth',
+  });
+}
+function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
+  event.preventDefault();
+  ContextMenu.showContextMenu({
+    x: event.x,
+    y: event.y,
+    zIndex: 1050,
+    iconFontClass: '',
+    customClass: 'tabbar-contextmenu',
+    items: [
+      {
+        label: '重新加载',
+        icon: 'i-ri-refresh-line',
+        disabled: routeItem.tabId !== activedTabId.value,
+        onClick: () => mainPage.reload(),
+      },
+      {
+        label: '关闭标签页',
+        icon: 'i-ri-close-line',
+        disabled: tabbarStore.list.length <= 1 || routeItem.isPin || routeItem.isPermanent,
+        divided: true,
+        onClick: () => {
+          tabbar.closeById(routeItem.tabId);
+        },
+      },
+      {
+        label: routeItem.isPin ? '取消固定' : '固定',
+        icon: routeItem.isPin ? 'i-lucide-pin-off' : 'i-lucide-pin',
+        // 主页不允许被固定，因为如果固定主页且主页未启用，会导致登录时进入路由死循环状态
+        disabled: routeItem.fullPath === '/' || routeItem.isPermanent,
+        onClick: () => {
+          if (routeItem.isPin) {
+            tabbarStore.unPin(routeItem.tabId);
+          }
+          else {
+            tabbarStore.pin(routeItem.tabId);
+          }
+        },
+      },
+      {
+        label: '最大化',
+        icon: 'i-ri-picture-in-picture-exit-line',
+        onClick: () => {
+          if (routeItem.tabId !== activedTabId.value) {
+            router.push(routeItem.fullPath);
+          }
+          tabbarMaximizeTip();
+          settingsStore.setMainPageMaximize();
+        },
+      },
+      {
+        label: '关闭其它标签页',
+        disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
+        onClick: () => {
+          tabbar.closeOtherSide(routeItem.tabId);
+        },
+      },
+      {
+        label: '关闭左侧标签页',
+        disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
+        onClick: () => {
+          tabbar.closeLeftSide(routeItem.tabId);
+        },
+      },
+      {
+        label: '关闭右侧标签页',
+        disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
+        onClick: () => {
+          tabbar.closeRightSide(routeItem.tabId);
+        },
+      },
+    ],
+  });
+}
+
+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;
+  }
+
+  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
+  iconSize?: number | 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 tabIconOptions = computed<Record<string, ResolvedIconOptions>>(() => {
+  return tabbarStore.list.reduce<Record<string, ResolvedIconOptions>>((acc, element) => {
+    acc[element.tabId] = resolveIconOptions(element);
+    return acc;
+  }, {} as Record<string, ResolvedIconOptions>);
+});
+
+// 统一盒子类型：仅在显式指定为 square/prism 时启用盒子
+function computeBoxType(options: ResolvedIconOptions): 'square' | 'prism' | undefined {
+  const bt = options?.boxType;
+  return bt && bt !== 'null' ? bt : undefined;
+}
+
+// 仅 AntD 图标使用安全颜色；无配置则为 undefined
+function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
+  return options?.iconColor || undefined;
+}
+
+onMounted(() => {
+  hotkeys('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0', (e, handle) => {
+    if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys) {
+      e.preventDefault();
+      switch (handle.key) {
+        // 切换到当前标签页紧邻的上一个标签页
+        case 'alt+left':
+          if (tabbarStore.list[0].tabId !== activedTabId.value) {
+            const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
+            router.push(tabbarStore.list[index - 1].fullPath);
+          }
+          break;
+        // 切换到当前标签页紧邻的下一个标签页
+        case 'alt+right':
+          if (tabbarStore.list.at(-1)?.tabId !== activedTabId.value) {
+            const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
+            router.push(tabbarStore.list[index + 1].fullPath);
+          }
+          break;
+        // 关闭当前标签页
+        case 'alt+w':
+          tabbar.closeById(activedTabId.value);
+          break;
+        // 切换到第 n 个标签页
+        case 'alt+1':
+        case 'alt+2':
+        case 'alt+3':
+        case 'alt+4':
+        case 'alt+5':
+        case 'alt+6':
+        case 'alt+7':
+        case 'alt+8':
+        case 'alt+9':
+        {
+          const number = Number(handle.key.split('+')[1]);
+          if (tabbarStore.list[number - 1]?.fullPath) {
+            router.push(tabbarStore.list[number - 1].fullPath);
+          }
+          break;
+        }
+        // 切换到最后一个标签页
+        case 'alt+0':
+          router.push(tabbarStore.list[tabbarStore.list.length - 1].fullPath);
+          break;
+      }
+    }
+  });
+});
+onUnmounted(() => {
+  hotkeys.unbind('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0');
+});
+</script>
+
+<template>
+  <div class="tabbar-container">
+    <div
+      ref="tabsRef" class="tabs" :class="{
+        'tabs-ontop': settingsStore.settings.topbar.switchTabbarAndToolbar,
+        [`tabs-${settingsStore.settings.tabbar.style}`]: true,
+      }"
+      @wheel.prevent="handlerMouserScroll"
+    >
+      <TransitionGroup
+        ref="tabContainerRef" :name="!isDragging ? 'tabbar' : undefined"
+        tag="div" class="tab-container"
+        :class="{ dragging: isDragging }"
+      >
+        <div
+          v-for="(element, index) in tabbarStore.list" :key="settingsStore.settings.tabbar.mergeTabsBy === 'routeName' && element.routeName ? element.routeName : element.tabId"
+          ref="tabRef" :data-index="index" class="tab"
+          :class="{
+            'tab-ontop': settingsStore.settings.topbar.switchTabbarAndToolbar,
+            'actived': element.tabId === activedTabId,
+            'no-drag': element.isPermanent || element.isPin,
+          }"
+          :title="element.customTitleList.find(item => item.fullPath === element.fullPath)?.title || generateTitle(element.title)"
+          @click="router.push(element.fullPath)"
+          @dblclick="settingsStore.setMainPageMaximize()"
+          @contextmenu="onTabbarContextmenu($event, element)"
+        >
+          <div class="tab-dividers" />
+          <div class="tab-background" />
+          <div class="tab-content">
+            <div :key="element.tabId" class="title">
+              <template v-if="settingsStore.settings.tabbar.enableIcon && iconName(element.tabId === activedTabId, element.icon, element.activeIcon)">
+                <!-- 有 iconOptions 时启用带边框/渐变的盒子效果，与 Menu 保持一致 -->
+                <PubinfoIcon
+                  v-if="computeBoxType(tabIconOptions[element.tabId])"
+                  small
+                  :name="iconName(element.tabId === activedTabId, element.icon, element.activeIcon)!"
+                  :box="(computeBoxType(tabIconOptions[element.tabId]) as 'square' | 'prism')"
+                  :size="16"
+                  :icon-size="tabIconOptions[element.tabId]?.iconSize"
+                  :angle="tabIconOptions[element.tabId]?.angle"
+                  :background="tabIconOptions[element.tabId]?.background"
+                  :radius="tabIconOptions[element.tabId]?.radius"
+                  :color="(iconName(element.tabId === activedTabId, element.icon, element.activeIcon) || '').startsWith('antd:') ? (getSafeIconColor(tabIconOptions[element.tabId]) || '#ffffff') : undefined"
+                  class="icon"
+                />
+                <!-- 无 iconOptions 时保持原样（纯图标），但若提供图标色也生效 -->
+                <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(tabIconOptions[element.tabId]) : undefined"
+                  class="icon"
+                />
+              </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)" @dblclick.stop>
+              <RiPushpin2Fill text="10px" />
+            </div>
+            <div v-else-if="!element.isPermanent && tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)" @dblclick.stop>
+              <RiCloseFill text="10px" />
+            </div>
+            <div v-show="keys.alt && index < 9" class="hotkey-number">
+              {{ index + 1 }}
+            </div>
+            <div class="drag-handle" />
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+    <MoreAction v-if="isShowMoreAction" class="more-action" />
+  </div>
+</template>
+
+<style>
+.tabbar-contextmenu .mx-context-menu {
+  --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl bg-[--g-container-bg];
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item {
+  --at-apply: transition-background-color;
+
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item:not(.disabled):hover {
+  --at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item span {
+  --at-apply: text-initial;
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item .icon {
+  --at-apply: text-initial;
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item.disabled span,
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item.disabled .icon {
+  --at-apply: op-25;
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator {
+  --at-apply: bg-[--g-container-bg];
+}
+
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator::after {
+  --at-apply: bg-stone-2 dark-bg-stone-7;;
+}
+</style>
+
+<style scoped>
+.tabbar-container {
+  --at-apply: relative h-[--g-tabbar-height] bg-[--g-bg];
+  transition: background-color 0.3s;
+}
+
+.tabs {
+  --at-apply: absolute right-0 left-0 overflow-y-hidden whitespace-nowrap;
+  padding-inline-end: 50px;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  --at-apply: hidden;
+}
+
+.tabs.tabs-ontop {
+  top: 0 !important;
+  bottom: inherit !important;
+}
+
+.tab-container {
+  --at-apply: inline-block;
+}
+
+.tab-container::after {
+  --at-apply: absolute bottom-0 z-10 content-empty;
+  inset-inline-start: v-bind(activePseudoTabStart);
+  width: v-bind(activePseudoTabWidth);
+  transition: width 0.3s, inset-inline-start 0.3s;
+}
+
+.tab-container:not(.dragging) .tab:not(.actived):hover {
+  --at-apply: z-3;
+}
+
+.tab-container:not(.dragging) .tab:not(.actived):hover::before,
+.tab-container:not(.dragging) .tab:not(.actived):hover::after {
+  --at-apply: content-none;
+}
+
+.tab-container:not(.dragging) .tab:not(.actived):hover + .tab .tab-dividers::before {
+  --at-apply: op-0;
+}
+
+.tab-container:not(.dragging) .tab:not(.actived):hover .tab-content .title,
+.tab-container:not(.dragging) .tab:not(.actived):hover .tab-content .action-icon {
+  color: var(--g-tabbar-tab-hover-color);
+}
+
+.tab-container:not(.dragging) .tab:not(.actived):hover .tab-background {
+  background-color: var(--g-tabbar-tab-hover-bg);
+}
+
+.tab {
+  --at-apply: relative inline-block text-14px cursor-pointer pointer-events-none
+  min-w-[--g-tabbar-tab-min-width] max-w-[--g-tabbar-tab-max-width] h-[--g-tabbar-height]
+  align-bottom;
+  line-height: calc(var(--g-tabbar-height) - 2px);
+}
+
+.tab * {
+  --at-apply: select-none;
+}
+
+.tab.actived {
+  --at-apply: z-5;
+}
+
+.tab.actived::before,
+.tab.actived::after {
+  --at-apply: content-none;
+}
+
+.tab.actived + .tab .tab-dividers::before {
+  --at-apply: op-0;
+}
+
+.tab.actived .tab-content .title,
+.tab.actived .tab-content .action-icon {
+  color: var(--g-tabbar-tab-active-color);
+}
+
+.tab.actived .tab-background {
+  background-color: var(--g-container-bg);
+}
+
+.tab.tab-ghost {
+  opacity: 0 !important;
+}
+
+.tab-dividers {
+  --at-apply: absolute z-0 h-3.5 -translate-y-2/4 top-2/4;
+  inset-inline: -1px;
+}
+
+.tab-dividers::before {
+  --at-apply: absolute block w-px content-empty opacity-100 inset-y-0
+  bg-[--g-tabbar-dividers-bg];
+
+  inset-inline-start: 1px;
+  transition: opacity 0.2s ease, background-color 0.3s;
+}
+
+.tab:first-child .tab-dividers::before {
+  --at-apply: op-0;
+}
+
+.tab-background {
+  --at-apply: absolute z-0 w-full h-full pointer-events-none left-0 top-0;
+  transition: opacity 0.3s, background-color 0.3s;
+}
+
+.tab-content {
+  --at-apply: flex size-full;
+  pointer-events: all;
+}
+
+.tab-content .title {
+  --at-apply: flex flex-1 gap-[5px] items-center h-full overflow-hidden whitespace-nowrap px-2.5 py-0;
+  margin-inline-end: 10px;
+  color: var(--g-tabbar-tab-color);
+  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
+  transition: margin-inline-end 0.3s;
+}
+
+[dir="rtl"] .tab-content .title {
+  mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
+}
+
+.tab-content .title:has(+ .action-icon) {
+  margin-inline-end: 28px;
+}
+
+.tab-content .title .icon {
+  flex-shrink: 0;
+}
+
+.tab-content .action-icon {
+  --at-apply: absolute z-10 flex items-center justify-center w-[1.5em] h-[1.5em]
+  text-xs text-[--g-tabbar-tab-color] -translate-y-2/4 rounded-[50%] top-2/4;
+  inset-inline-end: 0.5em;
+}
+
+.tab-content .action-icon:hover {
+  background-color: var(--g-bg);
+  box-shadow: 0 0 0 1px var(--g-border-color);
+}
+
+.tab-content .hotkey-number {
+  --at-apply: absolute z-10 flex items-center justify-center w-[1.5em] h-[1.5em]
+  text-xs -translate-y-2/4 rounded-[50%] right-[0.5em] top-2/4
+  text-[--g-tabbar-tab-color] bg-[--g-bg];
+  box-shadow: 0 0 0 1px var(--g-border-color);
+}
+
+.tab-content .drag-handle {
+  --at-apply: absolute inset-0 z-9;
+}
+
+/* Fashion 风格样式 */
+.tabs.tabs-fashion {
+  --at-apply: bottom-0;
+}
+
+.tabs.tabs-fashion .tab-container:not(.dragging) .tab:not(.actived):hover .tab-background::before,
+.tabs.tabs-fashion .tab-container:not(.dragging) .tab:not(.actived):hover .tab-background::after {
+  box-shadow: 0 0 0 20px var(--g-tabbar-tab-hover-bg);
+}
+
+.tabs.tabs-fashion .tab {
+  height: calc(var(--g-tabbar-height) - 10px);
+  margin-inline: 10px -10px;
+  line-height: calc(var(--g-tabbar-height) - 12px);
+}
+
+.tabs.tabs-fashion .tab:last-child {
+  margin-inline-end: 0;
+}
+
+.tabs.tabs-fashion .tab.tab-ontop .tab-background {
+  transform: rotate(180deg);
+}
+
+.tabs.tabs-fashion .tab-background {
+  border-radius: 10px 10px 0 0;
+}
+
+.tabs.tabs-fashion .tab-background::before,
+.tabs.tabs-fashion .tab-background::after {
+  --at-apply: absolute bottom-0 size-5 content-empty rounded-full;
+  box-shadow: 0 0 0 20px transparent;
+  transition: box-shadow 0.3s;
+}
+
+.tabs.tabs-fashion .tab-background::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
+
+.tabs.tabs-fashion .tab-background::after {
+  right: -20px;
+  clip-path: inset(50% 50% 0 -10px);
+}
+
+.tabs.tabs-fashion .tab.actived .tab-background::before,
+.tabs.tabs-fashion .tab.actived .tab-background::after {
+  box-shadow: 0 0 0 20px var(--g-container-bg);
+}
+
+/* Card 风格样式 */
+.tabs.tabs-card .tab {
+  --at-apply: ml-[5px] mr-0 my-[5px];
+  height: calc(var(--g-tabbar-height) - 10px);
+}
+
+.tabs.tabs-card .tab .tab-dividers {
+  --at-apply: hidden;
+}
+
+.tabs.tabs-card .tab-background {
+  --at-apply: rounded-5px;
+}
+
+/* Square 风格样式 */
+.tabs.tabs-square .tab-container::after {
+  --at-apply: bg-ui-primary h-0.5;
+}
+
+.tabs.tabs-square .tab-container:has(> .tab.tab-ontop)::after {
+  --at-apply: top-0 bottom-unset;
+}
+
+.tabs.tabs-square .tab-container:has(> .tab.tab-ontop) .tab .tab-background {
+  --at-apply: top-0 bottom-unset;
+}
+
+.tabs.tabs-square .tab:not(.actived):hover .tab-background {
+  --at-apply: h-full;
+}
+
+.tabs.tabs-square .tab .tab-background {
+  --at-apply: top-unset bottom-0 h-0 bg-[--g-tabbar-tab-hover-bg];
+  transition: height 0.3s;
+}
+
+.tabs.tabs-square .tab.actived .tab-background {
+  --at-apply: h-full bg-[--g-container-bg];
+}
+
+.more-action {
+  --at-apply: absolute z-10 flex items-center justify-center w-[50px] h-full right-0 top-0;
+  background-image: linear-gradient(to right, transparent, var(--g-bg));
+}
+
+/* 标签栏动画 */
+.tabbar-move,
+.tabbar-enter-active,
+.tabbar-leave-active {
+  transition: all 0.3s;
+}
+
+.tabbar-enter-from,
+.tabbar-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.tabs.tabs-ontop .tabbar-enter-from,
+.tabs.tabs-ontop .tabbar-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.tabbar-leave-active {
+  position: absolute !important;
+}
+</style>