@veltra/desktop 1.7.18 → 1.8.0

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

@@ -218,4 +218,82 @@ describe('USelect', () => {
       unmount()
     }
   })
+
+  it('loads options from a remote function with loading state', async () => {
+    let resolveRemote!: (options: Record<string, any>[]) => void
+    const calls: string[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) => {
+        calls.push(qs)
+        return new Promise((resolve) => {
+          resolveRemote = resolve
+        })
+      }
+    })
+
+    try {
+      // 挂载即以空串调用一次
+      expect(calls).toEqual([''])
+
+      await openDropdown(host)
+      expect(document.body.querySelector('.u-select__loading')).toBeTruthy()
+      expect(queryOptions()).toHaveLength(0)
+
+      resolveRemote([{ label: '远程A', value: 'a' }])
+      await sleep(50)
+      expect(document.body.querySelector('.u-select__loading')).toBeFalsy()
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['远程A'])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('queries the remote function on input', async () => {
+    const calls: string[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) => {
+        calls.push(qs)
+        return Promise.resolve(
+          qs ? [{ label: '上海', value: 'shanghai' }] : [{ label: '北京', value: 'beijing' }]
+        )
+      }
+    })
+
+    try {
+      await openDropdown(host)
+      await typeQuery(host, '上海')
+      expect(calls).toEqual(['', '上海'])
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['上海'])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('discards stale remote responses when a newer query resolves first', async () => {
+    const pending: ((options: Record<string, any>[]) => void)[] = []
+    const { host, unmount } = mountSelect({
+      options: (qs: string) =>
+        new Promise((resolve) => {
+          pending.push(resolve)
+        })
+    })
+
+    try {
+      await openDropdown(host)
+      await typeQuery(host, '北')
+      expect(pending).toHaveLength(2)
+
+      // 新查询先返回
+      pending[1]!([{ label: '北京', value: 'beijing' }])
+      await sleep(20)
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['北京'])
+
+      // 慢的旧响应（初始空串查询）后返回，不能覆盖新结果
+      pending[0]!([{ label: '旧数据', value: 'old' }])
+      await sleep(20)
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['北京'])
+    } finally {
+      unmount()
+    }
+  })
 })

package/src/components/select/select.vue

@@ -58,8 +58,11 @@
         单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；
         此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。
       -->
+      <div v-if="loading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <u-scroll
-        v-if="options.length"
+        v-else-if="options.length"
         tag="ul"
         :class="cls.e('options')"
         ref="scrollRef"
@@ -137,6 +140,7 @@ import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
+import { ULoading } from '../loading'
 import { UScroll } from '../scroll'
 import { useKeyboard } from './use-keyboard'
 import { useOptions } from './use-options'
@@ -194,8 +198,14 @@ const filterable = computed(() => {
   return props.filterable || typeof props.options === 'function'
 })
 
-const { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions } =
-  useOptions({ props })
+const {
+  queryString,
+  loading,
+  options,
+  allOptions,
+  temOptionsToCreatedOptions,
+  clearCreatedOptions
+} = useOptions({ props })
 
 const dropdownVisible = shallowRef(false)
 

package/src/components/select/style.scss

@@ -116,4 +116,10 @@ $root-name: select;
     text-align: center;
     padding: fn.use-var(gap, small) 0;
   }
+
+  @include m.e(loading) {
+    // 与选项内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
 }

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

