@veltra/desktop 1.3.5 → 1.3.6

package/src/components/select/select.vue

@@ -13,44 +13,48 @@
     :width="width"
     @keydown="handleKeydown"
     @update:visible="handleDropdownVisible"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
   >
     <!-- 触发 -->
     <template #trigger>
       <u-input
+        ref="inputRef"
         :size="size"
         :disabled="disabled"
-        :placeholder="placeholder"
-        :clearable="clearable"
-        :model-value="displayedValue"
-        @clear="handleClear"
+        :placeholder="inputPlaceholder"
+        :clearable="false"
+        :model-value="inputValue"
+        @update:model-value="handleQueryInput"
         @keydown="handleKeydown"
-        native-readonly
+        :native-readonly="!filterable || !querying"
+        @click.capture="handleTriggerClickCapture"
       >
         <template #prefix v-if="$slots.prefix">
           <slot name="prefix" />
         </template>
 
         <template #suffix>
-          <u-icon :class="cls.e('arrow')">
-            <ArrowDown />
-          </u-icon>
+          <transition name="zoom-in" mode="out-in">
+            <u-icon
+              v-if="showClear"
+              :class="cls.e('clear')"
+              title="清除"
+              key="clear"
+              @click.stop="handleClear"
+            >
+              <Close />
+            </u-icon>
+            <u-icon v-else :class="cls.e('arrow')" key="arrow">
+              <ArrowDown />
+            </u-icon>
+          </transition>
         </template>
       </u-input>
     </template>
 
     <!-- 下拉内容 -->
     <template #content>
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="cls.e('content-filter')">
-        <u-input placeholder="输入关键字进行搜索" tabindex="0" v-focus v-model="queryString">
-          <template #suffix>
-            <u-icon>
-              <Search />
-            </u-icon>
-          </template>
-        </u-input>
-      </div>
-
       <!--
         单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；
         此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。
@@ -117,17 +121,17 @@
 <script lang="ts" setup>
 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 { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef, watch } from 'vue'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type {
   SelectEmits,
   SelectProps,
   _SelectExposed,
   DropdownExposed,
+  InputExposed,
   ScrollExposed
 } from '../../types'
 import { UDropdown } from '../dropdown'
@@ -184,6 +188,7 @@ const displayedValue = computed(() => {
 
 const dropdownRef = shallowRef<DropdownExposed>()
 const scrollRef = shallowRef<ScrollExposed>()
+const inputRef = useTemplateRef<InputExposed>('inputRef')
 
 const filterable = computed(() => {
   return props.filterable || typeof props.options === 'function'
@@ -193,37 +198,101 @@ const { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions }
   props
 })
 
+const dropdownVisible = shallowRef(false)
+
+/**
+ * 是否处于查询态：决定触发输入框显示查询串还是选中标签。
+ * 与面板可见状态解耦 —— 选择后立即退出查询态，
+ * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。
+ */
+const querying = shallowRef(false)
+
+/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
+const inputValue = computed(() => {
+  if (filterable.value && querying.value) return queryString.value
+  return displayedValue.value
+})
+
+/** 查询态下已选标签降级为占位提示 */
+const inputPlaceholder = computed(() => {
+  if (filterable.value && querying.value && displayedValue.value) {
+    return displayedValue.value
+  }
+  return props.placeholder
+})
+
+function handleQueryInput(value: string) {
+  if (!filterable.value) return
+  queryString.value = value
+}
+
+const hovered = shallowRef(false)
+
+/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && hovered.value && !!displayedValue.value
+})
+
+/**
+ * 过滤模式下拦截输入区域的点击：
+ * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。
+ * 非输入区域（箭头、留白）放行，维持原开合行为。
+ */
+function handleTriggerClickCapture(e: MouseEvent) {
+  if (!filterable.value || disabled.value) return
+  if (!(e.target instanceof HTMLInputElement)) return
+
+  e.stopPropagation()
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
 // TODO: 优化
 let userSelecting = false
 function lock() {
   userSelecting = true
 }
 
-function unlock() {
+/**
+ * @param preferredValue 选择时传入刚提交的值，避免 nextTick 时 props.modelValue 尚未回传而用旧值覆盖高亮/标签
+ */
+function unlock(preferredValue?: any) {
   nextTick(() => {
     userSelecting = false
+    // 选择/清除会同步重建选项列表（临时项转正、查询串清空），
+    // 重建触发的回显在锁定期间被跳过，解锁后按最新列表重同步一次，
+    // 避免高亮停留在选择前的旧索引上
+    const value = preferredValue !== undefined ? preferredValue : props.modelValue
+    syncSelected(value, options.value)
   })
 }
 
+/** 按 modelValue 与选项列表同步高亮索引、选中项与显示标签 */
+function syncSelected(modelValue: any, options: Record<string, any>[] | undefined) {
+  // 查询输入期间高亮第一项（创建模式下通常是临时项，便于回车创建）
+  if (queryString.value) {
+    currentIndex.value = options?.length ? 0 : -1
+    return
+  }
+
+  if (!options?.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
+  } else {
+    currentIndex.value = -1
+    selected.value = undefined
+    label.value = undefined
+  }
+}
+
 // 回显
 watch(
   [() => props.modelValue, options],
   ([modelValue, options]) => {
     if (userSelecting) return
-
-    if (!options?.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
-    } else {
-      currentIndex.value = -1
-      selected.value = undefined
-      label.value = undefined
-    }
+    syncSelected(modelValue, options)
   },
   { immediate: true }
 )
@@ -275,10 +344,16 @@ watch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {
   }
 })
 
