@veltra/desktop 1.3.6 → 1.3.8

package/dist/components/tree-select/tree-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.js","names":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n  >\n    <template #trigger>\n      <u-input\n        ref=\"inputRef\"\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"inputPlaceholder\"\n        :clearable=\"false\"\n        :model-value=\"inputValue\"\n        @update:model-value=\"handleQueryInput\"\n        :native-readonly=\"!filterable || !querying\"\n        @click.capture=\"handleTriggerClickCapture\"\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <transition name=\"zoom-in\" mode=\"out-in\">\n            <u-icon\n              v-if=\"showClear\"\n              :class=\"cls.e('clear')\"\n              title=\"清除\"\n              key=\"clear\"\n              @click.stop=\"handleClear\"\n            >\n              <Close />\n            </u-icon>\n            <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\"><ArrowDown /></u-icon>\n          </transition>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ text || label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'UTreeSelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\nconst label = shallowRef<string>()\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态：决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态，\n * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。\n */\nconst querying = shallowRef(false)\n\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\n/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */\nconst inputValue = computed(() => {\n  if (props.filterable && querying.value) return qs.value\n  return props.text ?? (model.value ? label.value : undefined)\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n  const display = props.text ?? (model.value ? label.value : undefined)\n  if (props.filterable && querying.value && display) {\n    return display\n  }\n  return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n  if (!props.filterable) return\n  qs.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */\nconst showClear = computed(() => {\n  if (!props.clearable || disabled.value || !hovered.value) return false\n  return !!(props.text ?? (model.value ? label.value : undefined))\n})\n\n/**\n * 过滤模式下拦截输入区域的点击：\n * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。\n * 非输入区域（箭头、留白）放行，维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n  if (!props.filterable || disabled.value) return\n  if (!(e.target instanceof HTMLInputElement)) return\n\n  e.stopPropagation()\n  if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nwatch(dropdownVisible, (visible) => {\n  if (visible && props.filterable) {\n    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询\n    querying.value = true\n    nextTick(() => inputRef.value?.el?.focus())\n  } else if (!visible) {\n    querying.value = false\n  }\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\n/**清空 */\nconst handleClear = () => {\n  model.value = ''\n  label.value = undefined\n  emit('clear')\n  emit('change', undefined)\n  emit('update:text', '')\n}\n\nlet changedByEvent = false\nwatch(\n  [() => props.data, model],\n  ([data, model]) => {\n    if (changedByEvent) return\n    if (!data?.length || model === undefined) {\n      label.value = undefined\n      model = undefined\n      return\n    }\n\n    let founded = false\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      dfs(\n        item,\n        (v) => {\n          if (v[valueKey.value] === model) {\n            label.value = v[labelKey.value]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n  },\n  { immediate: true }\n)\n\nconst handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n\n  model.value = selected ?? ''\n\n  if (selectedData) {\n    label.value = o(selectedData).get(labelKey.value)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selectedData)\n  emit('update:text', label.value)\n  // 立即退出查询态，输入框同步恢复显示选中标签\n  querying.value = false\n  qs.value = ''\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tree-select.js","names":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n  >\n    <template #trigger>\n      <u-input\n        ref=\"inputRef\"\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"inputPlaceholder\"\n        :clearable=\"false\"\n        :model-value=\"inputValue\"\n        @update:model-value=\"handleQueryInput\"\n        :native-readonly=\"!filterable || !querying\"\n        @click.capture=\"handleTriggerClickCapture\"\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <transition name=\"zoom-in\" mode=\"out-in\">\n            <u-icon\n              v-if=\"showClear\"\n              :class=\"cls.e('clear')\"\n              title=\"清除\"\n              key=\"clear\"\n              @click.stop=\"handleClear\"\n            >\n              <Close />\n            </u-icon>\n            <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\"><ArrowDown /></u-icon>\n          </transition>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'UTreeSelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\n/** 内部展示文案，仅由 data 推导；通过 update:text 单向通知父级 */\nconst label = shallowRef<string>()\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态：决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态，\n * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。\n */\nconst querying = shallowRef(false)\n\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\n/** 更新内部文案；值变化时单向 emit update:text */\nfunction setLabel(next?: string) {\n  if (label.value === next) return\n  label.value = next\n  emit('update:text', next)\n}\n\n/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */\nconst inputValue = computed(() => {\n  if (props.filterable && querying.value) return qs.value\n  return model.value || model.value === 0 ? label.value : undefined\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n  const display = model.value || model.value === 0 ? label.value : undefined\n  if (props.filterable && querying.value && display) {\n    return display\n  }\n  return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n  if (!props.filterable) return\n  qs.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */\nconst showClear = computed(() => {\n  if (!props.clearable || disabled.value || !hovered.value) return false\n  return !!(model.value || model.value === 0 ? label.value : undefined)\n})\n\n/**\n * 过滤模式下拦截输入区域的点击：\n * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。\n * 非输入区域（箭头、留白）放行，维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n  if (!props.filterable || disabled.value) return\n  if (!(e.target instanceof HTMLInputElement)) return\n\n  e.stopPropagation()\n  if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nwatch(dropdownVisible, (visible) => {\n  if (visible && props.filterable) {\n    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询\n    querying.value = true\n    nextTick(() => inputRef.value?.el?.focus())\n  } else if (!visible) {\n    querying.value = false\n  }\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\nconst { userAction, isUserActive } = useUserAction()\n\n/** 清空 */\nconst handleClear = userAction(() => {\n  model.value = ''\n  setLabel(undefined)\n  emit('clear')\n  emit('change', undefined)\n})\n\n/** 外部回显：按 data 查找 label（O(n)）；用户动作期内跳过 */\nwatch(\n  [() => props.data, model],\n  ([data, modelVal]) => {\n    if (isUserActive()) return\n    if (!data?.length || modelVal === undefined || modelVal === null || modelVal === '') {\n      setLabel(undefined)\n      return\n    }\n\n    let nextLabel: string | undefined\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      let founded = false\n      dfs(\n        item,\n        (v) => {\n          if (v[valueKey.value] === modelVal) {\n            nextLabel = v[labelKey.value]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n    setLabel(nextLabel)\n  },\n  { immediate: true }\n)\n\n/** 用户选择：O(1) 写入值与文案，跳过 data 回显查找 */\nconst handleSelect = userAction(\n  (selected?: string | number, selectedData?: Record<string, any>) => {\n    model.value = selected ?? ''\n\n    if (selectedData) {\n      setLabel(o(selectedData).get(labelKey.value))\n    } else {\n      setLabel(undefined)\n    }\n\n    emit('change', selectedData)\n    // 立即退出查询态，输入框同步恢复显示选中标签\n    querying.value = false\n    qs.value = ''\n    dropdownRef.value?.close()\n  }\n)\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -31,10 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   valueKey: string;
   placeholder: string;
   clearable: boolean;
