From 29bfe1e7ea8eda3ffd028dc854cbe783138ecd2c Mon Sep 17 00:00:00 2001
From: discreted66 <953831480@qq.com>
Date: Thu, 27 Nov 2025 09:14:13 -0800
Subject: [PATCH] =?UTF-8?q?feat:select=E7=BB=84=E4=BB=B6=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pc/app/select/automatic-dropdown.spec.ts  |    2 +-
 .../demos/pc/app/select/copy-multi.spec.ts    |    7 +-
 .../sites/demos/pc/app/select/events.spec.ts  |    6 +-
 .../pc/app/select/input-box-type.spec.ts      |    4 +-
 .../pc/app/select/nest-grid-remote.spec.ts    |   16 +-
 .../demos/pc/app/select/nest-grid.spec.ts     |    6 +-
 .../select/nest-radio-grid-much-data.spec.ts  |    2 +-
 .../demos/pc/app/select/nest-tree.spec.ts     |    4 +-
 .../app/select/popup-style-position.spec.ts   |    2 +-
 .../demos/pc/app/select/remote-method.spec.ts |    2 +-
 packages/renderless/src/base-select/index.ts  |    2 +-
 packages/renderless/src/grid-select/index.ts  |   16 +-
 packages/renderless/src/grid-select/vue.ts    |    8 +-
 packages/renderless/src/select-wrapper/vue.ts |  143 +++
 packages/renderless/src/tree-select/index.ts  |   20 +-
 packages/renderless/src/tree-select/vue.ts    |   20 +-
 packages/theme/src/option/index.less          |    5 +
 packages/vue/src/base-select/src/pc.vue       |    5 +-
 packages/vue/src/select/src/mobile-first.vue  |    5 +-
 packages/vue/src/select/src/pc.vue            | 1068 +++++------------
 20 files changed, 535 insertions(+), 808 deletions(-)
 create mode 100644 packages/renderless/src/select-wrapper/vue.ts

diff --git a/examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts b/examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts
index 303487fcb2..4872873f8a 100644
--- a/examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts
+++ b/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()
diff --git a/examples/sites/demos/pc/app/select/copy-multi.spec.ts b/examples/sites/demos/pc/app/select/copy-multi.spec.ts
index ac973bc49a..6adecaee36 100644
--- a/examples/sites/demos/pc/app/select/copy-multi.spec.ts
+++ b/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()
diff --git a/examples/sites/demos/pc/app/select/events.spec.ts b/examples/sites/demos/pc/app/select/events.spec.ts
index ae3897e614..a27e4d54f8 100644
--- a/examples/sites/demos/pc/app/select/events.spec.ts
+++ b/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)
diff --git a/examples/sites/demos/pc/app/select/input-box-type.spec.ts b/examples/sites/demos/pc/app/select/input-box-type.spec.ts
index 9148e0bb48..0c6d58b48c 100644
--- a/examples/sites/demos/pc/app/select/input-box-type.spec.ts
+++ b/examples/sites/demos/pc/app/select/input-box-type.spec.ts
@@ -60,7 +60,7 @@ 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()
@@ -68,5 +68,5 @@ test('下划线多选', async ({ page }) => {
   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/)
 })
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts b/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
index b04dae8ed0..45cc0fc56c 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
+++ b/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,7 +72,7 @@ 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()
 
@@ -80,6 +80,10 @@ test.describe('下拉表格远程搜索', () => {
     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()
diff --git a/examples/sites/demos/pc/app/select/nest-grid.spec.ts b/examples/sites/demos/pc/app/select/nest-grid.spec.ts
index 94907f3be1..9144218921 100644
--- a/examples/sites/demos/pc/app/select/nest-grid.spec.ts
+++ b/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()
diff --git a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
index 722a5aabb3..eaa958c011 100644
--- a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
+++ b/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)
diff --git a/examples/sites/demos/pc/app/select/nest-tree.spec.ts b/examples/sites/demos/pc/app/select/nest-tree.spec.ts
index 84cb597763..bd275a602e 100644
--- a/examples/sites/demos/pc/app/select/nest-tree.spec.ts
+++ b/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')
diff --git a/examples/sites/demos/pc/app/select/popup-style-position.spec.ts b/examples/sites/demos/pc/app/select/popup-style-position.spec.ts
index aa37dd9428..55c4140452 100644
--- a/examples/sites/demos/pc/app/select/popup-style-position.spec.ts
+++ b/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)
diff --git a/examples/sites/demos/pc/app/select/remote-method.spec.ts b/examples/sites/demos/pc/app/select/remote-method.spec.ts
index 4cb249a922..dacf57368e 100644
--- a/examples/sites/demos/pc/app/select/remote-method.spec.ts
+++ b/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')
diff --git a/packages/renderless/src/base-select/index.ts b/packages/renderless/src/base-select/index.ts
index 9b5d001544..a2eabc149d 100644
--- a/packages/renderless/src/base-select/index.ts
+++ b/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
         }
   }
diff --git a/packages/renderless/src/grid-select/index.ts b/packages/renderless/src/grid-select/index.ts
index 14beb8bcc0..0b44557a4e 100644
--- a/packages/renderless/src/grid-select/index.ts
+++ b/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 })
   }
diff --git a/packages/renderless/src/grid-select/vue.ts b/packages/renderless/src/grid-select/vue.ts
index f2112e5753..beb804ad2a 100644
--- a/packages/renderless/src/grid-select/vue.ts
+++ b/packages/renderless/src/grid-select/vue.ts
@@ -22,7 +22,6 @@ export const api = [
   'selectChange',
   'getcheckedData',
   'getPluginOption',
-  'initQuery',
   'mounted',
   'syncGridSelection',
   'watchValue',
@@ -30,7 +29,7 @@ export const api = [
 ]
 
 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 })
   })
 
