@veltra/desktop 1.3.7 → 1.3.9

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
 }