@veltra/desktop 1.0.8 → 1.0.9

package/dist/types/tabs.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "@veltra/utils";
+import { ComponentProps, ComponentSize } from "@veltra/utils";
 
 //#region src/types/tabs.d.ts
 type TabItem = {
@@ -12,16 +12,105 @@ type TabItem = {
    */
   key: string; /** 是否禁用 */
   disabled?: boolean;
+  /**
+   * 单个标签是否可关闭
+   * @description 未显式设置时，沿用组件级 `closable` 属性
+   */
+  closable?: boolean;
 };
+/** 水平标签栏（top/bottom）属性 */
+interface TabsHorizontalProps {
+  /** 组件尺寸 */
+  size?: ComponentSize;
+  /** 当前激活的标签 key */
+  modelValue?: string;
+  /** 标签项 */
+  items: TabItem[];
+  /**
+   * 是否可关闭
+   * @description 作为所有 TabItem 未显式 `closable` 时的默认值；禁用项不显示关闭按钮
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 是否填充父容器宽度
+   * @description 开启时 header 容器占满父容器宽度，背景完整铺开；tab-item 自身宽度保持不变
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 是否开启圆角胶囊风格
+   * @default false
+   */
+  rounded?: boolean;
+  /**
+   * 位置
+   * @default 'top'
+   */
+  position?: 'top' | 'bottom';
+}
+/** 垂直标签栏（left/right）属性 */
+interface TabsVerticalProps {
+  /** 组件尺寸 */
+  size?: ComponentSize;
+  /** 当前激活的标签 key */
+  modelValue?: string;
+  /** 标签项 */
+  items: TabItem[];
+  /**
+   * 是否可关闭
+   * @description 作为所有 TabItem 未显式 `closable` 时的默认值；禁用项不显示关闭按钮
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 是否开启圆角胶囊风格
+   * @default false
+   */
+  rounded?: boolean;
+  /**
+   * 位置
+   * @default 'left'
+   */
+  position?: 'left' | 'right';
+}
+/** 水平标签栏事件 */
+interface TabsHorizontalEmits {
+  (e: 'update:modelValue', value: string): void;
+  (e: 'click', item: TabItem, index: number): void;
+  (e: 'close', item: TabItem, index: number): void;
+}
+/** 垂直标签栏事件 */
+interface TabsVerticalEmits {
+  (e: 'update:modelValue', value: string): void;
+  (e: 'click', item: TabItem, index: number): void;
+  (e: 'close', item: TabItem, index: number): void;
+}
 /** 标签页组件组件属性 */
 interface TabsProps extends ComponentProps {
+  /** 当前激活的标签 key */
   modelValue?: string;
   /** 标签项 */
   items: TabItem[];
+  /**
+   * 是否可关闭
+   * @description 作为所有 TabItem 未显式 `closable` 时的默认值；禁用项不显示关闭按钮
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 是否填充父容器宽度（仅在 position=top/bottom 时生效）
+   * @description 开启时 header 容器占满父容器宽度，背景完整铺开；tab-item 自身宽度保持不变
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 是否开启圆角胶囊风格
+   * @default false
+   */
+  rounded?: boolean;
   /** 显示位置 */
   position?: 'left' | 'right' | 'top' | 'bottom';
-  /** 是否可以动态编辑 */
-  editable?: boolean;
   /**
    * 是否保活
    * @default false
@@ -30,19 +119,22 @@ interface TabsProps extends ComponentProps {
 }
 /** 标签页组件组件定义的事件 */
 interface TabsEmits {
-  (e: 'update:modelValue', value: string | number): void;
-  (e: 'update:items', items: TabItem[]): void;
-  (e: 'update:active', active: string | number): void;
-  (e: 'delete', item: TabItem, index: number): void;
-  (e: 'create'): void;
+  (e: 'update:modelValue', value: string): void;
   (e: 'click', item: TabItem, index: number): void;
+  (e: 'close', item: TabItem, index: number): void;
 }
-/** 标签页组件组件暴露的属性和方法(组件内部使用) */
+/** 标签页组件暴露的属性和方法(组件内部使用) */
 interface _TabsExposed {}
-/** 标签页组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-interface TabsExposed {
-  delete(key: number | string): void;
-}
+/** 标签页组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+interface TabsExposed {}
+/** 水平标签栏暴露的属性和方法(组件内部使用) */
+interface _TabsHorizontalExposed {}
+/** 水平标签栏暴露的属性和方法(组件外部使用) */
+interface TabsHorizontalExposed {}
+/** 垂直标签栏暴露的属性和方法(组件内部使用) */
+interface _TabsVerticalExposed {}
+/** 垂直标签栏暴露的属性和方法(组件外部使用) */
+interface TabsVerticalExposed {}
 //#endregion
-export { TabItem, TabsEmits, TabsExposed, TabsProps, _TabsExposed };
+export { TabItem, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/types/tree.d.ts

@@ -70,7 +70,12 @@ interface TreeEmit {
 }
 interface TreeNodeProps {
   node: TreeNode$1;
-  measureElement?: (el: any) => void;
+  /**
+   * 虚拟项索引：对应 `nodes` 数组中的绝对位置。
+   * 需要传入以便在节点卸载时正确通知 `Virtualizer` 解绑，避免 size=0 的脏测量。
+   */
+  index?: number;
+  measureElement?: (index: number, el: Element | null) => void;
 }
 /** 树组件暴露的属性和方法(组件内部使用) */
 interface _TreeExposed {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "files": [
     "dist",
     "src"
@@ -25,43 +25,44 @@
     "check-types": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@cat-kit/core": "^1.0.1",
+    "@cat-kit/core": "^1.1.1",
+    "@cat-kit/excel": "^1.0.1",
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.41.0",
-    "@lexical/clipboard": "^0.42.0",
-    "@lexical/history": "^0.42.0",
-    "@lexical/html": "^0.42.0",
-    "@lexical/link": "^0.42.0",
-    "@lexical/list": "^0.42.0",
-    "@lexical/rich-text": "^0.42.0",
-    "@lexical/selection": "^0.42.0",
-    "@lexical/utils": "^0.42.0",
-    "@veltra/compositions": "1.0.8",
-    "@veltra/directives": "1.0.8",
-    "@veltra/icons": "1.0.8",
-    "@veltra/styles": "1.0.8",
-    "@veltra/utils": "1.0.8",
+    "@codemirror/view": "^6.41.1",
+    "@embedpdf/core": "^2.14.1",
+    "@embedpdf/engines": "^2.14.1",
+    "@embedpdf/plugin-document-manager": "^2.14.1",
+    "@embedpdf/plugin-render": "^2.14.1",
+    "@embedpdf/plugin-scroll": "^2.14.1",
+    "@embedpdf/plugin-viewport": "^2.14.1",
+    "@lexical/clipboard": "^0.43.0",
+    "@lexical/history": "^0.43.0",
+    "@lexical/html": "^0.43.0",
+    "@lexical/link": "^0.43.0",
+    "@lexical/list": "^0.43.0",
+    "@lexical/rich-text": "^0.43.0",
+    "@lexical/selection": "^0.43.0",
+    "@lexical/utils": "^0.43.0",
+    "@veltra/compositions": "1.0.9",
+    "@veltra/directives": "1.0.9",
+    "@veltra/icons": "1.0.9",
+    "@veltra/styles": "1.0.9",
+    "@veltra/utils": "1.0.9",
+    "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
-    "lexical": "^0.42.0"
-  },
-  "devDependencies": {
-    "@tsdown/css": "^0.21.7",
-    "sass-embedded": "^1.99.0",
-    "tsdown": "^0.21.7",
-    "unplugin-vue": "^7.1.1",
-    "unplugin-vue-jsx": "^0.8.1",
-    "vue-tsc": "^3.2.6"
+    "docx-preview": "^0.3.7",
+    "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.0.8",
-    "@veltra/directives": "1.0.8",
-    "@veltra/icons": "1.0.8",
-    "@veltra/styles": "1.0.8",
-    "@veltra/utils": "1.0.8",
-    "vue": "^3.5.0"
+    "@veltra/compositions": "1.0.9",
+    "@veltra/directives": "1.0.9",
+    "@veltra/icons": "1.0.9",
+    "@veltra/styles": "1.0.9",
+    "@veltra/utils": "1.0.9",
+    "vue": "^3.5.33"
   }
 }

package/src/components/cascade/cascade.vue

@@ -105,7 +105,7 @@
 
 <script lang="ts" setup>
 import { Forest, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, provide, shallowRef, triggerRef, watch } from 'vue'
@@ -185,8 +185,7 @@ const forest = computed(() => {
 
 const { dataMap } = useDataMap({ props, forest })
 
-// 初始化更新辅助
-const updater = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 const {
   displayedValue,
@@ -201,7 +200,7 @@ const {
   emit,
   dataMap,
   forest,
-  updater,
+  isUserActive,
   dropdownRef
 })
 
@@ -212,29 +211,30 @@ const { hovered, tags, restTag, updateMultipleValue, handleCloseTag, checkItem,
     getPanelItemList,
     emit,
     dataMap,
-    updater,
+    isUserActive,
     disabled,
     readonly
   })
 
+const commitSingleSelect = userAction((item: CascadeNode) => {
+  if (!props.strict) {
+    updateSingleValue()
+  } else if (!item.children?.length) {
+    updateSingleValue()
+  }
+})
+
 function handleClick(panelIndex: number, item: CascadeNode) {
-  // 选择
   selectItem(panelIndex, item)
 
-  // 更新数据
-  !props.multiple &&
-    updater.updateAndLock(() => {
-      if (!props.strict) {
-        updateSingleValue()
-      } else if (!item.children?.length) {
-        updateSingleValue()
-      }
-    })
+  if (!props.multiple) {
+    commitSingleSelect(item)
+  }
 }
 
-function handleCheck(item: CascadeNode, checked: boolean) {
-  updater.updateAndLock(() => checkItem(item, checked))
-}
+const handleCheck = userAction((item: CascadeNode, checked: boolean) => {
+  checkItem(item, checked)
+})
 
 function handleClear() {
   if (props.multiple) {

package/src/components/cascade/node.ts

@@ -1,7 +1,10 @@
 import { TreeNode } from '@cat-kit/core'
 import { shallowReactive } from 'vue'
 
-export class CascadeNode<T extends Record<string, any>> extends TreeNode<T, CascadeNode<T>> {
+export class CascadeNode<T extends Record<string, any> = Record<string, any>> extends TreeNode<
+  T,
+  CascadeNode<T>
+> {
   visible = true
 
   value: string

package/src/components/cascade/use-check.ts

@@ -1,5 +1,4 @@
 import { dfs, type Forest } from '@cat-kit/core'
-import type { Updater } from '@veltra/compositions'
 import {
   computed,
   shallowRef,
@@ -19,7 +18,7 @@ interface CheckOptions {
   disabled: Ref<boolean>
   readonly: Ref<boolean>
   forest: Ref<Forest<Record<string, unknown>, any>>
-  updater: Updater
+  isUserActive: () => boolean
   getPanelItemList: (data?: CascadeNode[]) => void
 }
 
@@ -34,7 +33,8 @@ interface UseCheckReturned {
 }
 
 export function useCheck(options: CheckOptions): UseCheckReturned {
-  const { props, emit, dataMap, disabled, readonly, forest, updater, getPanelItemList } = options
+  const { props, emit, dataMap, disabled, readonly, forest, isUserActive, getPanelItemList } =
+    options
 
   const hovered = shallowRef(false)
 
@@ -119,7 +119,8 @@ export function useCheck(options: CheckOptions): UseCheckReturned {
   watch(
     [() => props.multiple, () => props.modelValue, forest],
     ([multiple]) => {
-      multiple && updater.update(() => initMultipleCheck())
+      if (!multiple || isUserActive()) return
+      initMultipleCheck()
     },
     { immediate: false }
   )

package/src/components/cascade/use-select.ts

@@ -1,5 +1,4 @@
 import { Forest } from '@cat-kit/core'
-import type { Updater } from '@veltra/compositions'
 import { createIncrease } from '@veltra/utils'
 import {
   computed,
@@ -23,7 +22,7 @@ import type {
 interface SelectOptions {
   props: CascadeProps
   emit: CascadeEmits
-  updater: Updater
+  isUserActive: () => boolean
   forest: Ref<Forest<Record<string, unknown>, any>>
   dataMap: Ref<Map<string, CascadeNode>>
   dropdownRef: Ref<DropdownExposed | undefined>
@@ -42,7 +41,7 @@ interface UseSelectReturned {
 }
 
 export function useSelect(options: SelectOptions): UseSelectReturned {
-  const { props, emit, dataMap, updater, dropdownRef, forest } = options
+  const { props, emit, dataMap, isUserActive, dropdownRef, forest } = options
 
   /** 选中的节点key */
   const selectedNodeKeys = shallowRef<string[]>([])
@@ -152,8 +151,8 @@ export function useSelect(options: SelectOptions): UseSelectReturned {
   watch(
     [() => props.multiple, () => props.modelValue, forest],
     ([multiple]) => {
-      if (multiple) return
-      updater.update(() => initSingleSelect())
+      if (multiple || isUserActive()) return
+      initSingleSelect()
     },
     { immediate: true }
   )

package/src/components/date-picker/date-picker.vue

@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
@@ -89,14 +89,13 @@ const formatStr = computed(() => {
 
 const currentDate = shallowRef<Dater>()
 
-const { update, updateAndLock } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 watch(
   () => props.modelValue,
   (modelValue) => {
-    update(() => {
-      currentDate.value = modelValue ? date(modelValue) : undefined
-    })
+    if (isUserActive()) return
+    currentDate.value = modelValue ? date(modelValue) : undefined
   },
   { immediate: true }
 )
@@ -105,11 +104,13 @@ const displayedValue = computed(() => {
   return currentDate.value?.format(formatStr.value) ?? ''
 })
 
+const commitSelectedDate = userAction((date: Dater) => {
+  currentDate.value = date
+  emit('update:modelValue', date.format(formatStr.value))
+})
+
 async function handleSelectDate(date: Dater) {
-  await updateAndLock(() => {
-    currentDate.value = date
-    emit('update:modelValue', date.format(formatStr.value))
-  })
+  await commitSelectedDate(date)
   dropdownRef.value?.close()
 }
 

package/src/components/date-range-picker/date-range-picker.vue

@@ -61,8 +61,7 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
-import { useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
@@ -102,7 +101,7 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 
 const dropdownRef = shallowRef<DropdownExposed>()
 
-const { update, updateAndLock } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 const currentRangeDate = shallowRef<[Dater, Dater]>()
 
@@ -126,20 +125,21 @@ const formatStr = computed(() => {
 watch(
   () => props.modelValue,
   (val) => {
-    update(() => {
-      if (val?.length === 2) {
-        currentRangeDate.value = [date(val[0]), date(val[1])]
-      }
-    })
+    if (isUserActive()) return
+    if (val?.length === 2) {
+      currentRangeDate.value = [date(val[0]), date(val[1])]
+    }
   },
   { immediate: true }
 )
 
+const commitSelectedRange = userAction((rangeDate: [Dater, Dater] | undefined) => {
+  currentRangeDate.value = rangeDate
+  emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
+})
+
 async function handleSelect(rangeDate: [Dater, Dater] | undefined) {
-  await updateAndLock(() => {
-    currentRangeDate.value = rangeDate
-    emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
-  })
+  await commitSelectedRange(rangeDate)
   dropdownRef.value?.close()
 }
 

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

@@ -1,22 +1,33 @@
 /**
- * 校验文件是否匹配 accept 字符串 (仅支持 MIME 类型)
- * @param file 文件对象
- * @param accept 接受的文件类型，例如：image/*,application/pdf
+ * 校验文件是否匹配 accept 字符串（支持 MIME 类型与通配符）。
+ *
+ * 支持的形式：
+ * - `*` / `*\/*`：接受所有文件
+ * - `image/*`：MIME 类型组匹配
+ * - `application/pdf`：精确 MIME 类型
+ * - `.pdf` / `.docx`：扩展名匹配（不区分大小写）
+ *
+ * 多个值以逗号分隔，命中任一即视为匹配。
  */
 export function matchAccept(file: File, accept?: string): boolean {
   if (!accept) return true
 
   const fileType = file.type.toLowerCase()
-  const acceptList = accept.split(',').map((item) => item.trim().toLowerCase())
+  const fileName = file.name.toLowerCase()
+  const acceptList = accept
+    .split(',')
+    .map((item) => item.trim().toLowerCase())
+    .filter(Boolean)
+
+  if (!acceptList.length) return true
 
   return acceptList.some((item) => {
+    if (item === '*' || item === '*/*') return true
+    if (item.startsWith('.')) return fileName.endsWith(item)
     if (item.endsWith('/*')) {
-      // MIME 类型组匹配 (例如：image/*)
-      const group = item.replace('/*', '')
-      return fileType.startsWith(group)
-    } else {
-      // MIME 类型精确匹配
-      return fileType === item
+      const group = item.slice(0, -2)
+      return fileType.startsWith(`${group}/`)
     }
+    return fileType === item
   })
 }