feat(theme): [select] The DesignCloud theme adapts to scenarios such as empty data, error status, grouping, and search box of the Select component (#1224)

* feat(theme): [select] Aligning empty data scenes with DesignCloud themes

* feat(site): [select] New Error Status Scene Alignment DesignCloud Theme

* docs(site): [select] Add a demo of a dual row scene

* feat(theme): [select] SMB themes adapted to grouping scenarios and panel search boxes

* test(select): [select] Update test cases

examples/sites/demos/pc/app/select/no-data-text-composition-api.vue

@@ -5,7 +5,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：自定义空数据文本</p>
-    <tiny-select v-model="value" no-data-text="None">
+    <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：显示空数据图片</p>

examples/sites/demos/pc/app/select/no-data-text.spec.ts

@@ -21,7 +21,7 @@ test('自定义空数据文本', async ({ page }) => {
   const dropdown = page.locator('body > .tiny-select-dropdown')
 
   await input.click()
-  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('None')
+  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('暂无数据')
 })
 
 test('显示空数据图片', async ({ page }) => {

examples/sites/demos/pc/app/select/no-data-text.vue

@@ -5,7 +5,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：自定义空数据文本</p>
-    <tiny-select v-model="value" no-data-text="None">
+    <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：显示空数据图片</p>

examples/sites/demos/pc/app/select/option-group-composition-api.vue

@@ -1,14 +1,28 @@
 <template>
-  <tiny-select v-model="value" multiple filterable :searchable="true">
+  <div>
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
-      <tiny-option
+    <tiny-select v-model="value" multiple filterable :searchable="true">
-        v-for="item in group.options"
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
-        :key="item.value"
+        <tiny-option
-        :label="item.label"
+          v-for="item in group.options"
-        :value="item.value"
+          :key="item.value"
-      ></tiny-option>
+          :label="item.label"
-    </tiny-option-group>
+          :value="item.value"
-  </tiny-select>
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <p>场景2：分组</p>
+    <tiny-select v-model="value" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
@@ -30,7 +44,11 @@ const options3 = ref([
       { value: 'Chengdu', label: '成都' },
       { value: 'Shenzhen', label: '深圳' },
       { value: 'Guangzhou', label: '广州' },
-      { value: 'Dalian', label: '大连' }
+      { value: 'Dalian', label: '大连' },
+      { value: 'Chongqing', label: '重庆' },
+      { value: 'Xianggang', label: '香港' },
+      { value: 'Aomen', label: '澳门' },
+      { value: 'Wulumuqi', label: '乌鲁木齐' }
     ]
   }
 ])
@@ -41,4 +59,8 @@ const value = ref('')
 .tiny-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/select/option-group.spec.ts

@@ -4,7 +4,7 @@ test('option-group', async ({ page }) => {
   await page.goto('select#option-group')
 
   const wrap = page.locator('#option-group')
-  const select = wrap.locator('.tiny-select')
+  const select = wrap.locator('.tiny-select').nth(0)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
   const title = dropdown.locator('.tiny-option-group__title')
@@ -16,6 +16,6 @@ test('option-group', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
   await expect(option.filter({ hasText: '北京' })).toHaveClass(/is-disabled/)
   await expect(group.nth(0).locator('.tiny-option')).toHaveCount(2)
-  await expect(group.nth(1).locator('.tiny-option')).toHaveCount(4)
+  await expect(group.nth(1).locator('.tiny-option')).toHaveCount(8)
   await expect((await group.all()).length).toEqual(2)
 })

examples/sites/demos/pc/app/select/option-group.vue

@@ -1,14 +1,28 @@
 <template>
-  <tiny-select v-model="value" multiple filterable :searchable="true">
+  <div>
-    <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
-      <tiny-option
+    <tiny-select v-model="value" multiple filterable :searchable="true">
-        v-for="item in group.options"
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
-        :key="item.value"
+        <tiny-option
-        :label="item.label"
+          v-for="item in group.options"
-        :value="item.value"
+          :key="item.value"
-      ></tiny-option>
+          :label="item.label"
-    </tiny-option-group>
+          :value="item.value"
-  </tiny-select>
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <p>场景2：分组</p>
+    <tiny-select v-model="value" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
@@ -37,11 +51,14 @@ export default {
             { value: 'Chengdu', label: '成都' },
             { value: 'Shenzhen', label: '深圳' },
             { value: 'Guangzhou', label: '广州' },
-            { value: 'Dalian', label: '大连' }
+            { value: 'Dalian', label: '大连' },
+            { value: 'Chongqing', label: '重庆' },
+            { value: 'Xianggang', label: '香港' },
+            { value: 'Aomen', label: '澳门' },
+            { value: 'Wulumuqi', label: '乌鲁木齐' }
           ]
         }
-      ],
+      ]
-      value: ''
     }
   }
 }