-  filterable: boolean;
-  minWidth: string;
   disabled: boolean;
   readonly: boolean;
+  filterable: boolean;
+  minWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/select.d.ts

@@ -5,8 +5,6 @@ import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 interface SelectProps extends FormComponentProps {
   /** 绑定值 */
   modelValue?: any;
-  /** 文本内容 */
-  text?: string;
   /**
    * 列表选项
    * @description 如果传入一个函数，那么filterable会被强制启用
@@ -54,8 +52,11 @@ interface SelectProps extends FormComponentProps {
   };
 }
 interface SelectEmits {
-  /** 触发更新label事件 */
-  (e: 'update:label', label?: string): void;
+  /**
+   * 选中项文案变化（单向通知，用于同步父级冗余字段）
+   * @description 展示始终由 options 推导，请用 `@update:text` 而非 `v-model:text`
+   */
+  (e: 'update:text', text?: string): void;
   (e: 'update:modelValue', modelValue?: any): void;
   (e: 'change', option?: Record<string, any>): void;
 }

package/dist/types/tree-select.d.ts

@@ -25,8 +25,6 @@ interface TreeSelectProps extends FormComponentProps, Omit<TreeProps, 'selected'
    * @default 跟随触发元素的宽度
    */
   width?: string;
-  /** 显示文本 */
-  text?: string;
   /** 内容容器样式 */
   contentStyle?: CSSProperties | string;
   /** 内容容器类名 */
