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
2023-12-28 15:37:54 +08:00 · 2023-12-28 15:37:54 +08:00 · fe6b94c031
parent 8a554fd0fe
commit fe6b94c031
21 changed files with 263 additions and 78 deletions
--- a/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/select/no-data-text.spec.ts
+++ b/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 }) => {
--- a/examples/sites/demos/pc/app/select/no-data-text.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/select/option-group-composition-api.vue
+++ b/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">
-    <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>
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
+    <tiny-select v-model="value" multiple filterable :searchable="true">
+      <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>
+    <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>
--- a/examples/sites/demos/pc/app/select/option-group.spec.ts
+++ b/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)
 })
--- a/examples/sites/demos/pc/app/select/option-group.vue
+++ b/examples/sites/demos/pc/app/select/option-group.vue
@ -1,14 +1,28 @@
 <template>
-  <tiny-select v-model="value" multiple filterable :searchable="true">
-    <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>
+    <p>场景1：分组 + 多选 + 面板可搜索</p>
+    <tiny-select v-model="value" multiple filterable :searchable="true">
+      <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>
+    <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>
--- a/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
+++ b/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">
-    <template v-for="item in options" :key="item.value">
-      <tiny-tooltip :content="item.tip" placement="right" effect="light">
-        <tiny-option :label="item.label" :value="item.value">
-          <span class="left">{{ item.label }}</span>
-          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
-        </tiny-option>
-      </tiny-tooltip>
-    </template>
-  </tiny-select>
+  <div>
+    <p>场景1：带标签和提示信息</p>
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1" :key="item.value">
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </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>
--- a/examples/sites/demos/pc/app/select/slot-default.spec.ts
+++ b/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')
--- a/examples/sites/demos/pc/app/select/slot-default.vue
+++ b/examples/sites/demos/pc/app/select/slot-default.vue
@ -1,14 +1,29 @@
 <template>
-  <tiny-select v-model="value" popper-class="slot-default">
-    <template v-for="item in options" :key="item.value">
-      <tiny-tooltip :content="item.tip" placement="right" effect="light">
-        <tiny-option :label="item.label" :value="item.value">
-          <span class="left">{{ item.label }}</span>
-          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
-        </tiny-option>
-      </tiny-tooltip>
-    </template>
-  </tiny-select>
+  <div>
+    <p>场景1：带标签和提示信息</p>
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1" :key="item.value">
+        <tiny-tooltip :content="item.tip" placement="right" effect="light">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </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>
--- a/examples/sites/demos/pc/app/select/slot-empty-composition-api.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/select/slot-empty.spec.ts
+++ b/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 网关异常重新加载')
 })
--- a/examples/sites/demos/pc/app/select/slot-empty.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/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'
      },
--- a/packages/theme/src/option-group/index.less
+++ b/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);
+    }
  }
 }
--- a/packages/theme/src/option-group/smb-theme.js
+++ b/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)'
 }
--- a/packages/theme/src/option-group/vars.less
+++ b/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);
  // 分组底部内边距
--- a/packages/theme/src/option/smb-theme.js
+++ b/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)',
--- a/packages/theme/src/option/vars.less
+++ b/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);
  // 选择器下拉选项高亮文本色
--- a/packages/theme/src/select-dropdown/index.less
+++ b/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 {
--- a/packages/theme/src/select-dropdown/smb-theme.js
+++ b/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':
-    'calc(240px - var(--ti-select-dropdown-padding-top) - var(--ti-select-dropdown-padding-bottom) + var(--ti-common-space-2x))',
+  'ti-select-dropdown-max-height': 'calc(32px * 7 + 8px)',
  '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-search-margin-bottom': 'var(--ti-common-space-2x)'
+  'ti-select-dropdown-icon-color': 'var(--ti-common-color-icon-normal)'
 }
--- a/packages/theme/src/select-dropdown/vars.less
+++ b/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';
  // 下拉面板搜索框头部图标显示状态
@ -93,4 +101,4 @@
  --ti-select-dropdown-icon-size: var(--ti-common-font-size-1, 14px);
  // 下拉面板图标颜色
  --ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal, #575d6c);
-}
+}