@veltra/desktop 1.2.24 → 1.2.26

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

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+
+import type { TableColumn } from '../../../types'
+import { allocateLeafColumnWidths } from '../allocate-column-widths'
+import { ColumnNode } from '../node/col'
+
+function createLeaf(column: TableColumn): ColumnNode {
+  return new ColumnNode(column, 0, 0)
+}
+
+describe('allocateLeafColumnWidths', () => {
+  it('fixed right 操作列未设 width 时保持 minWidth，不吞剩余空间', () => {
+    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
+
+    allocateLeafColumnWidths([name, age, action], 1000)
+
+    expect(name.width).toBe(200)
+    expect(age.width).toBe(200)
+    expect(action.data.width).toBeUndefined()
+    expect(action.width).toBe(100)
+  })
+
+  it('多个非 fixed 无 width 列均分剩余宽度', () => {
+    const a = createLeaf({ key: 'a', name: 'A', width: 200 })
+    const b = createLeaf({ key: 'b', name: 'B' })
+    const c = createLeaf({ key: 'c', name: 'C' })
+
+    // totalBase = 200 + 100 + 100 = 400，剩余 600，每列 +300
+    allocateLeafColumnWidths([a, b, c], 1000)
+
+    expect(a.width).toBe(200)
+    expect(b.width).toBe(400)
+    expect(c.width).toBe(400)
+  })
+
+  it('fixed left 未设 width 时同样不参与均分', () => {
+    const name = createLeaf({ key: 'name', name: '姓名', fixed: 'left' })
+    const age = createLeaf({ key: 'age', name: '年龄' })
+    const score = createLeaf({ key: 'score', name: '分数' })
+
+    // totalBase = 100 + 100 + 100 = 300，剩余 700 只分给 age/score
+    allocateLeafColumnWidths([name, age, score], 1000)
+
+    expect(name.data.width).toBeUndefined()
+    expect(name.width).toBe(100)
+    expect(age.width).toBe(450)
+    expect(score.width).toBe(450)
+  })
+
+  it('explicitWidth 列宽度不变', () => {
+    const locked = createLeaf({ key: 'locked', name: '锁定', width: 180 })
+    locked.explicitWidth = true
+    const grow = createLeaf({ key: 'grow', name: '弹性' })
+
+    allocateLeafColumnWidths([locked, grow], 500)
+
+    expect(locked.width).toBe(180)
+    // totalBase = 180 + 100 = 280，剩余 220 全给 grow
+    expect(grow.width).toBe(320)
+  })
+
+  it('无剩余空间时 grow 列回落到 minWidth', () => {
+    const a = createLeaf({ key: 'a', name: 'A', width: 400 })
+    const b = createLeaf({ key: 'b', name: 'B' })
+    b.data.width = 300
+
+    allocateLeafColumnWidths([a, b], 450)
+
+    expect(a.width).toBe(400)
+    expect(b.data.width).toBeUndefined()
+    expect(b.width).toBe(100)
+  })
+})

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

@@ -0,0 +1,38 @@
+import type { ColumnNode } from './node/col'
+
+/**
+ * 按容器宽度分配叶子列宽。
+ *
+ * - `explicitWidth` 列：保持配置/拖拽锁定的宽度
+ * - `fixed` 且未显式设宽的列：保持 `minWidth`，不参与剩余宽度均分
+ * - 其余未显式设宽的列：均分容器剩余宽度
+ */
+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
+  const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)
+
+  fixedFlexColumns.forEach((column) => {
+    column.data.width = undefined
+  })
+
+  const explicitWidthTotal = leafColumns
+    .filter((column) => column.explicitWidth)
+    .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)
+  const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
+  const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
+  const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal
+
+  if (growColumns.length > 0 && totalBase < containerWidth) {
+    const allocatedWidth = (containerWidth - totalBase) / growColumns.length
+    growColumns.forEach((column) => {
+      column.width = column.minWidth! + allocatedWidth
+    })
+  } else {
+    growColumns.forEach((column) => {
+      column.data.width = undefined
+    })
+  }
+}

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

@@ -1,6 +1,7 @@
 import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
 
 import type { ScrollExposed } from '../../types'
+import { allocateLeafColumnWidths } from './allocate-column-widths'
 import { TableResizeKey } from './di'
 import type { ColumnNode } from './node/col'
 
@@ -34,25 +35,7 @@ export function useColResize(options: Options): UseColResizeReturned {
 
     if (!containerWidth || !leafColumns.value.length) return
 
-    const flexColumns = leafColumns.value.filter((column) => !column.explicitWidth)
-    const fixedWidthTotal = leafColumns.value
-      .filter((column) => column.explicitWidth)
-      .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)
-    const flexBaseTotal = flexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
-    const totalBase = fixedWidthTotal + flexBaseTotal
-
-    // 仅未显式指定 width 的列参与剩余宽度均分；指定了 width 的列保持该宽度。
-    if (flexColumns.length > 0 && totalBase < containerWidth) {
-      const allocatedWidth = (containerWidth - totalBase) / flexColumns.length
-
-      flexColumns.forEach((column) => {
-        column.width = column.minWidth! + allocatedWidth
-      })
-    } else {
-      flexColumns.forEach((column) => {
-        column.data.width = undefined
-      })
-    }
+    allocateLeafColumnWidths(leafColumns.value, containerWidth)
 
     const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')
     const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')

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

