@veltra/desktop 1.0.8 → 1.0.10

package/src/components/tabs/tabs.vue

@@ -1,167 +1,96 @@
 <template>
-  <div :class="[cls.b, cls.m(position!), cls.m(size)]">
-    <ul :class="[cls.e('header'), cls.em('header', position!)]" ref="headerRef">
-      <li
-        v-for="(item, index) in tabItems"
-        :key="item.key"
-        :class="[
-          cls.e('header-item'),
-          bem.is('active', model === item.key),
-          bem.is('disabled', item.disabled === true)
-        ]"
-        v-ripple="item.disabled ? false : cls.e('ripple')"
-        @click.stop="handleClick(item, index)"
-      >
-        <slot :name="`name:${item.key}`">
-          {{ item.name }}
-        </slot>
-
-        <template v-if="editable">
-          <u-icon
-            v-if="!item.disabled"
-            :class="cls.e('close')"
-            @click.stop="handleClose(item, index)"
-            @mousedown.stop
-          >
-            <Close />
-          </u-icon>
-          <i v-else :class="cls.e('close-placeholder')"></i>
-        </template>
-      </li>
-
-      <li v-if="editable" :class="[cls.e('header-item'), cls.e('add')]" @click="handleAdd">
-        <u-icon>
-          <Plus />
-        </u-icon>
-      </li>
-    </ul>
-
-    <transition name="fade" mode="out-in">
-      <KeepAlive v-if="keepAlive">
-        <component :key="model" :is="renderSlots()" />
-      </KeepAlive>
-      <component v-else :key="model" :is="renderSlots()" />
-    </transition>
+  <div :class="[cls.b, cls.m(position!)]">
+    <u-tabs-horizontal
+      v-if="isHorizontal"
+      v-model="model"
+      :items="items"
+      :position="horizontalPosition"
+      :size="size"
+      :closable="closable"
+      :block="block"
+      :rounded="rounded"
+      @click="onClick"
+      @close="onClose"
+    />
+    <u-tabs-vertical
+      v-else
+      v-model="model"
+      :items="items"
+      :position="verticalPosition"
+      :size="size"
+      :closable="closable"
+      :rounded="rounded"
+      @click="onClick"
+      @close="onClose"
+    />
+
+    <div v-if="hasContentSlots" :class="cls.e('content')">
+      <transition name="fade" mode="out-in">
+        <keep-alive v-if="keepAlive">
+          <component :key="model" :is="renderContent()" />
+        </keep-alive>
+        <component v-else :key="model" :is="renderContent()" />
+      </transition>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useFallbackProps } from '@veltra/compositions'
-import { vRipple } from '@veltra/directives'
-import { Close, Plus } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, createVNode, nextTick, shallowRef, watch, type CSSProperties } from 'vue'
+import { computed, createVNode, useSlots } from 'vue'
 
-import type { TabItem, TabsProps, TabsEmits, ComponentSize } from '../../types'
-import { UIcon } from '../icon'
+import type { ComponentSize, TabItem, TabsEmits, TabsProps } from '../../types'
 import { UScroll } from '../scroll'
+import UTabsHorizontal from './tabs-horizontal.vue'
+import UTabsVertical from './tabs-vertical.vue'
 
-defineOptions({
-  name: 'Tabs'
-})
+defineOptions({ name: 'Tabs' })
 
 const props = withDefaults(defineProps<TabsProps>(), {
-  position: 'top'
+  position: 'top',
+  closable: false,
+  block: false,
+  rounded: false,
+  keepAlive: false
 })
 
 const emit = defineEmits<TabsEmits>()
 
-const slots = defineSlots<{
-  [key: string]: (props: { key: string }) => any
-  [key: `name:${string}`]: () => any
-}>()
+const slots = useSlots() as Record<string, ((props?: any) => any) | undefined>
 
 const { size } = useFallbackProps([props], {
   size: 'default' as ComponentSize
 })
 
-const tabItems = computed(() => {
-  return props.items
-})
-
 const cls = bem('tabs')
 
-const headerRef = shallowRef<HTMLElement>()
-
-/** 当前活动标签 */
-const index = shallowRef(-1)
 const model = defineModel<string>()
 
-const markStyle = shallowRef<CSSProperties>({})
+const isHorizontal = computed(() => props.position === 'top' || props.position === 'bottom')
 