diff --git a/packages/renderless/src/select-wrapper/vue.ts b/packages/renderless/src/select-wrapper/vue.ts
new file mode 100644
index 0000000000..87134f2e4c
--- /dev/null
+++ b/packages/renderless/src/select-wrapper/vue.ts
@@ -0,0 +1,143 @@
+export const api = [
+  'state',
+  'resolvedComponent',
+  'mergedProps',
+  'listeners',
+  'slotNames',
+  'hasScopedDefault',
+  'focus',
+  'blur'
+]
+
+export const renderless = (props, { reactive, computed, useAttrs }, { constants, vm, components }) => {
+  const api = {}
+
+  const resolvedComponent = computed(() => computedResolvedComponent({ props, constants, vm, components }))
+
+  const mergedProps = computed(() => {
+    const runtimeAttrs = typeof useAttrs === 'function' ? useAttrs() : null
+    const attrs = runtimeAttrs || vm.$attrs || {}
+    const className = attrs.class
+    const classArray = Array.isArray(className)
+      ? ['tiny-select', ...className]
+      : className
+        ? ['tiny-select', className]
+        : ['tiny-select']
+
+    const { class: _omitClass, ...restAttrs } = attrs
+
+    return {
+      ...props,
+      ...restAttrs,
+      class: classArray
+    }
+  })
+
+  const slotNames = computed(() => Object.keys(vm.$slots || {}).filter((name) => name && name !== 'default'))
+
+  const hasScopedDefault = computed(() => {
+    const scoped = vm.$scopedSlots?.default
+    if (scoped && scoped.length) {
+      return true
+    }
+    const slot = vm.$slots?.default
+    return typeof slot === 'function' && slot.length > 0
+  })
+
+  const listeners = computed(() => {
+    if (vm.$listeners) {
+      return vm.$listeners
+    }
+    return {}
+  })
+
+  const getChildComponent = () => vm.$refs?.childComponent
+
+  // 暴露子组件的 state，让用户可以通过 ref.state 访问子组件的状态（如 cachedOptions）
+  // 使用 Proxy 代理子组件的 state，实现动态访问
+  const state = new Proxy(
+    {},
+    {
+      get(target, prop) {
+        const child = getChildComponent()
+        return child?.state?.[prop]
+      },
+      set(target, prop, value) {
+        const child = getChildComponent()
+        if (child?.state) {
+          child.state[prop] = value
+          return true
+        }
+        return false
+      },
+      has(target, prop) {
+        const child = getChildComponent()
+        return prop in (child?.state || {})
+      },
+      ownKeys(target) {
+        const child = getChildComponent()
+        return Object.keys(child?.state || {})
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        const child = getChildComponent()
+        const childState = child?.state || {}
+        if (prop in childState) {
+          return {
+            enumerable: true,
+            configurable: true,
+            value: childState[prop]
+          }
+        }
+        return undefined
+      }
+    }
+  )
+
+  const focus = () => {
+    const child = getChildComponent()
+    child && typeof child.focus === 'function' && child.focus()
+  }
+
+  const blur = () => {
+    const child = getChildComponent()
+    child && typeof child.blur === 'function' && child.blur()
+  }
+
+  const hasData = (value: any) => {
+    if (!value) {
+      return false
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0
+    }
+    if (typeof value === 'object') {
+      return Object.keys(value).length > 0
+    }
+    return true
+  }
+
+  const computedResolvedComponent = ({ props, constants, vm, components }) => {
+    // 优先使用传入的 components，否则从 vm.$options.components 获取
+    const comps = components || vm.$options?.components || {}
+
+    if (props.renderType === constants.TYPE.Tree || hasData(props.treeOp)) {
+      return comps.TinyTreeSelect || 'TinyTreeSelect'
+    }
+    if (props.renderType === constants.TYPE.Grid || hasData(props.gridOp)) {
+      return comps.TinyGridSelect || 'TinyGridSelect'
+    }
+    return comps.TinyBaseSelect || 'TinyBaseSelect'
+  }
+  Object.assign(api, {
+    state,
+    resolvedComponent,
+    mergedProps,
+    listeners,
+    slotNames,
+    hasScopedDefault,
+    focus,
+    blur
+  })
+
+  return api
+}
diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
index 46f0027925..d2af7a3e97 100644
--- a/packages/renderless/src/tree-select/index.ts
+++ b/packages/renderless/src/tree-select/index.ts
@@ -156,17 +156,22 @@ export const getChildValue = () => (childNodes, key) => {
 export const mounted =
   ({ api, state, props, vm }) =>
   () => {
-    if (!state.modelValue || state.modelValue.length === 0) return
+    if (!state.modelValue || (Array.isArray(state.modelValue) && state.modelValue.length === 0)) return
 
     if (props.multiple) {
       let initialNodes = []
       if (Array.isArray(state.modelValue)) {
         state.modelValue.forEach((value) => {
           const option = api.getPluginOption(value)
-          initialNodes = initialNodes.concat(option)
+          if (option && option.length > 0) {
+            initialNodes = initialNodes.concat(option)
+          }
         })
       }
 
+      // 如果没有找到任何节点（例如懒加载场景），直接返回
+      if (initialNodes.length === 0) return
+
       const selected = initialNodes.map((node) => {
         return {
           ...node,
@@ -179,7 +184,12 @@ export const mounted =
 
       state.defaultCheckedKeys = api.getCheckedData(selected)
     } else {
-      const data = api.getPluginOption(state.modelValue)[0]
+      const options = api.getPluginOption(state.modelValue)
+      const data = options && options.length > 0 ? options[0] : null
+
+      // 如果没有找到节点（例如懒加载场景），直接返回
+      if (!data) return
+
       vm.$refs.baseSelectRef.updateSelectedData({
         ...data,
         currentLabel: data[props.textField],
@@ -224,7 +234,9 @@ export const watchValue =
       if (Array.isArray(checkedKeys)) {
         checkedKeys.forEach((value) => {
           const option = api.getPluginOption(value)
-          initialNodes = initialNodes.concat(option)
+          if (option && option.length > 0) {
+            initialNodes = initialNodes.concat(option)
+          }
         })
       }
 
diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts
index 73fae305e2..e2e0c26ffe 100644
--- a/packages/renderless/src/tree-select/vue.ts
+++ b/packages/renderless/src/tree-select/vue.ts
@@ -15,12 +15,22 @@ export const api = ['state', 'check', 'filter', 'nodeClick']
 export const renderless = (props, { reactive, computed, watch, onMounted }, { vm, emit }) => {
   const api = {}
 
+  const resolveTreeData = () => {
+    if (Array.isArray(props.treeOp)) {
+      return props.treeOp
+    }
+    if (props.treeOp && Array.isArray(props.treeOp.data)) {
+      return props.treeOp.data
+    }
+    return []
+  }
+
   const state = reactive({
     childrenName: computed(() => (props.treeOp.props && props.treeOp.props.children) || 'children'),
     currentKey: props.modelValue,
     defaultCheckedKeys: [],
     remoteData: [],
-    treeData: props.treeOp.data,
+    treeData: resolveTreeData(),
     modelValue: []
   })
 
@@ -38,8 +48,12 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm
   })
 
   watch(
-    () => props.treeOp.data,
-    (data) => data && (state.treeData = data),
+    () => (Array.isArray(props.treeOp) ? props.treeOp : props.treeOp?.data),
+    (data) => {
+      if (Array.isArray(data)) {
+        state.treeData = data
+      }
+    },
     { immediate: true, deep: true }
   )
 
diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less
index 547e9db1d2..7ffc7e6acb 100644
--- a/packages/theme/src/option/index.less
+++ b/packages/theme/src/option/index.less
@@ -92,6 +92,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       vertical-align: top;
+      padding-top: 3px;
     }
   }
 
@@ -104,6 +105,10 @@
     color: var(--tv-Option-text-color-selected);
   }
 
+  &__checkbox-wrap {
+    display: flex;
+  }
+
   &.memorize-highlight {
     color: var(--tv-Option-text-color-highlight);
   }
diff --git a/packages/vue/src/base-select/src/pc.vue b/packages/vue/src/base-select/src/pc.vue
index ed3b1fe917..03d451ec5b 100644
--- a/packages/vue/src/base-select/src/pc.vue
+++ b/packages/vue/src/base-select/src/pc.vue
@@ -250,8 +250,8 @@
             @input="debouncedQueryChange"
             :style="{
               'flex-grow': '1',
-              width: state.inputLength / (state.inputWidth - 32) + '%',
-              'max-width': state.inputWidth - 42 + 'px',
+              width: state.inputWidth > 0 ? state.inputLength / (state.inputWidth - 32) + '%' : 'auto',
+              'max-width': state.inputWidth > 0 ? state.inputWidth - 42 + 'px' : 'none',
               height: 'auto'
             }"
           />
@@ -538,6 +538,7 @@
                 <span v-else class="tiny-select-dropdown__empty"> {{ state.emptyText }}</span>
               </template>
               <component
+                v-else
                 class="circular"
                 :is="
                   (state.designConfig && state.designConfig.icons && state.designConfig.icons.loadingIcon) ||
diff --git a/packages/vue/src/select/src/mobile-first.vue b/packages/vue/src/select/src/mobile-first.vue
index 9fe96e9c5b..4920df811e 100644
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/packages/vue/src/select/src/mobile-first.vue
@@ -451,7 +451,10 @@
               <component
                 :is="`icon-${state.selectCls}`"
                 :class="
-                  m(['-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5 ', state.selectCls !== 'check' && 'fill-color-brand text-color-brand'])
+                  m([
+                    '-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5 ',
+                    state.selectCls !== 'check' && 'fill-color-brand text-color-brand'
+                  ])
                 "
               />
               <span :class="[state.selectCls === 'checked-sur' ? 'text-color-brand' : 'text-color-text-primary']">
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index 36c1ec8943..93ee29fe97 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -1,786 +1,316 @@
-<!--
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- -->
-
 <template>
-  <div
-    ref="select"
-    class="tiny-select"
-    v-popover:popover
-    :class="[
-      state.selectSize ? 'tiny-select--' + state.selectSize : '',
-      state.collapseTags ? 'tiny-select__collapse-tags' : '',
-      filterable ? 'tiny-select__filterable' : '',
-      multiple ? 'tiny-select__multiple' : '',
-      (state.inputHovering || state.visible) && !clickExpand ? 'is-hover' : '',
-      state.isDisplayOnly ? 'is-display-only' : '',
-      hoverExpand ? 'is-hover-expand' : '',
-      clickExpand ? 'is-click-expand' : '',
-      state.showCollapseTag ? 'collapse-tag-clicked' : '',
-      state.isDisabled ? 'is-disabled' : ''
-    ]"
-    @mouseleave.self="
-      () => {
-        state.selectHover = false
-        state.inputHovering = false
-      }
-    "
-    @mouseenter.self="onMouseenterSelf"
-    @click="toggleMenu"
-    v-clickoutside="handleClose"
-  >
-    <!-- tiny新增：title 简化处理 -->
-    <div
-      ref="tagsGroup"
-      :style="state.selectFiexd"
-      :class="['tiny-select__tags-group', { 'is-expand': state.isExpand }]"
-      v-auto-tip="state.rootAutoTipConfig"
-    >
-      <slot name="reference">
-        <tiny-filter-box
-          v-if="shape === 'filter'"
-          ref="reference"
-          @click="toggleMenu"
-          :show-close="clearable"
-          :placeholder="placeholder"
-          :disabled="state.selectDisabled"
-          :label="label"
-          :tip="tip"
-          :value="
-            multiple
-              ? state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join('; ')
-              : state.selectedLabel
-          "
-          :drop-down-visible="state.visible"
-          :blank="blank"
-        >
-        </tiny-filter-box>
-        <div
-          ref="tags"
-          :class="[
-            'tiny-select__tags',
-            { 'is-showicon': slots.prefix, 'not-selected': !state.selected.length },
-            { 'is-show-tag': !state.isShowTagText }
-          ]"
-          v-if="multiple && !state.isDisplayOnly && !shape"
-          :style="state.tagsStyle"
-        >
-          <span v-if="!state.isShowTagText">
-            <span v-if="collapseTags && state.selected.length">
-              <!-- 显示第1个标签 + 数字 -->
-              <tiny-tag
-                :class="{ 'is-required': state.selected[0].required }"
-                :closable="isTagClosable(state.selected[0])"
-                :size="state.collapseTagSize"
-                :hit="state.selected[0].state ? state.selected[0].state.hitState : state.selected[0].hitState"
-                :key="state.key"
-                :disabled="state.selected[0].disabled || state.isDisabled"
-                :type="state.getTagType"
-                @close="deleteTag($event, state.selected[0])"
-                disable-transitions
-                :maxWidth="maxTagWidth"
-              >
-                <tiny-tooltip
-                  :effect="tooltipConfig.effect || 'light'"
-                  :placement="tooltipConfig.placement || 'top'"
-                  :popper-class="tooltipConfig.popperClass || ''"
-                  @mouseenter.native="handleEnterTag($event, getValueKey(state.selected[0]))"
-                >
-                  <span class="tiny-select__tags-text">
-                    <slot name="label" :item="getLabelSlotValue(state.selected[0])">{{
-                      state.selected[0].state ? state.selected[0].state.currentLabel : state.selected[0].currentLabel
-                    }}</slot>
-                  </span>
-                  <template #content>
-                    <span v-if="state.tooltipContent[getValueKey(state.selected[0])]">
-                      <slot name="label" :item="getLabelSlotValue(state.selected[0])">
-                        {{
-                          state.selected[0].state
-                            ? state.selected[0].state.currentLabel
-                            : state.selected[0].currentLabel
-                        }}
-                      </slot>
-                    </span>
-                  </template>
-                </tiny-tooltip>
-              </tiny-tag>
-              <tiny-tag
-                v-if="state.selected.length > 1"
-                :closable="false"
-                :size="state.collapseTagSize"
-                :type="state.getTagType"
-                :disabled="state.isDisabled"
-                disable-transitions
-                class="tiny-select__tags-number"
-                :maxWidth="maxTagWidth"
-              >
-                <span class="tiny-select__tags-text">+ {{ state.selected.length - 1 }}</span>
-              </tiny-tag>
-            </span>
-            <!-- 显示所有标签的循环 -->
-            <span ref="tags-content" v-if="!collapseTags">
-              <!-- 当 showAllTextTag 时， 用all-text属性做为tag。 xdesign规范 -->
-              <tiny-tag
-                v-if="showAllTextTag && state.selectCls === 'checked-sur'"
-                :type="state.getTagType"
-                key="tags-all-text-tag"
-                data-tag="tags-all-text-tag"
-                :disabled="state.isDisabled"
-                :closable="true"
-                :size="state.collapseTagSize"
-                @close="toggleCheckAll(false)"
-                :maxWidth="maxTagWidth"
-              >
-                {{ allText || t('ui.base.all') }}
-              </tiny-tag>
-              <!-- 当非 showAllTextTag 时，原来的模式渲染 -->
-              <template v-else>
-                <tiny-tag
-                  v-if="hoverExpand || clickExpand"
-                  :class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden || state.isDisabled }]"
-                  :type="state.getTagType"
-                  key="tags-collapse"
-                  data-tag="tags-collapse"
-                  :only-icon="!hoverExpand"
-                  :closable="false"
-                  :size="state.collapseTagSize"
-                  @click="onClickCollapseTag($event)"
-                  :maxWidth="maxTagWidth"
-                >
-                  <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
-                  <icon-ellipsis v-else></icon-ellipsis>
-                </tiny-tag>
-                <tiny-tag
-                  v-for="(item, index) in state.selected"
-                  :key="getValueKey(item)"
-                  :class="{
-                    'not-visible': state.toHideIndex <= index && !state.isExpand,
-                    'is-required': item.required
-                  }"
-                  :closable="isTagClosable(item)"
-                  :disabled="state.isDisabled || item.disabled"
-                  :size="state.collapseTagSize"
-                  :hit="item.state ? item.state.hitState : item.hitState"
-                  :type="state.getTagType"
-                  @close="deleteTag($event, item)"
-                  disable-transitions
-                  :maxWidth="maxTagWidth"
-                >
-                  <tiny-tooltip
-                    :effect="tooltipConfig.effect || 'light'"
-                    :placement="tooltipConfig.placement || 'top'"
-                    :popper-class="tooltipConfig.popperClass || ''"
-                    @mouseenter.native="handleEnterTag($event, getValueKey(item))"
-                  >
-                    <span v-if="!state.visible && state.overflow === index" class="tiny-select__tags-text">
-                      {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
-                    </span>
-                    <span v-else class="tiny-select__tags-text">
-                      <slot name="label" :item="getLabelSlotValue(item)">
-                        {{ item.state ? item.state.currentLabel : item.currentLabel }}
-                      </slot>
-                    </span>
-                    <template v-if="state.tooltipContent[getValueKey(item)]" #content>
-                      <span v-if="!state.visible && state.overflow === index">
-                        {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
-                      </span>
-                      <span v-else>
-                        <slot name="label" :item="getLabelSlotValue(item)">
-                          {{ item.state ? item.state.currentLabel : item.currentLabel }}
-                        </slot>
-                      </span>
-                    </template>
-                  </tiny-tooltip>
-                </tiny-tag>
-
-                <!-- 收起按钮 -->
-                <span
-                  v-if="clickExpand && state.showCollapseTag"
-                  class="tiny-select__collapse-text"
-                  @click="onClickCollapseTag($event)"
-                >
-                  {{ t('ui.select.collapse') }}
-                  <icon-chevron-up></icon-chevron-up>
-                </span>
-              </template>
-            </span>
-          </span>
-
-          <span v-else :class="['tiny-select__tags-text', 'is-display-only', { 'is-disabled': state.isDisabled }]">
-            <span>
-              <span v-for="item in state.selected" :key="item.value">
-                <slot name="label" :item="item">{{ item.state ? item.state.currentLabel : item.currentLabel }}</slot
-                >;
-              </span>
-            </span>
-          </span>
-          <!-- tiny 新增：searchable时, 这里不显示 state.query -->
-          <input
-            ref="input"
-            v-show="filterable && !searchable && !state.selectDisabled"
-            v-model="state.query"
-            type="text"
-            class="tiny-select__input"
-            :class="[state.selectSize ? `is-${state.selectSize}` : '']"
-            :disabled="state.selectDisabled"
-            :autocomplete="autocomplete"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @keyup="managePlaceholder"
-            @keydown="resetInputState"
-            @keydown.down.prevent="navigateOptions('next')"
-            @keydown.up.prevent="navigateOptions('prev')"
-            @keydown.enter.prevent="selectOption"
-            @keydown.esc.stop.prevent="state.visible = false"
-            @keydown.delete="deletePrevTag"
-            @keydown.tab="state.visible = false"
-            @compositionstart="handleComposition"
-            @compositionupdate="handleComposition"
-            @compositionend="handleComposition"
-            @input="debouncedQueryChange"
-            :style="{
-              'flex-grow': '1',
-              width: state.inputLength / (state.inputWidth - 32) + '%',
-              'max-width': state.inputWidth - 42 + 'px',
-              height: 'auto'
-            }"
-          />
-        </div>
-        <tiny-input
-          tiny_mode="pc"
-          v-if="!shape"
-          ref="reference"
-          v-model="state.selectedLabel"
-          type="text"
-          :placeholder="state.currentPlaceholder"
-          :name="name"
-          :id="id"
-          :autocomplete="autocomplete"
-          :size="state.selectSize"
-          :showTooltip="false"
-          :disabled="state.selectDisabled"
-          :readonly="state.readonly"
-          :display-only="state.isDisplayOnly"
-          :display-only-content="state.displayOnlyContent"
-          :unselectable="state.readonly ? 'on' : 'off'"
-          :validate-event="false"
-          :show-empty-value="showEmptyValue"
-          :inputBoxType="inputBoxType"
-          :class="{
-            'is-focus': state.visible,
-            overflow: state.overflow,
-            'is-show-close': state.showClose,
-            'show-copy': copyable,
-            'show-clear': clearable
-          }"
-          :tabindex="multiple && filterable ? '-1' : tabindex"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @keyup="debouncedOnInputChange"
-          @keydown.down.stop.prevent="navigateOptions('next')"
-          @keydown.up.stop.prevent="navigateOptions('prev')"
-          @keydown.enter.prevent="selectOption"
-          @keydown.esc.stop.prevent="state.visible = false"
-          @keydown.tab="state.visible = false"
-          @paste="debouncedOnInputChange"
-          @mouseenter="onMouseenterNative"
-          @mouseleave="onMouseleaveNative"
-          @compositionend.native="handleComposition"
-        >
-          <template #prefix v-if="slots.prefix">
-            <slot name="prefix"></slot>
-          </template>
-          <template #suffix>
-            <slot name="suffix"></slot>
-            <!-- tiny 新增：xdesign 规范 ：多选限制数量时，在后缀显示 "选中/最大限制项" 计数的提示文字  -->
-            <span v-if="showLimitText && multiple && multipleLimit && !state.showCopy" class="tiny-select__limit-txt">
-              {{ state.selected.length }}/{{ multipleLimit }}
-            </span>
-            <!-- tiny 新增：xdesign 规范 ： 显示比例时，在后缀显示 "选中/全部项" 计数的提示文字  -->
-            <span
-              v-else-if="showProportion && state.selected.length > 0 && state.options.length > 1"
-              class="tiny-select__proportion-txt"
-            >
-              {{ state.selected.length + '/' + state.options.length }}
-            </span>
-            <span v-if="state.showCopy" class="tiny-select__copy" @click.stop="handleCopyClick">
-              <icon-copy class="tiny-svg-size tiny-select__caret"></icon-copy>
-            </span>
-
-            <icon-close
-              v-if="state.showClose"
-              class="tiny-svg-size tiny-select__caret tiny-select__close"
-              @click="handleClearClick"
-              @mouseenter="state.inputHovering = true"
-            ></icon-close>
-            <!-- tiny 新增 自定义getIcon .
-              tiny 的 autoHideDownIcon=true, 显示 close时， 不显示向下的箭头。
-              aui是同时显示2个。 -->
-            <component
-              v-show="
-                state.autoHideDownIcon
-                  ? !state.showClose && !(remote && filterable && !remoteConfig.showIcon)
-                  : !(remote && filterable && !remoteConfig.showIcon)
-              "
-              :is="state.getIcon.icon"
-              :class="[
-                'tiny-svg-size',
-                'tiny-select__caret',
-                state.iconClass,
-                { 'is-reverse': !state.visible && state.getIcon.isDefault },
-                { 'not-reverse': !state.getIcon.isDefault }
-              ]"
-              @click="handleDropdownClick"
-            >
-            </component>
-          </template>
-        </tiny-input>
-      </slot>
-
-      <transition name="tiny-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="doDestroy">
-        <tiny-select-dropdown
-          ref="popper"
-          :is-drop-inherit-width="isDropInheritWidth"
-          :placement="placement"
-          :append-to-body="popperAppendToBody"
-          v-show="!onCopying() && !hideDrop && state.visible && state.emptyText !== false"
-          :style="dropStyle"
-          :popper-options="popperOptions"
-        >
-          <div
-            v-if="shape && filterable"
-            class="tiny-select__filter-input"
-            :class="[remote && !state.options.length ? 'tiny-select__remote-input' : '']"
-          >
-            <tiny-input
-              ref="input"
-              v-model="state.query"
-              :placeholder="placeholder"
-              @input="debouncedQueryChange"
-              @focus="handleFocus"
-              autofocus
-            ></tiny-input>
-          </div>
-          <div v-if="topCreate" class="tiny-select__top-create">
-            <div @click="$emit('top-create-click', $event)">
-              <component :is="state.designConfig?.icons?.addIcon || 'icon-add-circle'"></component>
-              <span>{{ topCreateText }}</span>
-            </div>
-          </div>
-          <tiny-grid
-            v-if="renderType === 'grid'"
-            auto-resize
-            :row-id="gridOp.rowId || valueField"
-            :select-config="buildSelectConfig()"
-            :radio-config="buildRadioConfig()"
-            ref="selectGrid"
-            :highlight-current-row="true"
-            :columns="gridOp.columns"
-            :data="state.gridData"
-            @select-all="selectChange"
-            @select-change="selectChange"
-            @radio-change="radioChange"
-            @mousedown.stop
-            v-bind="gridOp"
-          ></tiny-grid>
-
-          <tiny-tree
-            v-if="renderType === 'tree'"
-            :filter-node-method="filterMethod"
-            :props="{ label: textField, isLeaf: 'isLeaf', ...treeOp.props }"
-            :expand-on-click-node="false"
-            :icon-trigger-click-node="false"
-            :node-key="valueField"
-            :default-expand-all="state.isExpandAll"
-            :check-strictly="treeOp.checkStrictly"
-            :default-checked-keys="multiple ? state.defaultCheckedKeys : treeOp.defaultCheckedKeys || []"
-            ref="selectTree"
-            :current-node-key="!multiple ? state.currentKey : ''"
-            :show-checkbox="multiple"
-            @load-data="loadTreeData"
-            @node-collapse="nodeCollapse"
-            @node-expand="nodeExpand"
-            @check="nodeCheckClick"
-            @node-click="treeNodeClick"
-            v-bind="treeOp"
-          ></tiny-tree>
-          <!-- tiny 新增 面板搜索 -->
-          <tiny-input
-            v-if="searchable"
-            input-box-type="underline"
-            v-model="state.query"
-            :placeholder="t('ui.search.placeholder')"
-            class="tiny-select-dropdown__search"
-            @update:modelValue="handleQueryChange(state.query, false, true)"
-          >
-            <template #prefix>
-              <!-- tiny 为适配smb，增加前置的放大镜 -->
-              <icon-search class="tiny-select-dropdown__search-prefix"></icon-search>
-            </template>
-            <template #suffix>
-              <span v-show="state.query" class="tiny-icon-close">
-                <icon-close @click="clearSearchText"></icon-close>
-              </span>
-              <icon-search class="tiny-select-dropdown__search-suffix"></icon-search>
-            </template>
-          </tiny-input>
-
-          <template v-if="optimization && !~['grid', 'tree'].indexOf(renderType)">
-            <div :style="{ height: `${state.optimizeStore.recycleScrollerHeight}px` }">
-              <tiny-recycle-scroller
-                ref="scrollbar"
-                style="height: 100%"
-                :key-field="valueField"
-                :list-class="['tiny-select-dropdown__wrap']"
-                :item-class="['tiny-select-dropdown__item-view']"
-                :items="state.datas"
-                :item-size="state.optimizeOpts.optionHeight"
-                v-show="!state.emptyFlag && !loading"
-              >
-                <template #before>
-                  <tiny-option :value="state.query" created v-if="state.showNewOption"> </tiny-option>
-                </template>
-                <template #default="{ item }">
-                  <slot :item="item">
-                    <tiny-option
-                      :key="`${item[valueField]}`"
-                      :label="item[textField]"
-                      :value="item[valueField]"
-                      :disabled="item.disabled"
-                      :required="item.required"
-                      :highlight-class="item._highlightClass"
-                      :events="item.events"
-                      :icon="item.icon"
-                      @mousedown.stop
-                    >
-                    </tiny-option>
-                  </slot>
-                </template>
-              </tiny-recycle-scroller>
-            </div>
-          </template>
-
-          <tiny-scrollbar
-            v-if="!optimization && !~['grid', 'tree'].indexOf(renderType) && !(state.isDisplayOnly && options)"
-            ref="scrollbar"
-            show
-            tag="ul"
-            :wrap-class="['tiny-select-dropdown__wrap']"
-            :view-class="['tiny-select-dropdown__list']"
-            @mousedown.stop
-            :class="{
-              'is-empty': !allowCreate && state.query && state.filteredOptionsCount === 0
-            }"
-            v-show="state.options.length > 0 && !loading"
-          >
-            <slot name="dropdown"></slot>
-            <li
-              v-if="multiple && showCheck && showAlloption && !state.multipleLimit && !state.query && !remote"
-              class="tiny-option tiny-option_all tiny-select-dropdown__item"
-              data-tag="tiny-option"
-              :class="[
-                {
-                  hover: state.hoverIndex === -9 && state.selectCls !== 'checked-sur'
-                },
-                { 'selected': state.selectCls === 'checked-sur' }
-              ]"
-              @click.stop="toggleCheckAll(false)"
-              @mousedown.stop
-              @mouseenter="state.hoverIndex = -9"
-            >
-              <span class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
-                <component :is="`icon-${state.selectCls}`" :class="['tiny-svg-size', state.selectCls]"
-              /></span>
-              <div class="tiny-option-wrapper calc-width">
-                <span class="tiny-option-label">{{ allText || t('ui.base.all') }}</span>
-              </div>
-            </li>
-            <li
-              v-if="
-                multiple &&
-                showCheck &&
-                showAlloption &&
-                !state.multipleLimit &&
-                state.query &&
-                !state.emptyText &&
-                !remote
-              "
-              class="tiny-option tiny-select-dropdown__item"
-              data-tag="tiny-option"
-              :class="[
-                {
-                  hover: state.hoverIndex === -9 && state.filteredSelectCls !== 'checked-sur'
-                },
-                { 'selected': state.filteredSelectCls === 'checked-sur' }
-              ]"
-              @click.stop="toggleCheckAll(true)"
-              @mousedown.stop
-              @mouseenter="state.hoverIndex = -9"
-            >
-              <span class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
-                <component :is="`icon-${state.filteredSelectCls}`" :class="['tiny-svg-size', state.filteredSelectCls]"
-              /></span>
-              <div class="tiny-option-wrapper calc-width">
-                <span class="tiny-option-label">{{ allText || t('ui.base.all') }}</span>
-              </div>
-            </li>
-            <tiny-option :value="state.query" created v-if="state.showNewOption"> </tiny-option>
-            <slot>
-              <tiny-option
-                v-for="item in state.datas"
-                :key="`${item[valueField]}`"
-                :label="item[textField]"
-                :value="item[valueField]"
-                :disabled="item.disabled"
-                :required="item.required"
-                :highlight-class="item._highlightClass"
-                :events="item.events"
-                @mousedown.stop
-                :icon="item.icon"
-              >
-              </tiny-option>
-            </slot>
-          </tiny-scrollbar>
-          <template
-            v-if="
-              renderType !== 'grid' &&
-              renderType !== 'tree' &&
-              state.emptyText &&
-              (!allowCreate || loading || (allowCreate && state.emptyFlag))
-            "
-          >
-            <!-- tiny 新增 showEmptyImage功能 -->
-            <div v-if="loadingText || slots.empty" class="tiny-select-dropdown__empty-wrap">
-              <slot name="empty" v-if="slots.empty"></slot>
-              <span v-else-if="showEmptyImage" class="tiny-select-dropdown__empty-images"></span>
-              <p class="tiny-select-dropdown__empty" v-else>
-                {{ state.emptyText }}
-              </p>
-            </div>
-            <div v-else class="tiny-select-dropdown__loading" :class="{ 'show-loading-icon': loading }">
-              <component
-                v-if="loading"
-                class="circular"
-                :is="
-                  (state.designConfig && state.designConfig.icons && state.designConfig.icons.loadingIcon) ||
-                  'icon-loading-shadow'
-                "
-              ></component>
-              <template v-else>
-                <span v-if="showEmptyImage" class="tiny-select-dropdown__empty-images"></span>
-                <span v-else class="tiny-select-dropdown__empty"> {{ state.emptyText }}</span>
-              </template>
-            </div>
-          </template>
-          <!-- tiny 新增 footer插槽 -->
-          <slot name="footer"></slot>
-        </tiny-select-dropdown>
-      </transition>
-    </div>
-    <div v-if="hoverExpand && !state.isDisplayOnly" class="tiny-select__placeholder">
-      <input class="tiny-input__inner" disabled />
-    </div>
-  </div>
+  <component ref="childComponent" :is="resolvedComponent" v-bind="mergedProps" v-on="listeners">
+    <template v-slot:default="slotProps">
+      <slot v-if="hasScopedDefault" v-bind="slotProps"></slot>
+      <slot v-else></slot>
+    </template>
+    <template v-for="slotName in slotNames" v-slot:[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+  </component>
 </template>
 
 <script lang="ts">
-import { renderless, api } from '@opentiny/vue-renderless/select/vue'
-import { props, setup, directive, defineComponent } from '@opentiny/vue-common'
-import TinyTag from '@opentiny/vue-tag'
-import TinyInput from '@opentiny/vue-input'
-import TinyOption from '@opentiny/vue-option'
-import TinyScrollbar from '@opentiny/vue-scrollbar'
-import TinySelectDropdown from '@opentiny/vue-select-dropdown'
-import TinyButton from '@opentiny/vue-button'
-import { Clickoutside, AutoTip } from '@opentiny/vue-directive'
-import {
-  iconClose,
-  iconHalfselect,
-  iconCheck,
-  iconCheckedSur,
-  iconCopy,
-  iconDownWard,
-  iconSearch,
-  iconEllipsis,
-  iconChevronUp,
-  iconAddCircle,
-  iconLoadingShadow
-} from '@opentiny/vue-icon'
-import Grid from '@opentiny/vue-grid'
-import Tree from '@opentiny/vue-tree'
-import TinyTooltip from '@opentiny/vue-tooltip'
-import FilterBox from '@opentiny/vue-filter-box'
-import RecycleScroller from '@opentiny/vue-recycle-scroller'
+import { renderless, api } from '@opentiny/vue-renderless/select-wrapper/vue'
+import { $props, setup, defineComponent, $prefix } from '@opentiny/vue-common'
+import TinyBaseSelect from '@opentiny/vue-base-select'
+import TinyTreeSelect from '@opentiny/vue-tree-select'
+import TinyGridSelect from '@opentiny/vue-grid-select'
 import '@opentiny/vue-theme/select/index.less'
 
-const getReference = (el, binding, vnode) => {
-  const _ref = binding.expression ? binding.value : binding.arg
-  const popper = vnode.context.$refs[_ref]
-
-  if (popper) {
-    if (Array.isArray(popper)) {
-      popper[0].$refs.reference = el
-    } else {
-      popper.$refs.reference = el
-    }
+const $constants = {
+  TYPE: {
+    Grid: 'grid',
+    Tree: 'tree'
   }
 }
 
 export default defineComponent({
-  emits: [
-    'update:modelValue',
-    'change',
-    'focus',
-    'blur',
-    'clear',
-    'remove-tag',
-    'visible-change',
-    'handleDropdownClick',
-    'dropdown-click',
-    'top-create-click'
-  ],
-  directives: directive({
-    Clickoutside,
-    AutoTip,
-    popover: {
-      bind(el, binding, vnode) {
-        getReference(el, binding, vnode)
-      },
-      inserted(el, binding, vnode) {
-        getReference(el, binding, vnode)
+  name: $prefix + 'Select',
+  inheritAttrs: false,
+  components: {
+    TinyBaseSelect,
+    TinyTreeSelect,
+    TinyGridSelect
+  },
+  props: {
+    ...$props,
+    _constants: {
+      type: Object,
+      default: () => $constants
+    },
+    id: [Number, String],
+    name: String,
+    size: String,
+    remote: Boolean,
+    remoteConfig: {
+      type: Object,
+      default() {
+        return {
+          showIcon: false,
+          clearData: false,
+          autoSearch: false
+        }
+      }
+    },
+    title: String,
+    shape: String,
+    tip: String,
+    label: String,
+    loading: Boolean,
+    disabled: Boolean,
+    options: Array,
+    dataset: Object,
+    textField: {
+      type: String,
+      default: 'label'
+    },
+    tabindex: {
+      type: String,
+      default: '1'
+    },
+    valueField: {
+      type: String,
+      default: 'value'
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    showCheck: {
+      type: Boolean,
+      default: true
+    },
+    showAlloption: {
+      type: Boolean,
+      default: true
+    },
+    multiple: Boolean,
+    clearable: Boolean,
+    noDataText: String,
+    filterable: Boolean,
+    loadingText: String,
+    noMatchText: String,
+    popperClass: String,
+    allowCreate: Boolean,
+    collapseTags: Boolean,
+    remoteMethod: Function,
+    filterMethod: Function,
+    reserveKeyword: Boolean,
+    automaticDropdown: Boolean,
+    defaultFirstOption: Boolean,
+    modelValue: {},
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    placeholder: String,
+    searchPlaceholder: String,
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    hideDrop: {
+      type: Boolean,
+      default: false
+    },
+    copyable: {
+      type: Boolean,
+      default: false
+    },
+    renderType: String,
+    gridOp: {
+      type: Object,
+      default: () => ({})
+    },
+    treeOp: {
+      type: Object,
+      default: () => ({})
+    },
+    delay: {
+      type: Number,
+      default: 200
+    },
+    readonly: Boolean,
+    dropStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    cacheOp: Object,
+    isDropInheritWidth: Boolean,
+    tagSelectable: {
+      type: Boolean,
+      default: false
+    },
+    selectConfig: {
+      type: Object,
+      default() {
+        return {
+          checkMethod() {
+            return true
+          }
+        }
+      }
+    },
+    radioConfig: {
+      type: Object,
+      default() {
+        return {
+          checkMethod() {
+            return true
+          }
+        }
       }
+    },
+    allowCopy: {
+      type: Boolean,
+      default: false
+    },
+    textSplit: {
+      type: String,
+      default: ','
+    },
+    autoClose: Boolean,
+    queryDebounce: Number,
+    ignoreEnter: {
+      type: Boolean,
+      default: false
+    },
+    dropdownIcon: {
+      type: [Object, String],
+      default: ''
+    },
+    disabledTooltipContent: String,
+    hoverExpand: {
+      type: Boolean,
+      default: false
+    },
+    optimization: [Boolean, Object],
+    displayOnly: {
+      type: Boolean,
+      default: false
+    },
+    initQuery: Function,
+    extraQueryParams: {
+      type: [Object, String, Boolean, Array, Number],
+      default: ''
+    },
+    updateDelay: {
+      type: Number,
+      default: 0
+    },
+    showTips: {
+      type: Boolean,
+      default: true
+    },
+    closeByMask: {
+      type: Boolean,
+      default: true
+    },
+    keepFocus: {
+      type: Boolean,
+      default: false
+    },
+    popperOptions: {
+      type: Object,
+      default: () => ({ gpuAcceleration: false, boundariesPadding: 0 })
+    },
+    trim: {
+      type: Boolean,
+      default: false
+    },
+    topCreate: {
+      type: Boolean,
+      default: false
+    },
+    topCreateText: String,
+    initLabel: {
+      type: String,
+      default: ''
+    },
+    blank: {
+      type: Boolean,
+      default: false
+    },
+    tooltipConfig: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    showEmptyValue: Boolean,
+    dropdownHeight: {
+      type: String,
+      default: 'initial'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: undefined
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    showEmptyImage: {
+      type: Boolean,
+      default: false
+    },
+    InputBoxType: {
+      type: String,
+      default: 'input',
+      validator: (value: string) => ['input', 'underline'].includes(value)
+    },
+    tagType: String,
+    clearNoMatchValue: {
+      type: Boolean,
+      default: false
+    },
+    showLimitText: {
+      type: Boolean,
+      default: false
+    },
+    showProportion: {
+      type: Boolean,
+      default: false
+    },
+    clickExpand: {
+      type: Boolean,
+      default: false
+    },
+    maxVisibleRows: {
+      type: Number,
+      default: 1
+    },
+    allText: String,
+    showAllTextTag: {
+      type: Boolean,
+      default: false
+    },
+    maxTagWidth: {
+      type: [String, Number],
+      default: null
+    },
+    autoSelect: {
+      type: Boolean,
+      default: false
     }
-  }),
-  components: {
-    TinyTag,
-    TinyInput,
-    TinyOption,
-    TinyGrid: Grid,
-    TinyTree: Tree,
-    TinyButton,
-    IconClose: iconClose(),
-    TinyScrollbar,
-    IconCopy: iconCopy(),
-    IconAddCircle: iconAddCircle(),
-    IconLoadingShadow: iconLoadingShadow(),
-    TinySelectDropdown,
-    IconHalfselect: iconHalfselect(),
-    IconCheck: iconCheck(),
-    IconCheckedSur: iconCheckedSur(),
-    TinyFilterBox: FilterBox,
-    TinyTooltip,
-    TinyRecycleScroller: RecycleScroller,
-    // tiny 新增，
-    IconSearch: iconSearch(),
-    IconDownWard: iconDownWard(), // 默认下拉图标
-    IconEllipsis: iconEllipsis(),
-    IconChevronUp: iconChevronUp()
   },
-  props: [
-    ...props,
-    'id',
-    'multiple',
-    'name',
-    'dataset',
-    'readonly',
-    'tabindex',
-    'dropStyle',
-    'valueField',
-    'textField',
-    'copyable',
-    'size',
-    'options',
-    'showCheck',
-    'showAlloption',
-    'hideDrop',
-    'modelValue',
-    'showOverflowTooltip',
-    'remote',
-    'remoteConfig',
-    'placement',
-    'loading',
-    'disabled',
-    'valueKey',
-    'clearable',
-    'noDataText',
-    'filterable',
-    'loadingText',
-    'noMatchText',
-    'popperClass',
-    'allowCreate',
-    'placeholder',
-    'remoteMethod',
-    'filterMethod',
-    'collapseTags',
-    'autocomplete',
-    'multipleLimit',
-    'reserveKeyword',
-    'automaticDropdown',
-    'defaultFirstOption',
-    'popperAppendToBody',
-    'showDropdown',
-    'expandTags',
-    'renderType',
-    'gridOp',
-    'treeOp',
-    'delay',
-    'cacheOp',
-    'isDropInheritWidth',
-    'tagSelectable',
-    'selectConfig',
-    'radioConfig',
-    'allowCopy',
-    'textSplit',
-    'autoClose',
-    'queryDebounce',
-    'ignoreEnter',
-    'dropdownIcon',
-    'disabledTooltipContent',
-    'hoverExpand',
-    'optimization',
-    'displayOnly',
-    'initQuery',
-    'extraQueryParams',
-    'shape',
-    'label',
-    'tip',
-    'updateDelay',
-    'showTips',
-    'popperOptions',
-    'trim',
-    'topCreate',
-    'topCreateText',
-    'keepFocus',
-    'initLabel',
-    'blank',
-    'tooltipConfig',
-    'showEmptyValue',
-    'stopPropagation',
-    // 以下为 tiny 新增
-    'searchable',
-    'showEmptyImage',
-    'inputBoxType',
-    'tagType',
-    'clearNoMatchValue',
-    'showLimitText',
-    'showProportion',
-    'clickExpand',
-    'maxVisibleRows',
-    'showAllTextTag',
-    'allText',
-    'maxTagWidth',
-    'autoSelect'
-  ],
   setup(props, context) {
-    return setup({ props, context, renderless, api })
+    const components = {
+      TinyBaseSelect,
+      TinyTreeSelect,
+      TinyGridSelect
+    }
+
+    return setup({ props, context, renderless, api, extendOptions: { components } }) as any
   }
 })
 </script>