@@ -51,4 +68,8 @@ export default {
 .tiny-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/select/slot-default-composition-api.vue

@@ -1,28 +1,53 @@
 <template>
-  <tiny-select v-model="value" popper-class="slot-default">
+  <div>
-    <template v-for="item in options" :key="item.value">
+    <p>场景1：带标签和提示信息</p>
-      <tiny-tooltip :content="item.tip" placement="right" effect="light">
+    <tiny-select v-model="value1" popper-class="slot-default">
-        <tiny-option :label="item.label" :value="item.value">
+      <template v-for="item in options1" :key="item.value">
-          <span class="left">{{ item.label }}</span>
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
-          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          <tiny-option :label="item.label" :value="item.value">
-        </tiny-option>
+            <span class="left">{{ item.label }}</span>
-      </tiny-tooltip>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
-    </template>
+          </tiny-option>
-  </tiny-select>
+        </tiny-tooltip>
+      </template>
+    </tiny-select>
+
+    <p>场景2：选项双行</p>
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, Tag as TinyTag, Tooltip as TinyTooltip } from '@opentiny/vue'
 
-const options = ref([
+const options1 = ref([
   { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
   { value: '选项2', label: '双皮奶' },
   { value: '选项3', label: '蚵仔煎' },
   { value: '选项4', label: '龙须面' },
   { value: '选项5', label: '北京烤鸭' }
 ])
-const value = ref('')
+
+const options2 = ref([
+  { value: '选项1', label: '子网1 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项2', label: '子网2 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项3', label: '子网3 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项4', label: '子网4 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项5', label: '子网5 （192.168.0.1/24）', desc: '可用 IP 数 250' }
+])
+
+const value1 = ref('选项1')
+const value2 = ref('选项1')
 </script>
 
 <style lang="less" scoped>
@@ -35,3 +60,14 @@ const value = ref('')
   }
 }
 </style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
+  }
+}
+</style>

examples/sites/demos/pc/app/select/slot-default.spec.ts

@@ -4,7 +4,7 @@ test('选项插槽', async ({ page }) => {
   await page.goto('select#slot-default')
 
   const wrap = page.locator('#slot-default')
-  const select = wrap.locator('.tiny-select')
+  const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')

examples/sites/demos/pc/app/select/slot-default.vue

@@ -1,14 +1,29 @@
 <template>
-  <tiny-select v-model="value" popper-class="slot-default">
+  <div>
-    <template v-for="item in options" :key="item.value">
+    <p>场景1：带标签和提示信息</p>
-      <tiny-tooltip :content="item.tip" placement="right" effect="light">
+    <tiny-select v-model="value1" popper-class="slot-default">
-        <tiny-option :label="item.label" :value="item.value">
+      <template v-for="item in options1" :key="item.value">
-          <span class="left">{{ item.label }}</span>
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
-          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          <tiny-option :label="item.label" :value="item.value">
-        </tiny-option>
+            <span class="left">{{ item.label }}</span>
-      </tiny-tooltip>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
-    </template>
+          </tiny-option>
-  </tiny-select>
+        </tiny-tooltip>
+      </template>
+    </tiny-select>
+
+    <p>场景2：选项双行</p>
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
@@ -23,14 +38,22 @@ export default {
   },
   data() {
     return {
-      options: [
+      options1: [
         { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },
         { value: '选项4', label: '龙须面' },
         { value: '选项5', label: '北京烤鸭' }
       ],
-      value: ''
+      options2: [
+        { value: '选项1', label: '子网1 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项2', label: '子网2 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项3', label: '子网3 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项4', label: '子网4 （192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项5', label: '子网5 （192.168.0.1/24）', desc: '可用 IP 数 250' }
+      ],
+      value1: '选项1',
+      value2: '选项1'
     }
   }
 }
@@ -46,3 +69,14 @@ export default {
   }
 }
 </style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
+  }
+}
+</style>

examples/sites/demos/pc/app/select/slot-empty-composition-api.vue