-let changedByEvent = false
-watch(
-  [model, () => props.items],
-  ([model, items]) => {
-    if (changedByEvent) return
-    index.value = items.findIndex((item) => item.key === model)
-  },
-  { immediate: true }
+/** 避免模板中使用类型断言：收敛 position 到水平 / 垂直子组件所需的子集。 */
+const horizontalPosition = computed<'top' | 'bottom'>(() =>
+  props.position === 'bottom' ? 'bottom' : 'top'
 )
 
-watch(
-  [index, () => props.position, () => props.editable],
-  async ([index, position, editable]) => {
-    if (index === -1 || editable) return
-    await nextTick()
-
-    const headerEl = headerRef.value!
-
-    const headerRect = headerEl.getBoundingClientRect()
-    const el = headerEl.children[index]! as HTMLLIElement
-    const { offsetWidth, offsetHeight } = el
-
-    const rect = el.getBoundingClientRect()
-
-    if (position === 'top' || position === 'bottom') {
-      markStyle.value = {
-        width: offsetWidth + 'px',
-        transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`
-      }
-    } else {
-      markStyle.value = {
-        height: offsetHeight + 'px',
-        transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`
-      }
-    }
-  },
-  { immediate: true }
+const verticalPosition = computed<'left' | 'right'>(() =>
+  props.position === 'right' ? 'right' : 'left'
 )
 
-const handleClick = (item: TabItem, _index: number) => {
-  if (item.disabled) return
+/** 是否存在任一内容面板插槽；没有则不渲染内容区域。 */
+const hasContentSlots = computed(() => Object.keys(slots).length > 0)
 
-  changedByEvent = true
-  index.value = _index
-  model.value = item.key
-  nextTick(() => {
-    changedByEvent = false
-  })
-}
+const onClick = (item: TabItem, index: number) => emit('click', item, index)
+const onClose = (item: TabItem, index: number) => emit('close', item, index)
 
-const renderSlots = () => {
+const renderContent = () => {
   const key = model.value
   if (!key) return null
   const nodes = slots[key]?.({ key })
   if (Array.isArray(nodes)) {
-    return createVNode(UScroll, { class: cls.e('content') }, { default: () => nodes })
+    return createVNode(UScroll, null, { default: () => nodes })
   }
   return nodes
 }
-
-/** 关闭标签 */
-const handleClose = (item: TabItem, index: number) => {
-  const { items } = props
-  if (model.value === item.key) {
-    model.value = (items[index + 1] ?? items[index - 1])!.key
-  }
-
-  emit('update:items', [...items.slice(0, index), ...items.slice(index + 1)])
-
-  emit('delete', item, index)
-}
-
-const handleAdd = () => {
-  emit('create')
-}
 </script>

package/src/components/tabs/use-tabs-bar.ts

@@ -0,0 +1,119 @@
+import { useResizeObserver } from '@veltra/compositions'
+import {
+  type ModelRef,
+  type Ref,
+  type ShallowRef,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  watch
+} from 'vue'
+
+import type { TabItem } from '../../types'
+
+interface UseTabsBarOptions {
+  viewportRef: ShallowRef<HTMLElement | undefined>
+  listRef: ShallowRef<HTMLElement | undefined>
+  items: Ref<TabItem[]>
+  model: ModelRef<string | undefined>
+}
+
+/**
+ * 水平标签栏的溢出滚动逻辑：
+ * - 计算 nav 按钮显隐与可用状态
+ * - 提供按步滚动与活动标签自动滚入视野的方法
+ * - 绑定 wheel / scroll / resize 事件
+ */
+export function useTabsBar(options: UseTabsBarOptions) {
+  const { viewportRef, listRef, items, model } = options
+
+  const showNav = shallowRef(false)
+  const canPrev = shallowRef(false)
+  const canNext = shallowRef(false)
+
+  /** 依据 viewport 与内容尺寸推导滚动按钮可用状态 */
+  const updateNavState = () => {
+    const vp = viewportRef.value
+    if (!vp) return
+    const { scrollLeft, scrollWidth, clientWidth } = vp
+    const overflowing = scrollWidth - clientWidth > 1
+    showNav.value = overflowing
+    canPrev.value = overflowing && scrollLeft > 0
+    canNext.value = overflowing && scrollLeft + clientWidth < scrollWidth - 1
+  }
+
+  /** 箭头按钮：按视口宽度 80% 的步长平滑滚动 */
+  const scrollByStep = (dir: 1 | -1) => {
+    const vp = viewportRef.value
+    if (!vp) return
+    vp.scrollTo({ left: vp.scrollLeft + dir * vp.clientWidth * 0.8, behavior: 'smooth' })
+  }
+
+  /** 活动标签自动滚入视野 */
+  const ensureActiveVisible = () => {
+    const vp = viewportRef.value
+    const list = listRef.value
+    if (!vp || !list) return
+    const activeKey = model.value
+    if (!activeKey) return
+    const activeIndex = items.value.findIndex((i) => i.key === activeKey)
+    if (activeIndex < 0) return
+    const el = list.children[activeIndex] as HTMLElement | undefined
+    if (!el) return
+
+    const vpRect = vp.getBoundingClientRect()
+    const elRect = el.getBoundingClientRect()
+    if (elRect.left < vpRect.left) {
+      vp.scrollTo({ left: vp.scrollLeft + (elRect.left - vpRect.left) - 8, behavior: 'smooth' })
+    } else if (elRect.right > vpRect.right) {
+      vp.scrollTo({ left: vp.scrollLeft + (elRect.right - vpRect.right) + 8, behavior: 'smooth' })
+    }
+  }
+
+  /** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 deltaX）不拦截 */
+  const handleWheel = (e: WheelEvent) => {
+    if (!showNav.value) return
+    const vp = viewportRef.value
+    if (!vp) return
+    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return
+    if (e.deltaY === 0) return
+    e.preventDefault()
+    vp.scrollLeft += e.deltaY
+  }
+
+  useResizeObserver({ targets: [viewportRef, listRef], onResize: () => updateNavState() })
+
+  watch(model, async () => {
+    await nextTick()
+    ensureActiveVisible()
+  })
+
+  watch(
+    items,
+    async () => {
+      await nextTick()
+      updateNavState()
+      ensureActiveVisible()
+    },
+    { deep: false }
+  )
+
+  onMounted(() => {
+    const vp = viewportRef.value
+    if (!vp) return
+    vp.addEventListener('wheel', handleWheel, { passive: false })
+    vp.addEventListener('scroll', updateNavState, { passive: true })
+    updateNavState()
+    nextTick(ensureActiveVisible)
+  })
+
+  onBeforeUnmount(() => {
+    const vp = viewportRef.value
+    if (!vp) return
+    vp.removeEventListener('wheel', handleWheel)
+    vp.removeEventListener('scroll', updateNavState)
+  })
+
+  return { showNav, canPrev, canNext, updateNavState, scrollByStep, ensureActiveVisible }
+}

package/src/components/tree/style.scss

@@ -1,19 +1,40 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
+@use 'sass:map';
 
 $root-name: tree;
 
+// 每一级缩进与展开图标 / 叶子占位保持一致的宽度，
+// 保证节点内容在各层之间横向对齐。
+$indent-width: 20px;
+$indent-leaf-width: 20px;
+$expand-icon-size: 20px;
+// 节点稳态高度，与 `tree.vue` 中 `estimateSize` 协同，用于虚拟滚动初始估算。
+$node-min-height-small: 28px;
+$node-min-height-default: 32px;
+$node-min-height-large: 40px;
+$node-min-heights: (
+  small: $node-min-height-small,
+  default: $node-min-height-default,
+  large: $node-min-height-large
+);
+
 @include m.b($root-name) {
   @include m.size using ($size) {
     @include m.bem($root-name, node-content) {
       border-radius: fn.use-var(radius, $size);
       padding: fn.use-var(gap, $size);
       line-height: 1;
+      gap: fn.use-var(gap, $size);
     }
 
     @include m.bem($root-name, checkbox) {
       margin-right: fn.use-var(gap, $size);
     }
+
+    @include m.bem($root-name, node) {
+      min-height: map.get($node-min-heights, $size);
+    }
   }
 
   @include m.e(checkbox) {
@@ -32,8 +53,20 @@ $root-name: tree;
         width: 100%;
       }
     }
+
+    // 非虚拟模式通过相邻兄弟间距提供呼吸；
+    // 虚拟模式下改由 virtualizer 的 gap 参数统一负责。
+    &:not(.is-virtual) {
+      @include m.bem($root-name, node) {
+        & + & {
+          margin-top: 2px;
+        }
+      }
+    }
   }
 
+  // 选中 / 勾选态下，对节点内容提供 hover 反馈；
+  // 禁用节点不参与 hover 反馈，避免假性交互。
   @include m.is(selectable, checkable) {
     @include m.bem($root-name, node) {
       &:not(.is-disabled) {
@@ -47,15 +80,27 @@ $root-name: tree;
   }
 
   @include m.e(node) {
+    position: relative;
     cursor: pointer;
-    margin-bottom: 0.2rem;
     @include m.flex($align: center);
 
     @include m.is(selected) {
+      // 左侧 3px 色带，配合淡色背景共同构成选中态。
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        width: 3px;
+        border-radius: 3px;
+        background-color: fn.use-var(color, primary);
+      }
+
       @include m.bem($root-name, node-content) {
-        background-color: fn.use-var(color, primary, light-9) !important;
+        background-color: fn.use-var(color, primary, light-9);
         color: fn.use-var(color, primary);
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 
@@ -67,43 +112,41 @@ $root-name: tree;
 
     @include m.is(disabled) {
       cursor: not-allowed;
+
       @include m.bem($root-name, node-content) {
         color: fn.use-var(text-color, disabled);
+
+        &:hover {
+          background-color: transparent;
+        }
       }
     }
   }
 
-  @include m.e(expand-icon, icon-placeholder) {
+  // 纯缩进占位：每级 20px 空白，不绘制连接线，
+  // 视觉层级由缩进 + 展开图标 + 选中态共同表达。
+  @include m.e(indent) {
     flex-shrink: 0;
-    width: 20px;
-    height: 20px;
+    width: $indent-width;
+
+    @include m.em(indent, leaf) {
+      width: $indent-leaf-width;
+    }
   }
 
   @include m.e(expand-icon) {
     cursor: pointer;
-    transition:
-      transform 0.2s,
-      background-color 0.2s;
     flex-shrink: 0;
-    font-size: 20px;
+    width: $expand-icon-size;
+    height: $expand-icon-size;
+    font-size: $expand-icon-size;
     border-radius: 50%;
+    transition:
+      transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 
     &:hover {
-      background-color: fn.use-var(color, primary, light-9);
-    }
-  }
-
-  @include m.e(icon-placeholder) {
-    padding: 5px;
-
-    &::before {
-      content: '';
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      display: block;
-      border-radius: 50%;
-      border: 2px solid fn.use-var(text-color, main);
+      background-color: fn.use-var(bg-color, hover);
     }
   }
 
@@ -111,17 +154,19 @@ $root-name: tree;
     flex-grow: 1;
     overflow: hidden;
     user-select: none;
-    word-break: break-all;
-    transition: background-color 0.25s;
+    word-break: break-word;
+    transition: background-color 0.2s ease;
     @include m.flex($align: center);
   }
 
   @include m.e(ripple) {
-    background-color: fn.use-var(color, primary, light-7);
-    opacity: 0.5;
+    background-color: fn.use-var(color, primary, light-5);
+    opacity: 0.25;
   }
 
   @include m.e(empty) {
     text-align: center;
+    padding: fn.use-var(gap, default) 0;
+    color: fn.use-var(text-color, secondary);
   }
 }

package/src/components/tree/tree-node.vue

@@ -1,13 +1,14 @@
 <template>
   <div
     :class="[cls.e('node'), bem.is('expanded', node.expanded), bem.is('disabled', node.disabled)]"
-    :style="{ paddingLeft: withUnit(node.depth * 20 - 20, 'px') }"
-    :ref="measureElement"
+    :ref="measureRef"
   >
+    <span v-for="i in node.depth" :key="i" :class="cls.e('indent')" aria-hidden="true"></span>
+
     <u-icon v-if="!node.isLeaf" :class="cls.e('expand-icon')" @click.stop="toggleExpand">
       <ArrowRight />
     </u-icon>
-    <i v-else :class="cls.e('icon-placeholder')"> </i>
+    <i v-else :class="[cls.e('indent'), cls.em('indent', 'leaf')]" aria-hidden="true"></i>
 
     <div
       :class="cls.e('node-content')"
@@ -35,7 +36,7 @@
 <script lang="ts" setup>
 import { vRipple } from '@veltra/directives'
 import { ArrowRight } from '@veltra/icons/normal'
-import { bem, withUnit } from '@veltra/utils'
+import { bem } from '@veltra/utils'
 import { inject } from 'vue'
 
 import type { TreeNodeProps } from '../../types'
@@ -53,6 +54,11 @@ const props = defineProps<TreeNodeProps>()
 const { treeProps, treeEmit, cls, getTreeSlotsNode, getFlattedNodes, toggleCheck, handleSelect } =
   inject(TreeDIKey)!
 
+function measureRef(el: unknown) {
+  if (typeof props.index !== 'number' || !props.measureElement) return
+  props.measureElement(props.index, el as Element | null)
+}
+
 function toggleExpand() {
   const { node } = props
   node.expanded = !node.expanded

package/src/components/tree/tree.vue

@@ -2,7 +2,6 @@
   <u-scroll
     :class="className"
     ref="scrollRef"
-    :content-style="{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }"
     :content-class="[cls.e('wrap'), bem.is('virtual', virtualEnabled)]"
   >
     <template v-if="virtualEnabled">
@@ -11,7 +10,7 @@
         :node="node"
         :key="key"
         :class="bem.is('selected', node.data === selectedData)"
-        :data-index="index"
+        :index="index"
         :measure-element="measureElement"
         :style="{ transform: `translateY(${offset}px)` }"
       />
@@ -32,9 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
-import { useVirtual } from '@veltra/compositions'
-import { bem, nextFrame, withUnit, scrollIntoContainerView } from '@veltra/utils'
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'
 import { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'
 
 import type { TreeProps, TreeEmit, _TreeExposed } from '../../types'
@@ -122,28 +120,57 @@ const { checkedData, toggleCheck } = useCheck({
   getFlattedNodes
 })
 
-const { totalHeight, virtualList, scrollTo, virtualEnabled, measureElement } = useVirtual({
+const estimateSize = (): number => {
+  // 基于 style.scss 中节点稳态高度推算的默认值；
+  // 实际高度仍由 `measureElement` 通过 ResizeObserver 回填覆盖。
+  switch (size.value) {
+    case 'small':
+      return 32
+    case 'large':
+      return 44
+    default:
+      return 36
+  }
+}
+
+// 80 阈值内化为消费者侧语义；低于此值时不启用虚拟化。
+const virtualEnabled = computed(() => nodes.value.length > 80)
+
+const { virtualizer, items } = useVirtualizer({
   count: computed(() => nodes.value.length),
-  estimateSize: () => 40,
+  scrollEl: () => scrollRef.value?.containerRef ?? null,
+  // 仅在虚拟化启用时把内容容器的 height 撑开到 totalSize；
+  // 关闭时传 null，hook 会清除此前写入的内联 height，回到 CSS 默认。
+  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),
+  estimateSize,
   gap: 2,
-  virtualThreshold: 80,
-  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+  // 以节点稳定 key 作为虚拟项身份，展开 / 收起 / 过滤引起的 nodes 数组变更
+  // 保留未移动节点的真实测量值，避免再次滚动首屏抖动。
+  getItemKey: (i) => nodes.value[i]?.key ?? i
 })
 
+// 身份稳定性已由底层 `getItemKey` 保证；直接以 `node.key` 作为 Vue 层 key。
+// `item.index` 仅作为 nodes / snapshot 竞态边缘的 fallback。
 const virtualNodes = computed(() => {
   const _nodes = nodes.value
-
-  return virtualList.value.map((item) => {
+  return items.value.map((item) => {
     const node = _nodes[item.index]!
     return {
       node,
-      key: node.key || item.key,
+      key: node?.key ?? item.index,
       offset: item.start,
       index: item.index
     }
   })
 })
 
+const measureElement: (index: number, el: Element | null) => void = (index, el) =>
+  virtualizer.measureElement(index, el)
+
+function scrollTo(index: number): void {
+  virtualizer.scrollToIndex(index, { align: 'center' })
+}
+
 function scrollIntoView() {
   const { selectable, checkable, scrollToView } = props
   if (!scrollToView || (!selectable && !checkable) || !nodes.value) return