@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { Tabbar } from '#/tabbar';
-import { PubinfoIcon } from '@/components';
-import { storage } from '@/utils';
 import ContextMenu from '@imengyu/vue3-context-menu';
 import { useMagicKeys } from '@vueuse/core';
 import hotkeys from 'hotkeys-js';
@@ -10,9 +8,11 @@ import { useI18n } from 'vue-i18n';
 import Message from 'vue-m-message';
 import RiCloseFill from '~icons/ri/close-fill';
 import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
-import useMainPage from '../../..//composables/useMainPage';
-import useTabbar from '../../..//composables/useTabbar';
+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';
 
@@ -41,15 +41,35 @@ const tabRef = shallowRef<HTMLElement[]>([]);
 onBeforeUpdate(() => {
   tabRef.value = [];
 });
-
+/**
+ * 计算当前激活的 tab 的伪元素起始位置
+ */
 const activePseudoTabStart = computed(() => {
   const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value);
-  return `${tabsRef.value.offsetWidth - (tabRef.value.find(item => Number.parseInt(item.dataset.index!) === index)?.getBoundingClientRect().right || 0)}px`;
+  // 如果没有找到对应的 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);
-  return `${tabRef.value.find(item => Number.parseInt(item.dataset.index!) === index)?.offsetWidth || 0}px`;
+  // 如果没有找到对应的 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);
@@ -84,11 +104,11 @@ watch([
   immediate: true,
 });
 
-watch(() => route, (val) => {
-  if (settingsStore.settings.tabbar.enable) {
-    tabbarStore.add(val).then(() => {
+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) {
+      if (index !== -1 && tabRef.value[index]) {
         scrollTo(tabRef.value[index].offsetLeft);
         tabbarScrollTip();
       }
@@ -210,13 +230,17 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
   if (activeIcon === 'system-point') {
     activeIcon = '';
   }
+
   let name;
+
   if ((!isActive && icon) || (isActive && !activeIcon)) {
     name = icon;
   }
-  else if (isActive && activeIcon) {
+
+  if (isActive && activeIcon) {
     name = activeIcon;
   }
+
   return name;
 }
 
@@ -329,453 +353,317 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss">
-.tabbar-contextmenu {
-  .mx-context-menu {
-    --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
+<style>
+.tabbar-contextmenu .mx-context-menu {
+  --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl bg-[--g-container-bg];
+}
 
-    background-color: var(--g-container-bg);
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item {
+  --at-apply: transition-background-color;
 
-    .mx-context-menu-items .mx-context-menu-item {
-      --at-apply: transition-background-color;
+}
 
-      &: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:not(.disabled):hover {
+  --at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
+}
 
-      span {
-        color: initial;
-      }
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item span {
+  --at-apply: text-initial;
+}
 
-      .icon {
-        color: initial;
-      }
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item .icon {
+  --at-apply: text-initial;
+}
 
-      &.disabled span,
-      &.disabled .icon {
-        opacity: 0.25;
-      }
-    }
+.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;
+}
 
-    .mx-context-menu-item-sperator {
-      background-color: var(--g-container-bg);
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator {
+  --at-apply: bg-[--g-container-bg];
+}
 
-      &::after {
-        --at-apply: bg-stone-2 dark-bg-stone-7;
-      }
-    }
-  }
+.tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator::after {
+  --at-apply: bg-stone-2 dark-bg-stone-7;;
 }
 </style>
 
-<style lang="scss" scoped>
+<style scoped>
 .tabbar-container {
-  position: relative;
-  height: var(--g-tabbar-height);
-  background-color: var(--g-bg);
+  --at-apply: relative h-[--g-tabbar-height] bg-[--g-bg];
   transition: background-color 0.3s;
+}
 
-  .tabs {
-    position: absolute;
-    right: 0;
-    left: 0;
-    padding-inline-end: 50px;
-    overflow-y: hidden;
-    white-space: nowrap;
+.tabs {
+  --at-apply: absolute right-0 left-0 overflow-y-hidden whitespace-nowrap;
+  padding-inline-end: 50px;
+  scrollbar-width: none;
+}
 
-    // firefox隐藏滚动条
-    scrollbar-width: none;
+.tabs::-webkit-scrollbar {
+  --at-apply: hidden;
+}
 
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
+.tabs.tabs-ontop {
+  top: 0 !important;
+  bottom: inherit !important;
+}
 
-    &.tabs-ontop {
-      top: 0 !important;
-      bottom: inherit !important;
-    }
+.tab-container {
+  --at-apply: inline-block;
+}
 
-    .tab-container {
-      display: inline-block;
-
-      &::after {
-        position: absolute;
-        inset-inline-start: v-bind(activePseudoTabStart);
-        bottom: 0;
-        z-index: 10;
-        width: v-bind(activePseudoTabWidth);
-        content: "";
-        transition: width 0.3s, inset-inline-start 0.3s;
-      }
+.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;
+}
 
-      &:not(.dragging) {
-        .tab {
-          &:not(.actived):hover {
-            z-index: 3;
-
-            &::before,
-            &::after {
-              content: none;
-            }
-
-            & + .tab .tab-dividers::before {
-              opacity: 0;
-            }
-
-            .tab-content {
-              .title,
-              .action-icon {
-                color: var(--g-tabbar-tab-hover-color);
-              }
-            }
-
-            .tab-background {
-              background-color: var(--g-tabbar-tab-hover-bg);
-            }
-          }
-        }
-      }
+.tab-container:not(.dragging) .tab:not(.actived):hover {
+  --at-apply: z-3;
+}
 
-      .tab {
-        position: relative;
-        display: inline-block;
-        min-width: var(--g-tabbar-tab-min-width);
-        max-width: var(--g-tabbar-tab-max-width);
-        height: var(--g-tabbar-height);
-        font-size: 14px;
-        line-height: calc(var(--g-tabbar-height) - 2px);
-        vertical-align: bottom;
-        pointer-events: none;
-        cursor: pointer;
-
-        * {
-          user-select: none;
-        }
+.tab-container:not(.dragging) .tab:not(.actived):hover::before,
+.tab-container:not(.dragging) .tab:not(.actived):hover::after {
+  --at-apply: content-none;
+}
 
-        &.actived {
-          z-index: 5;
+.tab-container:not(.dragging) .tab:not(.actived):hover + .tab .tab-dividers::before {
+  --at-apply: op-0;
+}
 
-          &::before,
-          &::after {
-            content: none;
-          }
+.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 .tab-dividers::before {
-            opacity: 0;
-          }
+.tab-container:not(.dragging) .tab:not(.actived):hover .tab-background {
+  background-color: var(--g-tabbar-tab-hover-bg);
+}
 
-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-active-color);
-            }
-          }
+.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-background {
-            background-color: var(--g-container-bg);
-          }
-        }
+.tab * {
+  --at-apply: select-none;
+}
 
-        &.tab-ghost {
-          opacity: 0 !important;
-        }
+.tab.actived {
+  --at-apply: z-5;
+}
 
-        .tab-dividers {
-          position: absolute;
-          inset-inline: -1px;
-          top: 50%;
-          z-index: 0;
-          height: 14px;
-          transform: translateY(-50%);
-
-          &::before {
-            position: absolute;
-            inset-inline-start: 1px;
-            top: 0;
-            bottom: 0;
-            display: block;
-            width: 1px;
-            content: "";
-            background-color: var(--g-tabbar-dividers-bg);
-            opacity: 1;
-            transition: opacity 0.2s ease, background-color 0.3s;
-          }
-        }
+.tab.actived::before,
+.tab.actived::after {
+  --at-apply: content-none;
+}
 
-        &:first-child .tab-dividers::before {
-          opacity: 0;
-        }
+.tab.actived + .tab .tab-dividers::before {
+  --at-apply: op-0;
+}
 
-        .tab-background {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          transition: opacity 0.3s, background-color 0.3s;
-        }
+.tab.actived .tab-content .title,
+.tab.actived .tab-content .action-icon {
+  color: var(--g-tabbar-tab-active-color);
+}
 
-        .tab-content {
-          display: flex;
-          width: 100%;
-          height: 100%;
-          pointer-events: all;
-
-          .title {
-            display: flex;
-            flex: 1;
-            gap: 5px;
-            align-items: center;
-            height: 100%;
-            padding: 0 10px;
-            margin-inline-end: 10px;
-            overflow: hidden;
-            color: var(--g-tabbar-tab-color);
-            white-space: nowrap;
-            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
-            transition: margin-inline-end 0.3s;
-
-            [dir="rtl"] & {
-              mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
-            }
-
-            &:has(+ .action-icon) {
-              margin-inline-end: 28px;
-            }
-
-            .icon {
-              flex-shrink: 0;
-            }
-          }
+.tab.actived .tab-background {
+  background-color: var(--g-container-bg);
+}
 
-          .action-icon {
-            position: absolute;
-            inset-inline-end: 0.5em;
-            top: 50%;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 1.5em;
-            height: 1.5em;
-            font-size: 12px;
-            color: var(--g-tabbar-tab-color);
-            border-radius: 50%;
-            transform: translateY(-50%);
-
-            &:hover {
-              --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
-
-              background-color: var(--g-bg);
-            }
-          }
+.tab.tab-ghost {
+  opacity: 0 !important;
+}
 
-          .hotkey-number {
-            --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
-
-            position: absolute;
-            top: 50%;
-            right: 0.5em;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 1.5em;
-            height: 1.5em;
-            font-size: 12px;
-            color: var(--g-tabbar-tab-color);
-            background-color: var(--g-bg);
-            border-radius: 50%;
-            transform: translateY(-50%);
-          }
+.tab-dividers {
+  --at-apply: absolute z-0 h-3.5 -translate-y-2/4 top-2/4;
+  inset-inline: -1px;
+}
 
-          .drag-handle {
-            position: absolute;
-            inset: 0;
-            z-index: 9;
-          }
-        }
-      }
-    }
+.tab-dividers::before {
+  --at-apply: absolute block w-px content-empty opacity-100 inset-y-0
+  bg-[--g-tabbar-dividers-bg];
 
-    &.tabs-fashion {
-      bottom: 0;
-
-      .tab-container {
-        &:not(.dragging) {
-          .tab:not(.actived):hover {
-            .tab-background {
-              &::before,
-              &::after {
-                box-shadow: 0 0 0 20px var(--g-tabbar-tab-hover-bg);
-              }
-            }
-          }
-        }
+  inset-inline-start: 1px;
+  transition: opacity 0.2s ease, background-color 0.3s;
+}
 
-        .tab {
-          height: calc(var(--g-tabbar-height) - 10px);
-          margin-inline: 10px -10px;
-          line-height: calc(var(--g-tabbar-height) - 12px);
+.tab:first-child .tab-dividers::before {
+  --at-apply: op-0;
+}
 
-          &:last-child {
-            margin-inline-end: 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-ontop .tab-background {
-            transform: rotate(180deg);
-          }
+.tab-content {
+  --at-apply: flex size-full;
+  pointer-events: all;
+}
 
-          .tab-background {
-            border-radius: 10px 10px 0 0;
-
-            &::before,
-            &::after {
-              position: absolute;
-              bottom: 0;
-              width: 20px;
-              height: 20px;
-              content: "";
-              border-radius: 100%;
-              box-shadow: 0 0 0 20px transparent;
-              transition: box-shadow 0.3s;
-            }
-
-            &::before {
-              left: -20px;
-              clip-path: inset(50% -10px 0 50%);
-            }
-
-            &::after {
-              right: -20px;
-              clip-path: inset(50% 50% 0 -10px);
-            }
-          }
+.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;
+}
 
-          &.actived {
-            .tab-background {
-              &::before,
-              &::after {
-                box-shadow: 0 0 0 20px var(--g-container-bg);
-              }
-            }
-          }
-        }
-      }
-    }
+[dir="rtl"] .tab-content .title {
+  mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
+}
 
-    &.tabs-card {
-      .tab-container {
-        .tab {
-          height: calc(var(--g-tabbar-height) - 10px);
-          margin: 5px 0 5px 5px;
+.tab-content .title:has(+ .action-icon) {
+  margin-inline-end: 28px;
+}
 
-          .tab-dividers {
-            display: none;
-          }
+.tab-content .title .icon {
+  flex-shrink: 0;
+}
 
-          .tab-background {
-            border-radius: 5px;
-          }
-        }
-      }
-    }
+.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;
+}
 
-    &.tabs-square {
-      .tab-container {
-        &::after {
-          height: 2px;
+.tab-content .action-icon:hover {
+  background-color: var(--g-bg);
+  box-shadow: 0 0 0 1px var(--g-border-color);
+}
 
-          --at-apply: bg-ui-primary;
-        }
+.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);
+}
 
-        &:has(> .tab.tab-ontop) {
-          &::after {
-            top: 0;
-            bottom: unset;
-          }
+.tab-content .drag-handle {
+  --at-apply: absolute inset-0 z-9;
+}
 
-          .tab {
-            .tab-background {
-              top: 0;
-              bottom: unset;
-            }
-          }
-        }
+/* Fashion 风格样式 */
+.tabs.tabs-fashion {
+  --at-apply: bottom-0;
+}
 
-        .tab {
-          &:not(.actived):hover {
-            .tab-background {
-              height: 100%;
-            }
-          }
+.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);
+}
 
-          .tab-background {
-            top: unset;
-            bottom: 0;
-            height: 0;
-            background-color: var(--g-tabbar-tab-hover-bg);
-            transition: height 0.3s;
-          }
+.tabs.tabs-fashion .tab {
+  height: calc(var(--g-tabbar-height) - 10px);
+  margin-inline: 10px -10px;
+  line-height: calc(var(--g-tabbar-height) - 12px);
+}
 
-          &.actived {
-            .tab-background {
-              height: 100%;
-              background-color: var(--g-container-bg);
-            }
-          }
-        }
-      }
-    }
-  }
+.tabs.tabs-fashion .tab:last-child {
+  margin-inline-end: 0;
+}
 
-  .more-action {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 100%;
-    background-image: linear-gradient(to right, transparent, var(--g-bg));
-
-    .icon {
-      --at-apply: w-6 h-6 rounded-1 text-lg cursor-pointer shadow transition-background-color transition-shadow;
-
-      background-color: var(--g-container-bg);
-    }
-  }
+.tabs.tabs-fashion .tab.tab-ontop .tab-background {
+  transform: rotate(180deg);
 }
 
-// 标签栏动画
-.tabs {
-  .tabbar-move,
-  .tabbar-enter-active,
-  .tabbar-leave-active {
-    transition: all 0.3s;
-  }
+.tabs.tabs-fashion .tab-background {
+  border-radius: 10px 10px 0 0;
+}
 
-  .tabbar-enter-from,
-  .tabbar-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
+.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-ontop {
-    .tabbar-enter-from,
-    .tabbar-leave-to {
-      opacity: 0;
-      transform: translateY(-30px);
-    }
-  }
+.tabs.tabs-fashion .tab-background::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
 
-  .tabbar-leave-active {
-    position: absolute !important;
-  }
+.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>