@@ -1,14 +1,17 @@
 <template>
   <tiny-select v-model="value">
     <template #empty>
-      <div class="custom-empty">空数据插槽</div>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
     </template>
   </tiny-select>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { Select as TinySelect, Button as TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 </script>
@@ -18,6 +21,16 @@ const value = ref('')
   width: 280px;
 }
 .custom-empty {
-  padding: 10px;
+  padding: 87px 0;
+  text-align: center;
+
+  p {
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.5;
+  }
+  .tiny-button {
+    margin-top: 8px;
+  }
 }
 </style>

examples/sites/demos/pc/app/select/slot-empty.spec.ts

@@ -11,5 +11,5 @@ test('空数据插槽', async ({ page }) => {
 
   await input.click()
   await expect((await option.all()).length).toEqual(0)
-  await expect(page.locator('.tiny-select-dropdown')).toHaveText('空数据插槽')
+  await expect(page.locator('.tiny-select-dropdown')).toHaveText('APIG 网关异常重新加载')
 })

examples/sites/demos/pc/app/select/slot-empty.vue

@@ -1,17 +1,21 @@
 <template>
   <tiny-select v-model="value">
     <template #empty>
-      <div class="custom-empty">空数据插槽</div>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
     </template>
   </tiny-select>
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { Select, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect: Select,
+    TinyButton: Button
   },
   data() {
     return {
@@ -26,6 +30,16 @@ export default {
   width: 280px;
 }
 .custom-empty {
-  padding: 10px;
+  padding: 87px 0;
+  text-align: center;
+
+  p {
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.5;
+  }
+  .tiny-button {
+    margin-top: 8px;
+  }
 }
 </style>

examples/sites/demos/pc/app/select/webdoc/select.js

@@ -196,7 +196,7 @@ export default {
       'name': { 'zh-CN': '分组', 'en-US': 'Group' },
       'desc': {
         'zh-CN':
-          '<p>使用 <code>tiny-option-group</code> 组件对备选项进行分组。通过 <code>label</code> 属性设置分组名，code>disabled</code> 属性设置该分组下所有选项为禁用。</p>\n',
+          '<p>使用 <code>tiny-option-group</code> 组件对备选项进行分组。通过 <code>label</code> 属性设置分组名，<code>disabled</code> 属性设置该分组下所有选项为禁用。</p>\n',
         'en-US':
           '<p>Use the <code>tiny-option-group</code> component to group alternative options. Set the group name through the <code>label</code> attribute, and set all options under the group to disabled through the <code>disabled</code> attribute. </p>\n'
       },

packages/theme/src/option-group/index.less

@@ -41,12 +41,20 @@
   .@{option-group-prefix-cls}__title {
     padding: 0 var(--ti-option-group-title-padding-horizontal);
     font-size: var(--ti-option-group-title-font-size);
+    font-weight: var(--ti-option-group-title-font-weight);
     color: var(--ti-option-group-title-text-color);
     line-height: var(--ti-option-group-title-line-height);
+    height: var(--ti-option-group-title-height);
     margin-top: var(--ti-option-group-title-margin-top);
   }
 
   &:first-child .@{option-group-prefix-cls}__title {
-    margin-top: 12px;
+    margin-top: var(--ti-option-group-title-margin-top-first);
+  }
+
+  .@{option-group-prefix-cls}__list {
+    .tiny-option {
+      padding: var(--ti-option-padding-vertical) var(--ti-option-padding-horizontal-group);
+    }
   }
 }

packages/theme/src/option-group/smb-theme.js

@@ -1,5 +1,10 @@
 export const tinyOptionGroupSmbTheme = {
   'ti-option-group-title-font-size': 'var(--ti-common-font-size-0)',
+  'ti-option-group-title-font-weight': 'var(--ti-common-font-weight-normal)',
   'ti-option-group-title-text-color': 'var(--ti-common-color-text-weaken)',
-  'ti-option-group-title-padding-horizontal': 'var(--ti-common-space-4x)'
+  'ti-option-group-title-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-option-group-title-margin-top-first': 'var(--ti-common-space-base)',
+  'ti-option-group-title-margin-top': 'var(--ti-common-space-2x)',
+  'ti-option-group-title-line-height': 'var(--ti-common-line-height-base)',
+  'ti-option-group-title-height': 'var(--ti-common-size-auto)'
 }

packages/theme/src/option-group/vars.less

@@ -15,14 +15,20 @@
   --ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
   // 分组标题字号
   --ti-option-group-title-font-size: var(--ti-common-font-size-base, 12px);
+  // 分组标题字重
+  --ti-option-group-title-font-weight: var(--ti-common-font-weight-bold, 700);
   // 分组标题字体颜色
-  --ti-option-group-title-text-color: var(--ti-common-color-text-secondary, #575d6c);
+  --ti-option-group-title-text-color: var(--ti-common-color-text-weaken, #8a8e99);
   // 分组标题行高
-  --ti-option-group-title-line-height: var(--ti-common-line-height-number, 1.5);
+  --ti-option-group-title-line-height: 30px;
+  // 分组标题高度
+  --ti-option-group-title-height: 30px;
   // 分组标题水平方向外边距
   --ti-option-group-title-padding-horizontal: var(--ti-common-space-10, 10px);
   // 分组标题顶部外边距
-  --ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px);
+  --ti-option-group-title-margin-top: var(--ti-common-space-0, 0px);
+  // 分组第一个标题顶部外边距
+  --ti-option-group-title-margin-top-first: var(--ti-common-space-0, 0px);
   // 分组分割线高度
   --ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px);
   // 分组底部内边距

packages/theme/src/option/smb-theme.js

@@ -4,6 +4,7 @@ export const tinyOptionSmbTheme = {
   'ti-option-border-radius': 'var(--ti-common-border-radius-0)',
   'ti-option-selected-font-weight': 'var(--ti-common-font-weight-6)',
   'ti-option-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-option-padding-horizontal-group': 'var(--ti-common-space-4x)',
   'ti-option-icon-color-selected': 'var(--ti-common-color-icon-graybg-active)',
   'ti-option-checkbox-border-color-hover': '#191919',
   'ti-option-disabled-text-color': 'var(--ti-common-color-text-disabled)',

packages/theme/src/option/vars.less

@@ -49,6 +49,8 @@
   --ti-option-padding-vertical: var(--ti-common-space-0, 0px);
   // 选择下拉框选项水平内边距
   --ti-option-padding-horizontal: var(--ti-common-space-10, 10px);
+  // 分组场景选择下拉框选项水平内边距
+  --ti-option-padding-horizontal-group: calc((var(--ti-common-space-10, 10px) + var(--ti-common-space-1, 1px)) * 2);
   // 选择下拉框选项顶部外边距
   --ti-option-margin-top: var(--ti-common-size-0, 0px);
   // 选择器下拉选项高亮文本色

packages/theme/src/select-dropdown/index.less

@@ -48,6 +48,7 @@
     }
   }
 
+  // 下拉面板搜索框
   & &__search {
     margin: var(--ti-select-dropdown-search-margin-top) var(--ti-select-dropdown-search-margin-right)
       var(--ti-select-dropdown-search-margin-bottom) var(--ti-select-dropdown-search-margin-left);
@@ -59,6 +60,10 @@
       background-color: var(--ti-select-dropdown-search-bg-color);
       padding-right: var(--ti-select-dropdown-search-input-padding-right);
       padding-left: var(--ti-select-dropdown-search-input-padding-left);
+      border-radius: var(--ti-select-dropdown-search-border-radius);
+      border-top-color: var(--ti-select-dropdown-search-border-color-top);
+      border-left-color: var(--ti-select-dropdown-search-border-color-left);
+      border-right-color: var(--ti-select-dropdown-search-border-color-right);
     }
 
     .@{input-predix-cls}__suffix {
@@ -111,6 +116,16 @@
       padding-top: var(--ti-select-dropdown-search-empty-padding-top);
       padding-bottom: var(--ti-select-dropdown-search-empty-padding-bottom);
     }
+
+    & + .@{scrollbar-prefix-cls} {
+      .@{select-dropdown-prefix-cls}__wrap {
+        .tiny-option-group {
+          &:first-child .tiny-option-group__title {
+            margin-top: 0px;
+          }
+        }
+      }
+    }
   }
 
   &__loading {

packages/theme/src/select-dropdown/smb-theme.js

@@ -1,17 +1,18 @@
 export const tinySelectDropdownSmbTheme = {
   'ti-select-dropdown-border-radius': 'var(--ti-common-border-radius-3)',
-  'ti-select-dropdown-empty-text-color': 'var(--ti-common-color-text-weaken)',
+  'ti-select-dropdown-empty-text-color': 'var(--ti-common-color-text-secondary)',
   'ti-select-dropdown-empty-padding-horizontal': 'var(--ti-common-size-0)',
-  'ti-select-dropdown-empty-padding-vertical': 'var(--ti-common-space-2x)',
+  'ti-select-dropdown-empty-padding-vertical': '46px',
+  'ti-select-dropdown-empty-font-size': 'var(--ti-common-font-size-0)',
   'ti-select-dropdown-margin-top': 'var(--ti-common-space-base)',
   'ti-select-dropdown-box-shadow': 'var(--ti-common-shadow-2-down)',
   'ti-select-dropdown-padding-top': 'var(--ti-common-space-2x)',
   'ti-select-dropdown-padding-bottom': 'var(--ti-common-space-2x)',
-  'ti-select-dropdown-max-height':
+  'ti-select-dropdown-max-height': 'calc(32px * 7 + 8px)',
-    'calc(240px - var(--ti-select-dropdown-padding-top) - var(--ti-select-dropdown-padding-bottom) + var(--ti-common-space-2x))',
   'ti-select-dropdown-search-margin-left': 'var(--ti-common-space-4x)',
   'ti-select-dropdown-search-margin-right': 'var(--ti-common-space-4x)',
-  'ti-select-dropdown-search-margin-top': 'var(--ti-common-space-2x)',
+  'ti-select-dropdown-search-margin-top': 'calc(var(--ti-common-space-base) * -1)',
+  'ti-select-dropdown-search-margin-bottom': 'var(--ti-common-space-2x)',
   'ti-select-dropdown-search-width': 'calc(100% - var(--ti-common-space-4x)*2)',
   'ti-select-dropdown-search-bg-color': 'var(--ti-common-color-bg-white-normal)',
   'ti-select-dropdown-search-border-width': 'var(--ti-common-border-weight-normal)',
@@ -21,8 +22,7 @@ export const tinySelectDropdownSmbTheme = {
   'ti-select-dropdown-search-input-padding-left': '28px',
   'ti-select-dropdown-search-empty-padding-top': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-search-empty-padding-bottom': 'var(--ti-common-space-2x)',
-  'ti-select-dropdown-wrap-padding-bottom': 'var(--ti-common-space-base)',
+  'ti-select-dropdown-wrap-padding-bottom': 'var(--ti-common-space-0)',
   'ti-select-dropdown-icon-size': 'var(--ti-common-font-size-2)',
-  'ti-select-dropdown-icon-color': 'var(--ti-common-color-icon-normal)',
+  'ti-select-dropdown-icon-color': 'var(--ti-common-color-icon-normal)'
-  'ti-select-dropdown-search-margin-bottom': 'var(--ti-common-space-2x)'
 }

packages/theme/src/select-dropdown/vars.less

@@ -26,7 +26,7 @@
   // 选择下拉框的顶部外边距
   --ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap, 2px);
   // 下拉面板的最大高度
-  --ti-select-dropdown-max-height: calc(248px - var(--ti-select-dropdown-padding-top) - var(--ti-select-dropdown-padding-bottom) + var(--ti-common-space-base));
+  --ti-select-dropdown-max-height: calc(30px * 8 + 8px);
   // 远程搜索数据为空时下拉框文本色（hide）
   --ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder, #adb0b8);
   // 下拉面板空数据提示文本字号
@@ -75,6 +75,14 @@
   --ti-select-dropdown-search-width: 100%;
   // 下拉面板搜索框的边框宽度
   --ti-select-dropdown-search-border-width: var(--ti-common-size-0, 0px);
+  // 下拉面板搜索框的边框圆角
+  --ti-select-dropdown-search-border-radius: var(--ti-common-border-radius-0, 0px);
+  // 下拉面板搜索框的左边框色
+  --ti-select-dropdown-search-border-color-left: var(--ti-common-color-transparent, transparent);
+  // 下拉面板搜索框的右边框色
+  --ti-select-dropdown-search-border-color-right: var(--ti-common-color-transparent, transparent);
+  // 下拉面板搜索框的上边框色
+  --ti-select-dropdown-search-border-color-top: var(--ti-common-color-transparent, transparent);
   // 下拉面板搜索框尾部图标显示状态
   --ti-select-dropdown-search-suffix-display: 'block';
   // 下拉面板搜索框头部图标显示状态