-const dropdownVisible = shallowRef(false)
-
-watch(dropdownVisible, (v) => {
-  if (!v) {
+watch(dropdownVisible, (visible) => {
+  if (visible) {
+    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询
+    if (filterable.value) {
+      queryString.value = ''
+      querying.value = true
+      nextTick(() => inputRef.value?.el?.focus())
+    }
+  } else {
+    querying.value = false
     queryString.value = ''
   }
 })
@@ -290,20 +365,29 @@ const handleDropdownVisible = (visible: boolean) => {
 }
 
 /** 单选 */
-const handleSelect = (option: Record<string, any>, index: number) => {
+const handleSelect = (option: Record<string, any>, _index: number) => {
   lock()
+  const value = option?.[valueKey.value]
   selected.value = option
 
-  emit('update:modelValue', option?.[valueKey.value])
+  emit('update:modelValue', value)
   label.value = option?.[labelKey.value]
   emit('change', option)
   if (option.__isTemp) {
+    // 转正后列表同步重建为完整源（临时项置顶索引失效），必须按 value 重定位
     temOptionsToCreatedOptions()
   }
-  currentIndex.value = index
+  // 立即退出查询态，输入框同步恢复显示选中标签
+  querying.value = false
+  queryString.value = ''
+  // 按当前列表定位高亮，避免创建项转正后仍停留在点击时的临时索引（通常为 0）
+  currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value)
+  if (currentIndex.value >= 0) {
+    selected.value = options.value[currentIndex.value]
+  }
   dropdownRef.value?.close()
 
-  unlock()
+  unlock(value)
 }
 
 /** 清除选项 */
@@ -315,7 +399,7 @@ const handleClear = () => {
   clearCreatedOptions()
   emit('update:modelValue', undefined)
   emit('change', undefined)
-  unlock()
+  unlock(null)
 }
 
 function getCurrentEl() {

package/src/components/select/style.scss

@@ -5,17 +5,8 @@ $root-name: select;
 @include m.b($root-name) {
   width: 100%;
 
-  @include m.e(content-filter) {
-    border-bottom: 1px solid fn.use-var(border, color);
-    background-color: fn.use-var(bg-color, middle);
-
-    @include m.bem(input) {
-      box-shadow: none;
-    }
-  }
-
   @include m.e(options) {
-    max-height: 180px;
+    max-height: 240px;
   }
 
   @include m.is(disabled) {
@@ -24,6 +15,10 @@ $root-name: select;
     }
   }
 
+  @include m.e(clear) {
+    cursor: pointer;
+  }
+
   @include m.e(options-wrap) {
     list-style: none;
     margin: 0;
@@ -100,10 +95,6 @@ $root-name: select;
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
-
       @include m.bem($root-name, options) {
         padding: fn.use-var(gap, $size);
       }

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

@@ -23,8 +23,8 @@ interface UseOptionsReturned {
 
 // 允许创建的实现
 // 1. 在过滤时将选项加入待选列表中
-// 2. 如果选择了改临时选项，则取消该选项的临时标记
-// 3. 如果第二次重新选择
+// 2. 如果选择了该临时选项，则取消该选项的临时标记并并入已创建列表
+// 3. 多次创建累计保留，已创建项参与后续过滤匹配
 
 export function useOptions(o: Options): UseOptionsReturned {
   const { props } = o
@@ -39,14 +39,38 @@ export function useOptions(o: Options): UseOptionsReturned {
   // 创建的选项
   const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])
 
+  function getSourceOptions(propsOptions: SelectProps['options']) {
+    if (typeof propsOptions === 'function') return remoteOptions.value
+    return [...createdOptions.value, ...(propsOptions ?? [])]
+  }
+
+  /** 无查询时同步展示完整列表（含已创建项），避免选择后等高亮索引错位 */
+  function resetToSourceOptions() {
+    const sourceOptions = getSourceOptions(props.options)
+    if (typeof props.options === 'function') {
+      setTempOption('', remoteOptions.value)
+      return
+    }
+    filteredOptions.value = sourceOptions
+    tempOptions.value = []
+  }
+
   function temOptionsToCreatedOptions() {
-    createdOptions.value = tempOptions.value.map((item) => {
-      return { ...item, __isTemp: false }
-    })
+    if (!tempOptions.value.length) return
+
+    createdOptions.value = [
+      ...createdOptions.value,
+      ...tempOptions.value.map((item) => {
+        return { ...item, __isTemp: false as const }
+      })
+    ]
+    // 立即清掉临时项并回到完整列表，不等待过滤防抖
+    resetToSourceOptions()
   }
 
   function clearCreatedOptions() {
     createdOptions.value = []
+    resetToSourceOptions()
   }
 
   const setTempOption = (qs: string, options?: Record<string, any>[]) => {
@@ -62,59 +86,79 @@ export function useOptions(o: Options): UseOptionsReturned {
         })
       : false
 
-    if (!exactMatch) {
-      tempOptions.value = [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]
-    }
+    tempOptions.value = exactMatch ? [] : [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]
   }
 
   const allOptions = computed(() => {
     const { options } = props
     if (typeof options === 'function') return remoteOptions.value
-    return options ?? []
+    return [...createdOptions.value, ...(options ?? [])]
   })
 
-  /** 展示的选项 */
+  /**
+   * 展示的选项
+   * @description 已创建选项并入过滤数据源参与匹配；临时选项（待创建）固定置顶
+   */
   const options = computed(() => {
     const { options } = props
 
     if (typeof options === 'function') return remoteOptions.value
 
-    const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value
+    return [...tempOptions.value, ...filteredOptions.value]
+  })
+
+  const applyLocalFilter = (qs: string, propsOptions: Record<string, any>[] | undefined) => {
+    const labelKey = fieldKey(props.labelKey, 'label')
+    const sourceOptions = [...createdOptions.value, ...(propsOptions ?? [])]
 
-    if (!options) {
-      return prependOptions
+    if (!qs) {
+      filteredOptions.value = sourceOptions
+      setTempOption(qs, filteredOptions.value)
+      return
     }
 
-    return [...prependOptions, ...filteredOptions.value]
-  })
+    const _filteredOptions = sourceOptions.filter((item) => {
+      return chainObj(item).get(labelKey)?.includes(qs) ?? false
+    })
+
+    setTempOption(qs, _filteredOptions)
+    filteredOptions.value = _filteredOptions
+  }
+
+  // 仅对「有查询词」的本地过滤做防抖；清空查询同步生效，避免选中后列表延迟重建
+  const debouncedLocalFilter = debounce(
+    (qs: string, propsOptions: Record<string, any>[] | undefined) => {
+      // 防抖回调可能晚于清空查询到达，以当前 queryString 为准
+      if (!queryString.value) {
+        applyLocalFilter('', propsOptions)
+        return
+      }
+      applyLocalFilter(qs, propsOptions)
+    },
+    200
+  )
+
+  const debouncedRemoteFilter = debounce(async (qs: string, propsOptions: Function) => {
+    const options = await propsOptions(queryString.value)
+    remoteOptions.value = options
+    setTempOption(queryString.value, options)
+  }, 200)
 
-  // TODO: 如有性能问题可以考虑优化
   watch(
-    [queryString, () => props.options],
-    debounce(async ([qs, propsOptions]) => {
+    [queryString, () => props.options, createdOptions],
+    ([qs, propsOptions]) => {
       if (typeof propsOptions === 'function') {
-        const options = await propsOptions(qs)
-        remoteOptions.value = options
-        setTempOption(qs, options)
-      } else {
-        // 当选项不是函数时，可以创建选项
-        const labelKey = fieldKey(props.labelKey, 'label')
-
-        if (!qs) {
-          filteredOptions.value = propsOptions ?? []
-          setTempOption(qs, filteredOptions.value)
-          return
-        }
-
-        const _filteredOptions =
-          propsOptions?.filter((item) => {
-            return chainObj(item).get(labelKey)?.includes(qs) ?? false
-          }) ?? []
-
-        setTempOption(qs, _filteredOptions)
-        filteredOptions.value = _filteredOptions
+        debouncedRemoteFilter(qs, propsOptions)
+        return
       }
-    }, 200),
+
+      if (!qs) {
+        applyLocalFilter('', propsOptions)
+        return
+      }
+
+      debouncedLocalFilter(qs, propsOptions)
+    },
     { immediate: true }
   )
 

package/src/components/textarea/style.scss

@@ -57,6 +57,7 @@ $root-name: textarea;
 
   @include m.is(focus) {
     border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
   }
 
   @include m.is(disabled) {

package/src/components/tree-select/style.scss

@@ -30,8 +30,8 @@ $root-name: tree-select;
     background: none;
   }
 
-  @include m.e(filter) {
-    margin-bottom: 4px;
+  @include m.e(clear) {
+    cursor: pointer;
   }
 
   @include m.e(content-header) {
@@ -42,17 +42,13 @@ $root-name: tree-select;
   }
 
   @include m.e(content-tree) {
-    max-height: 200px;
+    max-height: 240px;
   }
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
-
       @include m.bem($root-name, content-tree) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+        padding: fn.use-var(gap, $size);
       }
 
       @include m.bem($root-name, empty) {

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

@@ -7,38 +7,46 @@
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
     :content-style="contentStyle"
     ref="dropdownRef"
+    v-model:visible="dropdownVisible"
     :min-width="minWidth"
     :width="width"
     :disabled="disabled"
     @update:visible="handleDropdownVisible"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
   >
     <template #trigger>
       <u-input
+        ref="inputRef"
         :size="size"
         :disabled="disabled"
-        :placeholder="placeholder"
-        :clearable="clearable"
-        :model-value="text ?? (model ? label : undefined)"
-        @clear="handleClear"
-        native-readonly
+        :placeholder="inputPlaceholder"
+        :clearable="false"
+        :model-value="inputValue"
+        @update:model-value="handleQueryInput"
+        :native-readonly="!filterable || !querying"
+        @click.capture="handleTriggerClickCapture"
       >
         <template #prefix v-if="$slots.prefix">
           <slot name="prefix" />
         </template>
         <template #suffix>
-          <u-icon :class="cls.e('arrow')"><ArrowDown /></u-icon>
+          <transition name="zoom-in" mode="out-in">
+            <u-icon
+              v-if="showClear"
+              :class="cls.e('clear')"
+              title="清除"
+              key="clear"
+              @click.stop="handleClear"
+            >
+              <Close />
+            </u-icon>
+            <u-icon v-else :class="cls.e('arrow')" key="arrow"><ArrowDown /></u-icon>
+          </transition>
         </template>
       </u-input>
     </template>
     <template #content>
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="[cls.e('content-filter'), cls.m(size)]">
-        <u-input placeholder="输入关键字进行过滤" v-model="qs">
-          <template #suffix>
-            <u-icon><Search /></u-icon>
-          </template>
-        </u-input>
-      </div>
       <!-- 菜单列表 -->
 
       <u-tree
@@ -62,12 +70,12 @@
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
-import { ArrowDown, Search } from '@veltra/icons/normal'
+import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef, watch } from 'vue'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
 
-import type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'
+import type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } from '../../types'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
@@ -127,6 +135,68 @@ const model = defineModel<string | number>()
 
 const label = shallowRef<string>()
 
+const dropdownVisible = shallowRef(false)
+
+/**
+ * 是否处于查询态：决定触发输入框显示查询串还是选中标签。
+ * 与面板可见状态解耦 —— 选择后立即退出查询态，
+ * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。
+ */
+const querying = shallowRef(false)
+
+const inputRef = useTemplateRef<InputExposed>('inputRef')
+
+/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
+const inputValue = computed(() => {
+  if (props.filterable && querying.value) return qs.value
+  return props.text ?? (model.value ? label.value : undefined)
+})
+
+/** 查询态下已选标签降级为占位提示 */
+const inputPlaceholder = computed(() => {
+  const display = props.text ?? (model.value ? label.value : undefined)
+  if (props.filterable && querying.value && display) {
+    return display
+  }
+  return props.placeholder
+})
+
+function handleQueryInput(value: string) {
+  if (!props.filterable) return
+  qs.value = value
+}
+
+const hovered = shallowRef(false)
+
+/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */
+const showClear = computed(() => {
+  if (!props.clearable || disabled.value || !hovered.value) return false
+  return !!(props.text ?? (model.value ? label.value : undefined))
+})
+
+/**
+ * 过滤模式下拦截输入区域的点击：
+ * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。
+ * 非输入区域（箭头、留白）放行，维持原开合行为。
+ */
+function handleTriggerClickCapture(e: MouseEvent) {
+  if (!props.filterable || disabled.value) return
+  if (!(e.target instanceof HTMLInputElement)) return
+
+  e.stopPropagation()
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+watch(dropdownVisible, (visible) => {
+  if (visible && props.filterable) {
+    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询
+    querying.value = true
+    nextTick(() => inputRef.value?.el?.focus())
+  } else if (!visible) {
+    querying.value = false
+  }
+})
+
 const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
@@ -192,6 +262,9 @@ const handleSelect = (selected?: string | number, selectedData?: Record<string,
 
   emit('change', selectedData)
   emit('update:text', label.value)
+  // 立即退出查询态，输入框同步恢复显示选中标签
+  querying.value = false
+  qs.value = ''
   dropdownRef.value?.close()
 }