@veltra/desktop 1.5.0 → 1.6.1

package/src/components/table/node/col.ts

@@ -46,7 +46,7 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
 
   /** 宽度 */
   get width(): number | undefined {
-    const { width } = this.data
+    const width = this.data.width ?? this.derived.allocatedWidth
     if (!width || (this.minWidth && width && width < this.minWidth)) {
       return this.minWidth
     }
@@ -57,6 +57,21 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
       val = this.minWidth
     }
     this.data.width = val
+    // 显式宽度（配置/拖拽）优先于分配宽度，旧的分配结果直接作废
+    this.derived.allocatedWidth = undefined
+  }
+
+  /**
+   * 列宽分配算法写入的宽度。
+   * 与用户列配置 `data.width` 隔离：分配结果不回写列配置对象，
+   * 避免列森林重建（重挂载 / v-if / columns 引用变化）时把上一次的
+   * 分配残留误判为显式 width，导致列宽被永久锁定、容器变窄后出现滚动条。
+   */
+  get allocatedWidth(): number | undefined {
+    return this.derived.allocatedWidth
+  }
+  set allocatedWidth(val: number | undefined) {
+    this.derived.allocatedWidth = val
   }
   /** 最小宽度 */
   get minWidth(): number | undefined {
@@ -102,6 +117,11 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
 
   style: Record<string, number> = reactive({})
 
+  /** 派生状态（响应式），与用户列配置 data 隔离 */
+  private readonly derived = shallowReactive<{ allocatedWidth?: number }>({
+    allocatedWidth: undefined
+  })
+
   constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {
     super(isReactive(val) ? val : shallowReactive(val), index, depth, parent)
     this.explicitWidth = val.width !== undefined

package/src/components/table/use-col-resize.ts

@@ -1,4 +1,6 @@
-import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
+import { debounce } from '@cat-kit/core'
+import { useResizeObserver } from '@veltra/compositions'
+import { computed, nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
 
 import type { ScrollExposed } from '../../types'
 import { allocateLeafColumnWidths } from './allocate-column-widths'
@@ -53,6 +55,12 @@ export function useColResize(options: Options): UseColResizeReturned {
 
   watchEffect(correctColumnStyle)
 
+  // 容器宽度变化（窗口缩放、父布局变化、纵向滚动条出现/消失等）时重新分配列宽，
+  // 直到所有未显式设宽的列回落到 minWidth。计算开销较大，用防抖合并连续的 resize 触发。
+  const debouncedCorrectColumnStyle = debounce(correctColumnStyle)
+  const containerRef = computed(() => scrollRef.value?.containerRef ?? null)
+  useResizeObserver({ targets: containerRef, onResize: debouncedCorrectColumnStyle })
+
   function updateResizeLine(transformX: number): void {
     if (!resizeLineRef.value) return
     resizeLineRef.value.style.transform = `translateX(${transformX}px)`

package/src/types/collapse.ts

@@ -52,7 +52,7 @@ export interface CollapseItemProps {
    */
   modelValue?: boolean
 
-  /** 标题文本（也可使用 #title 插槽） */
+  /** 标题文本（也可通过 #header 插槽自定义整个头部） */
   title?: string
 
   /** 是否禁用 */
@@ -63,6 +63,13 @@ export interface CollapseItemProps {
    * 在 `UCollapse` 内由父组件 `expandIcon` 统一管理。
    */
   expandIcon?: Component
+
+  /**
+   * 折叠动画结束后卸载内容 DOM（展开时重新挂载），减少长列表的内存与渲染成本。
+   * 注意：卸载会丢失内容区的本地组件状态。
+   * @default false
+   */
+  destroyOnCollapse?: boolean
 }
 
 export interface CollapseItemEmits {

package/src/types/layout.ts

@@ -38,10 +38,25 @@ export interface LayoutProps {
    * @description 注意：当为true时，gap固定且需要有一项宽度为固定像素才能够拖拽
    */
   resizable?: boolean
+  /**
+   * 每列的最小宽度（px），按列索引与 cols 对应，仅 resizable 拖拽时生效。
+   * 未指定的列不限制（可被压至 0）。
+   * @example
+   * ```ts
+   * // 三栏拖拽时，左栏不小于 120px，右栏不小于 200px
+   * :cols="['1fr', '2fr', '300px']" :col-min-sizes="[120, undefined, 200]"
+   * ```
+   */
+  colMinSizes?: (number | undefined)[]
 }
 
 /** 布局组件定义的事件 */
-export interface LayoutEmits {}
+export interface LayoutEmits {
+  /** 开始拖拽调节某条间隔（index 为间隔左侧列的索引） */
+  (e: 'resize-start', index: number): void
+  /** 拖拽调节结束 */
+  (e: 'resize-end', index: number): void
+}
 
 /** 布局组件暴露的属性和方法(组件内部使用) */
 export interface _LayoutExposed {}