From 09417cb0ff5890cce73480f89d83392b3c21e45c Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Fri, 16 Jun 2023 15:47:48 +0800
Subject: [PATCH 1/2] feat(Rate): add disabled style

---
 .../__test__/__snapshots__/demo.test.jsx.snap |  4 ----
 src/rate/demos/mobile.vue                     |  8 ++++----
 src/rate/rate.vue                             | 20 ++++++++++---------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
index 962034fc8..210d8e4b6 100644
--- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
@@ -1103,7 +1103,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
   >
     用于对某行为/事物进行打分。
   </p>
-  <br />
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1878,7 +1877,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
       
     </div>
   </div>
-  <br />
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2236,7 +2234,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
       
     </div>
   </div>
-  <br />
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2931,7 +2928,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
       
     </div>
   </div>
-  <br />
   <div
     class="tdesign-mobile-demo-block"
   >
diff --git a/src/rate/demos/mobile.vue b/src/rate/demos/mobile.vue
index 36b51bf47..9f85fb93c 100644
--- a/src/rate/demos/mobile.vue
+++ b/src/rate/demos/mobile.vue
@@ -2,7 +2,7 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Rate 评分</h1>
     <p class="summary">用于对某行为/事物进行打分。</p>
-    <br />
+
     <tdesign-demo-block title="01 组件类型" summary="实心评分">
       <BaseDemo />
     </tdesign-demo-block>
@@ -15,18 +15,18 @@
     <tdesign-demo-block summary="带描述评分">
       <ShowTextDemo />
     </tdesign-demo-block>
-    <br />
+
     <tdesign-demo-block title="02 组件状态">
       <ActionDemo />
     </tdesign-demo-block>
-    <br />
+
     <tdesign-demo-block title="03 组件样式" summary="评分大小">
       <SizeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="设置评分颜色">
       <ColorDemo />
     </tdesign-demo-block>
-    <br />
+
     <tdesign-demo-block title="04 特殊样式" summary="竖向带描述评分">
       <SpecialDemo />
     </tdesign-demo-block>
diff --git a/src/rate/rate.vue b/src/rate/rate.vue
index 62d617d47..f66d48db6 100644
--- a/src/rate/rate.vue
+++ b/src/rate/rate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="`${name}`">
+  <div :class="rootClasses">
     <div
       ref="rateWrapper"
       :class="`${name}__wrapper`"
@@ -83,6 +83,7 @@ import rateProps from './props';
 import config from '../config';
 import { TdRateProps } from './type';
 import { useDefault } from '../shared';
+import { useFormDisabled } from '../form/hooks';
 
 const { prefix } = config;
 const name = `${prefix}-rate`;
