@veltra/desktop 1.4.0 → 1.5.0

package/src/components/contextmenu/__test__/contextmenu.test.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, defineComponent, h, inject, nextTick } from 'vue'
+
+import type { ContextmenuItem } from '../../../types'
+import UContextmenu from '../contextmenu.vue'
+import { ContextmenuRootDIKey } from '../di'
+
+function cleanupPanels(): void {
+  document.querySelectorAll('.u-contextmenu').forEach((el) => el.remove())
+}
+
+function mountContextmenu(props: {
+  menus: ContextmenuItem[]
+  width?: number
+  mousePosition?: { x: number; y: number }
+}) {
+  cleanupPanels()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({
+    render() {
+      return h(UContextmenu, {
+        mousePosition: props.mousePosition ?? { x: 10, y: 10 },
+        width: props.width ?? 180,
+        menus: props.menus
+      })
+    }
+  })
+  app.mount(host)
+
+  return {
+    host,
+    unmount() {
+      app.unmount()
+      host.remove()
+      cleanupPanels()
+    }
+  }
+}
+
+function panel(): HTMLElement | null {
+  // 取最后一个（避免 leave 过渡残留抢到 querySelector 首个）
+  const all = document.querySelectorAll<HTMLElement>('.u-contextmenu')
+  return all[all.length - 1] ?? null
+}
+
+describe('UContextmenu', () => {
+  it('divider 渲染为分割线', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: 'A', callback: () => {} },
+        { divider: true },
+        { label: 'B', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(el!.querySelectorAll('.u-contextmenu__divider')).toHaveLength(1)
+      expect(el!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('render 组件挂载替代 label', async () => {
+    const Custom = defineComponent({
+      name: 'CustomMenuContent',
+      setup() {
+        return () => h('span', { class: 'custom-render' }, '自定义内容')
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: 'fallback', keepOpen: true, render: Custom }]
+    })
+    try {
+      await nextTick()
+      const el = panel()!
+      expect(el.querySelector('.custom-render')?.textContent).toBe('自定义内容')
+      expect(el.textContent).not.toContain('fallback')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('keepOpen 点击不关闭菜单', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: '保持打开', keepOpen: true, callback: () => {} },
+        { label: '普通项', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const items = panel()!.querySelectorAll<HTMLElement>('.u-contextmenu__item')
+      items[0]!.click()
+      await nextTick()
+      expect(panel()).toBeTruthy()
+      expect(panel()!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('普通项点击仍关闭', async () => {
+    const callback = vi.fn()
+    const { unmount } = mountContextmenu({ menus: [{ label: '关闭我', callback }] })
+    try {
+      await nextTick()
+      panel()!.querySelector<HTMLElement>('.u-contextmenu__item')!.click()
+      await nextTick()
+      expect(callback).toHaveBeenCalledOnce()
+      // happy-dom 无真实 CSS transition，leave 可能停在 leave-active；断言已进入关闭流程
+      const el = panel()
+      expect(el === null || /leave/.test(el.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('内嵌组件 inject DI 可主动关闭', async () => {
+    const closerClick = vi.fn()
+    let injected = false
+    const Closer = defineComponent({
+      name: 'CloserMenuContent',
+      setup() {
+        const root = inject(ContextmenuRootDIKey)
+        injected = !!root
+        return () =>
+          h(
+            'button',
+            {
+              class: 'close-via-di',
+              type: 'button',
+              onClick: () => {
+                closerClick()
+                root?.onItemClickEnd()
+              }
+            },
+            '关闭'
+          )
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: '自定义', keepOpen: true, render: Closer }]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(injected).toBe(true)
+      const btn = el!.querySelector<HTMLButtonElement>('.close-via-di')
+      expect(btn, `menu html: ${el!.innerHTML}`).toBeTruthy()
+      btn!.click()
+      await nextTick()
+      expect(closerClick).toHaveBeenCalledOnce()
+      const after = panel()
+      expect(after === null || /leave/.test(after.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/contextmenu/contextmenu-item.vue

@@ -1,11 +1,11 @@
 <template>
   <li
     :class="[cls.e('item'), bem.is('disabled', disabled), bem.is('loading', loading)]"
-    v-ripple="!disabled && !loading"
+    v-ripple="!disabled && !loading && !menu.keepOpen"
     @click="handleClickMenu"
   >
     <div :class="cls.e('item-content')">
-      <template v-if="showIconColumn">
+      <template v-if="showIconColumn && !menu.render">
         <u-icon v-if="loading" :class="bem.is('loading')">
           <Loading />
         </u-icon>
@@ -15,7 +15,10 @@
         <i v-else :class="cls.e('icon-place')"></i>
       </template>
 
-      <span :class="cls.e('label')">{{ menu.label }}</span>
+      <div v-if="menu.render" :class="cls.e('custom')" @click.stop>
+        <component :is="menu.render" />
+      </div>
+      <span v-else :class="cls.e('label')">{{ menu.label }}</span>
 
       <i v-if="showArrowColumn" :class="cls.e('arrow-place')"></i>
     </div>
@@ -44,7 +47,7 @@ const loading = shallowRef(false)
 const disabled = computed(() => getMenuDisabled(menu))
 
 function handleClickMenu() {
-  if (disabled.value || loading.value) return
+  if (disabled.value || loading.value || menu.keepOpen) return
   onItemClickStart()
   loading.value = true
 

package/src/components/contextmenu/contextmenu-panel.vue

@@ -1,7 +1,8 @@
 <template>
   <ul v-bind="$attrs">
     <template v-for="(menu, index) of menus" :key="index">
-      <UContextmenuSub v-if="menu.children?.length" :menu="menu" />
+      <li v-if="menu.divider" :class="cls.e('divider')" role="separator" />
+      <UContextmenuSub v-else-if="menu.children?.length" :menu="menu" />
       <UContextmenuItem v-else :menu="menu" />
     </template>
   </ul>
@@ -19,10 +20,12 @@ defineOptions({ name: 'UContextmenuPanel', inheritAttrs: false })
 
 const { menus } = defineProps<{ menus: ContextmenuItem[] }>()
 
-inject(ContextmenuRootDIKey)
+const { cls } = inject(ContextmenuRootDIKey)!
 
-const showIconColumn = computed(() => menus.some((menu) => !!menu.icon))
-const showArrowColumn = computed(() => menus.some((menu) => !!menu.children?.length))
+const showIconColumn = computed(() => menus.some((menu) => !menu.divider && !!menu.icon))
+const showArrowColumn = computed(() =>
+  menus.some((menu) => !menu.divider && !!menu.children?.length)
+)
 
 provide(ContextmenuPanelDIKey, { showIconColumn, showArrowColumn })
 </script>

package/src/components/contextmenu/index.ts

@@ -1,3 +1,4 @@
 export { default as UContextmenu } from './contextmenu.vue'
 
 export { contextmenu } from './api'
+export { ContextmenuRootDIKey, ContextmenuPanelDIKey } from './di'

package/src/components/contextmenu/style.scss

@@ -25,6 +25,8 @@ $arrow-size: 12px;
   $b: &;
 
   position: fixed;
+  // 与子菜单一致：最小宽度兜底，调用方可用 width: max-content 让内容撑开
+  min-width: 120px;
   @include panel-surface;
 
   @include m.e(label) {
@@ -33,6 +35,20 @@ $arrow-size: 12px;
     @include m.ellipsis;
   }
 
+  @include m.e(custom) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include m.e(divider) {
+    height: 0;
+    margin: 4px 8px;
+    border: 0;
+    border-top: 1px solid fn.use-var(border, color);
+    list-style: none;
+    pointer-events: none;
+  }
+
   @include m.e(item) {
     position: relative;
     cursor: pointer;

package/src/components/file-viewer/helper.ts

@@ -104,59 +104,6 @@ export function toBlobUrl(
   return { url, revoke: () => URL.revokeObjectURL(url) }
 }
 
-/**
- * RFC-4180 子集 CSV 解析：支持 "" 转义、\r\n 与 \n 换行、, 分隔。
- * 为性能起见采用状态机而非 split。
- */
-export function parseCsv(text: string): string[][] {
-  const rows: string[][] = []
-  let row: string[] = []
-  let field = ''
-  let inQuotes = false
-  const len = text.length
-
-  for (let i = 0; i < len; i++) {
-    const ch = text[i]
-
-    if (inQuotes) {
-      if (ch === '"') {
-        if (text[i + 1] === '"') {
-          field += '"'
-          i++
-        } else {
-          inQuotes = false
-        }
-      } else {
-        field += ch
-      }
-      continue
-    }
-
-    if (ch === '"') {
-      inQuotes = true
-    } else if (ch === ',') {
-      row.push(field)
-      field = ''
-    } else if (ch === '\n') {
-      row.push(field)
-      rows.push(row)
-      row = []
-      field = ''
-    } else if (ch === '\r') {
-      // swallow CR; LF will commit the row
-    } else {
-      field += ch
-    }
-  }
-
-  // 最后一行
-  if (field.length > 0 || row.length > 0) {
-    row.push(field)
-    rows.push(row)
-  }
-  return rows
-}
-
 export function formatBytes(bytes?: number): string {
   if (bytes === undefined || bytes === null || Number.isNaN(bytes)) return '-'
   if (bytes < 1024) return `${bytes} B`

package/src/components/file-viewer/previewers/sheet-previewer.vue

@@ -1,33 +1,44 @@
 <template>
   <div :class="cls.e('sheet')">
-    <div v-if="truncated" :class="cls.e('sheet-note')">
-      仅展示前 {{ renderedRows.toLocaleString() }} 行（共 {{ totalRows.toLocaleString() }} 行）
+    <div v-if="unavailable" :class="cls.e('empty')">
+      <u-empty text="无法预览表格：未安装 @veltra/sheet-core" :size="32" />
     </div>
-    <div v-if="sheets.length > 1" :class="cls.e('sheet-tabs')">
-      <button
-        v-for="(s, i) in sheets"
-        :key="s.name"
-        :class="[cls.e('sheet-tab'), bem.is('active', i === activeSheetIndex)]"
-        @click="activeSheetIndex = i"
-      >
-        {{ s.name }}
-      </button>
-    </div>
-    <div ref="container" :class="cls.e('sheet-stage')" />
-    <div v-if="loading" :class="cls.e('loading')">加载中…</div>
+    <template v-else>
+      <div v-if="truncated" :class="cls.e('sheet-note')">
+        共 {{ totalRows.toLocaleString() }} 行，超出预览上限
+        {{ maxRows.toLocaleString() }} 行，已全量加载
+      </div>
+      <div v-if="sheets.length > 1" :class="cls.e('sheet-tabs')">
+        <button
+          v-for="(s, i) in sheets"
+          :key="s.name"
+          :class="[cls.e('sheet-tab'), bem.is('active', i === activeSheetIndex)]"
+          @click="activeSheetIndex = i"
+        >
+          {{ s.name }}
+        </button>
+      </div>
+      <div ref="container" :class="cls.e('sheet-stage')" />
+      <div v-if="loading" :class="cls.e('loading')">加载中…</div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { bem } from '@veltra/utils'
-import { ListTable } from '@visactor/vtable'
 import { onBeforeUnmount, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
-import { parseSheetFile, type SheetPreview } from '../sheet-parser'
+import { UEmpty } from '../../empty'
+import { getExtension, toArrayBuffer } from '../helper'
 
 defineOptions({ name: 'UFileViewerSheetPreviewer' })
 
+/** 仅类型查询；运行时通过动态 import 加载，未安装时不炸主入口 */
+type SheetCoreModule = typeof import('@veltra/sheet-core')
+type Sheet = InstanceType<SheetCoreModule['Sheet']>
+type SheetGrid = InstanceType<SheetCoreModule['SheetGrid']>
+
 const props = withDefaults(defineProps<{ file: FileViewerItem; maxRows?: number }>(), {
   maxRows: 50_000
 })
@@ -37,72 +48,106 @@ const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
 const cls = bem('file-viewer')
 const container = useTemplateRef<HTMLDivElement>('container')
 const loading = ref(true)
+const unavailable = ref(false)
 const truncated = ref(false)
 const totalRows = ref(0)
-const renderedRows = ref(0)
-const sheets = shallowRef<SheetPreview[]>([])
+const sheets = shallowRef<Sheet[]>([])
 const activeSheetIndex = ref(0)
 
 let controller: AbortController | undefined
-let table: ListTable | undefined
-let resizeObserver: ResizeObserver | undefined
+/** 递增 token：importXlsx 无 AbortSignal，靠它防止切文件后旧解析结果落地 */
+let loadToken = 0
+let grid: SheetGrid | undefined
+let sheetCore: SheetCoreModule | undefined
+
+function releaseGrid() {
+  grid?.release()
+  grid = undefined
+}
+
+/** 动态加载 sheet-core；未安装 optional peer 时返回 undefined */
+async function resolveSheetCore(): Promise<SheetCoreModule | undefined> {
+  if (sheetCore) return sheetCore
+  try {
+    sheetCore = await import('@veltra/sheet-core')
+    return sheetCore
+  } catch {
+    return undefined
+  }
+}
 
-function releaseTable() {
-  table?.release()
-  table = undefined
+/** 解析文件为 Sheet 列表：xlsx 多表（importXlsx 建工作簿）；csv 单表，表名取文件名 */
+async function parseFile(
+  core: SheetCoreModule,
+  file: FileViewerItem,
+  signal?: AbortSignal
+): Promise<Sheet[]> {
+  const buf = await toArrayBuffer(file.src, signal)
+  if (getExtension(file.name) === 'csv') {
+    const text = new TextDecoder('utf-8', { fatal: false }).decode(buf)
+    const sheet = new core.Sheet(file.name)
+    core.importCsv(text, sheet)
+    return [sheet]
+  }
+  const workbook = await core.importXlsx(buf)
+  return workbook.getSheets()
 }
 
 function renderActive() {
   const sheet = sheets.value[activeSheetIndex.value]
   const el = container.value
-  if (!sheet || !el) return
+  releaseGrid()
+  if (!sheet || !el || !sheetCore) return
 
-  releaseTable()
+  // SheetGrid 的 rows 选项是渲染行数下限（构造时数据高水位恒并入渲染尺寸），
+  // 不能用作行数上限；deleteRows 硬裁又会让引用被裁区域的公式显示 #REF!，
+  // 故 maxRows 只驱动截断提示，不裁模型
+  const total = sheet.rowCount
+  totalRows.value = total
+  truncated.value = props.maxRows > 0 && total > props.maxRows
 
-  const limit = props.maxRows > 0 ? Math.min(props.maxRows, sheet.rows.length) : sheet.rows.length
-  totalRows.value = sheet.rows.length
-  renderedRows.value = limit
-  truncated.value = props.maxRows > 0 && sheet.rows.length > props.maxRows
-
-  table = new ListTable(el, {
-    records: sheet.rows.slice(0, limit),
-    columns: sheet.headers.map((title, i) => ({ field: String(i), title, width: 'auto' })),
-    widthMode: 'standard'
-  })
+  grid = new sheetCore.SheetGrid({ container: el, sheet, readonly: true })
 }
 
 async function load() {
+  const token = ++loadToken
   controller?.abort()
   controller = new AbortController()
   loading.value = true
+  truncated.value = false
+  releaseGrid()
   sheets.value = []
   activeSheetIndex.value = 0
 
   try {
-    sheets.value = await parseSheetFile(props.file, controller.signal)
-    if (controller.signal.aborted) return
+    const core = await resolveSheetCore()
+    if (token !== loadToken) return
+    if (!core) {
+      unavailable.value = true
+      emit('error', new Error('未安装 @veltra/sheet-core，无法预览 Excel/CSV'))
+      return
+    }
+    unavailable.value = false
+
+    const parsed = await parseFile(core, props.file, controller.signal)
+    if (token !== loadToken) return
+    sheets.value = parsed
     renderActive()
   } catch (err) {
+    if (token !== loadToken) return
     if ((err as { name?: string })?.name === 'AbortError') return
     emit('error', err)
   } finally {
-    loading.value = false
+    if (token === loadToken) loading.value = false
   }
 }
 
 watch(() => props.file, load, { immediate: true })
 watch(activeSheetIndex, renderActive)
-watch(container, (el) => {
-  resizeObserver?.disconnect()
-  if (!el) return
-  resizeObserver = new ResizeObserver(() => table?.resize?.())
-  resizeObserver.observe(el)
-})
 
 onBeforeUnmount(() => {
   controller?.abort()
-  resizeObserver?.disconnect()
-  releaseTable()
+  releaseGrid()
   sheets.value = []
 })
 </script>

package/src/components/message-confirm/style.scss

@@ -7,6 +7,12 @@
 $root-name: message-confirm;
 
 @include m.b($root-name) {
+  // 根元素必须「平时」就有 transition：Vue transition-group 的 hasTransition 在
+  // 添加 leave-active 类之前检查元素当前 computed 样式，只在类上声明 transition
+  // 读不到 → 判定无过渡 → after-leave 同步触发（onClosed 在点击事件内同步执行，
+  // replaceWorkbook 长任务阻塞弹窗关闭）。与 message 组件对称（mask/box 同此）。
+  transition: opacity fn.use-var(transition, normal) fn.use-var(transition, ease);
+
   @include m.e(mask) {
     background-color: rgba(0, 0, 0, 0.32);
     position: fixed;
@@ -57,8 +63,21 @@ $root-name: message-confirm;
   }
 }
 
+/* 根元素必须声明 transition：Vue transition-group 通过「被过渡元素自身」的
+   computed transition 判定是否走动画。此前动画只写在子元素 mask/box 上，
+   根元素无 transition → Vue 判定无过渡 → after-leave 同步触发（onClosed 在
+   点击事件内同步执行，长任务阻塞弹窗关闭）。与 message 组件对称。 */
+.#{$root-name}-enter-active,
+.#{$root-name}-leave-active {
+  transition-duration: fn.use-var(transition, normal);
+  transition-timing-function: fn.use-var(transition, ease);
+  transition-property: opacity;
+}
+
 .#{$root-name}-enter-from,
 .#{$root-name}-leave-to {
+  opacity: 0;
+
   @include m.bem($root-name, mask) {
     opacity: 0;
   }

package/src/components/notification/style.scss

@@ -7,10 +7,22 @@
 $root-name: notification;
 // 方位 => (垂直锚边, 水平锚边)
 $stack-positions: (
-  'bottom-right': (bottom, right),
-  'bottom-left': (bottom, left),
-  'top-right': (top, right),
-  'top-left': (top, left)
+  'bottom-right': (
+    bottom,
+    right
+  ),
+  'bottom-left': (
+    bottom,
+    left
+  ),
+  'top-right': (
+    top,
+    right
+  ),
+  'top-left': (
+    top,
+    left
+  )
 );
 
 @include m.b($root-name) {

package/src/components/radio-group/style.scss

@@ -10,7 +10,7 @@
     margin: 0;
   }
 
-  @include m.size using($size) {
+  @include m.size using ($size) {
     gap: 0 calc(fn.use-var(gap, $size) * 2);
   }
 

package/src/components/slider/style.scss

@@ -87,7 +87,7 @@ $track-size: (
     }
   }
 
-  @include m.size using($size) {
+  @include m.size using ($size) {
     $slider-size: map.get($slider-size, $size);
     $track-size: map.get($track-size, $size);
     $padding-y: math.div($slider-size - $track-size, 2);

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

@@ -1,4 +1,10 @@
 import { useResizeObserver } from '@veltra/compositions'
+import {
+  applyWheelHorizontalScroll,
+  computeOverflowNavState,
+  scrollElementIntoView,
+  scrollViewportByStep
+} from '@veltra/utils'
 import {
   type ModelRef,
   type Ref,
@@ -20,7 +26,8 @@ interface UseTabsBarOptions {
 }
 
 /**
- * 水平标签栏的溢出滚动逻辑：
+ * 水平标签栏的溢出滚动逻辑（滚动几何/滚轮转横滚/元素滚入视野共享
+ * @veltra/utils overflow-nav，见 #17；此处保留 useResizeObserver 与 watch 差异）：
  * - 计算 nav 按钮显隐与可用状态
  * - 提供按步滚动与活动标签自动滚入视野的方法
  * - 绑定 wheel / scroll / resize 事件
@@ -36,18 +43,17 @@ export function useTabsBar(options: UseTabsBarOptions) {
   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
+    const state = computeOverflowNavState(vp)
+    showNav.value = state.overflowing
+    canPrev.value = state.canPrev
+    canNext.value = state.canNext
   }
 
   /** 箭头按钮：按视口宽度 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' })
+    scrollViewportByStep(vp, dir)
   }
 
   /** 活动标签自动滚入视野 */
@@ -61,25 +67,14 @@ export function useTabsBar(options: UseTabsBarOptions) {
     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' })
-    }
+    scrollElementIntoView(vp, el)
   }
 
   /** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 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
+    applyWheelHorizontalScroll(e, vp, showNav.value)
   }
 
   useResizeObserver({ targets: [viewportRef, listRef], onResize: () => updateNavState() })