@veltra/desktop 1.5.0 → 1.6.1

package/dist/components/table/allocate-column-widths.js.map

@@ -1 +1 @@
-{"version":3,"file":"allocate-column-widths.js","names":[],"sources":["../../../src/components/table/allocate-column-widths.ts"],"sourcesContent":["import type { ColumnNode } from './node/col'\n\n/**\n * 按容器宽度分配叶子列宽。\n *\n * - `explicitWidth` 列：保持配置/拖拽锁定的宽度\n * - `fixed` 且未显式设宽的列：保持 `minWidth`，不参与剩余宽度均分\n * - 其余未显式设宽的列：均分容器剩余宽度\n */\nexport function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWidth: number): void {\n  if (!containerWidth || !leafColumns.length) return\n\n  const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed)\n  // fixed 且未显式设宽：清掉可能被旧算法撑大的残留 width，回落到 minWidth\n  const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)\n\n  fixedFlexColumns.forEach((column) => {\n    column.data.width = undefined\n  })\n\n  const explicitWidthTotal = leafColumns\n    .filter((column) => column.explicitWidth)\n    .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)\n  const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n  const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n  const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal\n\n  if (growColumns.length > 0 && totalBase < containerWidth) {\n    const allocatedWidth = (containerWidth - totalBase) / growColumns.length\n    growColumns.forEach((column) => {\n      column.width = column.minWidth! + allocatedWidth\n    })\n  } else {\n    growColumns.forEach((column) => {\n      column.data.width = undefined\n    })\n  }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,yBAAyB,aAA2B,gBAA8B;CAChG,IAAI,CAAC,kBAAkB,CAAC,YAAY,QAAQ;CAE5C,MAAM,cAAc,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,CAAC,OAAO,KAAK;CAEzF,MAAM,mBAAmB,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,OAAO,KAAK;CAE7F,iBAAiB,SAAS,WAAW;EACnC,OAAO,KAAK,QAAQ,KAAA;CACtB,CAAC;CAED,MAAM,qBAAqB,YACxB,QAAQ,WAAW,OAAO,aAAa,CAAC,CACxC,QAAQ,KAAK,QAAQ,OAAO,IAAI,SAAS,IAAI,WAAY,CAAC;CAC7D,MAAM,gBAAgB,YAAY,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CAC7E,MAAM,qBAAqB,iBAAiB,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CACvF,MAAM,YAAY,qBAAqB,gBAAgB;CAEvD,IAAI,YAAY,SAAS,KAAK,YAAY,gBAAgB;EACxD,MAAM,kBAAkB,iBAAiB,aAAa,YAAY;EAClE,YAAY,SAAS,WAAW;GAC9B,OAAO,QAAQ,OAAO,WAAY;EACpC,CAAC;CACH,OACE,YAAY,SAAS,WAAW;EAC9B,OAAO,KAAK,QAAQ,KAAA;CACtB,CAAC;AAEL"}
+{"version":3,"file":"allocate-column-widths.js","names":[],"sources":["../../../src/components/table/allocate-column-widths.ts"],"sourcesContent":["import type { ColumnNode } from './node/col'\n\n/**\n * 按容器宽度分配叶子列宽。\n *\n * - `explicitWidth` 列：保持配置/拖拽锁定的宽度\n * - `fixed` 且未显式设宽的列：保持 `minWidth`，不参与剩余宽度均分\n * - 其余未显式设宽的列：均分容器剩余宽度\n *\n * 分配结果写入列节点自身的 `allocatedWidth`，不回写列配置的 `data.width`，\n * 避免污染用户数据后在列森林重建时被误判为显式宽度。\n */\nexport function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWidth: number): void {\n  if (!containerWidth || !leafColumns.length) return\n\n  const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed)\n  // fixed 且未显式设宽：清掉之前的分配结果，回落到 minWidth\n  const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)\n\n  fixedFlexColumns.forEach((column) => {\n    column.allocatedWidth = undefined\n  })\n\n  const explicitWidthTotal = leafColumns\n    .filter((column) => column.explicitWidth)\n    .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)\n  const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n  const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n  const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal\n\n  if (growColumns.length > 0 && totalBase < containerWidth) {\n    const allocatedWidth = (containerWidth - totalBase) / growColumns.length\n    growColumns.forEach((column) => {\n      column.allocatedWidth = column.minWidth! + allocatedWidth\n    })\n  } else {\n    growColumns.forEach((column) => {\n      column.allocatedWidth = undefined\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,yBAAyB,aAA2B,gBAA8B;CAChG,IAAI,CAAC,kBAAkB,CAAC,YAAY,QAAQ;CAE5C,MAAM,cAAc,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,CAAC,OAAO,KAAK;CAEzF,MAAM,mBAAmB,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,OAAO,KAAK;CAE7F,iBAAiB,SAAS,WAAW;EACnC,OAAO,iBAAiB,KAAA;CAC1B,CAAC;CAED,MAAM,qBAAqB,YACxB,QAAQ,WAAW,OAAO,aAAa,CAAC,CACxC,QAAQ,KAAK,QAAQ,OAAO,IAAI,SAAS,IAAI,WAAY,CAAC;CAC7D,MAAM,gBAAgB,YAAY,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CAC7E,MAAM,qBAAqB,iBAAiB,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CACvF,MAAM,YAAY,qBAAqB,gBAAgB;CAEvD,IAAI,YAAY,SAAS,KAAK,YAAY,gBAAgB;EACxD,MAAM,kBAAkB,iBAAiB,aAAa,YAAY;EAClE,YAAY,SAAS,WAAW;GAC9B,OAAO,iBAAiB,OAAO,WAAY;EAC7C,CAAC;CACH,OACE,YAAY,SAAS,WAAW;EAC9B,OAAO,iBAAiB,KAAA;CAC1B,CAAC;AAEL"}

package/dist/components/table/node/col.js

@@ -37,13 +37,26 @@ var ColumnNode = class extends TreeNode {
 	}
 	/** 宽度 */
 	get width() {
-		const { width } = this.data;
+		const width = this.data.width ?? this.derived.allocatedWidth;
 		if (!width || this.minWidth && width && width < this.minWidth) return this.minWidth;
 		return width;
 	}
 	set width(val) {
 		if (this.minWidth && val && val < this.minWidth) val = this.minWidth;
 		this.data.width = val;
+		this.derived.allocatedWidth = void 0;
+	}
+	/**
+	* 列宽分配算法写入的宽度。
+	* 与用户列配置 `data.width` 隔离：分配结果不回写列配置对象，
+	* 避免列森林重建（重挂载 / v-if / columns 引用变化）时把上一次的
+	* 分配残留误判为显式 width，导致列宽被永久锁定、容器变窄后出现滚动条。
+	*/
+	get allocatedWidth() {
+		return this.derived.allocatedWidth;
+	}
+	set allocatedWidth(val) {
+		this.derived.allocatedWidth = val;
 	}
 	/** 最小宽度 */
 	get minWidth() {
@@ -80,6 +93,8 @@ var ColumnNode = class extends TreeNode {
 	*/
 	explicitWidth;
 	style = reactive({});
+	/** 派生状态（响应式），与用户列配置 data 隔离 */
+	derived = shallowReactive({ allocatedWidth: void 0 });
 	constructor(val, index, depth, parent) {
 		super(isReactive(val) ? val : shallowReactive(val), index, depth, parent);
 		this.explicitWidth = val.width !== void 0;

package/dist/components/table/node/col.js.map

@@ -1 +1 @@
-{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { isReactive, reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n  declare children?: ColumnNode[] | undefined\n  declare parent?: ColumnNode\n  /** 叶子节点数量 */\n  leafs?: number\n\n  nextNode: ColumnNode | null = null\n\n  /** 列key */\n  get key(): string {\n    return this.data.key\n  }\n  set key(val) {\n    this.data.key = val\n  }\n  /** 列名 */\n  get name(): string {\n    return this.data.name\n  }\n  set name(val) {\n    this.data.name = val\n  }\n\n  /**\n   * 列对齐方式\n   * @default 'left'\n   */\n  get align(): TableColumnAlign {\n    return this.data.align ?? 'left'\n  }\n  set align(val) {\n    this.data.align = val\n  }\n\n  get headerAlign(): TableColumnAlign {\n    return this.data.headerAlign ?? this.align\n  }\n  set headerAlign(val) {\n    this.data.headerAlign = val\n  }\n\n  /** 宽度 */\n  get width(): number | undefined {\n    const { width } = this.data\n    if (!width || (this.minWidth && width && width < this.minWidth)) {\n      return this.minWidth\n    }\n    return width\n  }\n  set width(val) {\n    if (this.minWidth && val && val < this.minWidth) {\n      val = this.minWidth\n    }\n    this.data.width = val\n  }\n  /** 最小宽度 */\n  get minWidth(): number | undefined {\n    const minWidth = this.data.minWidth\n    if (!minWidth && this.isLeaf) {\n      return 100\n    }\n    return minWidth\n  }\n  set minWidth(val) {\n    this.data.minWidth = val\n  }\n\n  /** 列固定方向 */\n  get fixed(): 'left' | 'right' | undefined {\n    if (this.depth > 0) return\n    return this.data.fixed\n  }\n  set fixed(val) {\n    this.data.fixed = val\n  }\n\n  /** 是否是左侧的最后一个固定列 */\n  get isLastFixed(): boolean {\n    return this.data.isLastFixed ?? false\n  }\n\n  /** 是否是右侧的第一个固定列 */\n  get isFirstFixed(): boolean {\n    return this.data.isFirstFixed ?? false\n  }\n\n  /** 是否是可调整宽度的列 */\n  get resizable(): boolean {\n    return this.data.resizable ?? true\n  }\n\n  /**\n   * 是否在列配置上显式指定了 width，或经表头拖拽锁定。\n   * 此类列不参与剩余宽度的均分。\n   */\n  explicitWidth: boolean\n\n  style: Record<string, number> = reactive({})\n\n  constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n    super(isReactive(val) ? val : shallowReactive(val), index, depth, parent)\n    this.explicitWidth = val.width !== undefined\n  }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;EAChB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,IAAI,KAAK;EACX,KAAK,KAAK,MAAM;CAClB;;CAEA,IAAI,OAAe;EACjB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,KAAK,KAAK;EACZ,KAAK,KAAK,OAAO;CACnB;;;;;CAMA,IAAI,QAA0B;EAC5B,OAAO,KAAK,KAAK,SAAS;CAC5B;CACA,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;CACpB;CAEA,IAAI,cAAgC;EAClC,OAAO,KAAK,KAAK,eAAe,KAAK;CACvC;CACA,IAAI,YAAY,KAAK;EACnB,KAAK,KAAK,cAAc;CAC1B;;CAGA,IAAI,QAA4B;EAC9B,MAAM,EAAE,UAAU,KAAK;EACvB,IAAI,CAAC,SAAU,KAAK,YAAY,SAAS,QAAQ,KAAK,UACpD,OAAO,KAAK;EAEd,OAAO;CACT;CACA,IAAI,MAAM,KAAK;EACb,IAAI,KAAK,YAAY,OAAO,MAAM,KAAK,UACrC,MAAM,KAAK;EAEb,KAAK,KAAK,QAAQ;CACpB;;CAEA,IAAI,WAA+B;EACjC,MAAM,WAAW,KAAK,KAAK;EAC3B,IAAI,CAAC,YAAY,KAAK,QACpB,OAAO;EAET,OAAO;CACT;CACA,IAAI,SAAS,KAAK;EAChB,KAAK,KAAK,WAAW;CACvB;;CAGA,IAAI,QAAsC;EACxC,IAAI,KAAK,QAAQ,GAAG;EACpB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;CACpB;;CAGA,IAAI,cAAuB;EACzB,OAAO,KAAK,KAAK,eAAe;CAClC;;CAGA,IAAI,eAAwB;EAC1B,OAAO,KAAK,KAAK,gBAAgB;CACnC;;CAGA,IAAI,YAAqB;EACvB,OAAO,KAAK,KAAK,aAAa;CAChC;;;;;CAMA;CAEA,QAAgC,SAAS,CAAC,CAAC;CAE3C,YAAY,KAAkB,OAAe,OAAe,QAAqB;EAC/E,MAAM,WAAW,GAAG,IAAI,MAAM,gBAAgB,GAAG,GAAG,OAAO,OAAO,MAAM;EACxE,KAAK,gBAAgB,IAAI,UAAU,KAAA;CACrC;AACF"}
+{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { isReactive, reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n  declare children?: ColumnNode[] | undefined\n  declare parent?: ColumnNode\n  /** 叶子节点数量 */\n  leafs?: number\n\n  nextNode: ColumnNode | null = null\n\n  /** 列key */\n  get key(): string {\n    return this.data.key\n  }\n  set key(val) {\n    this.data.key = val\n  }\n  /** 列名 */\n  get name(): string {\n    return this.data.name\n  }\n  set name(val) {\n    this.data.name = val\n  }\n\n  /**\n   * 列对齐方式\n   * @default 'left'\n   */\n  get align(): TableColumnAlign {\n    return this.data.align ?? 'left'\n  }\n  set align(val) {\n    this.data.align = val\n  }\n\n  get headerAlign(): TableColumnAlign {\n    return this.data.headerAlign ?? this.align\n  }\n  set headerAlign(val) {\n    this.data.headerAlign = val\n  }\n\n  /** 宽度 */\n  get width(): number | undefined {\n    const width = this.data.width ?? this.derived.allocatedWidth\n    if (!width || (this.minWidth && width && width < this.minWidth)) {\n      return this.minWidth\n    }\n    return width\n  }\n  set width(val) {\n    if (this.minWidth && val && val < this.minWidth) {\n      val = this.minWidth\n    }\n    this.data.width = val\n    // 显式宽度（配置/拖拽）优先于分配宽度，旧的分配结果直接作废\n    this.derived.allocatedWidth = undefined\n  }\n\n  /**\n   * 列宽分配算法写入的宽度。\n   * 与用户列配置 `data.width` 隔离：分配结果不回写列配置对象，\n   * 避免列森林重建（重挂载 / v-if / columns 引用变化）时把上一次的\n   * 分配残留误判为显式 width，导致列宽被永久锁定、容器变窄后出现滚动条。\n   */\n  get allocatedWidth(): number | undefined {\n    return this.derived.allocatedWidth\n  }\n  set allocatedWidth(val: number | undefined) {\n    this.derived.allocatedWidth = val\n  }\n  /** 最小宽度 */\n  get minWidth(): number | undefined {\n    const minWidth = this.data.minWidth\n    if (!minWidth && this.isLeaf) {\n      return 100\n    }\n    return minWidth\n  }\n  set minWidth(val) {\n    this.data.minWidth = val\n  }\n\n  /** 列固定方向 */\n  get fixed(): 'left' | 'right' | undefined {\n    if (this.depth > 0) return\n    return this.data.fixed\n  }\n  set fixed(val) {\n    this.data.fixed = val\n  }\n\n  /** 是否是左侧的最后一个固定列 */\n  get isLastFixed(): boolean {\n    return this.data.isLastFixed ?? false\n  }\n\n  /** 是否是右侧的第一个固定列 */\n  get isFirstFixed(): boolean {\n    return this.data.isFirstFixed ?? false\n  }\n\n  /** 是否是可调整宽度的列 */\n  get resizable(): boolean {\n    return this.data.resizable ?? true\n  }\n\n  /**\n   * 是否在列配置上显式指定了 width，或经表头拖拽锁定。\n   * 此类列不参与剩余宽度的均分。\n   */\n  explicitWidth: boolean\n\n  style: Record<string, number> = reactive({})\n\n  /** 派生状态（响应式），与用户列配置 data 隔离 */\n  private readonly derived = shallowReactive<{ allocatedWidth?: number }>({\n    allocatedWidth: undefined\n  })\n\n  constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n    super(isReactive(val) ? val : shallowReactive(val), index, depth, parent)\n    this.explicitWidth = val.width !== undefined\n  }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;EAChB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,IAAI,KAAK;EACX,KAAK,KAAK,MAAM;CAClB;;CAEA,IAAI,OAAe;EACjB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,KAAK,KAAK;EACZ,KAAK,KAAK,OAAO;CACnB;;;;;CAMA,IAAI,QAA0B;EAC5B,OAAO,KAAK,KAAK,SAAS;CAC5B;CACA,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;CACpB;CAEA,IAAI,cAAgC;EAClC,OAAO,KAAK,KAAK,eAAe,KAAK;CACvC;CACA,IAAI,YAAY,KAAK;EACnB,KAAK,KAAK,cAAc;CAC1B;;CAGA,IAAI,QAA4B;EAC9B,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK,QAAQ;EAC9C,IAAI,CAAC,SAAU,KAAK,YAAY,SAAS,QAAQ,KAAK,UACpD,OAAO,KAAK;EAEd,OAAO;CACT;CACA,IAAI,MAAM,KAAK;EACb,IAAI,KAAK,YAAY,OAAO,MAAM,KAAK,UACrC,MAAM,KAAK;EAEb,KAAK,KAAK,QAAQ;EAElB,KAAK,QAAQ,iBAAiB,KAAA;CAChC;;;;;;;CAQA,IAAI,iBAAqC;EACvC,OAAO,KAAK,QAAQ;CACtB;CACA,IAAI,eAAe,KAAyB;EAC1C,KAAK,QAAQ,iBAAiB;CAChC;;CAEA,IAAI,WAA+B;EACjC,MAAM,WAAW,KAAK,KAAK;EAC3B,IAAI,CAAC,YAAY,KAAK,QACpB,OAAO;EAET,OAAO;CACT;CACA,IAAI,SAAS,KAAK;EAChB,KAAK,KAAK,WAAW;CACvB;;CAGA,IAAI,QAAsC;EACxC,IAAI,KAAK,QAAQ,GAAG;EACpB,OAAO,KAAK,KAAK;CACnB;CACA,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;CACpB;;CAGA,IAAI,cAAuB;EACzB,OAAO,KAAK,KAAK,eAAe;CAClC;;CAGA,IAAI,eAAwB;EAC1B,OAAO,KAAK,KAAK,gBAAgB;CACnC;;CAGA,IAAI,YAAqB;EACvB,OAAO,KAAK,KAAK,aAAa;CAChC;;;;;CAMA;CAEA,QAAgC,SAAS,CAAC,CAAC;;CAG3C,UAA2B,gBAA6C,EACtE,gBAAgB,KAAA,EAClB,CAAC;CAED,YAAY,KAAkB,OAAe,OAAe,QAAqB;EAC/E,MAAM,WAAW,GAAG,IAAI,MAAM,gBAAgB,GAAG,GAAG,OAAO,OAAO,MAAM;EACxE,KAAK,gBAAgB,IAAI,UAAU,KAAA;CACrC;AACF"}

package/dist/components/table/use-col-resize.js

@@ -1,6 +1,8 @@
 import { TableResizeKey } from "./di.js";
 import { allocateLeafColumnWidths } from "./allocate-column-widths.js";
-import { nextTick, provide, shallowRef, watchEffect } from "vue";
+import { computed, nextTick, provide, shallowRef, watchEffect } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+import { debounce } from "@cat-kit/core";
 //#region src/components/table/use-col-resize.ts
 function useColResize(options) {
 	const { scrollRef, leafColumns } = options;
@@ -27,6 +29,12 @@ function useColResize(options) {
 		}, 0);
 	}
 	watchEffect(correctColumnStyle);
+	const debouncedCorrectColumnStyle = debounce(correctColumnStyle);
+	const containerRef = computed(() => scrollRef.value?.containerRef ?? null);
+	useResizeObserver({
+		targets: containerRef,
+		onResize: debouncedCorrectColumnStyle
+	});
 	function updateResizeLine(transformX) {
 		if (!resizeLineRef.value) return;
 		resizeLineRef.value.style.transform = `translateX(${transformX}px)`;

package/dist/components/table/use-col-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { allocateLeafColumnWidths } from './allocate-column-widths'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  scrollRef: ShallowRef<ScrollExposed | undefined>\n  leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n  resizeLineRef: ShallowRef<HTMLElement | undefined>\n  colgroupRef: ShallowRef<HTMLElement | undefined>\n  showResizeLine: ShallowRef<boolean>\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n  const { scrollRef, leafColumns } = options\n\n  const showResizeLine = shallowRef(false)\n\n  const resizeLineRef = shallowRef<HTMLElement>()\n  const colgroupRef = shallowRef<HTMLElement>()\n  const headerRef = shallowRef<HTMLElement>()\n\n  /**\n   * 修正列样式\n   */\n  function correctColumnStyle() {\n    // 获取表格容器宽度\n    const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n    if (!containerWidth || !leafColumns.value.length) return\n\n    allocateLeafColumnWidths(leafColumns.value, containerWidth)\n\n    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n    fixedLeft.reduce((acc, cur) => {\n      cur.style.left = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    fixedRight.reduceRight((acc, cur) => {\n      cur.style.right = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n  }\n\n  watchEffect(correctColumnStyle)\n\n  function updateResizeLine(transformX: number): void {\n    if (!resizeLineRef.value) return\n    resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n  }\n\n  // 表格相对于页面左边缘的偏移量，\n  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n  let containerLeft = 0\n  let originX = 0\n  let originWidth = 0\n  let currentResizeColumn: ColumnNode | null = null\n\n  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n    const tableEl = scrollRef.value?.el\n    if (!tableEl) return\n\n    showResizeLine.value = true\n    currentResizeColumn = resizeColumn\n    originX = e.pageX\n    originWidth = resizeColumn.width ?? 0\n\n    const { left } = tableEl.getBoundingClientRect()\n    containerLeft = left\n\n    nextTick(() => {\n      updateResizeLine(e.pageX - left)\n    })\n\n    document.addEventListener('mousemove', handleResizeMousemove)\n    document.addEventListener('mouseup', handleResizeMouseup)\n  }\n\n  function handleResizeMousemove(e: MouseEvent): void {\n    updateResizeLine(e.pageX - containerLeft)\n  }\n\n  function handleResizeMouseup(e: MouseEvent): void {\n    currentResizeColumn!.width = Math.max(\n      originWidth + e.pageX - originX,\n      currentResizeColumn!.minWidth!\n    )\n    currentResizeColumn!.explicitWidth = true\n\n    showResizeLine.value = false\n    currentResizeColumn = null\n    correctColumnStyle()\n\n    document.removeEventListener('mouseup', handleResizeMouseup)\n    document.removeEventListener('mousemove', handleResizeMousemove)\n  }\n\n  provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,yBAAyB,YAAY,OAAO,cAAc;EAE1D,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAE9B,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}
+{"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { computed, nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { allocateLeafColumnWidths } from './allocate-column-widths'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  scrollRef: ShallowRef<ScrollExposed | undefined>\n  leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n  resizeLineRef: ShallowRef<HTMLElement | undefined>\n  colgroupRef: ShallowRef<HTMLElement | undefined>\n  showResizeLine: ShallowRef<boolean>\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n  const { scrollRef, leafColumns } = options\n\n  const showResizeLine = shallowRef(false)\n\n  const resizeLineRef = shallowRef<HTMLElement>()\n  const colgroupRef = shallowRef<HTMLElement>()\n  const headerRef = shallowRef<HTMLElement>()\n\n  /**\n   * 修正列样式\n   */\n  function correctColumnStyle() {\n    // 获取表格容器宽度\n    const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n    if (!containerWidth || !leafColumns.value.length) return\n\n    allocateLeafColumnWidths(leafColumns.value, containerWidth)\n\n    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n    fixedLeft.reduce((acc, cur) => {\n      cur.style.left = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    fixedRight.reduceRight((acc, cur) => {\n      cur.style.right = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n  }\n\n  watchEffect(correctColumnStyle)\n\n  // 容器宽度变化（窗口缩放、父布局变化、纵向滚动条出现/消失等）时重新分配列宽，\n  // 直到所有未显式设宽的列回落到 minWidth。计算开销较大，用防抖合并连续的 resize 触发。\n  const debouncedCorrectColumnStyle = debounce(correctColumnStyle)\n  const containerRef = computed(() => scrollRef.value?.containerRef ?? null)\n  useResizeObserver({ targets: containerRef, onResize: debouncedCorrectColumnStyle })\n\n  function updateResizeLine(transformX: number): void {\n    if (!resizeLineRef.value) return\n    resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n  }\n\n  // 表格相对于页面左边缘的偏移量，\n  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n  let containerLeft = 0\n  let originX = 0\n  let originWidth = 0\n  let currentResizeColumn: ColumnNode | null = null\n\n  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n    const tableEl = scrollRef.value?.el\n    if (!tableEl) return\n\n    showResizeLine.value = true\n    currentResizeColumn = resizeColumn\n    originX = e.pageX\n    originWidth = resizeColumn.width ?? 0\n\n    const { left } = tableEl.getBoundingClientRect()\n    containerLeft = left\n\n    nextTick(() => {\n      updateResizeLine(e.pageX - left)\n    })\n\n    document.addEventListener('mousemove', handleResizeMousemove)\n    document.addEventListener('mouseup', handleResizeMouseup)\n  }\n\n  function handleResizeMousemove(e: MouseEvent): void {\n    updateResizeLine(e.pageX - containerLeft)\n  }\n\n  function handleResizeMouseup(e: MouseEvent): void {\n    currentResizeColumn!.width = Math.max(\n      originWidth + e.pageX - originX,\n      currentResizeColumn!.minWidth!\n    )\n    currentResizeColumn!.explicitWidth = true\n\n    showResizeLine.value = false\n    currentResizeColumn = null\n    correctColumnStyle()\n\n    document.removeEventListener('mouseup', handleResizeMouseup)\n    document.removeEventListener('mousemove', handleResizeMousemove)\n  }\n\n  provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,yBAAyB,YAAY,OAAO,cAAc;EAE1D,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAI9B,MAAM,8BAA8B,SAAS,kBAAkB;CAC/D,MAAM,eAAe,eAAe,UAAU,OAAO,gBAAgB,IAAI;CACzE,kBAAkB;EAAE,SAAS;EAAc,UAAU;CAA4B,CAAC;CAElF,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}

package/dist/types/collapse.d.ts

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

package/dist/types/layout.d.ts

@@ -37,9 +37,24 @@ 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)[];
 }
 /** 布局组件定义的事件 */
-interface LayoutEmits {}
+interface LayoutEmits {
+  /** 开始拖拽调节某条间隔（index 为间隔左侧列的索引） */
+  (e: 'resize-start', index: number): void;
+  /** 拖拽调节结束 */
+  (e: 'resize-end', index: number): void;
+}
 /** 布局组件暴露的属性和方法(组件内部使用) */
 interface _LayoutExposed {}
 /** 布局组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "files": [
     "dist",
     "src"
@@ -71,12 +71,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/compositions": "^1.5.0",
-    "@veltra/directives": "^1.5.0",
+    "@veltra/compositions": "^1.6.1",
+    "@veltra/directives": "^1.6.1",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.1.1",
-    "@veltra/styles": "^1.5.0",
-    "@veltra/utils": "^1.5.0",
+    "@veltra/sheet-core": "^2.3.0",
+    "@veltra/styles": "^1.6.1",
+    "@veltra/utils": "^1.6.1",
     "vue": ">=3.5.41"
   },
   "peerDependenciesMeta": {

package/src/components/button/button.vue

@@ -65,8 +65,8 @@ const classList = computed(() => {
 })
 
 const ripple = computed(() => {
-  if (props.disabled || props.loading) return false
-  if ((props.plain || props.text) && props.type) {
+  if (props.disabled || props.loading || props.text) return false
+  if (props.plain && props.type) {
     return bem.is(`ripple-${props.type}`)
   }
   return true

package/src/components/button/style.scss

@@ -47,17 +47,8 @@ $root-name: button;
   }
 
   @include m.is(plain) {
-    background-color: fn.use-var(bg-color, top);
-    border-color: fn.use-var(color, default, 'dark-1');
+    border-color: transparent;
     box-shadow: none;
-
-    &:hover {
-      border-color: fn.use-var(color, default, 'dark-1');
-    }
-
-    &.is-disabled {
-      color: fn.use-var(text-color, second);
-    }
   }
 
   // 尺寸
@@ -122,12 +113,9 @@ $root-name: button;
 
       @include m.is(text) {
         color: fn.use-var(color, $type);
+        border-color: transparent;
         box-shadow: none;
 
-        &:hover {
-          box-shadow: 0px 0px 0px 1px fn.use-var(color, $type);
-        }
-
         @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
@@ -140,39 +128,30 @@ $root-name: button;
         }
 
         @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, 'light-5');
         }
       }
 
       @include m.is(plain) {
+        border-color: transparent;
         color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
         background-color: fn.component-var(
           button,
           #{$type}-plain-bg,
           fn.use-var(color, $type, light-9)
         );
-        border-color: fn.component-var(
-          button,
-          #{$type}-plain-border,
-          fn.use-var(color, $type, light-5)
-        );
-        box-shadow: none;
 
         @include m.is-not(disabled, loading) {
           &:hover {
-            color: fn.use-var(color, $type);
-            border-color: fn.use-var(color, $type);
-            background-color: fn.use-var(color, $type, light-9);
+            background-color: fn.use-var(color, $type, light-7);
           }
         }
 
-        &:active {
-          box-shadow: none;
-        }
-
-        &.is-disabled {
+        @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, light-5);
-          border-color: fn.use-var(color, $type, light-8);
+          background-color: fn.use-var(color, $type, light-9);
         }
       }
     }

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

@@ -353,3 +353,62 @@ describe('CollapseItem standalone', () => {
     }
   })
 })
+
+describe('CollapseItem destroyOnCollapse', () => {
+  it('keeps content mounted by default even when collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('does not mount content when initially collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone', destroyOnCollapse: true })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      // 内容未挂载，但包装容器仍在（承载高度动画与 aria-hidden）
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content-wrapper')).toBeTruthy()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('unmounts content after collapse and remounts on expand', async () => {
+    const { host, model, unmount } = mountStandaloneItem({
+      title: 'Standalone',
+      modelValue: true,
+      destroyOnCollapse: true
+    })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+
+      const header = host.querySelector('.u-collapse__header') as HTMLElement
+      header.click()
+      await nextTick()
+
+      expect(model.value).toBe(false)
+      // happy-dom 无真实布局，收起动画直接落定，内容随即卸载
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+
+      header.click()
+      await nextTick()
+      await nextTick()
+
+      expect(model.value).toBe(true)
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -10,18 +10,16 @@
       @keydown.enter.prevent="handleClick"
       @keydown.space.prevent="handleClick"
     >
-      <span :class="cls.e('title')">
-        <slot name="title">{{ title }}</slot>
-      </span>
+      <slot name="header" :is-active="isActive">
+        <span :class="cls.e('title')">{{ title }}</span>
 
-      <span :class="cls.e('icon')">
-        <slot name="icon" :is-active="isActive">
+        <span :class="cls.e('icon')">
           <UIcon><component :is="iconComponent" /></UIcon>
-        </slot>
-      </span>
+        </span>
+      </slot>
     </div>
     <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
-      <div :class="cls.e('content')">
+      <div v-if="contentMounted" :class="cls.e('content')">
         <slot />
       </div>
     </div>
@@ -32,7 +30,7 @@
 import { useModel } from '@veltra/compositions'
 import { ArrowDown } from '@veltra/icons/normal'
 import { bem, ExpandTransition } from '@veltra/utils'
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { CollapseItemEmits, CollapseItemProps } from '../../types'
 import { UIcon } from '../icon'
@@ -43,6 +41,13 @@ defineOptions({ name: 'UCollapseItem' })
 const props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })
 const emit = defineEmits<CollapseItemEmits>()
 
+defineSlots<{
+  /** 自定义整个头部，作用域参数 `isActive` 指示展开状态；缺省渲染 title + 展开图标 */
+  header?: (scope: { isActive: boolean }) => any
+  /** 折叠面板内容 */
+  default?: () => any
+}>()
+
 const context = inject(CollapseDIKey, undefined)
 
 const cls = context?.cls ?? bem('collapse')
@@ -94,6 +99,9 @@ const handleClick = () => {
 
 const wrapperEl = ref<HTMLElement>()
 
+/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */
+const contentMounted = ref(isActive.value || !props.destroyOnCollapse)
+
 onMounted(() => {
   if (context && props.value !== undefined) {
     context.register(props.value)
@@ -102,9 +110,22 @@ onMounted(() => {
   expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
 
-watch(isActive, (active) => {
+watch(isActive, async (active) => {
+  if (active) {
+    // 展开前先挂载内容，待 DOM 更新后再测量高度驱动展开动画
+    if (!contentMounted.value) {
+      contentMounted.value = true
+      await nextTick()
+    }
+    if (!wrapperEl.value || !isActive.value) return
+    expandTransition.expand(wrapperEl.value)
+    return
+  }
   if (!wrapperEl.value) return
-  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)
+  // 收起动画落定后再卸载内容 DOM；期间被重新展开则不卸载
+  expandTransition.collapse(wrapperEl.value, () => {
+    if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false
+  })
 })
 
 onBeforeUnmount(() => {

package/src/components/dialog/style.scss

@@ -76,10 +76,14 @@ $root-name: dialog;
   }
 
   @include m.e(body) {
-    padding: 8px;
     background-color: fn.use-var(bg-color, top);
     backdrop-filter: fn.use-var(bg-filter);
     flex-grow: 1;
+
+    // padding 加在滚动内容而非 body 本身：u-scroll 的 overflow 会裁切子元素 box-shadow
+    @include m.bem(scroll, content) {
+      padding: 8px;
+    }
   }
 
   @include m.e(footer) {

package/src/components/layout/layout.vue

@@ -11,6 +11,7 @@
       direction="vertical"
       @resize="handleResize($event, index)"
       @resize-start="handleStartResize(index)"
+      @resize-end="emit('resize-end', index)"
     >
     </ULayoutResizer>
 
@@ -37,7 +38,7 @@ import {
   nextTick
 } from 'vue'
 
-import type { LayoutProps } from '../../types'
+import type { LayoutEmits, LayoutProps } from '../../types'
 import { LayoutDIKey } from './di'
 import ULayoutResizer from './layout-resizer.vue'
 
@@ -45,6 +46,8 @@ defineOptions({ name: 'ULayout' })
 
 const props = withDefaults(defineProps<LayoutProps>(), { tag: 'div' })
 
+const emit = defineEmits<LayoutEmits>()
+
 const cls = bem('layout')
 
 const templateCols = ref<string[]>([])
@@ -87,20 +90,25 @@ function getResizeOffsets() {
 
 watch([() => props.resizable, containerRef, () => props.cols], () => {
   nextTick(() => {
-    getResizeOffsets()
+    syncResizers()
   })
 })
 
 useResizeObserver({
   targets: containerRef,
   onResize() {
-    getResizeOffsets()
-    resizerRefs.value.forEach((r, i) => {
-      r.update(resizerOffsets.value![i]!)
-    })
+    syncResizers()
   }
 })
 
+/** 重新测量各列边界并同步所有拖拽手柄位置（容器尺寸或 cols 程序化变化后调用） */
+function syncResizers() {
+  getResizeOffsets()
+  resizerRefs.value.forEach((r, i) => {
+    r.update(resizerOffsets.value![i]!)
+  })
+}
+
 // const horizontalResizerList = []
 
 // const resizing = shallowRef(false)
@@ -117,11 +125,14 @@ const handleStartResize = (index: number) => {
   const nextDom = container.children[index + 1] as HTMLElement | undefined
   prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0
   nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0
+  emit('resize-start', index)
 }
 const handleResize = (offset: number, index: number) => {
-  // 钳位到 [-prevSize, nextSize]，避免轨道尺寸出现负值——
+  // 钳位到 [colMin-prevSize, nextSize-colMin]，避免轨道尺寸出现负值或小于列最小宽度——
   // 一旦 grid-template-columns 中带负值，整条声明会被浏览器丢弃。
-  const clamped = Math.max(-prevSize, Math.min(nextSize, offset))
+  const minPrev = props.colMinSizes?.[index] ?? 0
+  const minNext = props.colMinSizes?.[index + 1] ?? 0
+  const clamped = Math.max(minPrev - prevSize, Math.min(nextSize - minNext, offset))
   templateCols.value[index] = `${prevSize + clamped}px`
   templateCols.value[index + 1] = `${nextSize - clamped}px`
 }

package/src/components/table/__test__/col-width.test.ts

@@ -13,14 +13,14 @@ describe('allocateLeafColumnWidths', () => {
     const name = createLeaf({ key: 'name', name: '姓名', width: 200 })
     const age = createLeaf({ key: 'age', name: '年龄', width: 200 })
     const action = createLeaf({ key: 'action', name: '操作', fixed: 'right' })
-    // 模拟旧算法曾把操作列撑大
-    action.data.width = 800
+    // 模拟上一次分配曾把操作列撑大
+    action.allocatedWidth = 800
 
     allocateLeafColumnWidths([name, age, action], 1000)
 
     expect(name.width).toBe(200)
     expect(age.width).toBe(200)
-    expect(action.data.width).toBeUndefined()
+    expect(action.allocatedWidth).toBeUndefined()
     expect(action.width).toBe(100)
   })
 
@@ -45,7 +45,7 @@ describe('allocateLeafColumnWidths', () => {
     // totalBase = 100 + 100 + 100 = 300，剩余 700 只分给 age/score
     allocateLeafColumnWidths([name, age, score], 1000)
 
-    expect(name.data.width).toBeUndefined()
+    expect(name.allocatedWidth).toBeUndefined()
     expect(name.width).toBe(100)
     expect(age.width).toBe(450)
     expect(score.width).toBe(450)
@@ -66,12 +66,53 @@ describe('allocateLeafColumnWidths', () => {
   it('无剩余空间时 grow 列回落到 minWidth', () => {
     const a = createLeaf({ key: 'a', name: 'A', width: 400 })
     const b = createLeaf({ key: 'b', name: 'B' })
-    b.data.width = 300
+    b.allocatedWidth = 300
 
     allocateLeafColumnWidths([a, b], 450)
 
     expect(a.width).toBe(400)
-    expect(b.data.width).toBeUndefined()
+    expect(b.allocatedWidth).toBeUndefined()
     expect(b.width).toBe(100)
   })
+
+  it('分配结果不写入列配置，森林重建后容器变窄仍会收缩', () => {
+    const config: TableColumn[] = [
+      { key: 'a', name: 'A' },
+      { key: 'b', name: 'B' }
+    ]
+
+    // 第一次挂载：宽容器
+    const first = config.map((c, i) => new ColumnNode(c, i, 0))
+    allocateLeafColumnWidths(first, 2000)
+    expect(first[0]!.width).toBe(1000)
+    expect(first[1]!.width).toBe(1000)
+
+    // 分配结果不得污染用户的列配置对象
+    expect(config[0]!.width).toBeUndefined()
+    expect(config[1]!.width).toBeUndefined()
+
+    // 模拟森林重建（路由返回 / v-if / columns 引用变化）：
+    // 同一批列配置对象不应被误判为显式设宽
+    const rebuilt = config.map((c, i) => new ColumnNode(c, i, 0))
+    expect(rebuilt.every((node) => !node.explicitWidth)).toBe(true)
+
+    // 容器变窄后重新分配，列宽相应收缩
+    allocateLeafColumnWidths(rebuilt, 800)
+    expect(rebuilt[0]!.width).toBe(400)
+    expect(rebuilt[1]!.width).toBe(400)
+  })
+
+  it('显式宽度（配置/拖拽锁定）优先于分配宽度并使其作废', () => {
+    const col = createLeaf({ key: 'a', name: 'A' })
+    col.allocatedWidth = 500
+    expect(col.width).toBe(500)
+
+    // 模拟表头拖拽锁定
+    col.width = 300
+    col.explicitWidth = true
+
+    expect(col.data.width).toBe(300)
+    expect(col.allocatedWidth).toBeUndefined()
+    expect(col.width).toBe(300)
+  })
 })

package/src/components/table/allocate-column-widths.ts

@@ -6,16 +6,19 @@ import type { ColumnNode } from './node/col'
  * - `explicitWidth` 列：保持配置/拖拽锁定的宽度
  * - `fixed` 且未显式设宽的列：保持 `minWidth`，不参与剩余宽度均分
  * - 其余未显式设宽的列：均分容器剩余宽度
+ *
+ * 分配结果写入列节点自身的 `allocatedWidth`，不回写列配置的 `data.width`，
+ * 避免污染用户数据后在列森林重建时被误判为显式宽度。
  */
 export function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWidth: number): void {
   if (!containerWidth || !leafColumns.length) return
 
   const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed)
-  // fixed 且未显式设宽：清掉可能被旧算法撑大的残留 width，回落到 minWidth
+  // fixed 且未显式设宽：清掉之前的分配结果，回落到 minWidth
   const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)
 
   fixedFlexColumns.forEach((column) => {
-    column.data.width = undefined
+    column.allocatedWidth = undefined
   })
 
   const explicitWidthTotal = leafColumns
@@ -28,11 +31,11 @@ export function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWid
   if (growColumns.length > 0 && totalBase < containerWidth) {
     const allocatedWidth = (containerWidth - totalBase) / growColumns.length
     growColumns.forEach((column) => {
-      column.width = column.minWidth! + allocatedWidth
+      column.allocatedWidth = column.minWidth! + allocatedWidth
     })
   } else {
     growColumns.forEach((column) => {
-      column.data.width = undefined
+      column.allocatedWidth = undefined
     })
   }
 }