@veltra/desktop 1.2.24 → 1.2.26

package/src/components/code-editor/shell-extension.ts

@@ -0,0 +1,199 @@
+import {
+  EditorSelection,
+  EditorState,
+  RangeSetBuilder,
+  StateField,
+  type Extension,
+  type Text
+} from '@codemirror/state'
+import { Decoration, type DecorationSet, EditorView } from '@codemirror/view'
+
+/** 前后缀外壳配置 */
+export interface ShellConfig {
+  prefix: string
+  suffix: string
+}
+
+/**
+ * 判断 Text 文档是否与外壳对齐。
+ * 仅 slice 前后缀边界，避免整篇 toString。
+ */
+function textMatchesShell(doc: Text, config: ShellConfig): boolean {
+  const { prefix, suffix } = config
+  const len = doc.length
+  if (prefix.length + suffix.length > len) return false
+  if (prefix && doc.sliceString(0, prefix.length) !== prefix) return false
+  if (suffix && doc.sliceString(len - suffix.length) !== suffix) return false
+  return true
+}
+
+/** 计算正文区间在完整文档中的起止位置（始终落在 [0, docLength]） */
+export function getShellRanges(docLength: number, config: ShellConfig) {
+  const prefixLen = config.prefix.length
+  const suffixLen = config.suffix.length
+  // 外壳与文档可能短暂不一致，区间必须可安全用于选区
+  const bodyStart = Math.min(prefixLen, docLength)
+  const bodyEnd = Math.max(bodyStart, docLength - Math.min(suffixLen, docLength - bodyStart))
+  return { prefixLen, suffixLen, bodyStart, bodyEnd }
+}
+
+/** 从 CodeMirror Text 提取正文（热路径，避免整篇 toString） */
+export function extractBodyFromText(doc: Text, config: ShellConfig): string {
+  // 无外壳时直接 toString，跳过边界校验与二次 slice
+  if (!config.prefix && !config.suffix) return doc.toString()
+  if (!textMatchesShell(doc, config)) return doc.toString()
+  const { bodyStart, bodyEnd } = getShellRanges(doc.length, config)
+  return doc.sliceString(bodyStart, bodyEnd)
+}
+
+/**
+ * 判断 Text 是否已等于 prefix + body + suffix（用于 model → doc 同步短路）。
+ * 长度不等时 O(1)；相等时只比较正文与边界，不分配完整文档字符串。
+ */
+export function textEqualsShellDoc(doc: Text, body: string, config: ShellConfig): boolean {
+  const { prefix, suffix } = config
+  if (doc.length !== prefix.length + body.length + suffix.length) return false
+  if (!prefix && !suffix) return doc.toString() === body
+  if (!textMatchesShell(doc, config)) return false
+  return doc.sliceString(prefix.length, doc.length - suffix.length) === body
+}
+
+/** 将正文与前后缀拼成完整 CodeMirror 文档 */
+export function buildFullDoc(body: string, config: ShellConfig): string {
+  return config.prefix + body + config.suffix
+}
+
+/** 选区是否已完全落在 [lo, hi] 内 */
+function selectionWithin(selection: EditorSelection, lo: number, hi: number): boolean {
+  for (const range of selection.ranges) {
+    if (range.from < lo || range.to > hi) return false
+  }
+  return true
+}
+
+/** 将选区限制在正文区间内，并保证不超出文档长度 */
+function clampSelection(
+  selection: EditorSelection,
+  bodyStart: number,
+  bodyEnd: number,
+  docLength = bodyEnd
+): EditorSelection {
+  const lo = Math.max(0, Math.min(bodyStart, docLength))
+  const hi = Math.max(lo, Math.min(bodyEnd, docLength))
+  const clamp = (pos: number) => Math.max(lo, Math.min(hi, pos))
+  let changed = false
+  const ranges = selection.ranges.map((range) => {
+    const anchor = clamp(range.anchor)
+    const head = clamp(range.head)
+    if (anchor !== range.anchor || head !== range.head) changed = true
+    return EditorSelection.range(anchor, head)
+  })
+  if (!changed) return selection
+  return EditorSelection.create(ranges, selection.mainIndex)
+}
+
+/**
+ * 将旧文档选区映射到新文档的正文区间（按正文内相对偏移）。
+ * 用于 prefix/suffix 切换时保持光标大致位置且始终合法。
+ */
+export function mapSelectionToBody(
+  selection: EditorSelection,
+  from: { bodyStart: number; bodyEnd: number },
+  to: { bodyStart: number; bodyEnd: number },
+  docLength: number
+): EditorSelection {
+  const fromLen = Math.max(0, from.bodyEnd - from.bodyStart)
+  const toLen = Math.max(0, to.bodyEnd - to.bodyStart)
+  const mapPos = (pos: number) => {
+    const offset = Math.max(0, Math.min(fromLen, pos - from.bodyStart))
+    return to.bodyStart + Math.min(offset, toLen)
+  }
+  const ranges = selection.ranges.map((range) =>
+    EditorSelection.range(mapPos(range.anchor), mapPos(range.head))
+  )
+  return clampSelection(
+    EditorSelection.create(ranges, selection.mainIndex),
+    to.bodyStart,
+    to.bodyEnd,
+    docLength
+  )
+}
+
+const shellMark = Decoration.mark({ class: 'cm-shell' })
+
+function buildShellDecorations(doc: Text, config: ShellConfig): DecorationSet {
+  if (!textMatchesShell(doc, config)) return Decoration.none
+
+  const { prefixLen, suffixLen, bodyEnd } = getShellRanges(doc.length, config)
+  const builder = new RangeSetBuilder<Decoration>()
+
+  if (prefixLen > 0) {
+    builder.add(0, prefixLen, shellMark)
+  }
+  if (suffixLen > 0 && bodyEnd < doc.length) {
+    builder.add(bodyEnd, doc.length, shellMark)
+  }
+
+  return builder.finish()
+}
+
+/** 变更是否触及外壳区间（相对 startState 文档坐标） */
+function changesTouchShell(
+  changes: { iterChangedRanges: (f: (fromA: number, toA: number) => void) => void },
+  bodyStart: number,
+  bodyEnd: number
+): boolean {
+  let touches = false
+  changes.iterChangedRanges((fromA, toA) => {
+    if (fromA < bodyStart || toA > bodyEnd) touches = true
+  })
+  return touches
+}
+
+/**
+ * CodeMirror 扩展：将 prefix/suffix 作为文档内的只读区域，
+ * 通过 changeFilter 阻止编辑、transactionFilter 限制选区，并用装饰着色。
+ */
+export function shellExtension(config: ShellConfig): Extension {
+  const hasShell = config.prefix.length > 0 || config.suffix.length > 0
+  if (!hasShell) return []
+
+  const shellField = StateField.define<DecorationSet>({
+    create(state) {
+      return buildShellDecorations(state.doc, config)
+    },
+    update(decorations, tr) {
+      if (!tr.docChanged) return decorations
+
+      const { bodyStart, bodyEnd } = getShellRanges(tr.startState.doc.length, config)
+      // 正文内编辑：外壳 mark 只需随 ChangeSet 映射，避免边界 slice / 重建
+      if (!changesTouchShell(tr.changes, bodyStart, bodyEnd) && decorations.size > 0) {
+        return decorations.map(tr.changes)
+      }
+      return buildShellDecorations(tr.newDoc, config)
+    },
+    provide: (f) => EditorView.decorations.from(f)
+  })
+
+  return [
+    shellField,
+    EditorState.changeFilter.of((tr) => {
+      if (!tr.docChanged) return true
+      const { bodyStart, bodyEnd } = getShellRanges(tr.startState.doc.length, config)
+      // 未触及外壳区间时直接放行，避免 sliceString
+      if (!changesTouchShell(tr.changes, bodyStart, bodyEnd)) return true
+      // 触及外壳：文档尚未对齐时放行（由组件侧全量替换同步）
+      return !textMatchesShell(tr.startState.doc, config)
+    }),
+    EditorState.transactionFilter.of((tr) => {
+      const { bodyStart, bodyEnd } = getShellRanges(tr.newDoc.length, config)
+      // 选区已在正文内：无需钳制，也无需校验外壳
+      if (selectionWithin(tr.newSelection, bodyStart, bodyEnd)) return tr
+      // 外壳与文档不一致时不钳选区，避免 Selection points outside of document
+      if (!textMatchesShell(tr.newDoc, config)) return tr
+      const selection = clampSelection(tr.newSelection, bodyStart, bodyEnd, tr.newDoc.length)
+      if (selection.eq(tr.newSelection)) return tr
+      return [tr, { selection }]
+    })
+  ]
+}