@@ -92,6 +93,8 @@ export default defineComponent({
   props: rateProps,
   emits: ['change', 'update:value', 'update:modelValue'],
   setup(props, context) {
+    const disabled = useFormDisabled();
+
     const rateWrapper = ref<HTMLElement | null>(null);
     const [actualVal] = useDefault<number, TdRateProps>(props, context.emit, 'value', 'change');
     const rateText = computed(() => {
@@ -172,9 +175,10 @@ export default defineComponent({
       );
     };
 
+    const rootClasses = computed(() => [`${name}`, { [`${name}--disabled`]: disabled.value }]);
+
     const classes = (n: number) => {
       const classPrefix = `${name}__icon`;
-      const { disabled } = props;
       const className = {
         [classPrefix]: true,
       };
@@ -183,9 +187,6 @@ export default defineComponent({
       }
       if (actualVal.value >= n) {
         className[`${classPrefix}--selected`] = true;
-        if (disabled) {
-          className[`${classPrefix}--disabled`] = true;
-        }
       } else {
         className[`${classPrefix}--unselected`] = true;
       }
@@ -225,7 +226,7 @@ export default defineComponent({
     };
 
     const onClick = (event: MouseEvent) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       // if (Date.now() - touchStartTime.value > 200) return;
       getRect(event, 'tap');
     };
@@ -236,19 +237,19 @@ export default defineComponent({
     };
 
     const onTouchstart = (e: TouchEvent) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       touchStartTime.value = Date.now();
       touchEnd.value = false;
     };
 
     const onTouchmove = (e: TouchEvent) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (Date.now() - touchStartTime.value <= 200) return;
       onTouch(e, 'move');
     };
 
     const onTouchEnd = (e: TouchEvent) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       touchEnd.value = true;
       hideTips();
     };
@@ -296,6 +297,7 @@ export default defineComponent({
 
     return {
       name: ref(name),
+      rootClasses,
       classes,
       rateWrapper,
       actualVal,

From 413788572364e15db96a61fe63394e0536134923 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Fri, 16 Jun 2023 15:48:27 +0800
Subject: [PATCH 2/2] fix(Table): update demo

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 238 ++++++++++++------
 src/form/demos/horizontal.vue                 |  27 +-
 src/form/demos/mobile.vue                     |   6 +-
 src/form/demos/vertical.vue                   |  17 +-
 4 files changed, 193 insertions(+), 95 deletions(-)

diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 7bd0e971b..c0ea42c8e 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -32,7 +32,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-799be585=""
           >
             <div
@@ -108,7 +108,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-799be585=""
           >
             <div
@@ -141,7 +141,31 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 />
                 <!--v-if-->
                 <!--v-if-->
-                <!--v-if-->
+                <div
+                  class="t-input__wrap--suffix-icon"
+                >
+                  
+                  <svg
+                    class="t-icon t-icon-browse-off"
+                    data-v-799be585=""
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                    <path
+                      d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                  
+                </div>
               </div>
               <!--v-if-->
             </div>
@@ -327,7 +351,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-799be585=""
           >
             <div
@@ -762,7 +786,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-799be585=""
           >
             <div
@@ -1119,28 +1143,28 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--selected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -1155,28 +1179,28 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--selected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -1191,28 +1215,28 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -1227,28 +1251,28 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -1263,28 +1287,28 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -1610,17 +1634,21 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
     用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
   </p>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    class="tdesign-mobile-demo-block"
     data-v-4e944783=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      <h2
+        class="tdesign-mobile-demo-block__title"
       >
         01 基础类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础表单
       </p>
     </div>
     <div
@@ -1637,7 +1665,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
         >
           <button
             aria-disabled="false"
-            class="t-button t-button--size-medium t-button--base t-button--primary t-button--round"
+            class="t-button t-button--size-medium t-button--base t-button--light t-button--round"
             data-v-4e944783=""
             role="button"
             type="button"
@@ -1755,7 +1783,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
               >
                 
                 <div
-                  class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+                  class="t-input t-input--layout-horizontal t-input--size-small"
                   data-v-799be585=""
                 >
                   <div
@@ -1831,7 +1859,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
               >
                 
                 <div
-                  class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+                  class="t-input t-input--layout-horizontal t-input--size-small"
                   data-v-799be585=""
                 >
                   <div
@@ -1864,7 +1892,31 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       />
                       <!--v-if-->
                       <!--v-if-->
-                      <!--v-if-->
+                      <div
+                        class="t-input__wrap--suffix-icon"
+                      >
+                        
+                        <svg
+                          class="t-icon t-icon-browse-off"
+                          data-v-799be585=""
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 16 16"
+                          width="1em"
+                        >
+                          <path
+                            d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                          <path
+                            d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                        </svg>
+                        
+                      </div>
                     </div>
                     <!--v-if-->
                   </div>
@@ -2050,7 +2102,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
               >
                 
                 <div
-                  class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+                  class="t-input t-input--layout-horizontal t-input--size-small"
                   data-v-799be585=""
                 >
                   <div
@@ -2485,7 +2537,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
               >
                 
                 <div
-                  class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+                  class="t-input t-input--layout-horizontal t-input--size-small"
                   data-v-799be585=""
                 >
                   <div
@@ -2842,28 +2894,28 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                         class="t-rate__icon-left t-rate__icon-left--selected"
                       >
                         <svg
-                          class="t-icon t-icon-star"
+                          class="t-icon t-icon-star-filled"
                           fill="none"
                           height="1em"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
                           <path
-                            d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                            d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                             fill="currentColor"
                             fill-opacity="0.9"
                           />
                         </svg>
                       </div>
                       <svg
-                        class="t-icon t-icon-star"
+                        class="t-icon t-icon-star-filled"
                         fill="none"
                         height="1em"
                         viewBox="0 0 16 16"
                         width="1em"
                       >
                         <path
-                          d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                          d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                           fill="currentColor"
                           fill-opacity="0.9"
                         />
@@ -2878,28 +2930,28 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                         class="t-rate__icon-left t-rate__icon-left--selected"
                       >
                         <svg
-                          class="t-icon t-icon-star"
+                          class="t-icon t-icon-star-filled"
                           fill="none"
                           height="1em"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
                           <path
-                            d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                            d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                             fill="currentColor"
                             fill-opacity="0.9"
                           />
                         </svg>
                       </div>
                       <svg
-                        class="t-icon t-icon-star"
+                        class="t-icon t-icon-star-filled"
                         fill="none"
                         height="1em"
                         viewBox="0 0 16 16"
                         width="1em"
                       >
                         <path
-                          d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                          d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                           fill="currentColor"
                           fill-opacity="0.9"
                         />
@@ -2914,28 +2966,28 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                         class="t-rate__icon-left t-rate__icon-left--unselected"
                       >
                         <svg
-                          class="t-icon t-icon-star"
+                          class="t-icon t-icon-star-filled"
                           fill="none"
                           height="1em"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
                           <path
-                            d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                            d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                             fill="currentColor"
                             fill-opacity="0.9"
                           />
                         </svg>
                       </div>
                       <svg
-                        class="t-icon t-icon-star"
+                        class="t-icon t-icon-star-filled"
                         fill="none"
                         height="1em"
                         viewBox="0 0 16 16"
                         width="1em"
                       >
                         <path
-                          d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                          d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                           fill="currentColor"
                           fill-opacity="0.9"
                         />
@@ -2950,28 +3002,28 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                         class="t-rate__icon-left t-rate__icon-left--unselected"
                       >
                         <svg
-                          class="t-icon t-icon-star"
+                          class="t-icon t-icon-star-filled"
                           fill="none"
                           height="1em"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
                           <path
-                            d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                            d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                             fill="currentColor"
                             fill-opacity="0.9"
                           />
                         </svg>
                       </div>
                       <svg
-                        class="t-icon t-icon-star"
+                        class="t-icon t-icon-star-filled"
                         fill="none"
                         height="1em"
                         viewBox="0 0 16 16"
                         width="1em"
                       >
                         <path
-                          d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                          d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                           fill="currentColor"
                           fill-opacity="0.9"
                         />
@@ -2986,28 +3038,28 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                         class="t-rate__icon-left t-rate__icon-left--unselected"
                       >
                         <svg
-                          class="t-icon t-icon-star"
+                          class="t-icon t-icon-star-filled"
                           fill="none"
                           height="1em"
                           viewBox="0 0 16 16"
                           width="1em"
                         >
                           <path
-                            d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                            d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                             fill="currentColor"
                             fill-opacity="0.9"
                           />
                         </svg>
                       </div>
                       <svg
-                        class="t-icon t-icon-star"
+                        class="t-icon t-icon-star-filled"
                         fill="none"
                         height="1em"
                         viewBox="0 0 16 16"
                         width="1em"
                       >
                         <path
-                          d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                          d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                           fill="currentColor"
                           fill-opacity="0.9"
                         />
@@ -3350,7 +3402,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-713b33d2=""
           >
             <div
@@ -3424,7 +3476,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-713b33d2=""
           >
             <div
@@ -3457,7 +3509,31 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 />
                 <!--v-if-->
                 <!--v-if-->
-                <!--v-if-->
+                <div
+                  class="t-input__wrap--suffix-icon"
+                >
+                  
+                  <svg
+                    class="t-icon t-icon-browse-off"
+                    data-v-713b33d2=""
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                    <path
+                      d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                  
+                </div>
               </div>
               <!--v-if-->
             </div>
@@ -3639,7 +3715,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-713b33d2=""
           >
             <div
@@ -4072,7 +4148,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
         >
           
           <div
-            class="t-input t-input--layout-horizontal t-input--size-small t-input--border"
+            class="t-input t-input--layout-horizontal t-input--size-small"
             data-v-713b33d2=""
           >
             <div
@@ -4425,28 +4501,28 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--selected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -4461,28 +4537,28 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--selected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -4497,28 +4573,28 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -4533,28 +4609,28 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -4569,28 +4645,28 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                   class="t-rate__icon-left t-rate__icon-left--unselected"
                 >
                   <svg
-                    class="t-icon t-icon-star"
+                    class="t-icon t-icon-star-filled"
                     fill="none"
                     height="1em"
                     viewBox="0 0 16 16"
                     width="1em"
                   >
                     <path
-                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                       fill="currentColor"
                       fill-opacity="0.9"
                     />
                   </svg>
                 </div>
                 <svg
-                  class="t-icon t-icon-star"
+                  class="t-icon t-icon-star-filled"
                   fill="none"
                   height="1em"
                   viewBox="0 0 16 16"
                   width="1em"
                 >
                   <path
-                    d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                    d="M7.6 1.82a.45.45 0 01.8 0l1.8 3.65 4.03.58c.37.05.52.5.25.77l-2.91 2.84.69 4a.45.45 0 01-.66.48L8 12.25l-3.6 1.9a.45.45 0 01-.65-.48l.68-4.01-2.9-2.84a.45.45 0 01.24-.77l4.03-.58 1.8-3.65z"
                     fill="currentColor"
                     fill-opacity="0.9"
                   />
@@ -4857,7 +4933,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
   >
     <button
       aria-disabled="false"
-      class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"
+      class="t-button t-button--size-large t-button--light t-button--primary t-button--rectangle"
       data-v-713b33d2=""
       role="button"
       type="submit"
diff --git a/src/form/demos/horizontal.vue b/src/form/demos/horizontal.vue
index d9cb2bfcf..9263e4072 100644
--- a/src/form/demos/horizontal.vue
+++ b/src/form/demos/horizontal.vue
@@ -11,10 +11,14 @@
     @submit="onSubmit"
   >
     <t-form-item label="用户名" name="name" help="输入用户名">
-      <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      <t-input v-model="formData.name" borderless placeholder="请输入内容"></t-input>
     </t-form-item>
     <t-form-item label="密码" name="password">
-      <t-input v-model="formData.password" type="password" placeholder="请输入内容"></t-input>
+      <t-input v-model="formData.password" borderless type="password" :clearable="false" placeholder="请输入内容">
+        <template #suffixIcon>
+          <BrowseOffIcon />
+        </template>
+      </t-input>
     </t-form-item>
     <t-form-item label="性别" name="gender">
       <t-radio-group v-model="formData.gender" class="box" borderless @change="groupChangeFn">
@@ -24,7 +28,13 @@
       </t-radio-group>
     </t-form-item>
     <t-form-item arrow label="生日" name="birth" content-align="right">
-      <t-input v-model="formData.birth" align="right" placeholder="请输入内容" @click="visible = true"></t-input>
+      <t-input
+        v-model="formData.birth"
+        borderless
+        align="right"
+        placeholder="请输入内容"
+        @click="visible = true"
+      ></t-input>
       <t-popup v-model="visible" placement="bottom">
         <t-date-time-picker
           :value="formData.birth"
@@ -40,7 +50,13 @@
       </t-popup>
     </t-form-item>
     <t-form-item arrow label="籍贯" name="place" content-align="right">
-      <t-input v-model="formData.place" align="right" placeholder="请输入内容" @click="showCascader"></t-input>
+      <t-input
+        v-model="formData.place"
+        borderless
+        align="right"
+        placeholder="请输入内容"
+        @click="showCascader"
+      ></t-input>
       <t-cascader
         v-model:visible="visibleCascader"
         :value="address"
@@ -53,7 +69,7 @@
       <t-stepper v-model="formData.age" theme="filled" @change="onChangeStepper" />
     </t-form-item>
     <t-form-item label="自我评价" name="description" content-align="right">
-      <t-rate v-model="formData.description" clearable allow-half :gap="rateGap" />
+      <t-rate v-model="formData.description" variant="filled" allow-half :gap="rateGap" />
     </t-form-item>
     <t-form-item label="个人简介" name="resume">
       <t-textarea
@@ -89,6 +105,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, reactive, defineProps, toRefs, onMounted } from 'vue';
+import { BrowseOffIcon } from 'tdesign-icons-vue-next';
 
 import {
   UploadChangeContext,
diff --git a/src/form/demos/mobile.vue b/src/form/demos/mobile.vue
index 201866700..e139a0909 100644
--- a/src/form/demos/mobile.vue
+++ b/src/form/demos/mobile.vue
@@ -2,13 +2,13 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Form 表单</h1>
     <p class="summary">用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
-    <tdesign-demo-block summary="01 基础类型">
+    <tdesign-demo-block title="01 基础类型" summary="基础表单">
       <div class="option">
         <div class="button-group">
-          <t-button :theme="isActive1 ? 'primary' : 'default'" shape="round" @click="onClick('isActive1', isActive1)">
+          <t-button :theme="isActive1 ? 'light' : 'default'" shape="round" @click="onClick('isActive1', isActive1)">
             水平排布
           </t-button>
-          <t-button :theme="isActive2 ? 'primary' : 'default'" shape="round" @click="onClick('isActive2', isActive2)">
+          <t-button :theme="isActive2 ? 'light' : 'default'" shape="round" @click="onClick('isActive2', isActive2)">
             竖直排布
           </t-button>
         </div>
diff --git a/src/form/demos/vertical.vue b/src/form/demos/vertical.vue
index d300c4c52..0426fe1b5 100644
--- a/src/form/demos/vertical.vue
+++ b/src/form/demos/vertical.vue
@@ -11,10 +11,14 @@
     @submit="onSubmit"
   >
     <t-form-item label="用户名" name="name" help="输入用户名">
-      <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      <t-input v-model="formData.name" borderless placeholder="请输入内容"></t-input>
     </t-form-item>
     <t-form-item label="密码" name="password">
-      <t-input v-model="formData.password" type="password" placeholder="请输入内容"></t-input>
+      <t-input v-model="formData.password" borderless type="password" :clearable="false" placeholder="请输入内容">
+        <template #suffixIcon>
+          <BrowseOffIcon />
+        </template>
+      </t-input>
     </t-form-item>
     <t-form-item label="性别" name="gender">
       <t-radio-group v-model="formData.gender" class="box" borderless @change="groupChangeFn">
@@ -24,7 +28,7 @@
       </t-radio-group>
     </t-form-item>
     <t-form-item arrow label="生日" name="birth">
-      <t-input v-model="formData.birth" placeholder="请输入内容" @click="visible = true"></t-input>
+      <t-input v-model="formData.birth" borderless placeholder="请输入内容" @click="visible = true"></t-input>
       <t-popup v-model="visible" placement="bottom">
         <t-date-time-picker
           :value="formData.birth"
@@ -40,7 +44,7 @@
       </t-popup>
     </t-form-item>
     <t-form-item arrow label="籍贯" name="place">
-      <t-input v-model="formData.place" placeholder="请输入内容" @click="showCascader"></t-input>
+      <t-input v-model="formData.place" borderless placeholder="请输入内容" @click="showCascader"></t-input>
       <t-cascader
         v-model:visible="visibleCascader"
         :value="address"
@@ -53,7 +57,7 @@
       <t-stepper v-model="formData.age" theme="filled" @change="onChangeStepper" />
     </t-form-item>
     <t-form-item label="自我评价" name="description">
-      <t-rate v-model="formData.description" clearable allow-half :gap="rateGap" />
+      <t-rate v-model="formData.description" variant="filled" allow-half :gap="rateGap" />
     </t-form-item>
     <t-form-item label="个人简介" name="resume">
       <t-textarea
@@ -81,13 +85,14 @@
       </t-upload>
     </t-form-item>
     <div class="button-group">
-      <t-button theme="primary" type="submit" size="large">提交</t-button>
+      <t-button theme="primary" variant="light" type="submit" size="large">提交</t-button>
       <t-button theme="default" variant="base" type="reset" size="large">重置</t-button>
     </div>
   </t-form>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, defineProps, toRefs, onMounted } from 'vue';
+import { BrowseOffIcon } from 'tdesign-icons-vue-next';
 
 import {
   UploadChangeContext,