feat(select,tree-select,grid-select,base-select):select component reconstruction

examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts

@@ -23,7 +23,7 @@ test('可搜索时，获取焦点自动下拉', async ({ page }) => {
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await page.getByRole('list').getByText('上海').click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()

examples/sites/demos/pc/app/select/copy-multi.spec.ts

@@ -36,9 +36,12 @@ test('多选一键复制所有标签', async ({ page }) => {
   await page.goto('select#copy-multi')
 
   const wrap = page.locator('#copy-multi')
-  const select = wrap.locator('.tiny-select').nth(1)
+  const select = page
+    .locator('div')
+    .filter({ hasText: /^北京上海$/ })
+    .first()
   const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
-  const copyIcon = select.locator('.tiny-select__copy .tiny-svg')
+  const copyIcon = page.locator('.copy_svg__st0')
 
   await select.hover()
   await expect(copyIcon).toBeVisible()

examples/sites/demos/pc/app/select/events.spec.ts

@@ -26,8 +26,8 @@ test('单选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await input.hover()
-  await select.locator('.tiny-select__caret.tiny-select__close').click()
-  await page.waitForTimeout(500)
+  await select.locator('.tiny-input__suffix-inner').first().click()
+  await page.waitForTimeout(1000)
   await expect(input).toHaveValue('')
   await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
 })
@@ -65,7 +65,7 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__caret.tiny-select__close').click()
+  await select.locator('.tiny-input__suffix-inner').click()
 
   await expect(tag).toHaveCount(0)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)

examples/sites/demos/pc/app/select/input-box-type.spec.ts

@@ -60,13 +60,13 @@ test('下划线多选', async ({ page }) => {
   await expect(input).toHaveCSS('border-left-width', '0px')
   await expect(input).toHaveCSS('border-right-width', '0px')
   await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
-  await expect(select.locator('.tiny-select__caret')).toHaveCSS('fill', 'rgb(128, 128, 128)')
+  await expect(select.locator('.tiny-base-select__caret')).toHaveCSS('fill', 'rgb(128, 128, 128)')
 
   await select.click()
   await expect(dropdown).toBeVisible()
   await option.first().click()
   await expect(tag).toHaveCount(5)
 
   await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
-  await expect(select).toHaveClass(/tiny-select__multiple/)
+  await expect(select).toHaveClass(/tiny-base-select__multiple/)
 })

examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts

@@ -9,7 +9,7 @@ test.describe('下拉表格远程搜索', () => {
     const select = wrap.locator('.tiny-select').nth(0)
     const input = select.locator('.tiny-input__inner')
     const dropdown = page.locator('body > .tiny-select-dropdown')
-    const suffixSvg = dropdown.locator('.tiny-input__suffix .tiny-select__caret')
+    const suffixSvg = dropdown.locator('.tiny-base-select__caret')
 
     await expect(suffixSvg).toBeHidden()
     await expect(dropdown).toBeHidden()
@@ -45,7 +45,7 @@ test.describe('下拉表格远程搜索', () => {
     const select = wrap.locator('.tiny-select').nth(1)
     const input = select.locator('.tiny-input__inner')
     const dropdown = page.locator('body > .tiny-select-dropdown')
-    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
+    const suffixSvg = select.locator('.tiny-base-select__caret')
 
     await expect(suffixSvg).toBeVisible()
     await expect(dropdown).toBeHidden()
@@ -72,14 +72,18 @@ test.describe('下拉表格远程搜索', () => {
     await page.goto('select#nest-grid-remote')
     const wrap = page.locator('#nest-grid-remote')
     const select = wrap.locator('.tiny-select').nth(2)
-    const input = select.locator('.tiny-select__input')
+    const input = select.locator('.tiny-base-select__input').first()
     const dropdown = page.locator('body > .tiny-select-dropdown')
     const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
 
     // 下拉按钮不显示
     await expect(suffixSvg).toBeHidden()
     await expect(dropdown).toBeHidden()
 
+    // 先点击 select 打开下拉面板，确保输入框可见
+    await select.click()
+    await page.waitForTimeout(200)
+
     await input.fill(' ' + ' ')
     await input.press('Enter')
     await page.waitForTimeout(1000)
@@ -90,7 +94,7 @@ test.describe('下拉表格远程搜索', () => {
     await page.waitForTimeout(1000)
     await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
     await page.getByRole('row', { name: '省份 0 城市 0 区域 0' }).getByRole('cell').first().click()
-    const tags = page.locator('.tiny-select .tiny-tag')
+    const tags = page.locator('.tiny-base-select .tiny-tag')
     expect((await tags.all()).length).toEqual(1)
     await expect(tags.first()).toContainText(/市 0/)
     await page.getByRole('row', { name: '省份 1 城市 1 区域 1' }).getByRole('cell').first().click()
@@ -105,9 +109,9 @@ test.describe('下拉表格远程搜索', () => {
 
     const wrap = page.locator('#nest-grid-remote')
     const select = wrap.locator('.tiny-select').nth(3)
-    const input = select.locator('.tiny-select__input')
+    const input = select.locator('.tiny-base-select__input')
     const dropdown = page.locator('body > .tiny-select-dropdown')
-    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
+    const suffixSvg = select.locator('.tiny-base-select__caret').first()
     const tag = select.locator('.tiny-tag')
 
     await expect(suffixSvg).toBeVisible()

examples/sites/demos/pc/app/select/nest-grid.spec.ts

@@ -8,7 +8,7 @@ test('嵌套表格（单选）', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const row = dropdown.getByRole('row')
 
   await expect(suffixSvg).toHaveCount(1)
@@ -31,7 +31,7 @@ test('嵌套表格（多选）', async ({ page }) => {
   const wrap = page.locator('#nest-grid')
   const select = wrap.locator('.tiny-select').nth(1)
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const row = dropdown.getByRole('row')
   const tag = select.locator('.tiny-tag')
   const currentRow = dropdown.locator('.row__selected')
@@ -71,7 +71,7 @@ test('嵌套表格 + 可搜索 + 可清除', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const row = dropdown.getByRole('row')
 
   await input.click()

examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts

@@ -8,7 +8,7 @@ test('下拉表格大数据', async ({ page }) => {
   const select = wrap.locator('.tiny-select')
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const row = dropdown.getByRole('row')
 
   await expect(suffixSvg).toHaveCount(1)

examples/sites/demos/pc/app/select/nest-tree.spec.ts

@@ -8,7 +8,7 @@ test('下拉树单选', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const treeNode = dropdown.locator('.tiny-tree-node')
 
   await expect(suffixSvg).toHaveCount(1)
@@ -32,7 +32,7 @@ test('下拉树多选', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
 
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
+  const suffixSvg = select.locator('.tiny-base-select__caret')
   const treeNode = dropdown.locator('.tiny-tree-node')
   const checkedTreeNodes = dropdown.locator('.tiny-tree-node.is-checked')
   const tag = select.locator('.tiny-tag')

examples/sites/demos/pc/app/select/popup-style-position.spec.ts

@@ -6,7 +6,7 @@ test('popup-style-position', async ({ page }) => {
 
   const wrap = page.locator('#popup-style-position')
   const select = wrap.locator('.tiny-select')
-  const dropdown = select.locator('.tiny-select__tags-group > .tiny-select-dropdown')
+  const dropdown = select.locator('.tiny-base-select__tags-group > .tiny-select-dropdown')
 
   await select.click()
   await expect(dropdown).toHaveCount(1)

examples/sites/demos/pc/app/select/remote-method.spec.ts

@@ -28,7 +28,7 @@ test('远程搜索多选 + 保留搜索关键字', async ({ page }) => {
 
   const wrap = page.locator('#remote-method')
   const select = wrap.locator('.tiny-select').nth(1)
-  const input = select.locator('.tiny-select__input')
+  const input = select.locator('.tiny-base-select__input')
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
   const tag = select.locator('.tiny-tag')

packages/renderless/src/base-select/index.ts

@@ -2007,7 +2007,7 @@ export const computedGetIcon =
     return props.dropdownIcon
       ? { icon: props.dropdownIcon }
       : {
-          icon: designConfig?.icons.dropdownIcon || 'icon-delta-down',
+          icon: designConfig?.icons.dropdownIcon || 'icon-down-ward',
           isDefault: true
         }
   }

packages/renderless/src/grid-select/index.ts

@@ -68,19 +68,31 @@ export const syncGridSelection =
   }
 
 export const handleVisibleChange =
-  ({ api, state }) =>
+  ({ api, state, props }) =>
   (visible: boolean) => {
     // 面板打开时，同步表格选中状态
     if (visible && state.isMounted) {
       api.syncGridSelection()
+
+      // 如果启用了自动搜索且是远程搜索，触发初始查询
+      if (props.remote && props.remoteConfig?.autoSearch && state.firstAutoSearch !== false) {
+        // 触发远程搜索，使用空字符串作为初始查询
+        api.filter('')
+        state.firstAutoSearch = false
+      }
     }
   }
 
 export const buildSelectConfig =
   ({ props, state }) =>
   () => {
-    const checkRowKeys = state.gridCheckedData
     const selectConfig = props.selectConfig
+    const rawCheckRowKeys = state.gridCheckedData
+    const checkRowKeys = Array.isArray(rawCheckRowKeys)
+      ? rawCheckRowKeys
+      : rawCheckRowKeys && Array.isArray(rawCheckRowKeys.value)
+        ? rawCheckRowKeys.value
+        : []
 
     return Object.assign({}, selectConfig, { checkRowKeys })
   }

packages/renderless/src/grid-select/vue.ts

@@ -22,15 +22,14 @@ export const api = [
   'selectChange',
   'getcheckedData',
   'getPluginOption',
-  'initQuery',
   'mounted',
   'syncGridSelection',
   'watchValue',
   'handleVisibleChange'
 ]
 
 export const renderless = (props, { reactive, computed, watch, onMounted, nextTick }, { vm, emit }) => {
-  const api = {}
+  const api: any = {}
 
   // 初始化 gridData，支持 { data: [], columns: [] } 格式
   const initGridData = () => {
@@ -54,7 +53,8 @@ export const renderless = (props, { reactive, computed, watch, onMounted, nextTi
     currentKey: props.multiple ? '' : props.modelValue,
     previousQuery: null,
     modelValue: props.multiple ? (Array.isArray(props.modelValue) ? [...props.modelValue] : []) : props.modelValue,
-    isMounted: false
+    isMounted: false,
+    firstAutoSearch: props.remoteConfig?.autoSearch || false
   })
 
   Object.assign(api, {
@@ -69,7 +69,7 @@ export const renderless = (props, { reactive, computed, watch, onMounted, nextTi
     radioChange: radioChange({ props, vm, emit, state }),
     selectChange: selectChange({ props, vm, emit, state, nextTick }),
     syncGridSelection: syncGridSelection({ props, vm, state, nextTick }),
-    handleVisibleChange: handleVisibleChange({ api, state }),
+    handleVisibleChange: handleVisibleChange({ api, state, props }),
     watchValue: watchValue({ api, props, vm, state })
   })