@@ -1,4 +1,5 @@
 import { dfs, o } from '@cat-kit/core'
+import { fieldKey } from '@veltra/utils'
 import { nextTick, watch, type ComputedRef } from 'vue'
 
 import type { TreeEmit, TreeProps } from '../../types'
@@ -188,7 +189,7 @@ export function useCheck(options: Options): UseCheckReturned {
 
     const checkedArr = Array.from(checkedData)
 
-    const valueKey = props.valueKey!
+    const valueKey = fieldKey(props.valueKey, 'value')
     const nextValues = checkedArr.map((item) => o(item).get(valueKey) as unknown)
 
     // 与外部 checked 保持差集缓存同步，避免下一次 watch 回调把刚勾选的值又误判为“新增”。

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

@@ -1,3 +1,4 @@
+import { fieldKey } from '@veltra/utils'
 import { nextTick, shallowRef, watch, type ComputedRef, type ShallowRef } from 'vue'
 
 import type { TreeEmit, TreeProps } from '../../types'
@@ -55,7 +56,8 @@ export function useSelect(options: Options): UseSelectReturned {
     if (node.disabled) return
     selectedData.value = node.data === selectedData.value ? undefined : node.data
 
-    emit('update:selected', selectedData.value?.[props.valueKey!], selectedData.value, node)
+    const valueKey = fieldKey(props.valueKey, 'value')
+    emit('update:selected', selectedData.value?.[valueKey], selectedData.value, node)
 
     nextTick(() => {
       selectByEvent = false

package/src/components/tree/use-tree-nodes.ts

@@ -1,4 +1,5 @@
 import { Forest } from '@cat-kit/core'
+import { fieldKey } from '@veltra/utils'
 import { computed, shallowRef, triggerRef, watch, type ShallowRef, type ComputedRef } from 'vue'
 
 import type { TreeProps } from '../../types'
@@ -36,8 +37,10 @@ export function useTreeNodes(options: Options): UseTreeNodesReturned {
   const nodes = shallowRef<TreeNode[]>([])
 
   function buildForest(): Forest<Record<string, unknown>, any> {
-    const { disabledNode, expandAll = false, valueKey, labelKey } = props
+    const { disabledNode, expandAll = false } = props
     const childrenKey = props.childrenKey ?? 'children'
+    const valueKey = fieldKey(props.valueKey, 'value')
+    const labelKey = fieldKey(props.labelKey, 'label')
 
     function createNode(
       data: Record<string, any>,
@@ -45,14 +48,7 @@ export function useTreeNodes(options: Options): UseTreeNodesReturned {
       depth: number,
       parent?: TreeNode
     ): TreeNode {
-      const node = new TreeNode({
-        data,
-        index,
-        depth,
-        parent,
-        valueKey: valueKey!,
-        labelKey: labelKey!
-      })
+      const node = new TreeNode({ data, index, depth, parent, valueKey, labelKey })
       node.expanded = expandAll
       return node
     }

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

@@ -63,7 +63,7 @@
 import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Search } from '@veltra/icons/normal'
-import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
@@ -114,6 +114,9 @@ const treeProps = computed(() => {
 
 const cls = bem('tree-select')
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 /**过滤 */
 const qs = shallowRef('')
 watch(qs, (qs) => {
@@ -158,8 +161,8 @@ watch(
       dfs(
         item,
         (v) => {
-          if (v[props.valueKey] === model) {
-            label.value = v[props.labelKey]
+          if (v[valueKey.value] === model) {
+            label.value = v[labelKey.value]
             founded = true
             return true
           }
@@ -182,7 +185,7 @@ const handleSelect = (selected?: string | number, selectedData?: Record<string,
   model.value = selected ?? ''
 
   if (selectedData) {
-    label.value = o(selectedData).get(props.labelKey)
+    label.value = o(selectedData).get(labelKey.value)
   } else {
     label.value = ''
   }

package/src/types/code-editor.ts

@@ -5,8 +5,16 @@ export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json'
 /** 代码编辑器组件属性（不支持 `size`） */
 export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string
-  /** 定义语言 */
-  language?: CodeEditorLang
+  /**
+   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器
+   */
+  langs?: CodeEditorLang[]
+  /** 当前语言，配合 `v-model:lang` 使用 */
+  lang?: CodeEditorLang
+  /** 不可编辑的前缀外壳（展示在编辑器内，不计入 v-model） */
+  prefix?: string
+  /** 不可编辑的后缀外壳（展示在编辑器内，不计入 v-model） */
+  suffix?: string
   /** 是否使用暗色主题 */
   dark?: boolean
   /**
@@ -19,6 +27,9 @@ export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
 /** 代码编辑器组件定义的事件 */
 export interface CodeEditorEmits {
   (e: 'update:modelValue', value: string): void
+  (e: 'update:lang', value: CodeEditorLang | undefined): void
+  /** 在编辑器失焦且内容有变更时触发 */
+  (e: 'change', value: string): void
 }
 
 /** 代码编辑器组件暴露的属性和方法(组件内部使用) */