gi-component 0.0.46 → 0.0.48

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/button/src/button.vue

@@ -53,7 +53,7 @@ const bindProps = computed(() => {
 })
 
 const btnText = computed(() => {
-  return obj[props.type].btnText
+  return obj?.[props.type]?.btnText || ''
 })
 </script>
 

package/packages/components/nav-tabs/index.ts

@@ -1,5 +1,8 @@
+import type { DefineComponent } from 'vue'
+import type { NavTabBase, NavTabsProps } from './src/type'
 import NavTabs from './src/nav-tabs.vue'
 
-export type NavTabsInstance = InstanceType<typeof NavTabs>
+export type NavTabsInstance<T extends NavTabBase = NavTabBase> = DefineComponent<NavTabsProps<T>>
+
 export * from './src/type'
 export default NavTabs

package/packages/components/nav-tabs/src/nav-tabs.vue

@@ -3,20 +3,32 @@
     <div v-if="slots['left-extra']" :class="b('nav-tabs__left')">
       <slot name="left-extra" />
     </div>
-    <div ref="scrollRef" :class="b('nav-tabs__scroll')">
-      <div v-for="item in props.data" :key="item.value" :class="[
-        b('nav-tabs-item'),
-        props.custom
-          ? b('nav-tabs-item--custom')
-          : {
-            [b('nav-tabs-item--active')]: model === item.value,
-            [b('nav-tabs-item--disabled')]: item.disabled,
-          },
-      ]" :data-value="item.value" @click="handleItemClick(item)">
-        <slot :item="item" :active="model === item.value" :disabled="!!item.disabled">
-          {{ item.label }}
-        </slot>
+    <div :class="b('nav-tabs__scroll-wrap')">
+      <button ref="leftBtnRef" type="button" :class="[b('nav-tabs__nav-btn'), b('nav-tabs__nav-btn--prev')]">
+        <ElIcon>
+          <ArrowLeft />
+        </ElIcon>
+      </button>
+      <div ref="scrollRef" :class="b('nav-tabs__scroll')">
+        <div v-for="item in props.data" :key="item.value" :class="[
+          b('nav-tabs-item'),
+          props.custom
+            ? b('nav-tabs-item--custom')
+            : {
+              [b('nav-tabs-item--active')]: model === item.value,
+              [b('nav-tabs-item--disabled')]: item.disabled,
+            },
+        ]" :data-value="item.value" @click="handleItemClick(item)">
+          <slot :item="item" :active="model === item.value" :disabled="!!item.disabled">
+            {{ item.label }}
+          </slot>
+        </div>
       </div>
+      <button ref="rightBtnRef" type="button" :class="[b('nav-tabs__nav-btn'), b('nav-tabs__nav-btn--next')]">
+        <ElIcon>
+          <ArrowRight />
+        </ElIcon>
+      </button>
     </div>
     <div v-if="slots['right-extra']" :class="b('nav-tabs__right')">
       <slot name="right-extra" />
@@ -24,14 +36,16 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import type { NavTabItem, NavTabsProps } from './type.ts'
+<script lang="ts" setup generic="T extends NavTabBase">
+import type { NavTabBase, NavTabSlotProps, NavTabsProps } from './type.ts'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
 import { ref, useSlots } from 'vue'
 import { useBemClass, useNavTabs } from '../../../hooks'
 
 const model = defineModel<string | number>()
 
