From d3acf9ab52b42ebae25d30c61b65f47df03aa9f1 Mon Sep 17 00:00:00 2001
From: geff1991 <geff1991@yeah.net>
Date: Sun, 23 Jan 2022 22:48:15 +0800
Subject: [PATCH 1/5] fix(select): fix issuse 128
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

issuse-128,分组搜索

fix #128
---
 examples/select/demos/group.vue |  9 +++------
 src/select/optionGroup.tsx      | 21 ++++++++++++++++++++-
 src/select/select.tsx           |  6 +-----
 src/tree-select/tree-select.tsx |  4 ----
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/examples/select/demos/group.vue b/examples/select/demos/group.vue
index 313705b1a..e79da554a 100644
--- a/examples/select/demos/group.vue
+++ b/examples/select/demos/group.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="tdesign-demo-select-base">
     <!-- 方式一：直接传 options 数据，比插槽的方式更简单 -->
-    <t-select v-model="value1" :options="options" placeholder="请选择" />
+    <t-select v-model="value1" :options="options" placeholder="请选择" filterable />
 
     <!-- 方式二：使用插槽节点 -->
-    <t-select v-model="value2" placeholder="请选择">
+    <t-select v-model="value2" placeholder="请选择" filterable>
       <t-option-group
         v-for="(list, index) in options"
         :key="index"
