@veltra/desktop 1.7.19 → 1.8.0

package/src/components/form/style.scss

@@ -3,15 +3,22 @@
 @use 'pkg:@veltra/styles/vars';
 
 @include m.b(form) {
+  // gap 走 CSS 而非 u-grid 内联样式，只读态才能覆盖行距
+  gap: 0 12px;
+
+  // 只读态：label 退为次级文本，值收进浅色圆角条；行距拉开让各项独立成块，避免粘连
   @include m.is(readonly) {
-    gap: 6px;
+    gap: 10px 12px;
 
     @include m.bem(form-item, label) {
-      background-color: fn.use-var(bg-color, top); // #fbfcfe;
+      color: fn.use-var(text-color, second);
     }
+
     @include m.bem(form-item, content) {
-      background-color: fn.use-var(bg-color, middle); // #f5f8fb;
-      padding: 0 8px;
+      padding: 4px 12px;
+      color: fn.use-var(text-color, main);
+      background-color: fn.use-var(bg-color, middle);
+      border-radius: fn.use-var(radius, default);
     }
   }
 

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

@@ -80,11 +80,14 @@
         虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
         模板不再绑定 totalSize，避免尺寸变化引起重渲染。
       -->
+      <div v-if="loading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <u-scroll
         tag="ul"
         :class="[cls.e('options')]"
         ref="scrollRef"
-        v-if="options.length"
+        v-else-if="options.length"
         :content-class="[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]"
       >
         <template v-if="virtualEnabled">
@@ -166,6 +169,7 @@ import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
+import { ULoading } from '../loading'
 import { UScroll } from '../scroll'
 import { useOptions } from '../select/use-options'
 import { UTag } from '../tag'
@@ -204,7 +208,12 @@ const scrollRef = shallowRef<ScrollExposed>()
 
 const hovered = shallowRef(false)
 
-const { options: rawOptions, queryString, allOptions: rawAllOptions } = useOptions({ props })
+const {
+  options: rawOptions,
+  queryString,
+  loading,
+  allOptions: rawAllOptions
+} = useOptions({ props })
 
 const createdOptions = shallowRef<Record<string, any>[]>([])
 

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

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

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

@@ -71,15 +71,19 @@
           {{ allExpanded ? '收起全部' : '展开全部' }}
         </u-button>
       </div>
+      <div v-if="remoteLoading" :class="cls.e('loading')">
+        <ULoading type="dual-ring" />
+      </div>
       <!-- 菜单列表 -->
       <u-tree
+        v-else
         v-bind="treeProps"
         v-model:checked="model"
         @update:checked="handleCheck"
         ref="treeRef"
         :class="cls.e('content-tree')"
         checkable
-        :data="data"
+        :data="treeData"
         :slots="slots"
         scroll-to-view
       ></u-tree>
@@ -100,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dfs, o } from '@cat-kit/core'
+import { debounce, dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
@@ -113,6 +117,7 @@ import { UButton } from '../button'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
+import { ULoading } from '../loading'
 import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
@@ -148,6 +153,7 @@ const treeProps = computed(() => {
     'label',
     'readonly',
     'modelValue',
+    'data',
     'contentClass',
     'contentStyle',
     'minWidth',
@@ -159,11 +165,56 @@ const emit = defineEmits<MultiTreeSelectEmits>()
 
 const slots = defineSlots<{ default?: (props: TreeSlotsScope) => any }>()
 
-/**过滤 */
+/** 是否可搜索：显式声明或数据源为远程函数 */
+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)[]>({ default: () => [] })
 
@@ -179,8 +230,6 @@ const showClear = computed(() => {
   return props.clearable && model.value?.length && hovered.value && !disabled.value
 })
 
-const treeRef = shallowRef<TreeExposed>()
-
 const dropdownRef = shallowRef<DropdownExposed>()
 
 let changedByEvent = false
@@ -237,7 +286,7 @@ const handleClear = () => {
 const keyDicts = shallowRef(new Map<string | number, Record<string, any>>())
 
 watch(
-  () => props.data,
+  treeData,
   (data) => {
     if (!data?.length) {
       keyDicts.value = new Map()

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

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

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) {