-const props = withDefaults(defineProps<NavTabsProps>(), {
+const props = withDefaults(defineProps<NavTabsProps<T>>(), {
   data: () => [],
   wheelSpeed: 1,
   custom: false
@@ -42,11 +56,7 @@ const emits = defineEmits<{
 }>()
 
 defineSlots<{
-  'default': (props: {
-    item: NavTabItem
-    active: boolean
-    disabled: boolean
-  }) => void
+  'default': (props: NavTabSlotProps<T>) => void
   'left-extra': () => void
   'right-extra': () => void
 }>()
@@ -56,6 +66,8 @@ const { b } = useBemClass()
 
 const rootRef = ref<HTMLElement | null>(null)
 const scrollRef = ref<HTMLElement | null>(null)
+const leftBtnRef = ref<HTMLElement | null>(null)
+const rightBtnRef = ref<HTMLElement | null>(null)
 
 const tabItemClassName = b('nav-tabs-item')
 
@@ -64,10 +76,13 @@ useNavTabs({
   tabScrollEl: scrollRef,
   tabItemClassName,
   activeValue: model,
-  wheelSpeed: props.wheelSpeed
+  wheelSpeed: props.wheelSpeed,
+  tabLeftScrollBtnEl: leftBtnRef,
+  tabRightScrollBtnEl: rightBtnRef,
+  navBtnDisabledClassName: b('nav-tabs__nav-btn--disabled')
 })
 
-function handleItemClick(item: NavTabItem) {
+function handleItemClick(item: T) {
   if (item.disabled) {
     return
   }
@@ -88,16 +103,26 @@ function handleItemClick(item: NavTabItem) {
 
   &__left {
     flex-shrink: 0;
-    margin-right: 10px;
+    // margin-right: 8px;
   }
 
   &__right {
     flex-shrink: 0;
-    margin-left: 10px;
+    //margin-left: 8px;
+  }
+
+  &__scroll-wrap {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
   }
 
   &__scroll {
     flex: 1;
+    min-width: 0;
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
@@ -109,6 +134,52 @@ function handleItemClick(item: NavTabItem) {
     }
   }
 
+  &__nav-btn {
+    flex-shrink: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--el-text-color-secondary);
+    cursor: pointer;
+    outline: none;
+    margin: 0 4px;
+
+    &--prev {
+      margin-left: 6px;
+    }
+
+    &--next {
+      margin-right: 6px;
+    }
+
+    &:hover {
+      color: var(--el-color-primary);
+      background-color: var(--el-fill-color-light);
+    }
+
+    &:active {
+      background-color: var(--el-fill-color);
+    }
+
+    &--disabled {
+      color: var(--el-text-color-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+
+      &:hover,
+      &:active {
+        color: var(--el-text-color-disabled);
+        background-color: transparent;
+      }
+    }
+  }
+
   &:not(.#{a.$prefix}-nav-tabs--custom) {
     .#{a.$prefix}-nav-tabs-item {
       padding: 0 16px;

package/packages/components/nav-tabs/src/type.ts

@@ -1,13 +1,24 @@
-export type NavTabItem = {
+/** 页签项基础字段（必填 + 可选 disabled） */
+export interface NavTabBase {
   label: string
   value: string | number
   disabled?: boolean
-  [key: string]: unknown
 }
 
-export interface NavTabsProps {
-  data?: NavTabItem[]
+/** 兼容旧用法：无扩展字段时的默认项类型 */
+export type NavTabItem = NavTabBase
+
+/** 组件 Props，T 由 data 数组元素类型推导 */
+export interface NavTabsProps<T extends NavTabBase = NavTabBase> {
+  data?: T[]
   wheelSpeed?: number
   /** 自定义项样式：无 padding，不应用 --active / --disabled 修饰类 */
   custom?: boolean
 }
+
+/** 默认插槽作用域 */
+export type NavTabSlotProps<T extends NavTabBase = NavTabBase> = {
+  item: T
+  active: boolean
+  disabled: boolean
+}

package/packages/components/page-layout/src/page-layout.vue

@@ -92,7 +92,7 @@ function handleClick() {
 
 .#{a.$prefix}-page-layout {
   flex: 1;
-  width: 100%;
+  width: auto;
   height: 100%;
   display: flex;
   overflow: hidden;

package/packages/components/tag/src/tag.vue

@@ -170,8 +170,8 @@ function handleClose(event: MouseEvent) {
 $theme-colors: primary, success, warning, danger, info;
 
 $tag-size-small-height: 20px;
-$tag-size-default-height: 22px;
-$tag-size-large-height: 24px;
+$tag-size-default-height: 24px;
+$tag-size-large-height: 26px;
 
 $tag-size-small-padding: 0 6px;
 $tag-size-default-padding: 0 8px;

package/packages/hooks/useNavTabs.ts

@@ -1,9 +1,10 @@
-import type { MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import {
   getCurrentInstance,
   nextTick,
   onMounted,
   onUnmounted,
+  ref,
   toRef,
   toValue,
   watch
@@ -20,6 +21,16 @@ export interface UseNavTabsOptions {
   activeValue?: MaybeRefOrGetter<string | number | undefined>
   /** 滚轮换算系数，默认 1 */
   wheelSpeed?: number
+  /** 左侧滚动按钮元素 */
+  tabLeftScrollBtnEl?: MaybeRefOrGetter<string | HTMLElement | null>
+  /** 右侧滚动按钮元素 */
+  tabRightScrollBtnEl?: MaybeRefOrGetter<string | HTMLElement | null>
+  /** 按钮滚动步长占可视宽度比例，默认 0.6 */
+  scrollBtnStepRatio?: number
+  /** 按钮滚动最小步长（px），默认 120 */
+  scrollBtnMinStep?: number
+  /** 按钮不可滚动时添加的 class（如 nav-tabs__nav-btn--disabled） */
+  navBtnDisabledClassName?: string
 }
 
 export interface UseNavTabsReturn {
@@ -27,6 +38,16 @@ export interface UseNavTabsReturn {
   scrollToActive: (behavior?: ScrollBehavior) => void
   /** 获取解析后的滚动容器 */
   getScrollEl: () => HTMLElement | null
+  /** 停止滚轮插值动画，避免与 scrollTo 冲突 */
+  cancelWheelScroll: () => void
+  /** 按步滚动（供外部调用，传入按钮时内部已绑定） */
+  scrollByStep: (direction: -1 | 1) => void
+  /** 内容是否溢出（可选，与按钮显隐同步更新） */
+  showNavBtn: Ref<boolean>
+  /** 是否可向左滚动 */
+  canScrollLeft: Ref<boolean>
+  /** 是否可向右滚动 */
+  canScrollRight: Ref<boolean>
 }
 
 function normalizeSelector(value: string): string {
@@ -50,6 +71,21 @@ function resolveElement(
   return scope.querySelector(normalizeSelector(target))
 }
 
+function getMaxScrollLeft(scrollEl: HTMLElement) {
+  return Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth)
+}
+
+/** 边界容差，避免浮点误差导致禁用态抖动 */
+const SCROLL_EDGE_EPSILON = 1
+
+function canScrollToLeft(scrollEl: HTMLElement) {
+  return scrollEl.scrollLeft > SCROLL_EDGE_EPSILON
+}
+
+function canScrollToRight(scrollEl: HTMLElement) {
+  return scrollEl.scrollLeft < getMaxScrollLeft(scrollEl) - SCROLL_EDGE_EPSILON
+}
+
 /** 滚轮平滑插值系数，越大跟手越快 */
 const WHEEL_SCROLL_LERP = 0.4
 const WHEEL_LINE_HEIGHT = 16
@@ -69,8 +105,7 @@ function getWheelPixelDelta(event: WheelEvent, scrollEl: HTMLElement): number {
 }
 
 function clampScrollLeft(scrollEl: HTMLElement, left: number): number {
-  const maxScroll = Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth)
-  return Math.max(0, Math.min(left, maxScroll))
+  return Math.max(0, Math.min(left, getMaxScrollLeft(scrollEl)))
 }
 
 function scrollItemToCenter(
@@ -78,12 +113,11 @@ function scrollItemToCenter(
   activeEl: HTMLElement,
   behavior: ScrollBehavior = 'smooth'
 ) {
-  const maxScroll = scrollEl.scrollWidth - scrollEl.clientWidth
+  const maxScroll = getMaxScrollLeft(scrollEl)
   if (maxScroll <= 0) {
     return
   }
 
-  // 使用视口坐标计算，兼容 flex gap / margin 等间距，避免 offsetLeft 偏差
   const scrollRect = scrollEl.getBoundingClientRect()
   const activeRect = activeEl.getBoundingClientRect()
   const activeLeftInContent = activeRect.left - scrollRect.left + scrollEl.scrollLeft
@@ -95,23 +129,62 @@ function scrollItemToCenter(
   })
 }
 
+function setElementVisible(el: HTMLElement | null, visible: boolean) {
+  if (!el) {
+    return
+  }
+  el.style.display = visible ? 'flex' : 'none'
+}
+
+function setBtnDisabled(
+  el: HTMLElement | null,
+  disabled: boolean,
+  disabledClassName?: string
+) {
+  if (!el) {
+    return
+  }
+  if (disabledClassName) {
+    el.classList.toggle(disabledClassName, disabled)
+  }
+  if (disabled) {
+    el.setAttribute('aria-disabled', 'true')
+  } else {
+    el.removeAttribute('aria-disabled')
+  }
+}
+
 export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
   const {
     tabEl,
     tabScrollEl,
     tabItemClassName,
     activeValue,
-    wheelSpeed = 1
+    wheelSpeed = 1,
+    tabLeftScrollBtnEl,
+    tabRightScrollBtnEl,
+    scrollBtnStepRatio = 0.6,
+    scrollBtnMinStep = 120,
+    navBtnDisabledClassName
   } = options
 
   const activeClassName = `${tabItemClassName}--active`
   const itemSelector = normalizeSelector(tabItemClassName)
+  const showNavBtn = ref(false)
+  const canScrollLeft = ref(false)
+  const canScrollRight = ref(false)
 
   let rootEl: HTMLElement | null = null
   let scrollEl: HTMLElement | null = null
+  let leftBtnEl: HTMLElement | null = null
+  let rightBtnEl: HTMLElement | null = null
   let resizeObserver: ResizeObserver | null = null
   let wheelRafId: number | null = null
   let wheelTargetScrollLeft = 0
+  let navBtnRafId: number | null = null
+
+  let onPrevClick: ((event: MouseEvent) => void) | null = null
+  let onNextClick: ((event: MouseEvent) => void) | null = null
 
   const cancelWheelAnimation = () => {
     if (wheelRafId !== null) {
@@ -120,6 +193,13 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     }
   }
 
+  const cancelWheelScroll = () => {
+    if (scrollEl) {
+      wheelTargetScrollLeft = scrollEl.scrollLeft
+    }
+    cancelWheelAnimation()
+  }
+
   const runWheelAnimation = () => {
     if (!scrollEl) {
       cancelWheelAnimation()
@@ -132,6 +212,7 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     if (Math.abs(diff) < 0.5) {
       scrollEl.scrollLeft = wheelTargetScrollLeft
       cancelWheelAnimation()
+      scheduleUpdateNavBtnState()
       return
     }
 
@@ -139,12 +220,87 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     wheelRafId = requestAnimationFrame(runWheelAnimation)
   }
 
+  const updateNavBtnState = () => {
+    if (!scrollEl) {
+      showNavBtn.value = false
+      canScrollLeft.value = false
+      canScrollRight.value = false
+      setElementVisible(leftBtnEl, false)
+      setElementVisible(rightBtnEl, false)
+      setBtnDisabled(leftBtnEl, false, navBtnDisabledClassName)
+      setBtnDisabled(rightBtnEl, false, navBtnDisabledClassName)
+      return
+    }
+
+    const overflow = getMaxScrollLeft(scrollEl) > 1
+    const scrollLeftEnabled = canScrollToLeft(scrollEl)
+    const scrollRightEnabled = canScrollToRight(scrollEl)
+
+    showNavBtn.value = overflow
+    canScrollLeft.value = scrollLeftEnabled
+    canScrollRight.value = scrollRightEnabled
+
+    setElementVisible(leftBtnEl, overflow)
+    setElementVisible(rightBtnEl, overflow)
+    setBtnDisabled(leftBtnEl, overflow && !scrollLeftEnabled, navBtnDisabledClassName)
+    setBtnDisabled(rightBtnEl, overflow && !scrollRightEnabled, navBtnDisabledClassName)
+  }
+
+  const scheduleUpdateNavBtnState = () => {
+    if (navBtnRafId !== null) {
+      return
+    }
+    navBtnRafId = requestAnimationFrame(() => {
+      navBtnRafId = null
+      updateNavBtnState()
+    })
+  }
+
+  const cancelNavBtnRaf = () => {
+    if (navBtnRafId !== null) {
+      cancelAnimationFrame(navBtnRafId)
+      navBtnRafId = null
+    }
+  }
+
+  const scrollByStep = (direction: -1 | 1) => {
+    if (!scrollEl) {
+      return
+    }
+
+    if (direction === -1 && !canScrollToLeft(scrollEl)) {
+      return
+    }
+    if (direction === 1 && !canScrollToRight(scrollEl)) {
+      return
+    }
+
+    cancelWheelScroll()
+
+    const maxScroll = getMaxScrollLeft(scrollEl)
+    if (maxScroll <= 0) {
+      return
+    }
+
+    const step = Math.max(scrollBtnMinStep, scrollEl.clientWidth * scrollBtnStepRatio)
+    const target = clampScrollLeft(scrollEl, scrollEl.scrollLeft + direction * step)
+
+    if (Math.abs(target - scrollEl.scrollLeft) < 1) {
+      return
+    }
+
+    scrollEl.scrollTo({ left: target, behavior: 'smooth' })
+  }
+
   const resolveElements = () => {
     const instanceRoot = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined
     const fallbackRoot = instanceRoot instanceof HTMLElement ? instanceRoot : document
 
     rootEl = resolveElement(toValue(tabEl), fallbackRoot)
-    scrollEl = resolveElement(toValue(tabScrollEl), rootEl ?? fallbackRoot)
+    const scope = rootEl ?? fallbackRoot
+    scrollEl = resolveElement(toValue(tabScrollEl), scope)
+    leftBtnEl = resolveElement(toValue(tabLeftScrollBtnEl), scope)
+    rightBtnEl = resolveElement(toValue(tabRightScrollBtnEl), scope)
 
     return Boolean(rootEl && scrollEl)
   }
@@ -173,11 +329,12 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     if (!scrollEl) {
       return
     }
-    cancelWheelAnimation()
+    cancelWheelScroll()
     const activeItem = findActiveItem()
     if (activeItem) {
       scrollItemToCenter(scrollEl, activeItem, behavior)
     }
+    scheduleUpdateNavBtnState()
   }
 
   const handleWheel = (event: WheelEvent) => {
@@ -204,23 +361,69 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     if (wheelRafId === null) {
       wheelRafId = requestAnimationFrame(runWheelAnimation)
     }
+
+    scheduleUpdateNavBtnState()
+  }
+
+  const handleScroll = () => {
+    scheduleUpdateNavBtnState()
   }
 
   const bindWheel = () => {
     scrollEl?.addEventListener('wheel', handleWheel, { passive: false })
+    scrollEl?.addEventListener('scroll', handleScroll, { passive: true })
   }
 
   const unbindWheel = () => {
     scrollEl?.removeEventListener('wheel', handleWheel)
+    scrollEl?.removeEventListener('scroll', handleScroll)
     cancelWheelAnimation()
   }
 
+  const bindNavButtons = () => {
+    unbindNavButtons()
+
+    if (leftBtnEl) {
+      onPrevClick = (event: MouseEvent) => {
+        if (leftBtnEl?.getAttribute('aria-disabled') === 'true') {
+          event.preventDefault()
+          return
+        }
+        scrollByStep(-1)
+      }
+      leftBtnEl.addEventListener('click', onPrevClick)
+    }
+
+    if (rightBtnEl) {
+      onNextClick = (event: MouseEvent) => {
+        if (rightBtnEl?.getAttribute('aria-disabled') === 'true') {
+          event.preventDefault()
+          return
+        }
+        scrollByStep(1)
+      }
+      rightBtnEl.addEventListener('click', onNextClick)
+    }
+  }
+
+  const unbindNavButtons = () => {
+    if (leftBtnEl && onPrevClick) {
+      leftBtnEl.removeEventListener('click', onPrevClick)
+    }
+    if (rightBtnEl && onNextClick) {
+      rightBtnEl.removeEventListener('click', onNextClick)
+    }
+    onPrevClick = null
+    onNextClick = null
+  }
+
   const bindResizeObserver = () => {
     if (!scrollEl || typeof ResizeObserver === 'undefined') {
       return
     }
 
     resizeObserver = new ResizeObserver(() => {
+      scheduleUpdateNavBtnState()
       scrollToActive('auto')
     })
     resizeObserver.observe(scrollEl)
@@ -231,13 +434,27 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
     resizeObserver = null
   }
 
+  const teardown = () => {
+    unbindWheel()
+    unbindNavButtons()
+    unbindResizeObserver()
+    cancelWheelAnimation()
+    cancelNavBtnRaf()
+    rootEl = null
+    scrollEl = null
+    leftBtnEl = null
+    rightBtnEl = null
+  }
+
   const setup = async () => {
     await nextTick()
     if (!resolveElements()) {
       return
     }
     bindWheel()
+    bindNavButtons()
     bindResizeObserver()
+    updateNavBtnState()
     scrollToActive('auto')
   }
 
@@ -246,10 +463,14 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
   })
 
   watch(
-    () => [toValue(tabEl), toValue(tabScrollEl)] as const,
+    () => [
+      toValue(tabEl),
+      toValue(tabScrollEl),
+      toValue(tabLeftScrollBtnEl),
+      toValue(tabRightScrollBtnEl)
+    ] as const,
     () => {
-      unbindWheel()
-      unbindResizeObserver()
+      teardown()
       setup()
     }
   )
@@ -261,15 +482,16 @@ export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
   }
 
   onUnmounted(() => {
-    unbindWheel()
-    unbindResizeObserver()
-    cancelWheelAnimation()
-    rootEl = null
-    scrollEl = null
+    teardown()
   })
 
   return {
     scrollToActive,
-    getScrollEl: () => scrollEl
+    getScrollEl: () => scrollEl,
+    cancelWheelScroll,
+    scrollByStep,
+    showNavBtn,
+    canScrollLeft,
+    canScrollRight
   }
 }