@@ -11,6 +11,8 @@ interface Options {
 interface UseOptionsReturned {
   /** 查询字符串 */
   queryString: ShallowRef<string>
+  /** 远程搜索加载中 */
+  loading: ShallowRef<boolean>
   /** 选项 */
   options: ComputedRef<Record<string, any>[]>
   /** 所有选项 */
@@ -32,6 +34,10 @@ export function useOptions(o: Options): UseOptionsReturned {
   /** 筛选 */
   const queryString = shallowRef('')
 
+  const loading = shallowRef(false)
+  /** 远程请求序号；响应返回时序号不一致说明已有更新的请求，结果作废 */
+  let remoteSeq = 0
+
   const remoteOptions = shallowRef<Record<string, any>[]>([])
   const filteredOptions = shallowRef<Record<string, any>[]>([])
   // 临时选项
@@ -139,9 +145,17 @@ export function useOptions(o: Options): UseOptionsReturned {
   )
 
   const debouncedRemoteFilter = debounce(async (qs: string, propsOptions: Function) => {
-    const options = await propsOptions(queryString.value)
-    remoteOptions.value = options
-    setTempOption(queryString.value, options)
+    const seq = ++remoteSeq
+    loading.value = true
+    try {
+      const options = await propsOptions(qs)
+      // 响应到达时查询词可能已变化或已有更新的请求，过期结果直接丢弃
+      if (seq !== remoteSeq || qs !== queryString.value) return
+      remoteOptions.value = options ?? []
+      setTempOption(qs, remoteOptions.value)
+    } finally {
+      if (seq === remoteSeq) loading.value = false
+    }
   }, 200)
 
   watch(
@@ -162,5 +176,12 @@ export function useOptions(o: Options): UseOptionsReturned {
     { immediate: true }
   )
 
-  return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }
+  return {
+    queryString,
+    loading,
+    options,
+    allOptions,
+    temOptionsToCreatedOptions,
+    clearCreatedOptions
+  }
 }

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

@@ -65,6 +65,38 @@ async function openDropdown(host: HTMLElement) {
     if (queryNodeContents().length > 0) return
   }
 }
+
+/** 打开面板并等待进入加载态（远程数据未返回前树不渲染） */
+async function openPanelWithLoading(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 (document.body.querySelector('.u-tree-select__loading') || queryNodeContents().length > 0) {
+      return
+    }
+  }
+}
+
+async function typeQuery(host: HTMLElement, text: string) {
+  const input = host.querySelector('input')!
+  input.focus()
+  // 清空查询串（查询态下 model 绑定查询串）
+  input.value = ''
+  input.dispatchEvent(
+    new InputEvent('input', { bubbles: true, data: '', inputType: 'deleteContentBackward' })
+  )
+  await nextTick()
+
+  input.value = text
+  input.dispatchEvent(
+    new InputEvent('input', { bubbles: true, data: text, inputType: 'insertText' })
+  )
+  await nextTick()
+  // 远程搜索防抖 200ms
+  await sleep(250)
+}
 function queryNodeContents() {
   return [...document.body.querySelectorAll<HTMLElement>('.u-tree__node-content')]
 }
@@ -130,4 +162,88 @@ describe('UTreeSelect', () => {
       unmount()
     }
   })