@@ -28,10 +28,7 @@ export default {
       options: [
         {
           group: '分组一',
-          children: [
-            { label: '选项一', value: 1 },
-            { label: '选项二', value: 2 },
-          ],
+          children: [],
         },
         {
           group: '分组二',
diff --git a/src/select/optionGroup.tsx b/src/select/optionGroup.tsx
index 706a0780d..ed9b6eba6 100644
--- a/src/select/optionGroup.tsx
+++ b/src/select/optionGroup.tsx
@@ -5,12 +5,14 @@ import { prefix } from '../config';
 import CLASSNAMES from '../utils/classnames';
 import props from './option-group-props';
 import { ClassName } from '../common';
+import { TdOptionProps } from './type';
 
 const name = `${prefix}-select-option-group`;
 
 export interface Select extends Vue {
   tSelect: {
     size: string;
+    displayOptions: Array<TdOptionProps>;
   };
 }
 
@@ -33,10 +35,27 @@ export default (Vue as VueConstructor<Select>).extend({
       ];
     },
   },
+  watch: {
+    'tSelect.displayOptions': function () {
+      this.childrenChange();
+    },
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    childrenChange() {
+      this.visible = this.$children
+        && Array.isArray(this.$children)
+        && this.$children.some((option) => (option as any).show === true);
+    },
+  },
   render(): VNode {
     const children: ScopedSlotReturnValue = renderTNodeJSX(this, 'default');
     return (
-      <li class={this.classes}>
+      <li v-show={this.visible} class={this.classes}>
         <div class={`${name}__header`}>{this.label}</div>
         <ul>{children}</ul>
       </li>
diff --git a/src/select/select.tsx b/src/select/select.tsx
index 4b7723e06..c6baf373b 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -320,10 +320,6 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
     },
     visibleChange(val: boolean) {
       emitEvent<Parameters<TdSelectProps['onVisibleChange']>>(this, 'visible-change', val);
-      if (this.focusing && !val) {
-        this.visible = true;
-        return;
-      }
       this.visible = val;
       if (!val) {
         this.searchInput = '';
@@ -603,7 +599,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
           {options.map((groupList: SelectOptionGroup) => {
             const children = groupList.children.filter((item) => this.displayOptionsMap.get(item));
             return (
-              <t-option-group label={groupList.group} divider={groupList.divider}>
+              <t-option-group v-show={children.length} label={groupList.group} divider={groupList.divider}>
                 {this.renderOptions(children)}
               </t-option-group>
             );
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
index ae997d95e..a56e3979a 100644
--- a/src/tree-select/tree-select.tsx
+++ b/src/tree-select/tree-select.tsx
@@ -228,10 +228,6 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
   },
   methods: {
     async popupVisibleChange(visible: boolean) {
-      if (this.focusing && !visible) {
-        this.visible = true;
-        return;
-      }
       await (this.visible = visible);
       if (this.showFilter && this.visible) {
         const searchInput = this.$refs.input as HTMLElement;

From bb2b4e97662c91f856d94e03de1fd441ba35e754 Mon Sep 17 00:00:00 2001
From: geff1991 <geff1991@yeah.net>
Date: Sun, 23 Jan 2022 23:12:12 +0800
Subject: [PATCH 2/5] fix: snapshot

---
 .../__snapshots__/demo.test.js.snap           | 48 ++++++++----
 .../__snapshots__/index.test.js.snap          | 56 +++++++-------
 .../unit/menu/__snapshots__/demo.test.js.snap | 16 ++--
 .../select/__snapshots__/demo.test.js.snap    | 73 ++++++-------------
 .../slider/__snapshots__/index.test.js.snap   |  4 +-
 .../__snapshots__/demo.test.js.snap           | 40 +++++-----
 .../__snapshots__/index.test.js.snap          | 46 ++++++------
 7 files changed, 136 insertions(+), 147 deletions(-)

diff --git a/test/unit/input-number/__snapshots__/demo.test.js.snap b/test/unit/input-number/__snapshots__/demo.test.js.snap
index b59f6852e..ccc60192d 100644
--- a/test/unit/input-number/__snapshots__/demo.test.js.snap
+++ b/test/unit/input-number/__snapshots__/demo.test.js.snap
@@ -10,9 +10,10 @@ exports[`InputNumber center demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -37,9 +38,10 @@ exports[`InputNumber center demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -64,9 +66,10 @@ exports[`InputNumber defaultDemo demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -91,9 +94,10 @@ exports[`InputNumber defaultDemo demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -118,9 +122,10 @@ exports[`InputNumber disabled demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -146,9 +151,10 @@ exports[`InputNumber disabled demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -173,9 +179,10 @@ exports[`InputNumber format demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -200,9 +207,10 @@ exports[`InputNumber format demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -227,9 +235,10 @@ exports[`InputNumber left demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-chevron-down t-size-m"
+        class="t-icon t-icon-chevron-down"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -254,9 +263,10 @@ exports[`InputNumber left demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-chevron-up t-size-m"
+        class="t-icon t-icon-chevron-up"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -332,9 +342,10 @@ exports[`InputNumber size demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -359,9 +370,10 @@ exports[`InputNumber size demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -436,9 +448,10 @@ exports[`InputNumber step demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -463,9 +476,10 @@ exports[`InputNumber step demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -490,9 +504,10 @@ exports[`InputNumber undefined demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove t-size-m"
+        class="t-icon t-icon-remove"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -518,9 +533,10 @@ exports[`InputNumber undefined demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add t-size-m"
+        class="t-icon t-icon-add"
         fill="none"
         height="1em"
+        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
diff --git a/test/unit/input-number/__snapshots__/index.test.js.snap b/test/unit/input-number/__snapshots__/index.test.js.snap
index 8c045e236..fc1036cb2 100644
--- a/test/unit/input-number/__snapshots__/index.test.js.snap
+++ b/test/unit/input-number/__snapshots__/index.test.js.snap
@@ -1,100 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`InputNumber :props :defaultValue, default value 6 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :disabled, function can not be call 1`] = `
-<div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :format, with 6% 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :max, value 6 < max 10 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :max, value 16 > max 10 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :min, value -1 < min 1 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :min, value 6 > min 1 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode, without class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode:column, with class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+<div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size: medium;">
       <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size: medium;">
       <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode:row, without class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
@@ -111,10 +111,10 @@ exports[`InputNumber :props :size:large, with class t-size-l 1`] = `
 `;
 
 exports[`InputNumber :props :size:medium, with class t-size-m 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
@@ -131,30 +131,30 @@ exports[`InputNumber :props :size:small, with class t-size-s 1`] = `
 `;
 
 exports[`InputNumber :props :step, 2 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :value, 6 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props class, with class t-input-number 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
diff --git a/test/unit/menu/__snapshots__/demo.test.js.snap b/test/unit/menu/__snapshots__/demo.test.js.snap
index 034de6b64..ce94c07dd 100644
--- a/test/unit/menu/__snapshots__/demo.test.js.snap
+++ b/test/unit/menu/__snapshots__/demo.test.js.snap
@@ -58,7 +58,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-search"
+            class="t-icon t-icon-search t-menu__operations-icon"
           >
             <use
               href="#t-icon-search"
@@ -70,7 +70,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-mail"
+            class="t-icon t-icon-mail t-menu__operations-icon"
           >
             <use
               href="#t-icon-mail"
@@ -82,7 +82,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-user"
+            class="t-icon t-icon-user t-menu__operations-icon"
           >
             <use
               href="#t-icon-user"
@@ -94,7 +94,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-ellipsis"
+            class="t-icon t-icon-ellipsis t-menu__operations-icon"
           >
             <use
               href="#t-icon-ellipsis"
@@ -164,7 +164,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-search"
+            class="t-icon t-icon-search t-menu__operations-icon"
           >
             <use
               href="#t-icon-search"
@@ -176,7 +176,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-mail"
+            class="t-icon t-icon-mail t-menu__operations-icon"
           >
             <use
               href="#t-icon-mail"
@@ -188,7 +188,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-user"
+            class="t-icon t-icon-user t-menu__operations-icon"
           >
             <use
               href="#t-icon-user"
@@ -200,7 +200,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-menu__operations-icon t-icon t-icon-ellipsis"
+            class="t-icon t-icon-ellipsis t-menu__operations-icon"
           >
             <use
               href="#t-icon-ellipsis"
diff --git a/test/unit/select/__snapshots__/demo.test.js.snap b/test/unit/select/__snapshots__/demo.test.js.snap
index c0fc75a87..9a65901b8 100644
--- a/test/unit/select/__snapshots__/demo.test.js.snap
+++ b/test/unit/select/__snapshots__/demo.test.js.snap
@@ -2939,6 +2939,7 @@ exports[`Steps Steps group demo works fine 1`] = `
               >
                 <li
                   class="t-select-option-group t-size-m t-select-option-group__divider"
+                  style="display: none;"
                 >
                   <div
                     class="t-select-option-group__header"
@@ -2948,24 +2949,7 @@ exports[`Steps Steps group demo works fine 1`] = `
                   <ul>
                     <ul
                       class="t-select__list"
-                    >
-                      <li
-                        class="t-select-option t-size-m"
-                        title="选项一"
-                      >
-                        <span>
-                          选项一
-                        </span>
-                      </li>
-                      <li
-                        class="t-select-option t-size-m"
-                        title="选项二"
-                      >
-                        <span>
-                          选项二
-                        </span>
-                      </li>
-                    </ul>
+                    />
                   </ul>
                 </li>
                 <li
@@ -3054,17 +3038,22 @@ exports[`Steps Steps group demo works fine 1`] = `
       <div
         class="t-select t-size-m"
       >
-        <span
-          class="t-select__placeholder"
-        >
-           请选择
-        </span>
         <span
           class="t-tag t-tag--default t-size-m t-tag--dark"
           style="display: none;"
         >
           +0
         </span>
+        <div
+          class="t-input t-size-m t-is-readonly t-select__input"
+        >
+          <input
+            class="t-input__inner"
+            placeholder="请选择"
+            readonly="readonly"
+            type="text"
+          />
+        </div>
         <svg
           class="t-fake-arrow t-select__right-icon"
           fill="none"
@@ -3132,28 +3121,7 @@ exports[`Steps Steps group demo works fine 1`] = `
                   >
                     分组一
                   </div>
-                  <ul>
-                    <li
-                      class="t-select-option t-size-m"
-                      title="选项一"
-                    >
-                      <span>
-                        
-        选项一
-      
-                      </span>
-                    </li>
-                    <li
-                      class="t-select-option t-size-m"
-                      title="选项二"
-                    >
-                      <span>
-                        
-        选项二
-      
-                      </span>
-                    </li>
-                  </ul>
+                  <ul />
                 </li>
                 <li
                   class="t-select-option-group t-size-m t-select-option-group__divider"
@@ -3245,17 +3213,22 @@ exports[`Steps Steps group demo works fine 1`] = `
       <div
         class="t-select t-size-m"
       >
-        <span
-          class="t-select__placeholder"
-        >
-           请选择
-        </span>
         <span
           class="t-tag t-tag--default t-size-m t-tag--dark"
           style="display: none;"
         >
           +0
         </span>
+        <div
+          class="t-input t-size-m t-is-readonly t-select__input"
+        >
+          <input
+            class="t-input__inner"
+            placeholder="请选择"
+            readonly="readonly"
+            type="text"
+          />
+        </div>
         <svg
           class="t-fake-arrow t-select__right-icon"
           fill="none"
diff --git a/test/unit/slider/__snapshots__/index.test.js.snap b/test/unit/slider/__snapshots__/index.test.js.snap
index 62c18ea1c..3058fa5cc 100644
--- a/test/unit/slider/__snapshots__/index.test.js.snap
+++ b/test/unit/slider/__snapshots__/index.test.js.snap
@@ -54,10 +54,10 @@ exports[`Slider [marks] render right 1`] = `
     </div>
   </div>
   <div class="t-slider__input-container">
-    <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+    <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size: medium;">
           <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+      <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size: medium;">
           <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
diff --git a/test/unit/tree-select/__snapshots__/demo.test.js.snap b/test/unit/tree-select/__snapshots__/demo.test.js.snap
index 8ca07ff67..609f25adc 100644
--- a/test/unit/tree-select/__snapshots__/demo.test.js.snap
+++ b/test/unit/tree-select/__snapshots__/demo.test.js.snap
@@ -160,10 +160,10 @@ exports[`TreeSelect base demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -421,10 +421,10 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -674,10 +674,10 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -935,10 +935,10 @@ exports[`TreeSelect filterable demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1139,10 +1139,10 @@ exports[`TreeSelect lazy demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1398,10 +1398,10 @@ exports[`TreeSelect multiple demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1613,10 +1613,10 @@ exports[`TreeSelect prefix demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1824,10 +1824,10 @@ exports[`TreeSelect props demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -2035,10 +2035,10 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -2290,10 +2290,10 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="display: none;"
+          style="font-size: medium; display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
diff --git a/test/unit/tree-select/__snapshots__/index.test.js.snap b/test/unit/tree-select/__snapshots__/index.test.js.snap
index 1e61a607c..a274097a9 100644
--- a/test/unit/tree-select/__snapshots__/index.test.js.snap
+++ b/test/unit/tree-select/__snapshots__/index.test.js.snap
@@ -23,7 +23,7 @@ exports[`TreeSelect :props :clearable 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -59,7 +59,7 @@ exports[`TreeSelect :props :defaultValue 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+2</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -95,7 +95,7 @@ exports[`TreeSelect :props :disabled 1`] = `
     <div class="t-select t-is-disabled t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-is-disabled t-select__input" style="display: none;"><input disabled="disabled" placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -129,7 +129,7 @@ exports[`TreeSelect :props :empty string 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -165,7 +165,7 @@ exports[`TreeSelect :props :filterable 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -199,7 +199,7 @@ exports[`TreeSelect :props :loading 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -233,7 +233,7 @@ exports[`TreeSelect :props :loadingText 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -269,7 +269,7 @@ exports[`TreeSelect :props :max 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -305,7 +305,7 @@ exports[`TreeSelect :props :minCollapsedNum 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+-1</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -341,7 +341,7 @@ exports[`TreeSelect :props :multiple 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -377,7 +377,7 @@ exports[`TreeSelect :props :placeholder 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder">please select address</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="please select address" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -413,7 +413,7 @@ exports[`TreeSelect :props :popupProps 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -485,7 +485,7 @@ exports[`TreeSelect :props :treeProps 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -521,7 +521,7 @@ exports[`TreeSelect :props :value 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="shenzhen" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -557,7 +557,7 @@ exports[`TreeSelect :props :valueType 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span><span title="[object Object]" class="t-select__single">[object Object]</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="[object Object]" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -593,7 +593,7 @@ exports[`TreeSelect <slot> <collapsedItems> 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -629,7 +629,7 @@ exports[`TreeSelect <slot> <empty> 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -663,7 +663,7 @@ exports[`TreeSelect <slot> <loadingText> 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -699,7 +699,7 @@ exports[`TreeSelect <slot> <prefixIcon> 1`] = `
     <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"><div><i>icon</i></div></span><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -735,7 +735,7 @@ exports[`TreeSelect function :collapsedItems 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -771,7 +771,7 @@ exports[`TreeSelect function :empty 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -805,7 +805,7 @@ exports[`TreeSelect function :loadingText 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -841,7 +841,7 @@ exports[`TreeSelect function :prefixIcon 1`] = `
     <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"></span><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">

From 181d568fe06c9b1f6eaa2fe9ba3fd7916986415d Mon Sep 17 00:00:00 2001
From: geff1991 <geff1991@yeah.net>
Date: Sun, 23 Jan 2022 23:31:45 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix(select):=20=E8=BF=9C=E7=A8=8B=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=97=B6=EF=BC=8C=E8=BE=93=E5=85=A5=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E5=90=8E=EF=BC=8C=E4=BC=9A=E5=86=8D=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=80=E6=AC=A1search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

远程搜索时，输入搜索选中后，会再执行一次search
---
 examples/select/demos/remote-search.vue |  72 ++++----
 src/select/select.tsx                   |   1 +
 test/ssr/__snapshots__/ssr.test.js.snap | 236 ++++++++++++------------
 3 files changed, 159 insertions(+), 150 deletions(-)

diff --git a/examples/select/demos/remote-search.vue b/examples/select/demos/remote-search.vue
index 1dd78c8c1..6aadd0dab 100644
--- a/examples/select/demos/remote-search.vue
+++ b/examples/select/demos/remote-search.vue
@@ -7,7 +7,7 @@
       :onSearch="remoteMethod"
       :loading="loading"
       :options="options"
-      style="width: 200px;display: inline-block;margin: 0 20px 20px 0;"
+      style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
     />
     <t-select
       v-model="value2"
@@ -18,7 +18,7 @@
       @search="remoteMethod2"
       :loading="loading2"
       reserveKeyword
-      style="width: 400px;display: inline-block;"
+      style="width: 400px; display: inline-block"
     />
   </div>
 </template>
@@ -45,41 +45,45 @@ export default {
     },
     remoteMethod(search) {
       console.log('search', search);
-      if (search) {
-        this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-          this.options = [{
-            value: `${search}_test1`,
-            label: `${search}_test1`,
-          }, {
-            value: `${search}_test2`,
-            label: `${search}_test2`,
-          }, {
-            value: `${search}_test3`,
-            label: `${search}_test3`,
-          }];
-        }, 500);
-      }
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.options = [
+          {
+            value: `${search}test1`,
+            label: `${search}test1`,
+          },
+          {
+            value: `${search}test2`,
+            label: `${search}test2`,
+          },
+          {
+            value: `${search}test3`,
+            label: `${search}test3`,
+          },
+        ];
+      }, 500);
     },
     remoteMethod2(search) {
       console.log('search2', search);
-      if (search) {
-        this.loading2 = true;
-        setTimeout(() => {
-          this.loading2 = false;
-          this.options2 = [{
-            value: `${search}_test1`,
-            label: `${search}_test1`,
-          }, {
-            value: `${search}_test2`,
-            label: `${search}_test2`,
-          }, {
-            value: `${search}_test3`,
-            label: `${search}_test3`,
-          }];
-        }, 500);
-      }
+      this.loading2 = true;
+      setTimeout(() => {
+        this.loading2 = false;
+        this.options2 = [
+          {
+            value: `${search}test1`,
+            label: `${search}test1`,
+          },
+          {
+            value: `${search}test2`,
+            label: `${search}test2`,
+          },
+          {
+            value: `${search}test3`,
+            label: `${search}test3`,
+          },
+        ];
+      }, 500);
     },
   },
 };
diff --git a/src/select/select.tsx b/src/select/select.tsx
index c6baf373b..8e0697810 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -264,6 +264,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
       }
     },
     searchInput(val) {
+      if (!val && !this.visible) return;
       if (isFunction(this.onSearch) || this.$listeners.search) {
         this.debounceOnRemote();
       }
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 6d4022192..fdc0a6e00 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -2807,7 +2807,7 @@ exports[`ssr snapshot test renders ./examples/comment/demos/reply.vue correctly
       <div class="t-comment__inner">
         <div class="t-comment__avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt="" class="t-comment__avatar-image"></div>
         <div class="t-comment__content">
-          <div class="t-comment__author"><span class="t-comment__name"><span>评论作者名B</span> <svg class="author-icon t-icon t-icon-caret-right-small t-size-s">
+          <div class="t-comment__author"><span class="t-comment__name"><span>评论作者名B</span> <svg class="t-icon t-icon-caret-right-small t-size-s author-icon">
               <use href="#t-icon-caret-right-small"></use>
             </svg> <span>评论作者名A</span></span><span class="t-comment__time">今天16:38</span></div>
           <div class="t-comment__detail">这里是评论者写的评论内容。</div>
@@ -3099,7 +3099,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
       <div class="t-select t-size-m"><span class="t-select__placeholder">see empty data in TreeSelect</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see empty data in TreeSelect" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -3114,7 +3114,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-select__placeholder">see loading text in TreeSelect</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see loading text in TreeSelect" type="text" value="" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see loading text in TreeSelect" type="text" value="" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -3131,7 +3131,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
       <div class="t-select t-size-m"><span class="t-select__placeholder" style="display:none;">tree select</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="tree select" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -4734,7 +4734,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
       <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">帮助</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="自定义右侧图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="font-size:16px;color:#0006;"><use href="#t-icon-help-circle"></use></svg></span>
+          <div class="t-input t-size-m"><input placeholder="自定义右侧图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:#;8:0;9:0;10:0;11:6;font-size:16px;"><use href="#t-icon-help-circle"></use></svg></span>
         </div>
       </div>
     </div>
@@ -5220,7 +5220,7 @@ exports[`ssr snapshot test renders ./examples/icon/demos/base.vue correctly 1`]
       <use href="#t-icon-check-circle-filled"></use>
     </svg> <svg class="t-icon t-icon-check-circle-filled">
       <use href="#t-icon-check-circle-filled"></use>
-    </svg> <svg class="t-icon t-icon-check-circle-filled t-size-m">
+    </svg> <svg class="t-icon t-icon-check-circle-filled" style="font-size:medium;">
       <use href="#t-icon-check-circle-filled"></use>
     </svg> <svg class="t-icon t-icon-check-circle-filled t-size-l">
       <use href="#t-icon-check-circle-filled"></use>
@@ -5241,24 +5241,24 @@ exports[`ssr snapshot test renders ./examples/icon/demos/base.vue correctly 1`]
 
 exports[`ssr snapshot test renders ./examples/icon/demos/enhanced.vue correctly 1`] = `
 <div class="t-demo-iconfont">
-  <div><svg class="t-icon cps-icon-home-sheep">
+  <div><svg class="t-icon t-icon-cps-icon-home-sheep">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep t-size-m">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:medium;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep t-size-l">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep t-size-l">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep" style="font-size:25px;">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:25px;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep" style="font-size:2em;">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:2em;">
       <use href="#cps-icon-home-sheep"></use>
     </svg></div><br>
-  <div><svg class="t-icon cps-icon-home-sheep" style="color:red;">
+  <div><svg class="t-icon t-icon-cps-icon-home-sheep" style="color:red;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep" style="color:green;">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="color:green;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon cps-icon-home-sheep" style="color:orange;">
+    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="color:orange;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-home">
+    </svg> <svg class="t-icon t-icon-t-icon-home">
       <use href="#t-icon-home"></use>
     </svg></div>
 </div>
@@ -5267,14 +5267,14 @@ exports[`ssr snapshot test renders ./examples/icon/demos/enhanced.vue correctly
 exports[`ssr snapshot test renders ./examples/icon/demos/iconfont.vue correctly 1`] = `
 <div class="t-demo-iconfont">
   <div class="t-demo-row"><i class="t-icon t-icon-loading"></i> <i class="t-icon t-icon-close"></i> <i class="t-icon t-icon-check-circle-filled"></i></div> <br>
-  <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled t-size-s"></i> <i class="t-icon t-icon-check-circle-filled"></i> <i class="t-icon t-icon-check-circle-filled t-size-m"></i> <i class="t-icon t-icon-check-circle-filled t-size-l"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:25px;"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:2em;"></i></div> <br>
+  <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled t-size-s"></i> <i class="t-icon t-icon-check-circle-filled"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:medium;"></i> <i class="t-icon t-icon-check-circle-filled t-size-l"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:25px;"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:2em;"></i></div> <br>
   <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled" style="color:red;"></i> <i class="t-icon t-icon-check-circle-filled" style="color:green;"></i> <i class="t-icon t-icon-check-circle-filled" style="color:orange;"></i></div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./examples/icon/demos/iconfont-enhanced.vue correctly 1`] = `
 <div class="t-demo-iconfont">
-  <div><i class="t-icon cps-icon cps-icon-home-sheep"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-m"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-l"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:25px;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:2em;"></i></div><br>
+  <div><i class="t-icon cps-icon cps-icon-home-sheep"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:medium;"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-l"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:25px;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:2em;"></i></div><br>
   <div><i class="t-icon cps-icon cps-icon-home-sheep" style="color:red;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="color:green;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="color:orange;"></i> <i class="t-icon t-icon-home"></i></div> <br>
 </div>
 `;
@@ -5292,7 +5292,7 @@ exports[`ssr snapshot test renders ./examples/icon/demos/single.vue correctly 1`
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
     </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
-    </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-size-m">
+    </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled" style="font-size:medium;">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
     </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-size-l">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
@@ -5443,24 +5443,24 @@ exports[`ssr snapshot test renders ./examples/input/demos/textarea.vue correctly
 exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue correctly 1`] = `
 <div class="tdesign-demo-block-column">
   <div style="width:20%;">
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-left"><input autocomplete="off" ref="refInputElem" value="100" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+      <div class="t-input t-align-left"><input autocomplete="off" ref="refInputElem" value="100" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-center"><input autocomplete="off" ref="refInputElem" value="200" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+      <div class="t-input t-align-center"><input autocomplete="off" ref="refInputElem" value="200" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-right"><input autocomplete="off" ref="refInputElem" value="300" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+      <div class="t-input t-align-right"><input autocomplete="off" ref="refInputElem" value="300" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
@@ -5481,10 +5481,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue corre
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5493,10 +5493,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue corr
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/default.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="2021" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="2021" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5505,10 +5505,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/default.vue cor
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/disabled.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5517,10 +5517,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/disabled.vue co
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="输入" value="" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="输入" value="" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5529,10 +5529,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue corre
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3%" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3%" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5541,10 +5541,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue corr
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/left.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+  <div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
         <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
         <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5568,10 +5568,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/size.vue correc
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
-  <div class="t-input-number t-size-m" style="margin:0 50px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m" style="margin:0 50px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5587,10 +5587,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/size.vue correc
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/step.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3.20" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3.20" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5710,11 +5710,11 @@ exports[`ssr snapshot test renders ./examples/layout/demos/combine.vue correctly
             <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
             <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
           </ul>
-          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
                 <use href="#t-icon-search"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-notification-filled">
+              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-notification-filled t-menu__operations-icon">
                 <use href="#t-icon-notification-filled"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-home">
+              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-home t-menu__operations-icon">
                 <use href="#t-icon-home"></use>
               </svg></a></div>
         </div>
@@ -5789,11 +5789,11 @@ exports[`ssr snapshot test renders ./examples/layout/demos/top.vue correctly 1`]
             <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
             <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
           </ul>
-          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
                 <use href="#t-icon-search"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-notification-filled">
+              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-notification-filled t-menu__operations-icon">
                 <use href="#t-icon-notification-filled"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-home">
+              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-home t-menu__operations-icon">
                 <use href="#t-icon-home"></use>
               </svg></a></div>
         </div>
@@ -6451,7 +6451,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/closable-side.vue corre
     资源编辑
   </span></li>
     </ul>
-    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-chevron-right">
+    <div class="t-menu__operations"><svg class="t-icon t-icon-chevron-right t-menu__operations-icon">
         <use href="#t-icon-chevron-right"></use>
       </svg></div>
   </div>
@@ -6511,13 +6511,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/double.vue correctly 1`
           </ul>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6543,13 +6543,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/double.vue correctly 1`
           </ul>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6578,7 +6578,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/group-side.vue correctl
         <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容</span></li>
       </div>
     </ul>
-    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
+    <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
         <use href="#t-icon-view-list"></use>
       </svg></div>
   </div>
@@ -6595,13 +6595,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-dark.vue corr
       <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
       <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6631,13 +6631,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-mode-tile.vue
       <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
       <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6690,13 +6690,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-tile.vue corr
     </li></span></li>
     <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单4</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6763,7 +6763,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multi-side.vue correctl
       资源编辑
     </span></li>
       </ul>
-      <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
+      <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
           <use href="#t-icon-view-list"></use>
         </svg></div>
     </div>
@@ -6838,7 +6838,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multi-side.vue correctl
       资源编辑
     </span></li>
       </ul>
-      <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
+      <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
           <use href="#t-icon-view-list"></use>
         </svg></div>
     </div>
@@ -6901,13 +6901,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multiple.vue correctly
           </div>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6941,13 +6941,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multiple.vue correctly
           </div>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6995,7 +6995,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/popup-side.vue correctl
     资源列表
   </span></li>
     </ul>
-    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
+    <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
         <use href="#t-icon-view-list"></use>
       </svg></div>
   </div>
@@ -7026,13 +7026,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/single.vue correctly 1`
         <li class="t-menu__item t-is-active t-menu__item--plain"><span class="t-menu__content">菜单2</span></li>
         <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">禁用菜单</span></li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -7045,13 +7045,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/single.vue correctly 1`
         <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单2</span></li>
         <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">禁用菜单</span></li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
+          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -9037,17 +9037,21 @@ exports[`ssr snapshot test renders ./examples/select/demos/group.vue correctly 1
   <div class="t-select__wrap">
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
-      <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+      <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg></div>
+        </svg>
+      </div>
     </div>
   </div>
   <div class="t-select__wrap">
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
-      <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+      <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg></div>
+        </svg>
+      </div>
     </div>
   </div>
 </div>
@@ -9690,10 +9694,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
           </div>
         </div>
         <div class="t-slider__input-container">
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
@@ -9720,18 +9724,18 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
           </div>
         </div>
         <div class="t-slider__input-container">
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
           <div class="t-slider__center-line"></div>
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
@@ -9758,10 +9762,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
         </div>
       </div>
       <div class="t-slider__input-container is-vertical">
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
@@ -9788,18 +9792,18 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
         </div>
       </div>
       <div class="t-slider__input-container is-vertical">
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
         <div class="t-slider__center-line"></div>
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
@@ -15402,7 +15406,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/base.vue correct
       <div class="t-select t-size-m"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15424,7 +15428,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">+1</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15441,7 +15445,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">更多...</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15463,7 +15467,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/dvalue.vue corre
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen,guangzhou" class="t-select__single">shenzhen,guangzhou</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen,guangzhou" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15490,7 +15494,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/filterable.vue c
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15512,7 +15516,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/lazy.vue correct
       <div class="t-select t-size-m"><span class="t-select__placeholder">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15534,7 +15538,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/multiple.vue cor
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15556,7 +15560,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/prefix.vue corre
       <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"><svg class="t-icon t-icon-user"><use href="#t-icon-user"></use></svg></span><span class="t-select__placeholder">请输入</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15578,7 +15582,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/props.vue correc
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15599,7 +15603,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuedisplay.vue
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span> () <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15616,7 +15620,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuedisplay.vue
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15638,7 +15642,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuetype.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="[object Object]" class="t-select__single">[object Object]</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="[object Object]" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15655,7 +15659,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuetype.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">

From 002c5e669ebb9476fdc78c90a4c537c4d0fa7ed1 Mon Sep 17 00:00:00 2001
From: geff1991 <geff1991@yeah.net>
Date: Sun, 23 Jan 2022 23:40:35 +0800
Subject: [PATCH 4/5] fix(select): style

yangshi

fix #260
---
 src/select/select.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/select/select.tsx b/src/select/select.tsx
index 8e0697810..60c18c208 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -288,7 +288,6 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
     visible() {
       this.visible && document.addEventListener('keydown', this.keydownEvent);
       !this.visible && document.removeEventListener('keydown', this.keydownEvent);
-      this.visible && Array.isArray(this.hoverOptions) && this.initHoverindex();
     },
   },
   methods: {
@@ -461,6 +460,10 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
       }
       switch (e.code) {
         case 'ArrowDown':
+          if (this.hoverIndex === -1) {
+            this.initHoverindex();
+            return;
+          }
           if (this.hoverIndex < this.hoverOptions.length - 1) {
             this.hoverIndex += 1;
             this.arrowDownOption();
@@ -470,6 +473,10 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
           }
           break;
         case 'ArrowUp':
+          if (this.hoverIndex === -1) {
+            this.initHoverindex();
+            return;
+          }
           if (this.hoverIndex > 0) {
             this.hoverIndex -= 1;
             this.arrowUpOption();

From 777798001259747616e1fd5f8321604a9fade2cb Mon Sep 17 00:00:00 2001
From: geff1991 <geff1991@yeah.net>
Date: Mon, 24 Jan 2022 19:36:45 +0800
Subject: [PATCH 5/5] feat: snamshot

update snapshot
---
 test/ssr/__snapshots__/ssr.test.js.snap       | 224 +++++++++---------
 .../calendar/__snapshots__/demo.test.js.snap  | 128 +++++++---
 .../calendar/__snapshots__/index.test.js.snap |  22 +-
 .../__snapshots__/demo.test.js.snap           |  48 ++--
 .../__snapshots__/index.test.js.snap          |  56 ++---
 .../unit/menu/__snapshots__/demo.test.js.snap |  16 +-
 .../__snapshots__/demo.test.js.snap           |  54 +++--
 .../select/__snapshots__/demo.test.js.snap    | 136 ++++++++---
 .../select/__snapshots__/index.test.js.snap   |  30 +--
 .../slider/__snapshots__/index.test.js.snap   |   4 +-
 .../transfer/__snapshots__/demo.test.js.snap  |   4 +-
 .../__snapshots__/demo.test.js.snap           |  40 ++--
 .../__snapshots__/index.test.js.snap          |  46 ++--
 13 files changed, 476 insertions(+), 332 deletions(-)

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index fdc0a6e00..b2e8be813 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -2807,7 +2807,7 @@ exports[`ssr snapshot test renders ./examples/comment/demos/reply.vue correctly
       <div class="t-comment__inner">
         <div class="t-comment__avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt="" class="t-comment__avatar-image"></div>
         <div class="t-comment__content">
-          <div class="t-comment__author"><span class="t-comment__name"><span>评论作者名B</span> <svg class="t-icon t-icon-caret-right-small t-size-s author-icon">
+          <div class="t-comment__author"><span class="t-comment__name"><span>评论作者名B</span> <svg class="author-icon t-icon t-icon-caret-right-small t-size-s">
               <use href="#t-icon-caret-right-small"></use>
             </svg> <span>评论作者名A</span></span><span class="t-comment__time">今天16:38</span></div>
           <div class="t-comment__detail">这里是评论者写的评论内容。</div>
@@ -3099,7 +3099,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
       <div class="t-select t-size-m"><span class="t-select__placeholder">see empty data in TreeSelect</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see empty data in TreeSelect" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -3114,7 +3114,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-select__placeholder">see loading text in TreeSelect</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see loading text in TreeSelect" type="text" value="" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="see loading text in TreeSelect" type="text" value="" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -3131,7 +3131,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
       <div class="t-select t-size-m"><span class="t-select__placeholder" style="display:none;">tree select</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="tree select" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -4734,7 +4734,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
       <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">帮助</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="自定义右侧图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:#;8:0;9:0;10:0;11:6;font-size:16px;"><use href="#t-icon-help-circle"></use></svg></span>
+          <div class="t-input t-size-m"><input placeholder="自定义右侧图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="font-size:16px;color:#0006;"><use href="#t-icon-help-circle"></use></svg></span>
         </div>
       </div>
     </div>
@@ -5220,7 +5220,7 @@ exports[`ssr snapshot test renders ./examples/icon/demos/base.vue correctly 1`]
       <use href="#t-icon-check-circle-filled"></use>
     </svg> <svg class="t-icon t-icon-check-circle-filled">
       <use href="#t-icon-check-circle-filled"></use>
-    </svg> <svg class="t-icon t-icon-check-circle-filled" style="font-size:medium;">
+    </svg> <svg class="t-icon t-icon-check-circle-filled t-size-m">
       <use href="#t-icon-check-circle-filled"></use>
     </svg> <svg class="t-icon t-icon-check-circle-filled t-size-l">
       <use href="#t-icon-check-circle-filled"></use>
@@ -5241,24 +5241,24 @@ exports[`ssr snapshot test renders ./examples/icon/demos/base.vue correctly 1`]
 
 exports[`ssr snapshot test renders ./examples/icon/demos/enhanced.vue correctly 1`] = `
 <div class="t-demo-iconfont">
-  <div><svg class="t-icon t-icon-cps-icon-home-sheep">
+  <div><svg class="t-icon cps-icon-home-sheep">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:medium;">
+    </svg> <svg class="t-icon cps-icon-home-sheep t-size-m">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep t-size-l">
+    </svg> <svg class="t-icon cps-icon-home-sheep t-size-l">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:25px;">
+    </svg> <svg class="t-icon cps-icon-home-sheep" style="font-size:25px;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="font-size:2em;">
+    </svg> <svg class="t-icon cps-icon-home-sheep" style="font-size:2em;">
       <use href="#cps-icon-home-sheep"></use>
     </svg></div><br>
-  <div><svg class="t-icon t-icon-cps-icon-home-sheep" style="color:red;">
+  <div><svg class="t-icon cps-icon-home-sheep" style="color:red;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="color:green;">
+    </svg> <svg class="t-icon cps-icon-home-sheep" style="color:green;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-cps-icon-home-sheep" style="color:orange;">
+    </svg> <svg class="t-icon cps-icon-home-sheep" style="color:orange;">
       <use href="#cps-icon-home-sheep"></use>
-    </svg> <svg class="t-icon t-icon-t-icon-home">
+    </svg> <svg class="t-icon t-icon-home">
       <use href="#t-icon-home"></use>
     </svg></div>
 </div>
@@ -5267,14 +5267,14 @@ exports[`ssr snapshot test renders ./examples/icon/demos/enhanced.vue correctly
 exports[`ssr snapshot test renders ./examples/icon/demos/iconfont.vue correctly 1`] = `
 <div class="t-demo-iconfont">
   <div class="t-demo-row"><i class="t-icon t-icon-loading"></i> <i class="t-icon t-icon-close"></i> <i class="t-icon t-icon-check-circle-filled"></i></div> <br>
-  <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled t-size-s"></i> <i class="t-icon t-icon-check-circle-filled"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:medium;"></i> <i class="t-icon t-icon-check-circle-filled t-size-l"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:25px;"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:2em;"></i></div> <br>
+  <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled t-size-s"></i> <i class="t-icon t-icon-check-circle-filled"></i> <i class="t-icon t-icon-check-circle-filled t-size-m"></i> <i class="t-icon t-icon-check-circle-filled t-size-l"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:25px;"></i> <i class="t-icon t-icon-check-circle-filled" style="font-size:2em;"></i></div> <br>
   <div class="t-demo-row"><i class="t-icon t-icon-check-circle-filled" style="color:red;"></i> <i class="t-icon t-icon-check-circle-filled" style="color:green;"></i> <i class="t-icon t-icon-check-circle-filled" style="color:orange;"></i></div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./examples/icon/demos/iconfont-enhanced.vue correctly 1`] = `
 <div class="t-demo-iconfont">
-  <div><i class="t-icon cps-icon cps-icon-home-sheep"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:medium;"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-l"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:25px;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:2em;"></i></div><br>
+  <div><i class="t-icon cps-icon cps-icon-home-sheep"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-m"></i> <i class="t-icon cps-icon cps-icon-home-sheep t-size-l"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:25px;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="font-size:2em;"></i></div><br>
   <div><i class="t-icon cps-icon cps-icon-home-sheep" style="color:red;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="color:green;"></i> <i class="t-icon cps-icon cps-icon-home-sheep" style="color:orange;"></i> <i class="t-icon t-icon-home"></i></div> <br>
 </div>
 `;
@@ -5292,7 +5292,7 @@ exports[`ssr snapshot test renders ./examples/icon/demos/single.vue correctly 1`
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
     </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
-    </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled" style="font-size:medium;">
+    </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-size-m">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
     </svg> <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle-filled t-size-l">
       <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z" fill-opacity="0.9"></path>
@@ -5443,24 +5443,24 @@ exports[`ssr snapshot test renders ./examples/input/demos/textarea.vue correctly
 exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue correctly 1`] = `
 <div class="tdesign-demo-block-column">
   <div style="width:20%;">
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-left"><input autocomplete="off" ref="refInputElem" value="100" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+      <div class="t-input t-align-left"><input autocomplete="off" ref="refInputElem" value="100" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-center"><input autocomplete="off" ref="refInputElem" value="200" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+      <div class="t-input t-align-center"><input autocomplete="off" ref="refInputElem" value="200" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
-    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+    <div class="t-input-number t-size-m" style="width:120px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
           <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input t-align-right"><input autocomplete="off" ref="refInputElem" value="300" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+      <div class="t-input t-align-right"><input autocomplete="off" ref="refInputElem" value="300" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
           <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
@@ -5481,10 +5481,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue corre
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5493,10 +5493,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue corr
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/default.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="2021" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="2021" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5505,10 +5505,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/default.vue cor
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/disabled.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5517,10 +5517,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/disabled.vue co
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="输入" value="" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="输入" value="" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5529,10 +5529,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue corre
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3%" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3%" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5541,10 +5541,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue corr
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/left.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+  <div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
         <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
         <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5568,10 +5568,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/size.vue correc
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
-  <div class="t-input-number t-size-m" style="margin:0 50px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m" style="margin:0 50px;"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5587,10 +5587,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/size.vue correc
 
 exports[`ssr snapshot test renders ./examples/input-number/demos/step.vue correctly 1`] = `
 <div>
-  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size:medium;">
+  <div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
         <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
       </svg></button>
-    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3.20" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:medium;">
+    <div class="t-input"><input autocomplete="off" ref="refInputElem" value="3.20" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
         <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
       </svg></button>
   </div>
@@ -5710,11 +5710,11 @@ exports[`ssr snapshot test renders ./examples/layout/demos/combine.vue correctly
             <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
             <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
           </ul>
-          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
                 <use href="#t-icon-search"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-notification-filled t-menu__operations-icon">
+              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-notification-filled">
                 <use href="#t-icon-notification-filled"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-home t-menu__operations-icon">
+              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-home">
                 <use href="#t-icon-home"></use>
               </svg></a></div>
         </div>
@@ -5789,11 +5789,11 @@ exports[`ssr snapshot test renders ./examples/layout/demos/top.vue correctly 1`]
             <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
             <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
           </ul>
-          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+          <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
                 <use href="#t-icon-search"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-notification-filled t-menu__operations-icon">
+              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-notification-filled">
                 <use href="#t-icon-notification-filled"></use>
-              </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-home t-menu__operations-icon">
+              </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-home">
                 <use href="#t-icon-home"></use>
               </svg></a></div>
         </div>
@@ -6451,7 +6451,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/closable-side.vue corre
     资源编辑
   </span></li>
     </ul>
-    <div class="t-menu__operations"><svg class="t-icon t-icon-chevron-right t-menu__operations-icon">
+    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-chevron-right">
         <use href="#t-icon-chevron-right"></use>
       </svg></div>
   </div>
@@ -6511,13 +6511,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/double.vue correctly 1`
           </ul>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6543,13 +6543,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/double.vue correctly 1`
           </ul>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6578,7 +6578,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/group-side.vue correctl
         <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容</span></li>
       </div>
     </ul>
-    <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
+    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
         <use href="#t-icon-view-list"></use>
       </svg></div>
   </div>
@@ -6595,13 +6595,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-dark.vue corr
       <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
       <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6631,13 +6631,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-mode-tile.vue
       <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单内容二</span></li>
       <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单内容三</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6690,13 +6690,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/head-menu-tile.vue corr
     </li></span></li>
     <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">菜单4</span></li>
     </ul>
-    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+    <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
           <use href="#t-icon-search"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
           <use href="#t-icon-mail"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
           <use href="#t-icon-user"></use>
-        </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+        </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
           <use href="#t-icon-ellipsis"></use>
         </svg></a></div>
   </div>
@@ -6763,7 +6763,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multi-side.vue correctl
       资源编辑
     </span></li>
       </ul>
-      <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
+      <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
           <use href="#t-icon-view-list"></use>
         </svg></div>
     </div>
@@ -6838,7 +6838,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multi-side.vue correctl
       资源编辑
     </span></li>
       </ul>
-      <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
+      <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
           <use href="#t-icon-view-list"></use>
         </svg></div>
     </div>
@@ -6901,13 +6901,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multiple.vue correctly
           </div>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6941,13 +6941,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/multiple.vue correctly
           </div>
         </li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -6995,7 +6995,7 @@ exports[`ssr snapshot test renders ./examples/menu/demos/popup-side.vue correctl
     资源列表
   </span></li>
     </ul>
-    <div class="t-menu__operations"><svg class="t-icon t-icon-view-list t-menu__operations-icon">
+    <div class="t-menu__operations"><svg class="t-menu__operations-icon t-icon t-icon-view-list">
         <use href="#t-icon-view-list"></use>
       </svg></div>
   </div>
@@ -7026,13 +7026,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/single.vue correctly 1`
         <li class="t-menu__item t-is-active t-menu__item--plain"><span class="t-menu__content">菜单2</span></li>
         <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">禁用菜单</span></li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -7045,13 +7045,13 @@ exports[`ssr snapshot test renders ./examples/menu/demos/single.vue correctly 1`
         <li class="t-menu__item t-menu__item--plain"><span class="t-menu__content">菜单2</span></li>
         <li class="t-menu__item t-is-disabled t-menu__item--plain"><span class="t-menu__content">禁用菜单</span></li>
       </ul>
-      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-icon t-icon-search t-menu__operations-icon">
+      <div class="t-menu__operations"><a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-search">
             <use href="#t-icon-search"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-mail t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-mail">
             <use href="#t-icon-mail"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-user t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-user">
             <use href="#t-icon-user"></use>
-          </svg></a> <a href="javascript:;"><svg class="t-icon t-icon-ellipsis t-menu__operations-icon">
+          </svg></a> <a href="javascript:;"><svg class="t-menu__operations-icon t-icon t-icon-ellipsis">
             <use href="#t-icon-ellipsis"></use>
           </svg></a></div>
     </div>
@@ -9694,10 +9694,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
           </div>
         </div>
         <div class="t-slider__input-container">
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
@@ -9724,18 +9724,18 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
           </div>
         </div>
         <div class="t-slider__input-container">
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
           <div class="t-slider__center-line"></div>
-          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+          <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
                 <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
               </svg></button>
-            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+            <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
                 <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
               </svg></button>
           </div>
@@ -9762,10 +9762,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
         </div>
       </div>
       <div class="t-slider__input-container is-vertical">
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
@@ -9792,18 +9792,18 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
         </div>
       </div>
       <div class="t-slider__input-container is-vertical">
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
         <div class="t-slider__center-line"></div>
-        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size:medium;">
+        <div class="t-input-number t-size-m t-is-controls-right t-slider__input is-vertical"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
               <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
             </svg></button>
-          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size:medium;">
+          <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" value="0" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
               <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
             </svg></button>
         </div>
@@ -15406,7 +15406,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/base.vue correct
       <div class="t-select t-size-m"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15428,7 +15428,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">+1</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15445,7 +15445,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">更多...</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15467,7 +15467,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/dvalue.vue corre
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen,guangzhou" class="t-select__single">shenzhen,guangzhou</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen,guangzhou" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15494,7 +15494,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/filterable.vue c
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15516,7 +15516,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/lazy.vue correct
       <div class="t-select t-size-m"><span class="t-select__placeholder">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15538,7 +15538,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/multiple.vue cor
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15560,7 +15560,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/prefix.vue corre
       <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"><svg class="t-icon t-icon-user"><use href="#t-icon-user"></use></svg></span><span class="t-select__placeholder">请输入</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15582,7 +15582,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/props.vue correc
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15603,7 +15603,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuedisplay.vue
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span> () <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="shenzhen" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15620,7 +15620,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuedisplay.vue
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15642,7 +15642,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuetype.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span title="[object Object]" class="t-select__single">[object Object]</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="[object Object]" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
@@ -15659,7 +15659,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuetype.vue co
       <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
         <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size:medium;display:none;">
+        </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
           <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
         </svg>
         <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display:none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="small" class="t-loading__gradient t-icon-loading">
diff --git a/test/unit/calendar/__snapshots__/demo.test.js.snap b/test/unit/calendar/__snapshots__/demo.test.js.snap
index c130ff33c..7d044d72b 100644
--- a/test/unit/calendar/__snapshots__/demo.test.js.snap
+++ b/test/unit/calendar/__snapshots__/demo.test.js.snap
@@ -35,7 +35,9 @@ exports[`Calendar base demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -284,7 +286,9 @@ exports[`Calendar base demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -1124,7 +1128,9 @@ exports[`Calendar card demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1262,7 +1268,9 @@ exports[`Calendar card demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -1511,7 +1519,9 @@ exports[`Calendar card demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -2335,7 +2345,9 @@ exports[`Calendar cell demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -2584,7 +2596,9 @@ exports[`Calendar cell demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -3503,7 +3517,9 @@ exports[`Calendar cellAppend demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -3752,7 +3768,9 @@ exports[`Calendar cellAppend demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -4852,7 +4870,9 @@ exports[`Calendar controllerConfig demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -5101,7 +5121,9 @@ exports[`Calendar controllerConfig demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -5952,7 +5974,9 @@ exports[`Calendar events demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -6201,7 +6225,9 @@ exports[`Calendar events demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -7042,7 +7068,9 @@ exports[`Calendar firstDayOfWeek demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -7192,7 +7220,9 @@ exports[`Calendar firstDayOfWeek demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -7441,7 +7471,9 @@ exports[`Calendar firstDayOfWeek demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -8397,7 +8429,9 @@ exports[`Calendar head demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -8646,7 +8680,9 @@ exports[`Calendar head demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -9486,7 +9522,9 @@ exports[`Calendar mode demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -9596,7 +9634,9 @@ exports[`Calendar mode demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
@@ -10119,7 +10159,9 @@ exports[`Calendar range demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -10288,7 +10330,9 @@ exports[`Calendar range demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -11139,7 +11183,9 @@ exports[`Calendar slotPropsApi demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -11388,7 +11434,9 @@ exports[`Calendar slotPropsApi demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -12233,7 +12281,9 @@ exports[`Calendar value demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -12482,7 +12532,9 @@ exports[`Calendar value demo works fine 1`] = `
                 <div
                   class="t-popup__content  t-select__dropdown narrow-scrollbar"
                 >
-                  <div>
+                  <div
+                    class="t-select__dropdown-inner"
+                  >
                     <ul
                       class="t-select__create-option t-select__list"
                       style="display: none;"
@@ -13441,7 +13493,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
@@ -13690,7 +13744,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
@@ -14543,7 +14599,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
@@ -14792,7 +14850,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
@@ -15631,7 +15691,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
@@ -15880,7 +15942,9 @@ exports[`Calendar week demo works fine 1`] = `
                     <div
                       class="t-popup__content  t-select__dropdown narrow-scrollbar"
                     >
-                      <div>
+                      <div
+                        class="t-select__dropdown-inner"
+                      >
                         <ul
                           class="t-select__create-option t-select__list"
                           style="display: none;"
diff --git a/test/unit/calendar/__snapshots__/index.test.js.snap b/test/unit/calendar/__snapshots__/index.test.js.snap
index a1fa848e2..0a582572f 100644
--- a/test/unit/calendar/__snapshots__/index.test.js.snap
+++ b/test/unit/calendar/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`Calendar :props :firstDayOfWeek 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -55,7 +55,7 @@ exports[`Calendar :props :firstDayOfWeek 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -178,7 +178,7 @@ exports[`Calendar :props :isShowWeekendDefault 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -222,7 +222,7 @@ exports[`Calendar :props :isShowWeekendDefault 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -324,7 +324,7 @@ exports[`Calendar :props :mode 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -408,7 +408,7 @@ exports[`Calendar :props :range 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -442,7 +442,7 @@ exports[`Calendar :props :range 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -556,7 +556,7 @@ exports[`Calendar :props :theme 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -600,7 +600,7 @@ exports[`Calendar :props :theme 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -712,7 +712,7 @@ exports[`Calendar :props :value 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
@@ -756,7 +756,7 @@ exports[`Calendar :props :value 1`] = `
             <transition-stub name="t-popup--animation" appear="true">
               <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
                 <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-                  <div>
+                  <div class="t-select__dropdown-inner">
                     <ul class="t-select__create-option t-select__list" style="display: none;">
                       <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                     </ul>
diff --git a/test/unit/input-number/__snapshots__/demo.test.js.snap b/test/unit/input-number/__snapshots__/demo.test.js.snap
index ccc60192d..b59f6852e 100644
--- a/test/unit/input-number/__snapshots__/demo.test.js.snap
+++ b/test/unit/input-number/__snapshots__/demo.test.js.snap
@@ -10,10 +10,9 @@ exports[`InputNumber center demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -38,10 +37,9 @@ exports[`InputNumber center demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -66,10 +64,9 @@ exports[`InputNumber defaultDemo demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -94,10 +91,9 @@ exports[`InputNumber defaultDemo demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -122,10 +118,9 @@ exports[`InputNumber disabled demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -151,10 +146,9 @@ exports[`InputNumber disabled demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -179,10 +173,9 @@ exports[`InputNumber format demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -207,10 +200,9 @@ exports[`InputNumber format demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -235,10 +227,9 @@ exports[`InputNumber left demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-chevron-down"
+        class="t-icon t-icon-chevron-down t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -263,10 +254,9 @@ exports[`InputNumber left demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-chevron-up"
+        class="t-icon t-icon-chevron-up t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -342,10 +332,9 @@ exports[`InputNumber size demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -370,10 +359,9 @@ exports[`InputNumber size demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -448,10 +436,9 @@ exports[`InputNumber step demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -476,10 +463,9 @@ exports[`InputNumber step demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -504,10 +490,9 @@ exports[`InputNumber undefined demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-remove"
+        class="t-icon t-icon-remove t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -533,10 +518,9 @@ exports[`InputNumber undefined demo works fine 1`] = `
       type="button"
     >
       <svg
-        class="t-icon t-icon-add"
+        class="t-icon t-icon-add t-size-m"
         fill="none"
         height="1em"
-        style="font-size: medium;"
         viewBox="0 0 16 16"
         width="1em"
       >
diff --git a/test/unit/input-number/__snapshots__/index.test.js.snap b/test/unit/input-number/__snapshots__/index.test.js.snap
index fc1036cb2..8c045e236 100644
--- a/test/unit/input-number/__snapshots__/index.test.js.snap
+++ b/test/unit/input-number/__snapshots__/index.test.js.snap
@@ -1,100 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`InputNumber :props :defaultValue, default value 6 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :disabled, function can not be call 1`] = `
-<div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m t-is-disabled"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input disabled="disabled" autocomplete="off" ref="refInputElem" class="t-input__inner t-is-disabled t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :format, with 6% 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :max, value 6 < max 10 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :max, value 16 > max 10 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :min, value -1 < min 1 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input t-is-error"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :min, value 6 > min 1 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode, without class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode:column, with class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size: medium;">
+<div class="t-input-number t-size-m t-is-controls-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
       <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
       <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :mode:row, without class t-is-controls-right 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
@@ -111,10 +111,10 @@ exports[`InputNumber :props :size:large, with class t-size-l 1`] = `
 `;
 
 exports[`InputNumber :props :size:medium, with class t-size-m 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
@@ -131,30 +131,30 @@ exports[`InputNumber :props :size:small, with class t-size-s 1`] = `
 `;
 
 exports[`InputNumber :props :step, 2 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props :value, 6 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
 `;
 
 exports[`InputNumber :props class, with class t-input-number 1`] = `
-<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove" style="font-size: medium;">
+<div class="t-input-number t-size-m"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-remove t-size-m">
       <path fill="currentColor" d="M3.5 7.35h9v1.3h-9v-1.3z" fill-opacity="0.9"></path>
     </svg></button>
-  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add" style="font-size: medium;">
+  <div class="t-input"><input autocomplete="off" ref="refInputElem" class="t-input__inner t-input-number-text-align"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add t-size-m">
       <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
     </svg></button>
 </div>
diff --git a/test/unit/menu/__snapshots__/demo.test.js.snap b/test/unit/menu/__snapshots__/demo.test.js.snap
index ce94c07dd..034de6b64 100644
--- a/test/unit/menu/__snapshots__/demo.test.js.snap
+++ b/test/unit/menu/__snapshots__/demo.test.js.snap
@@ -58,7 +58,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-search t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-search"
           >
             <use
               href="#t-icon-search"
@@ -70,7 +70,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-mail t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-mail"
           >
             <use
               href="#t-icon-mail"
@@ -82,7 +82,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-user t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-user"
           >
             <use
               href="#t-icon-user"
@@ -94,7 +94,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-ellipsis t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-ellipsis"
           >
             <use
               href="#t-icon-ellipsis"
@@ -164,7 +164,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-search t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-search"
           >
             <use
               href="#t-icon-search"
@@ -176,7 +176,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-mail t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-mail"
           >
             <use
               href="#t-icon-mail"
@@ -188,7 +188,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-user t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-user"
           >
             <use
               href="#t-icon-user"
@@ -200,7 +200,7 @@ exports[`Menu single demo works fine 1`] = `
           href="javascript:;"
         >
           <svg
-            class="t-icon t-icon-ellipsis t-menu__operations-icon"
+            class="t-menu__operations-icon t-icon t-icon-ellipsis"
           >
             <use
               href="#t-icon-ellipsis"
diff --git a/test/unit/pagination/__snapshots__/demo.test.js.snap b/test/unit/pagination/__snapshots__/demo.test.js.snap
index dcab78a7b..acf31f9e4 100644
--- a/test/unit/pagination/__snapshots__/demo.test.js.snap
+++ b/test/unit/pagination/__snapshots__/demo.test.js.snap
@@ -29,7 +29,9 @@ exports[`Pagination base demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -229,7 +231,9 @@ exports[`Pagination base demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -390,7 +394,7 @@ exports[`Pagination customizable demo works fine 1`] = `
         <transition-stub name="t-popup--animation" appear="true">
           <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
             <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-              <div>
+              <div class="t-select__dropdown-inner">
                 <ul class="t-select__create-option t-select__list" style="display: none;">
                   <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
                 </ul>
@@ -466,7 +470,9 @@ exports[`Pagination disabled demo works fine 1`] = `
             <div
               class="t-popup__content t-is-disabled  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -695,7 +701,9 @@ exports[`Pagination few demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -881,7 +889,9 @@ exports[`Pagination jump demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1092,7 +1102,9 @@ exports[`Pagination mini works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1301,7 +1313,9 @@ exports[`Pagination more works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1532,7 +1546,9 @@ exports[`Pagination page-num demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1741,7 +1757,9 @@ exports[`Pagination simple demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -1868,7 +1886,9 @@ exports[`Pagination simple demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
@@ -2130,7 +2150,9 @@ exports[`Pagination simple-mini demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2257,7 +2279,9 @@ exports[`Pagination simple-mini demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2519,7 +2543,9 @@ exports[`Pagination total demo works fine 1`] = `
             <div
               class="t-popup__content  t-select__dropdown narrow-scrollbar"
             >
-              <div>
+              <div
+                class="t-select__dropdown-inner"
+              >
                 <ul
                   class="t-select__create-option t-select__list"
                   style="display: none;"
diff --git a/test/unit/select/__snapshots__/demo.test.js.snap b/test/unit/select/__snapshots__/demo.test.js.snap
index 9a65901b8..d9708290c 100644
--- a/test/unit/select/__snapshots__/demo.test.js.snap
+++ b/test/unit/select/__snapshots__/demo.test.js.snap
@@ -23,7 +23,9 @@ exports[`Steps Steps base demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -145,7 +147,9 @@ exports[`Steps Steps base demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -275,7 +279,9 @@ exports[`Steps Steps collapsed demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -474,7 +480,9 @@ exports[`Steps Steps collapsed demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -705,7 +713,9 @@ exports[`Steps Steps collapsed demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -934,7 +944,9 @@ exports[`Steps Steps creatable demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -1041,7 +1053,9 @@ exports[`Steps Steps customOptions demo works fine 1`] = `
           <div
             class="t-popup__content tdesign-demo-select__overlay-option t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -1350,7 +1364,9 @@ exports[`Steps Steps customOptions demo works fine 1`] = `
           <div
             class="t-popup__content tdesign-demo-select__overlay-option t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -1684,7 +1700,9 @@ exports[`Steps Steps customSelected demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2020,7 +2038,9 @@ exports[`Steps Steps customSelected demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2384,7 +2404,9 @@ exports[`Steps Steps disabled demo works fine 1`] = `
           <div
             class="t-popup__content t-is-disabled  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2481,7 +2503,9 @@ exports[`Steps Steps disabled demo works fine 1`] = `
           <div
             class="t-popup__content t-is-disabled  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2657,7 +2681,9 @@ exports[`Steps Steps filterable demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2759,7 +2785,9 @@ exports[`Steps Steps filterable demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -2922,7 +2950,9 @@ exports[`Steps Steps group demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3092,7 +3122,9 @@ exports[`Steps Steps group demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3272,7 +3304,9 @@ exports[`Steps Steps labelInValue demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3370,7 +3404,9 @@ exports[`Steps Steps labelInValue demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3547,7 +3583,9 @@ exports[`Steps Steps max demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3705,7 +3743,9 @@ exports[`Steps Steps multiple demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -3974,7 +4014,9 @@ exports[`Steps Steps multiple demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -4346,7 +4388,9 @@ exports[`Steps Steps multiple demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -4666,7 +4710,9 @@ exports[`Steps Steps noborder demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -4768,7 +4814,9 @@ exports[`Steps Steps popupProps demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -4858,7 +4906,9 @@ exports[`Steps Steps popupProps demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -4952,7 +5002,9 @@ exports[`Steps Steps prefix demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5064,7 +5116,9 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5166,7 +5220,9 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5267,7 +5323,9 @@ exports[`Steps Steps size demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5376,7 +5434,9 @@ exports[`Steps Steps size demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5473,7 +5533,9 @@ exports[`Steps Steps size demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5575,7 +5637,9 @@ exports[`Steps Steps status demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5687,7 +5751,9 @@ exports[`Steps Steps status demo works fine 1`] = `
           <div
             class="t-popup__content t-is-disabled  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
@@ -5799,7 +5865,9 @@ exports[`Steps Steps status demo works fine 1`] = `
           <div
             class="t-popup__content  t-select__dropdown narrow-scrollbar"
           >
-            <div>
+            <div
+              class="t-select__dropdown-inner"
+            >
               <ul
                 class="t-select__create-option t-select__list"
                 style="display: none;"
diff --git a/test/unit/select/__snapshots__/index.test.js.snap b/test/unit/select/__snapshots__/index.test.js.snap
index 708db5e9b..42838a89f 100644
--- a/test/unit/select/__snapshots__/index.test.js.snap
+++ b/test/unit/select/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ exports[`Select :props :bordered 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -29,7 +29,7 @@ exports[`Select :props :clearable 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -52,7 +52,7 @@ exports[`Select :props :creatable 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -75,7 +75,7 @@ exports[`Select :props :disabled 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content t-is-disabled  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -98,7 +98,7 @@ exports[`Select :props :labelInValue 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -121,7 +121,7 @@ exports[`Select :props :loading 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -148,7 +148,7 @@ exports[`Select :props :multiple 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><label class="t-checkbox"><input type="checkbox" class="t-checkbox__former" value=""><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></li>
             </ul>
@@ -171,7 +171,7 @@ exports[`Select :props :placeholder 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -194,7 +194,7 @@ exports[`Select :props :remote 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -217,7 +217,7 @@ exports[`Select :props :reserveKeyword 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -240,7 +240,7 @@ exports[`Select :props :size 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-l t-select__create-option--special"><span></span></li>
             </ul>
@@ -263,7 +263,7 @@ exports[`Select Option :props :disabled 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -288,7 +288,7 @@ exports[`Select Option :props :label 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -313,7 +313,7 @@ exports[`Select Option :props :value 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
@@ -338,7 +338,7 @@ exports[`Select OptionGroup :props :value 1`] = `
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
         <div class="t-popup__content  t-select__dropdown narrow-scrollbar">
-          <div>
+          <div class="t-select__dropdown-inner">
             <ul class="t-select__create-option t-select__list" style="display: none;">
               <li title="" class="t-select-option t-size-m t-select__create-option--special"><span></span></li>
             </ul>
diff --git a/test/unit/slider/__snapshots__/index.test.js.snap b/test/unit/slider/__snapshots__/index.test.js.snap
index 3058fa5cc..62c18ea1c 100644
--- a/test/unit/slider/__snapshots__/index.test.js.snap
+++ b/test/unit/slider/__snapshots__/index.test.js.snap
@@ -54,10 +54,10 @@ exports[`Slider [marks] render right 1`] = `
     </div>
   </div>
   <div class="t-slider__input-container">
-    <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="font-size: medium;">
+    <div class="t-input-number t-size-m t-is-controls-right t-slider__input"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__decrease"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-down t-size-m">
           <path fill="currentColor" d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z" fill-opacity="0.9"></path>
         </svg></button>
-      <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up" style="font-size: medium;">
+      <div class="t-input"><input autocomplete="off" ref="refInputElem" placeholder="" class="t-input__inner"></div><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-button--shape-square t-input-number__increase"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-up t-size-m">
           <path fill="currentColor" d="M12.46 9.54l-.92.92L8 6.92l-3.54 3.54-.92-.92L8 5.08l4.46 4.46z" fill-opacity="0.9"></path>
         </svg></button>
     </div>
diff --git a/test/unit/transfer/__snapshots__/demo.test.js.snap b/test/unit/transfer/__snapshots__/demo.test.js.snap
index 656ec9a67..6355bb462 100644
--- a/test/unit/transfer/__snapshots__/demo.test.js.snap
+++ b/test/unit/transfer/__snapshots__/demo.test.js.snap
@@ -3344,7 +3344,9 @@ exports[`Transfer pagination demo works fine 1`] = `
                   <div
                     class="t-popup__content  t-select__dropdown narrow-scrollbar"
                   >
-                    <div>
+                    <div
+                      class="t-select__dropdown-inner"
+                    >
                       <ul
                         class="t-select__create-option t-select__list"
                         style="display: none;"
diff --git a/test/unit/tree-select/__snapshots__/demo.test.js.snap b/test/unit/tree-select/__snapshots__/demo.test.js.snap
index 609f25adc..8ca07ff67 100644
--- a/test/unit/tree-select/__snapshots__/demo.test.js.snap
+++ b/test/unit/tree-select/__snapshots__/demo.test.js.snap
@@ -160,10 +160,10 @@ exports[`TreeSelect base demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -421,10 +421,10 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -674,10 +674,10 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -935,10 +935,10 @@ exports[`TreeSelect filterable demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1139,10 +1139,10 @@ exports[`TreeSelect lazy demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1398,10 +1398,10 @@ exports[`TreeSelect multiple demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1613,10 +1613,10 @@ exports[`TreeSelect prefix demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -1824,10 +1824,10 @@ exports[`TreeSelect props demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -2035,10 +2035,10 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
@@ -2290,10 +2290,10 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
           />
         </svg>
         <svg
-          class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear"
+          class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear"
           fill="none"
           height="1em"
-          style="font-size: medium; display: none;"
+          style="display: none;"
           viewBox="0 0 16 16"
           width="1em"
         >
diff --git a/test/unit/tree-select/__snapshots__/index.test.js.snap b/test/unit/tree-select/__snapshots__/index.test.js.snap
index a274097a9..1e61a607c 100644
--- a/test/unit/tree-select/__snapshots__/index.test.js.snap
+++ b/test/unit/tree-select/__snapshots__/index.test.js.snap
@@ -23,7 +23,7 @@ exports[`TreeSelect :props :clearable 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -59,7 +59,7 @@ exports[`TreeSelect :props :defaultValue 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+2</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -95,7 +95,7 @@ exports[`TreeSelect :props :disabled 1`] = `
     <div class="t-select t-is-disabled t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-is-disabled t-select__input" style="display: none;"><input disabled="disabled" placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -129,7 +129,7 @@ exports[`TreeSelect :props :empty string 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -165,7 +165,7 @@ exports[`TreeSelect :props :filterable 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -199,7 +199,7 @@ exports[`TreeSelect :props :loading 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -233,7 +233,7 @@ exports[`TreeSelect :props :loadingText 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -269,7 +269,7 @@ exports[`TreeSelect :props :max 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -305,7 +305,7 @@ exports[`TreeSelect :props :minCollapsedNum 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+-1</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -341,7 +341,7 @@ exports[`TreeSelect :props :multiple 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -377,7 +377,7 @@ exports[`TreeSelect :props :placeholder 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder">please select address</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="please select address" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -413,7 +413,7 @@ exports[`TreeSelect :props :popupProps 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -485,7 +485,7 @@ exports[`TreeSelect :props :treeProps 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -521,7 +521,7 @@ exports[`TreeSelect :props :value 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span><span title="shenzhen" class="t-select__single">shenzhen</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="shenzhen" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -557,7 +557,7 @@ exports[`TreeSelect :props :valueType 1`] = `
     <div class="t-select t-size-m t-select-selected"><span class="t-select__placeholder" style="display: none;"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span><span title="[object Object]" class="t-select__single">[object Object]</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="[object Object]" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -593,7 +593,7 @@ exports[`TreeSelect <slot> <collapsedItems> 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -629,7 +629,7 @@ exports[`TreeSelect <slot> <empty> 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -663,7 +663,7 @@ exports[`TreeSelect <slot> <loadingText> 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -699,7 +699,7 @@ exports[`TreeSelect <slot> <prefixIcon> 1`] = `
     <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"><div><i>icon</i></div></span><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -735,7 +735,7 @@ exports[`TreeSelect function :collapsedItems 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -771,7 +771,7 @@ exports[`TreeSelect function :empty 1`] = `
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -805,7 +805,7 @@ exports[`TreeSelect function :loadingText 1`] = `
       </div>
     </transition-stub>
     <div class="t-select t-size-m"><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
-      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">
@@ -841,7 +841,7 @@ exports[`TreeSelect function :prefixIcon 1`] = `
     <div class="t-select t-size-m t-has-prefix"><span class="t-select__left-icon"></span><span class="t-select__placeholder"></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+0</span>
       <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-select__right-icon t-select__right-icon-clear" style="font-size: medium; display: none;">
+      </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">
         <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM5.67 4.95L8 7.29l2.33-2.34.7.7L8.7 8l2.34 2.35-.71.7L8 8.71l-2.33 2.34-.7-.7L7.3 8 4.96 5.65l.71-.7z" fill-opacity="0.9"></path>
       </svg>
       <div class="t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon" style="display: none;"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" class="t-loading__gradient t-icon-loading" size="small">