@@ -37,6 +35,10 @@ interface TreeSelectEmits {
   (e: 'clear'): void;
   (e: 'update:modelValue', value?: string | number): void;
   (e: 'change', selectedData?: Record<string, any>): void;
+  /**
+   * 选中项文案变化（单向通知，用于同步父级冗余字段）
+   * @description 展示始终由 data 推导，请用 `@update:text` 而非 `v-model:text`
+   */
   (e: 'update:text', text?: string): void;
 }
 /** 树形选择器组件暴露的属性和方法(组件内部使用) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.3.6",
-    "@veltra/directives": "1.3.6",
-    "@veltra/icons": "1.3.6",
-    "@veltra/styles": "1.3.6",
-    "@veltra/utils": "1.3.6",
+    "@veltra/compositions": "1.3.8",
+    "@veltra/directives": "1.3.8",
+    "@veltra/icons": "1.3.8",
+    "@veltra/styles": "1.3.8",
+    "@veltra/utils": "1.3.8",
     "vue": ">=3.5.40"
   },
   "devDependencies": {

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

@@ -1,22 +1,29 @@
 import { describe, expect, it } from 'vitest'
-import { createApp, h, nextTick, ref } from 'vue'
+import { createApp, h, nextTick, ref, type Ref } from 'vue'
 
 import USelect from '../select.vue'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-function mountSelect(props: Record<string, unknown>) {
+function mountSelect(props: Record<string, unknown> = {}) {
   const host = document.createElement('div')
   document.body.appendChild(host)
 
   const model = ref(props.modelValue)
+  const options = ref(props.options) as Ref<unknown>
+  const texts: (string | undefined)[] = []
+
   const app = createApp({
     render() {
       return h(USelect, {
         ...props,
         modelValue: model.value,
+        options: options.value as any,
         'onUpdate:modelValue': (value: unknown) => {
           model.value = value
+        },
+        'onUpdate:text': (text?: string) => {
+          texts.push(text)
         }
       })
     }
@@ -27,6 +34,8 @@ function mountSelect(props: Record<string, unknown>) {
   return {
     host,
     model,
+    options,
+    texts,
     unmount() {
       app.unmount()
       host.remove()
@@ -107,4 +116,70 @@ describe('USelect', () => {
       unmount()
     }
   })
+
+  it('emits update:text with option label when modelValue echoes against options', async () => {
+    const { host, texts, unmount } = mountSelect({
+      modelValue: 'beijing',
+      options: [
+        { label: '北京（最新）', value: 'beijing' },
+        { label: '上海（最新）', value: 'shanghai' }
+      ]
+    })
+
+    try {
+      await nextTick()
+      expect(texts.at(-1)).toBe('北京（最新）')
+      expect(host.querySelector('input')!.value).toBe('北京（最新）')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits update:text on user select and clear', async () => {
+    const { host, model, texts, unmount } = mountSelect({
+      filterable: true,
+      options: [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' }
+      ]
+    })
+
+    try {
+      await openDropdown(host)
+      await clickOption(queryOptions().find((el) => el.textContent === '上海')!)
+      expect(model.value).toBe('shanghai')
+      expect(texts.at(-1)).toBe('上海')
+
+      // 清除：父级清空值时回显同步发出 update:text
+      model.value = undefined
+      await nextTick()
+      await nextTick()
+      expect(texts.at(-1)).toBeUndefined()
+      expect(host.querySelector('input')!.value).toBe('')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits update:text after async options arrive for an existing modelValue', async () => {
+    const { host, options, texts, unmount } = mountSelect({ modelValue: 'shanghai', options: [] })
+
+    try {
+      await nextTick()
+      expect(texts).toHaveLength(0)
+      expect(host.querySelector('input')!.value).toBe('shanghai')
+
+      options.value = [
+        { label: '北京（最新）', value: 'beijing' },
+        { label: '上海（最新）', value: 'shanghai' }
+      ]
+      await nextTick()
+      await nextTick()
+
+      expect(texts.at(-1)).toBe('上海（最新）')
+      expect(host.querySelector('input')!.value).toBe('上海（最新）')
+    } finally {
+      unmount()
+    }
+  })
 })

package/src/components/select/select.vue

@@ -120,7 +120,7 @@
 
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
-import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
@@ -177,7 +177,8 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 })
 
 const currentIndex = shallowRef(-1)
-const label = defineModel('text')
+/** 内部展示文案，仅由选项推导；通过 update:text 单向通知父级 */
+const label = shallowRef<string>()
 const selected = shallowRef<Record<string, any>>()
 
 const displayedValue = computed(() => {
@@ -194,9 +195,8 @@ const filterable = computed(() => {
   return props.filterable || typeof props.options === 'function'
 })
 
-const { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({
-  props
-})
+const { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions } =
+  useOptions({ props })
 
 const dropdownVisible = shallowRef(false)
 
@@ -246,57 +246,54 @@ function handleTriggerClickCapture(e: MouseEvent) {
   if (!dropdownVisible.value) dropdownRef.value?.open()
 }
 
-// TODO: 优化
-let userSelecting = false
-function lock() {
-  userSelecting = true
-}
+const { userAction, isUserActive } = useUserAction()
 
-/**
- * @param preferredValue 选择时传入刚提交的值，避免 nextTick 时 props.modelValue 尚未回传而用旧值覆盖高亮/标签
- */
-function unlock(preferredValue?: any) {
-  nextTick(() => {
-    userSelecting = false
-    // 选择/清除会同步重建选项列表（临时项转正、查询串清空），
-    // 重建触发的回显在锁定期间被跳过，解锁后按最新列表重同步一次，
-    // 避免高亮停留在选择前的旧索引上
-    const value = preferredValue !== undefined ? preferredValue : props.modelValue
-    syncSelected(value, options.value)
-  })
+/** 更新内部文案；值变化时单向 emit update:text */
+function setLabel(next?: string) {
+  if (label.value === next) return
+  label.value = next
+  emit('update:text', next)
 }
 
-/** 按 modelValue 与选项列表同步高亮索引、选中项与显示标签 */
-function syncSelected(modelValue: any, options: Record<string, any>[] | undefined) {
+/** 按 modelValue 与完整选项列表同步高亮索引、选中项与显示标签（外部回显用，O(n)） */
+function syncSelected(modelValue: any, sourceOptions: Record<string, any>[] | undefined) {
   // 查询输入期间高亮第一项（创建模式下通常是临时项，便于回车创建）
   if (queryString.value) {
-    currentIndex.value = options?.length ? 0 : -1
+    currentIndex.value = options.value.length ? 0 : -1
     return
   }
 
-  if (!options?.length) return
+  if (!sourceOptions?.length) return
 
   if (modelValue !== undefined && modelValue !== null && 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.value) : undefined
+    currentIndex.value = sourceOptions.findIndex(
+      (option) => o(option).get(valueKey.value) === modelValue
+    )
+    selected.value = currentIndex.value >= 0 ? sourceOptions[currentIndex.value] : undefined
+    setLabel(selected.value ? o(selected.value).get(labelKey.value) : undefined)
   } else {
     currentIndex.value = -1
     selected.value = undefined
-    label.value = undefined
+    setLabel(undefined)
   }
 }
 
-// 回显
+// 回显：以 allOptions 匹配，避免过滤列表缺项时清掉已选文案；用户动作期内跳过
 watch(
-  [() => props.modelValue, options],
-  ([modelValue, options]) => {
-    if (userSelecting) return
-    syncSelected(modelValue, options)
+  [() => props.modelValue, allOptions],
+  ([modelValue]) => {
+    if (isUserActive()) return
+    syncSelected(modelValue, allOptions.value)
   },
   { immediate: true }
 )
 
+// 过滤时单独同步高亮（allOptions 不变，不会触发上方回显 watch）
+watch([queryString, options], () => {
+  if (!queryString.value) return
+  currentIndex.value = options.value.length ? 0 : -1
+})
+
 const baseVirtualEnabled = computed(() => options.value.length > 80)
 const virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)
 
@@ -364,14 +361,13 @@ const handleDropdownVisible = (visible: boolean) => {
   }
 }
 
-/** 单选 */
-const handleSelect = (option: Record<string, any>, _index: number) => {
-  lock()
+/** 单选：用户动作内 O(1) 写入值与文案，跳过 modelValue 回显的 O(n) 查找 */
+const handleSelect = userAction((option: Record<string, any>, _index: number) => {
   const value = option?.[valueKey.value]
   selected.value = option
 
   emit('update:modelValue', value)
-  label.value = option?.[labelKey.value]
+  setLabel(option?.[labelKey.value])
   emit('change', option)
   if (option.__isTemp) {
     // 转正后列表同步重建为完整源（临时项置顶索引失效），必须按 value 重定位
@@ -386,21 +382,17 @@ const handleSelect = (option: Record<string, any>, _index: number) => {
     selected.value = options.value[currentIndex.value]
   }
   dropdownRef.value?.close()
-
-  unlock(value)
-}
+})
 
 /** 清除选项 */
-const handleClear = () => {
-  lock()
+const handleClear = userAction(() => {
   selected.value = undefined
   currentIndex.value = -1
-  label.value = undefined
+  setLabel(undefined)
   clearCreatedOptions()
   emit('update:modelValue', undefined)
   emit('change', undefined)
-  unlock(null)
-}
+})
 
 function getCurrentEl() {
   return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined

package/src/components/tree-select/__test__/tree-select.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref, type Ref } from 'vue'
+
+import UTreeSelect from '../tree-select.vue'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const treeData = [
+  {
+    label: '北京',
+    value: 'beijing',
+    children: [
+      { label: '朝阳区（最新）', value: 'chaoyang' },
+      { label: '海淀区（最新）', value: 'haidian' }
+    ]
+  },
+  { label: '上海（最新）', value: 'shanghai' }
+]
+
+function mountTreeSelect(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue) as Ref<string | number | undefined>
+  const data = ref(props.data ?? treeData)
+  const texts: (string | undefined)[] = []
+
+  const app = createApp({
+    render() {
+      return h(UTreeSelect, {
+        ...props,
+        modelValue: model.value,
+        data: data.value,
+        expandAll: true,
+        'onUpdate:modelValue': (value?: string | number) => {
+          model.value = value
+        },
+        'onUpdate:text': (text?: string) => {
+          texts.push(text)
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    data,
+    texts,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+async function openDropdown(host: HTMLElement) {
+  const input = host.querySelector('input')!
+  input.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  for (let attempt = 0; attempt < 20; attempt++) {
+    await nextTick()
+    await sleep(25)
+    if (queryNodeContents().length > 0) return
+  }
+}
+function queryNodeContents() {
+  return [...document.body.querySelectorAll<HTMLElement>('.u-tree__node-content')]
+}
+
+async function clickNodeByLabel(label: string) {
+  const node = queryNodeContents().find((el) => el.textContent?.includes(label))
+  expect(node, `tree node "${label}" not found`).toBeTruthy()
+  node!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(50)
+}
+
+describe('UTreeSelect', () => {
+  it('emits update:text when modelValue echoes against data', async () => {
+    const { host, texts, unmount } = mountTreeSelect({ modelValue: 'chaoyang' })
+
+    try {
+      await nextTick()
+      expect(texts.at(-1)).toBe('朝阳区（最新）')
+      expect(host.querySelector('input')!.value).toBe('朝阳区（最新）')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits update:text after data arrives for an existing modelValue', async () => {
+    const { host, data, texts, unmount } = mountTreeSelect({ modelValue: 'shanghai', data: [] })
+
+    try {
+      await nextTick()
+      expect(texts).toHaveLength(0)
+
+      data.value = treeData
+      await nextTick()
+      await nextTick()
+
+      expect(texts.at(-1)).toBe('上海（最新）')
+      expect(host.querySelector('input')!.value).toBe('上海（最新）')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('emits update:text on user select and clear', async () => {
+    const { host, model, texts, unmount } = mountTreeSelect({
+      // filterable 下点击 input 会显式 open，避免非过滤态依赖冒泡开合的不稳定
+      filterable: true
+    })
+
+    try {
+      await openDropdown(host)
+      await clickNodeByLabel('上海（最新）')
+      expect(model.value).toBe('shanghai')
+      expect(texts.at(-1)).toBe('上海（最新）')
+
+      // 清除：父级清空值时回显同步发出 update:text
+      model.value = undefined
+      await nextTick()
+      await nextTick()
+      expect(texts.at(-1)).toBeUndefined()
+      expect(host.querySelector('input')!.value).toBe('')
+    } finally {
+      unmount()
+    }
+  })
+})