package/src/components/code-editor/style.scss

@@ -1,6 +1,5 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
 
 $root-name: code-editor;
 
@@ -33,6 +32,19 @@ $root-name: code-editor;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.e(lang-select) {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 2;
+    width: 88px;
+    border: none;
+
+    input {
+      text-align: right;
+    }
+  }
+
   .cm-editor {
     background: transparent;
     color: var(--u-code-editor-fg);
@@ -69,21 +81,12 @@ $root-name: code-editor;
     .cm-gutters {
       background-color: transparent;
       color: var(--u-code-editor-gutter-fg);
-      border-right: 1px solid var(--u-code-editor-border);
+      // CodeMirror 默认 gutter 高度只跟文档行数走，min-height 只加在 content 上时
+      // border-right 会在高编辑器里半途断开；官方主题示例也推荐去掉这条边框
+      border: none;
       user-select: none;
     }
 
-    .cm-gutterElement-phantom {
-      color: var(--u-code-editor-gutter-fg);
-      opacity: 0.45;
-      padding: 0 3px 0 5px;
-      text-align: right;
-      white-space: nowrap;
-      min-width: 1ch;
-      box-sizing: border-box;
-      pointer-events: none;
-    }
-
     .cm-activeLineGutter,
     .cm-activeLine {
       background-color: var(--u-code-editor-active-bg);
@@ -97,6 +100,10 @@ $root-name: code-editor;
     .cm-cursor {
       border-left-color: fn.use-var(color, primary);
     }
+
+    .cm-shell {
+      color: var(--u-code-editor-gutter-fg);
+    }
   }
 
   @include m.is(dark) {

package/src/components/code-editor/style.ts

@@ -1 +1,2 @@
+import '../select/style'
 import './style.scss'

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

@@ -144,7 +144,7 @@
 import { o as chainObj } from '@cat-kit/core'
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close, 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, shallowRef, shallowReactive, watch, provide } from 'vue'
 
@@ -182,6 +182,9 @@ const emit = defineEmits<MultiSelectEmits>()
 
 const cls = bem('multi-select')
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
@@ -202,11 +205,14 @@ const options = computed(() => {
   const base = rawOptions.value
   if (!props.creatable || !createdOptions.value.length) return base
 
-  const { valueKey } = props
-  const createdValues = new Set(createdOptions.value.map((o) => chainObj(o).get(valueKey)))
-  const deduped = base.filter((o) => !(o.__isTemp && createdValues.has(chainObj(o).get(valueKey))))
-  const dedupedValues = new Set(deduped.map((o) => chainObj(o).get(valueKey)))
-  const toAdd = createdOptions.value.filter((o) => !dedupedValues.has(chainObj(o).get(valueKey)))
+  const createdValues = new Set(createdOptions.value.map((o) => chainObj(o).get(valueKey.value)))
+  const deduped = base.filter(
+    (o) => !(o.__isTemp && createdValues.has(chainObj(o).get(valueKey.value)))
+  )
+  const dedupedValues = new Set(deduped.map((o) => chainObj(o).get(valueKey.value)))
+  const toAdd = createdOptions.value.filter(
+    (o) => !dedupedValues.has(chainObj(o).get(valueKey.value))
+  )
   return [...toAdd, ...deduped]
 })
 
@@ -225,18 +231,17 @@ const { virtualizer, items } = useVirtualizer({
 })
 
 const virtualOptions = computed(() => {
-  const { valueKey, labelKey } = props
   const _options = options.value
   return items.value.map((v) => {
     const option = _options[v.index]!
-    const val = chainObj(option).get(valueKey)
+    const val = chainObj(option).get(valueKey.value)
     return {
       option,
       index: v.index,
       val,
       key: v.index,
       offset: v.start,
-      label: chainObj(option).get(labelKey)
+      label: chainObj(option).get(labelKey.value)
     }
   })
 })
@@ -259,9 +264,8 @@ const indeterminate = computed(() => {
 })
 
 const optionsMap = computed(() => {
-  const { valueKey } = props
   return new Map<string | number, Record<string, any>>(
-    allOptions.value.map((option) => [option[valueKey], option])
+    allOptions.value.map((option) => [option[valueKey.value], option])
   )
 })
 
@@ -322,26 +326,25 @@ const handleDropdownVisible = (visible: boolean) => {
 }
 
 const handleCheck = (option: Record<string, any>, checked: boolean) => {
-  const { valueKey, labelKey } = props
   if (checked) {
     if (option.__isTemp && props.creatable) {
       const created: Record<string, any> = {
-        [labelKey]: chainObj(option).get(labelKey),
-        [valueKey]: chainObj(option).get(valueKey)
+        [labelKey.value]: chainObj(option).get(labelKey.value),
+        [valueKey.value]: chainObj(option).get(valueKey.value)
       }
       createdOptions.value = [...createdOptions.value, created]
       checkedSet.add(created)
       internalChange = true
-      model.value = [...(model.value ?? []), chainObj(created).get(valueKey)!]
+      model.value = [...(model.value ?? []), chainObj(created).get(valueKey.value)!]
       queryString.value = ''
     } else if (!checkedSet.has(option)) {
       checkedSet.add(option)
       internalChange = true
-      model.value = [...(model.value ?? []), chainObj(option).get(valueKey)!]
+      model.value = [...(model.value ?? []), chainObj(option).get(valueKey.value)!]
     }
   } else {
     checkedSet.delete(option)
-    const val = chainObj(option).get(valueKey)
+    const val = chainObj(option).get(valueKey.value)
     internalChange = true
     model.value = (model.value ?? []).filter((v) => v !== val)
     removeCreatedOption(option)
@@ -353,13 +356,12 @@ const handleCheck = (option: Record<string, any>, checked: boolean) => {
 
 /** 全选 */
 const handleCheckAll = (checked: boolean) => {
-  const { valueKey } = props
   if (checked) {
     options.value.forEach((option) => {
       if (!option.__isTemp) checkedSet.add(option)
     })
     internalChange = true
-    model.value = Array.from(checkedSet).map((o) => chainObj(o).get(valueKey)!)
+    model.value = Array.from(checkedSet).map((o) => chainObj(o).get(valueKey.value)!)
   } else {
     checkedSet.clear()
     internalChange = true
@@ -386,7 +388,7 @@ const handleClear = () => {
 
 const handleClose = (option: Record<string, any>) => {
   checkedSet.delete(option)
-  const val = chainObj(option).get(props.valueKey)
+  const val = chainObj(option).get(valueKey.value)
   internalChange = true
   model.value = (model.value ?? []).filter((v) => v !== val)
   removeCreatedOption(option)
@@ -395,9 +397,8 @@ const handleClose = (option: Record<string, any>) => {
 
 const removeCreatedOption = (option: Record<string, any>) => {
   if (!props.creatable || !createdOptions.value.length) return
-  const { valueKey } = props
-  const val = chainObj(option).get(valueKey)
-  createdOptions.value = createdOptions.value.filter((o) => chainObj(o).get(valueKey) !== val)
+  const val = chainObj(option).get(valueKey.value)
+  createdOptions.value = createdOptions.value.filter((o) => chainObj(o).get(valueKey.value) !== val)
 }
 
 const handleCreateByEnter = () => {
@@ -405,14 +406,12 @@ const handleCreateByEnter = () => {
   const qs = queryString.value?.trim()
   if (!qs) return
 
-  const { labelKey, valueKey } = props
-
-  const existingCreated = createdOptions.value.find((o) => chainObj(o).get(valueKey) === qs)
+  const existingCreated = createdOptions.value.find((o) => chainObj(o).get(valueKey.value) === qs)
   if (existingCreated) {
     if (!checkedSet.has(existingCreated)) {
       checkedSet.add(existingCreated)
       internalChange = true
-      model.value = [...(model.value ?? []), chainObj(existingCreated).get(valueKey)!]
+      model.value = [...(model.value ?? []), chainObj(existingCreated).get(valueKey.value)!]
     }
     queryString.value = ''
     emitChange()
@@ -420,12 +419,14 @@ const handleCreateByEnter = () => {
     return
   }
 
-  const exactMatch = rawOptions.value.find((o) => !o.__isTemp && chainObj(o).get(labelKey) === qs)
+  const exactMatch = rawOptions.value.find(
+    (o) => !o.__isTemp && chainObj(o).get(labelKey.value) === qs
+  )
   if (exactMatch) {
     if (!checkedSet.has(exactMatch)) {
       checkedSet.add(exactMatch)
       internalChange = true
-      model.value = [...(model.value ?? []), chainObj(exactMatch).get(valueKey)!]
+      model.value = [...(model.value ?? []), chainObj(exactMatch).get(valueKey.value)!]
     }
     queryString.value = ''
     emitChange()
@@ -433,7 +434,7 @@ const handleCreateByEnter = () => {
     return
   }
 
-  const created: Record<string, any> = { [labelKey]: qs, [valueKey]: qs }
+  const created: Record<string, any> = { [labelKey.value]: qs, [valueKey.value]: qs }
   createdOptions.value = [...createdOptions.value, created]
   checkedSet.add(created)
   internalChange = true

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

@@ -99,7 +99,7 @@
 import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Close, 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'
 
@@ -131,6 +131,9 @@ const props = withDefaults(defineProps<MultiTreeSelectProps>(), {
   minWidth: '280px'
 })
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 const treeProps = computed(() => {
   return o(props as Record<string, any>).omit([
     'tips',
@@ -239,7 +242,7 @@ watch(
         dfs(
           item,
           (v) => {
-            newDict.set(v[props.valueKey], v)
+            newDict.set(v[valueKey.value], v)
           },
           props.childrenKey
         )

package/src/components/progress-nodes/progress-nodes.vue

@@ -34,7 +34,7 @@
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
 import { useDrag, useResizeObserver } from '@veltra/compositions'
-import { bem } from '@veltra/utils'
+import { bem, fieldKey } from '@veltra/utils'
 import { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'
 
 import type { ProgressNodesProps, ProgressNodesEmits } from '../../types'
@@ -49,6 +49,9 @@ const props = withDefaults(defineProps<ProgressNodesProps>(), {
 
 const emit = defineEmits<ProgressNodesEmits>()
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 const { nodes } = toRefs(props)
 
 const cls = bem('progress-nodes')
@@ -121,16 +124,16 @@ function isChecked(node: Record<string, any>, index: number) {
 }
 
 function isActive(node: Record<string, any>) {
-  const value = o(node).get(props.valueKey)
+  const value = o(node).get(valueKey.value)
   return props.modelValue === value
 }
 
 function getLabel(node: Record<string, any>) {
-  return o(node).get(props.labelKey)
+  return o(node).get(labelKey.value)
 }
 
 function handleClick(node: Record<string, any>, index: number) {
-  const value = o(node).get(props.valueKey)
+  const value = o(node).get(valueKey.value)
   emit('update:modelValue', value)
   emit('click', node, index)
 }

package/src/components/radio-group/radio-group.vue

@@ -20,8 +20,9 @@
 
 <script lang="ts" setup>
 import { useFormFallbackProps } from '@veltra/compositions'
-import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
 
 import type { RadioGroupProps, RadioGroupEmits } from '../../types'
 import URadio from '../radio/radio.vue'
@@ -49,6 +50,9 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 
 const cls = bem('radio-group')
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 const handleUpdate = (value: any, item: Record<string, any>) => {
   model.value = value
   emit('change', item)

package/src/components/select/select.vue

@@ -119,7 +119,7 @@ import { o } from '@cat-kit/core'
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { vFocus } from '@veltra/directives'
 import { ArrowDown, Search } from '@veltra/icons/normal'
-import { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
+import { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
@@ -160,6 +160,9 @@ defineSlots<{
 
 const cls = bem('select')
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
 const optionClass = cls.e('option')
 
 const { formProps } = injectFormContext()
@@ -176,7 +179,7 @@ const selected = shallowRef<Record<string, any>>()
 const displayedValue = computed(() => {
   if (label.value) return label.value
 
-  return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? '')
+  return selected.value ? o(selected.value).get(labelKey.value) : String(props.modelValue ?? '')
 })
 
 const dropdownRef = shallowRef<DropdownExposed>()
@@ -210,12 +213,12 @@ watch(
 
     if (!options?.length) return
 
-    const { valueKey, labelKey } = props
-
     if (modelValue !== undefined && modelValue !== null && modelValue !== '') {
-      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+      currentIndex.value = options.findIndex(
+        (option) => o(option).get(valueKey.value) === modelValue
+      )
       selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : undefined
-      label.value = selected.value ? o(selected.value).get(labelKey) : undefined
+      label.value = selected.value ? o(selected.value).get(labelKey.value) : undefined
     } else {
       currentIndex.value = -1
       selected.value = undefined
@@ -238,14 +241,13 @@ const { virtualizer, items } = useVirtualizer({
 
 const virtualOptions = computed(() => {
   const _options = options.value
-  const { labelKey, valueKey } = props
   return items.value.map((item) => {
     const option = _options[item.index]!
     return {
       option,
       index: item.index,
-      label: o(option).get(labelKey),
-      val: o(option).get(valueKey),
+      label: o(option).get(labelKey.value),
+      val: o(option).get(valueKey.value),
       key: item.index,
       offset: item.start
     }
@@ -292,8 +294,8 @@ const handleSelect = (option: Record<string, any>, index: number) => {
   lock()
   selected.value = option
 
-  emit('update:modelValue', option?.[props.valueKey])
-  label.value = option?.[props.labelKey]
+  emit('update:modelValue', option?.[valueKey.value])
+  label.value = option?.[labelKey.value]
   emit('change', option)
   if (option.__isTemp) {
     temOptionsToCreatedOptions()

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

@@ -1,4 +1,5 @@
 import { debounce, o as chainObj } from '@cat-kit/core'
+import { fieldKey } from '@veltra/utils'
 import { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'
 
 import type { SelectProps } from '../../types'
@@ -53,14 +54,16 @@ export function useOptions(o: Options): UseOptionsReturned {
       tempOptions.value = []
       return
     }
+    const labelKey = fieldKey(props.labelKey, 'label')
+    const valueKey = fieldKey(props.valueKey, 'value')
     const exactMatch = options
       ? options.some((option) => {
-          return chainObj(option).get(props.labelKey!) === qs
+          return chainObj(option).get(labelKey) === qs
         })
       : false
 
     if (!exactMatch) {
-      tempOptions.value = [{ [props.labelKey!]: qs, [props.valueKey!]: qs, __isTemp: true }]
+      tempOptions.value = [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]
     }
   }
 
@@ -95,7 +98,7 @@ export function useOptions(o: Options): UseOptionsReturned {
         setTempOption(qs, options)
       } else {
         // 当选项不是函数时，可以创建选项
-        const { labelKey } = props
+        const labelKey = fieldKey(props.labelKey, 'label')
 
         if (!qs) {
           filteredOptions.value = propsOptions ?? []
@@ -105,7 +108,7 @@ export function useOptions(o: Options): UseOptionsReturned {
 
         const _filteredOptions =
           propsOptions?.filter((item) => {
-            return chainObj(item).get(labelKey!)?.includes(qs) ?? false
+            return chainObj(item).get(labelKey)?.includes(qs) ?? false
           }) ?? []
 
         setTempOption(qs, _filteredOptions)

package/src/components/steps/steps.vue

@@ -54,7 +54,7 @@
 import { n, o } from '@cat-kit/core'
 import { useFallbackProps } from '@veltra/compositions'
 import { Check } from '@veltra/icons/normal'
-import { bem } from '@veltra/utils'
+import { bem, fieldKey } from '@veltra/utils'
 import { computed, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { StepsProps, StepsEmits, ComponentSize, StepsSlotScope } from '../../types'
@@ -80,6 +80,8 @@ const slots = defineSlots<{
 
 const cls = bem('steps')
 
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+
 const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
 
 const className = computed(() => {