@veltra/desktop 1.3.7 → 1.3.8

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()
+    }
+  })
+})

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

@@ -63,13 +63,13 @@
   </u-dropdown>
 
   <template v-else>
-    {{ text || label || FORM_EMPTY_CONTENT }}
+    {{ label || FORM_EMPTY_CONTENT }}
   </template>
 </template>
 
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
-import { useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
@@ -133,6 +133,7 @@ watch(qs, (qs) => {
 
 const model = defineModel<string | number>()
 
+/** 内部展示文案，仅由 data 推导；通过 update:text 单向通知父级 */
 const label = shallowRef<string>()
 
 const dropdownVisible = shallowRef(false)
@@ -146,15 +147,22 @@ const querying = shallowRef(false)
 
 const inputRef = useTemplateRef<InputExposed>('inputRef')
 
+/** 更新内部文案；值变化时单向 emit update:text */
+function setLabel(next?: string) {
+  if (label.value === next) return
+  label.value = next
+  emit('update:text', next)
+}
+
 /** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
 const inputValue = computed(() => {
   if (props.filterable && querying.value) return qs.value
-  return props.text ?? (model.value ? label.value : undefined)
+  return model.value || model.value === 0 ? label.value : undefined
 })
 
 /** 查询态下已选标签降级为占位提示 */
 const inputPlaceholder = computed(() => {
-  const display = props.text ?? (model.value ? label.value : undefined)
+  const display = model.value || model.value === 0 ? label.value : undefined
   if (props.filterable && querying.value && display) {
     return display
   }
@@ -171,7 +179,7 @@ const hovered = shallowRef(false)
 /** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */
 const showClear = computed(() => {
   if (!props.clearable || disabled.value || !hovered.value) return false
-  return !!(props.text ?? (model.value ? label.value : undefined))
+  return !!(model.value || model.value === 0 ? label.value : undefined)
 })
 
 /**
@@ -205,34 +213,35 @@ const treeRef = shallowRef<TreeExposed>()
 
 const dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()
 
-/**清空 */
-const handleClear = () => {
+const { userAction, isUserActive } = useUserAction()
+
+/** 清空 */
+const handleClear = userAction(() => {
   model.value = ''
-  label.value = undefined
+  setLabel(undefined)
   emit('clear')
   emit('change', undefined)
-  emit('update:text', '')
-}
+})
 
-let changedByEvent = false
+/** 外部回显：按 data 查找 label（O(n)）；用户动作期内跳过 */
 watch(
   [() => props.data, model],
-  ([data, model]) => {
-    if (changedByEvent) return
-    if (!data?.length || model === undefined) {
-      label.value = undefined
-      model = undefined
+  ([data, modelVal]) => {
+    if (isUserActive()) return
+    if (!data?.length || modelVal === undefined || modelVal === null || modelVal === '') {
+      setLabel(undefined)
       return
     }
 
-    let founded = false
+    let nextLabel: string | undefined
     const childrenKey = props.childrenKey ?? 'children'
     data.some((item) => {
+      let founded = false
       dfs(
         item,
         (v) => {
-          if (v[valueKey.value] === model) {
-            label.value = v[labelKey.value]
+          if (v[valueKey.value] === modelVal) {
+            nextLabel = v[labelKey.value]
             founded = true
             return true
           }
@@ -242,32 +251,29 @@ watch(
 
       return founded
     })
+    setLabel(nextLabel)
   },
   { immediate: true }
 )
 
-const handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {
-  changedByEvent = true
-  nextTick(() => {
-    changedByEvent = false
-  })
+/** 用户选择：O(1) 写入值与文案，跳过 data 回显查找 */
+const handleSelect = userAction(
+  (selected?: string | number, selectedData?: Record<string, any>) => {
+    model.value = selected ?? ''
 
-  model.value = selected ?? ''
+    if (selectedData) {
+      setLabel(o(selectedData).get(labelKey.value))
+    } else {
+      setLabel(undefined)
+    }
 
-  if (selectedData) {
-    label.value = o(selectedData).get(labelKey.value)
-  } else {
-    label.value = ''
+    emit('change', selectedData)
+    // 立即退出查询态，输入框同步恢复显示选中标签
+    querying.value = false
+    qs.value = ''
+    dropdownRef.value?.close()
   }
-
-  emit('change', selectedData)
-  emit('update:text', label.value)
-  // 立即退出查询态，输入框同步恢复显示选中标签
-  querying.value = false
-  qs.value = ''
-  dropdownRef.value?.close()
-}
-
+)
 const handleDropdownVisible = (visible: boolean) => {
   if (!visible) {
     qs.value = ''

package/src/types/select.ts

@@ -5,8 +5,6 @@ import type { CSSProperties, ShallowRef } from 'vue'
 export interface SelectProps extends FormComponentProps {
   /** 绑定值 */
   modelValue?: any
-  /** 文本内容 */
-  text?: string
   /**
    * 列表选项
    * @description 如果传入一个函数，那么filterable会被强制启用
@@ -55,8 +53,11 @@ export interface SelectProps extends FormComponentProps {
 }
 
 export 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/src/types/tree-select.ts

@@ -29,9 +29,6 @@ export interface TreeSelectProps
    */
   width?: string
 
-  /** 显示文本 */
-  text?: string
-
   /** 内容容器样式 */
   contentStyle?: CSSProperties | string
 
@@ -44,6 +41,10 @@ export 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
 }