+
+  it('loads default tree remotely on mount with loading state', async () => {
+    let resolveRemote!: (data: Record<string, any>[]) => void
+    const calls: string[] = []
+    const { host, unmount } = mountTreeSelect({
+      data: (qs: string) => {
+        calls.push(qs)
+        return new Promise((resolve) => {
+          resolveRemote = resolve
+        })
+      }
+    })
+
+    try {
+      // 挂载即以空串调用一次
+      expect(calls).toEqual([''])
+
+      await openPanelWithLoading(host)
+      expect(document.body.querySelector('.u-tree-select__loading')).toBeTruthy()
+      expect(queryNodeContents()).toHaveLength(0)
+
+      resolveRemote(treeData)
+      await sleep(50)
+      expect(document.body.querySelector('.u-tree-select__loading')).toBeFalsy()
+      expect(queryNodeContents().length).toBeGreaterThan(0)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('queries the remote function on input and expands the result', async () => {
+    const calls: string[] = []
+    const { host, unmount } = mountTreeSelect({
+      data: (qs: string) => {
+        calls.push(qs)
+        return Promise.resolve(qs ? [treeData[0]!] : treeData)
+      }
+    })
+
+    try {
+      // 初始空串加载完成
+      await sleep(50)
+      expect(calls).toEqual([''])
+
+      await openDropdown(host)
+      await typeQuery(host, '朝阳区')
+      expect(calls).toEqual(['', '朝阳区'])
+
+      const contents = queryNodeContents()
+      expect(contents.some((el) => el.textContent?.includes('朝阳区（最新）'))).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('discards stale remote responses when a newer query resolves first', async () => {
+    const pending: ((data: Record<string, any>[]) => void)[] = []
+    const { host, unmount } = mountTreeSelect({
+      data: (qs: string) =>
+        new Promise((resolve) => {
+          pending.push(resolve)
+        })
+    })
+
+    try {
+      await openPanelWithLoading(host)
+      expect(document.body.querySelector('.u-tree-select__loading')).toBeTruthy()
+
+      await typeQuery(host, '上海')
+      expect(pending).toHaveLength(2)
+
+      // 新查询先返回
+      pending[1]!([treeData[1]!])
+      await sleep(20)
+      expect(queryNodeContents().some((el) => el.textContent?.includes('上海'))).toBe(true)
+
+      // 慢的旧响应（初始空串查询）后返回，不能覆盖新结果
+      pending[0]!(treeData)
+      await sleep(20)
+      expect(queryNodeContents().some((el) => el.textContent?.includes('北京'))).toBe(false)
+    } finally {
+      unmount()
+    }
+  })
 })

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

@@ -45,6 +45,12 @@ $root-name: tree-select;
     max-height: 240px;
   }
 
+  @include m.e(loading) {
+    // 与树内容区同高，加载期间保持面板形态，避免塌缩成贴着输入框的小条
+    @include m.flex($justify: center, $align: center);
+    min-height: 240px;
+  }
+
   @include m.e(panel) {
     @include m.size using ($size) {
       @include m.bem($root-name, content-tree) {

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

@@ -49,8 +49,13 @@
     <template #content>
       <!-- 菜单列表 -->
 
+      <div v-if="remoteLoading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <u-tree
+        v-else
         v-bind="treeProps"
+        :data="treeData"
         :selected="model"
         @update:selected="handleSelect"
         ref="treeRef"
@@ -68,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dfs, o } from '@cat-kit/core'
+import { debounce, dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
@@ -79,6 +84,7 @@ import type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } from
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
+import { ULoading } from '../loading'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
 
@@ -113,6 +119,7 @@ const treeProps = computed(() => {
     'disabled',
     'label',
     'readonly',
+    'data',
     'contentClass',
     'contentStyle',
     'minWidth',
@@ -125,11 +132,56 @@ const cls = bem('tree-select')
 const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
 const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
 
-/**过滤 */
+/** 是否可搜索：显式声明或数据源为远程函数 */
+const filterable = computed(() => props.filterable || typeof props.data === 'function')
+
+/** 过滤 */
 const qs = shallowRef('')
-watch(qs, (qs) => {
-  treeRef.value?.filter(qs)
-})
+
+const treeRef = shallowRef<TreeExposed>()
+
+/** 远程搜索返回的树数据 */
+const remoteData = shallowRef<Record<string, any>[]>()
+
+/** 面板渲染的树数据：data 为函数时来自远程搜索，否则为静态数据 */
+const treeData = computed(() => (typeof props.data === 'function' ? remoteData.value : props.data))
+
+const remoteLoading = shallowRef(false)
+/** 远程请求序号；响应返回时序号不一致说明已有更新的请求，结果作废 */
+let remoteSeq = 0
+
+const debouncedRemoteSearch = debounce(
+  async (
+    query: string,
+    dataFn: (qs: string) => Promise<Record<string, any>[]> | Record<string, any>[]
+  ) => {
+    const seq = ++remoteSeq
+    remoteLoading.value = true
+    try {
+      const data = await dataFn(query)
+      // 响应到达时查询词可能已变化或已有更新的请求，过期结果直接丢弃
+      if (seq !== remoteSeq || query !== qs.value) return
+      remoteData.value = data ?? []
+      // 搜索结果展示完整命中路径，与本地过滤自动展开祖先的行为对齐
+      if (query) nextTick(() => treeRef.value?.expandAll())
+    } finally {
+      if (seq === remoteSeq) remoteLoading.value = false
+    }
+  },
+  200
+)
+
+watch(
+  [qs, () => props.data],
+  ([query, data]) => {
+    if (typeof data === 'function') {
+      debouncedRemoteSearch(query, data)
+      return
+    }
+    treeRef.value?.filter(query)
+  },
+  { immediate: true }
+)
 
 const model = defineModel<string | number>()
 
@@ -156,21 +208,21 @@ function setLabel(next?: string) {
 
 /** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
 const inputValue = computed(() => {
-  if (props.filterable && querying.value) return qs.value
+  if (filterable.value && querying.value) return qs.value
   return model.value || model.value === 0 ? label.value : undefined
 })
 
 /** 查询态下已选标签降级为占位提示 */
 const inputPlaceholder = computed(() => {
   const display = model.value || model.value === 0 ? label.value : undefined
-  if (props.filterable && querying.value && display) {
+  if (filterable.value && querying.value && display) {
     return display
   }
   return props.placeholder
 })
 
 function handleQueryInput(value: string) {
-  if (!props.filterable) return
+  if (!filterable.value) return
   qs.value = value
 }
 
@@ -188,7 +240,7 @@ const showClear = computed(() => {
  * 非输入区域（箭头、留白）放行，维持原开合行为。
  */
 function handleTriggerClickCapture(e: MouseEvent) {
-  if (!props.filterable || disabled.value) return
+  if (!filterable.value || disabled.value) return
   if (!(e.target instanceof HTMLInputElement)) return
 
   e.stopPropagation()
@@ -196,7 +248,7 @@ function handleTriggerClickCapture(e: MouseEvent) {
 }
 
 watch(dropdownVisible, (visible) => {
-  if (visible && props.filterable) {
+  if (visible && filterable.value) {
     // 面板展开后进入查询态并聚焦输入框，可以立即输入查询
     querying.value = true
     nextTick(() => inputRef.value?.el?.focus())
@@ -209,8 +261,6 @@ const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 
-const treeRef = shallowRef<TreeExposed>()
-
 const dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()
 
 const { userAction, isUserActive } = useUserAction()
@@ -225,7 +275,7 @@ const handleClear = userAction(() => {
 
 /** 外部回显：按 data 查找 label（O(n)）；用户动作期内跳过 */
 watch(
-  [() => props.data, model],
+  [treeData, model],
   ([data, modelVal]) => {
     if (isUserActive()) return
     if (!data?.length || modelVal === undefined || modelVal === null || modelVal === '') {

package/src/types/dropdown.ts

@@ -8,6 +8,16 @@ export interface DropdownProps {
    * @default 'hover'
    */
   trigger?: 'hover' | 'click' | 'custom'
+  /**
+   * 弹出方向；空间不足时仍会自动翻转
+   * @default 'bottom'
+   */
+  direction?: 'top' | 'bottom' | 'left' | 'right'
+  /**
+   * 弹出对齐方式
+   * @default 'start'
+   */
+  alignment?: 'center' | 'start' | 'end'
   /**
    * 宽度
    * @default - 跟随触发宽度

package/src/types/multi-tree-select.ts

@@ -4,9 +4,20 @@ import type { CSSProperties } from 'vue'
 import type { TreeProps } from './tree'
 /** 树形多选组件组件属性 */
 export interface MultiTreeSelectProps
-  extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+  extends
+    FormComponentProps,
+    Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable' | 'data'> {
   modelValue?: (string | number)[]
 
+  /**
+   * 树数据
+   * @description 如果传入一个函数，那么filterable会被强制启用；
+   * 函数按查询词返回匹配的树，初始以空串调用一次（加载默认树）
+   */
+  data?:
+    | Record<string, any>[]
+    | ((qs: string) => Promise<Record<string, any>[]> | Record<string, any>[])
+
   /**自定义占位文字 */
   placeholder?: string
   /**

package/src/types/tree-select.ts

@@ -5,9 +5,20 @@ import type { TreeProps } from './tree'
 
 /** 树形选择器组件属性 */
 export interface TreeSelectProps
-  extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+  extends
+    FormComponentProps,
+    Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable' | 'data'> {
   modelValue?: string | number
 
+  /**
+   * 树数据
+   * @description 如果传入一个函数，那么filterable会被强制启用；
+   * 函数按查询词返回匹配的树，初始以空串调用一次（加载默认树）
+   */
+  data?:
+    | Record<string, any>[]
+    | ((qs: string) => Promise<Record<string, any>[]> | Record<string, any>[])
+
   /** 自定义占位文字 */
   placeholder?: string
   /**