From c646e43791ee0975b736f78dd7c13432b2779736 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Mon, 16 Dec 2024 19:56:25 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9C=80=E5=A4=96=E4=BE=A7=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9=20`<div>`=20dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/index.test.jsx.snap         | 597 --------------
 .../__snapshots__/index.test.jsx.snap         | 167 ----
 .../__test__/__snapshots__/demo.test.jsx.snap |  92 ++-
 .../__test__/__snapshots__/demo.test.jsx.snap | 760 +++++++++---------
 src/search/search.tsx                         |   4 +-
 5 files changed, 430 insertions(+), 1190 deletions(-)
 delete mode 100644 src/calendar/__test__/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/cascader/__test__/__snapshots__/index.test.jsx.snap

diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 4111e78f3..000000000
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,597 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`calendar > props > : format 1`] = `
-<div>
-  <teleport-stub
-    disabled="false"
-    to="[object HTMLBodyElement]"
-  >
-    <div
-      class="t-overlay t-overlay--active"
-      style="z-index: 1000; transition-duration: 300ms;"
-    >
-      <!---->
-    </div>
-    <div
-      class="t-popup t-popup--bottom"
-    >
-      <!--v-if-->
-      
-      <div
-        class="t-calendar t-calendar--popup"
-      >
-        <div
-          class="t-calendar__title"
-        >
-          请选择日期
-        </div>
-        <svg
-          class="t-icon t-icon-close t-calendar__close-btn"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-        <div
-          class="t-calendar__days"
-        >
-          
-          <div
-            class="t-calendar__days-item"
-          >
-            日
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            一
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            二
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            三
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            四
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            五
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            六
-          </div>
-          
-        </div>
-        <div
-          class="t-calendar__months"
-          style="overflow: auto;"
-        >
-          
-          
-          <div
-            class="t-calendar__month"
-          >
-            2022 年 1 月
-          </div>
-          <div
-            class="t-calendar__dates"
-          >
-            
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              1
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              2
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              3
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              4
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              5
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              6
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              7
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              8
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              9
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              10
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              11
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              12
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              13
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              14
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item t-calendar__dates-item--selected"
-            >
-              
-              <!---->
-              15
-              <div
-                class="t-calendar__dates-item-suffix t-calendar__dates-item-suffix--selected"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              16
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              17
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              18
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              19
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              20
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              21
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              22
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              23
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              24
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              25
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              26
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              27
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              28
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              29
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              30
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              31
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-          </div>
-          
-          
-        </div>
-        <div
-          class="t-calendar__footer"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
-            role="button"
-            type="button"
-          >
-            <!---->
-            <span
-              class="t-button__content"
-            >
-              确认
-            </span>
-            <!---->
-          </button>
-        </div>
-      </div>
-      
-    </div>
-  </teleport-stub>
-</div>
-`;
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index fc5970ee9..000000000
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,167 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`cascader > events > : pick 1`] = `
-<teleport-stub
-  disabled="false"
-  to="[object HTMLBodyElement]"
->
-  <div
-    class="t-overlay"
-    style="z-index: 1000; transition-duration: 300ms; display: none;"
-  >
-    <!---->
-  </div>
-  <div
-    class="t-popup t-popup--bottom"
-    style="display: none;"
-  >
-    <!--v-if-->
-    
-    <div
-      class="t-cascader"
-    >
-      <div
-        class="t-cascader__title"
-      >
-        标题
-      </div>
-      <div
-        class="t-cascader__close-btn"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-cascader__content"
-      >
-        <div
-          class="t-cascader__steps"
-        >
-          
-          <div
-            class="t-cascader__step"
-          >
-            <div
-              class="t-cascader__step-dot t-cascader__step-dot--last"
-            />
-            <div
-              class="t-cascader__step-label t-cascader__step-label--active"
-            >
-              选择选项
-            </div>
-            <svg
-              class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-          
-        </div>
-        <!---->
-        <div
-          class="t-cascader__options-container"
-          style="width: 200vw; transform: translateX(-000vw);"
-        >
-          
-          <div
-            class="t-cascader__options"
-          >
-            <div
-              class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
-            >
-              <div
-                class="t-radio-group"
-                role="radiogroup"
-              >
-                
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="110000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      北京市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="120000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      天津市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                
-                <!---->
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</teleport-stub>
-`;
diff --git a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
index c4f423975..995406f65 100644
--- a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
@@ -730,38 +730,40 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
           >
             <!---->
             
-            
             <div
-              class="t-search"
+              data-v-6af0dffd=""
             >
               <div
-                class="t-search__input-box t-search__input-box--round"
+                class="t-search"
               >
-                <svg
-                  class="t-icon t-icon-search"
-                  fill="none"
-                  height="1em"
-                  style="font-size: 24px;"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <div
+                  class="t-search__input-box t-search__input-box--round"
                 >
-                  <path
-                    d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                    fill="currentColor"
+                  <svg
+                    class="t-icon t-icon-search"
+                    fill="none"
+                    height="1em"
+                    style="font-size: 24px;"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <input
+                    class="t-input__keyword"
+                    maxlength="-1"
+                    placeholder="搜索预设文案"
+                    type="search"
                   />
-                </svg>
-                <input
-                  class="t-input__keyword"
-                  maxlength="-1"
-                  placeholder="搜索预设文案"
-                  type="search"
-                />
+                  <!---->
+                </div>
                 <!---->
               </div>
               <!---->
             </div>
-            <!---->
-            
             
             <!---->
           </div>
@@ -1291,38 +1293,40 @@ exports[`Navbar > Navbar searchVue demo works fine 1`] = `
     >
       <!---->
       
-      
       <div
-        class="t-search"
+        data-v-6af0dffd=""
       >
         <div
-          class="t-search__input-box t-search__input-box--round"
+          class="t-search"
         >
-          <svg
-            class="t-icon t-icon-search"
-            fill="none"
-            height="1em"
-            style="font-size: 24px;"
-            viewBox="0 0 24 24"
-            width="1em"
+          <div
+            class="t-search__input-box t-search__input-box--round"
           >
-            <path
-              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-              fill="currentColor"
+            <svg
+              class="t-icon t-icon-search"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                fill="currentColor"
+              />
+            </svg>
+            <input
+              class="t-input__keyword"
+              maxlength="-1"
+              placeholder="搜索预设文案"
+              type="search"
             />
-          </svg>
-          <input
-            class="t-input__keyword"
-            maxlength="-1"
-            placeholder="搜索预设文案"
-            type="search"
-          />
+            <!---->
+          </div>
           <!---->
         </div>
         <!---->
       </div>
-      <!---->
-      
       
       <!---->
     </div>
diff --git a/src/search/__test__/__snapshots__/demo.test.jsx.snap b/src/search/__test__/__snapshots__/demo.test.jsx.snap
index 8930a8d9e..71d95fc9e 100644
--- a/src/search/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/search/__test__/__snapshots__/demo.test.jsx.snap
@@ -4,50 +4,7 @@ exports[`Search > Search actionVue demo works fine 1`] = `
 <div
   class="example-search"
 >
-  
-  <div
-    class="t-search"
-  >
-    <div
-      class="t-search__input-box t-search__input-box--square"
-    >
-      <svg
-        class="t-icon t-icon-search"
-        fill="none"
-        height="1em"
-        style="font-size: 24px;"
-        viewBox="0 0 24 24"
-        width="1em"
-      >
-        <path
-          d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-          fill="currentColor"
-        />
-      </svg>
-      <input
-        class="t-input__keyword t-search--center"
-        maxlength="-1"
-        placeholder="搜索预设文案"
-        type="search"
-      />
-      <!---->
-    </div>
-    <!---->
-  </div>
-  <!---->
-  
-</div>
-`;
-
-exports[`Search > Search baseVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="example-search"
-  >
-    
+  <div>
     <div
       class="t-search"
     >
@@ -68,7 +25,7 @@ exports[`Search > Search baseVue demo works fine 1`] = `
           />
         </svg>
         <input
-          class="t-input__keyword"
+          class="t-input__keyword t-search--center"
           maxlength="-1"
           placeholder="搜索预设文案"
           type="search"
@@ -78,43 +35,86 @@ exports[`Search > Search baseVue demo works fine 1`] = `
       <!---->
     </div>
     <!---->
-    
   </div>
+</div>
+`;
+
+exports[`Search > Search baseVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
   <div
     class="example-search"
   >
-    
-    <div
-      class="t-search"
-    >
+    <div>
       <div
-        class="t-search__input-box t-search__input-box--square"
+        class="t-search"
       >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-search__input-box t-search__input-box--square"
         >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="-1"
+            placeholder="搜索预设文案"
+            type="search"
           />
-        </svg>
-        <input
-          class="t-input__keyword"
-          maxlength="-1"
-          placeholder="输入tdesign，有预览效果"
-          type="search"
-        />
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <div
+    class="example-search"
+  >
+    <div>
+      <div
+        class="t-search"
+      >
+        <div
+          class="t-search__input-box t-search__input-box--square"
+        >
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="-1"
+            placeholder="输入tdesign，有预览效果"
+            type="search"
+          />
+          <!---->
+        </div>
         <!---->
       </div>
       <!---->
     </div>
-    <!---->
-    
   </div>
   
 </div>
@@ -128,74 +128,74 @@ exports[`Search > Search maxLengthVue demo works fine 1`] = `
   <div
     class="example-search"
   >
-    
-    <div
-      class="t-search"
-    >
+    <div>
       <div
-        class="t-search__input-box t-search__input-box--square"
+        class="t-search"
       >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-search__input-box t-search__input-box--square"
         >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="10"
+            placeholder="最大输入10个汉字"
+            type="search"
           />
-        </svg>
-        <input
-          class="t-input__keyword"
-          maxlength="10"
-          placeholder="最大输入10个汉字"
-          type="search"
-        />
+          <!---->
+        </div>
         <!---->
       </div>
       <!---->
     </div>
-    <!---->
-    
   </div>
   <div
     class="example-search"
   >
-    
-    <div
-      class="t-search"
-    >
+    <div>
       <div
-        class="t-search__input-box t-search__input-box--square"
+        class="t-search"
       >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-search__input-box t-search__input-box--square"
         >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="-1"
+            placeholder="最大输入10个字符，汉字算两个"
+            type="search"
           />
-        </svg>
-        <input
-          class="t-input__keyword"
-          maxlength="-1"
-          placeholder="最大输入10个字符，汉字算两个"
-          type="search"
-        />
+          <!---->
+        </div>
         <!---->
       </div>
       <!---->
     </div>
-    <!---->
-    
   </div>
   
 </div>
@@ -240,74 +240,74 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="-1"
+                placeholder="搜索预设文案"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="-1"
-              placeholder="搜索预设文案"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="-1"
+                placeholder="输入tdesign，有预览效果"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="-1"
-              placeholder="输入tdesign，有预览效果"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       
       
@@ -334,74 +334,74 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="10"
+                placeholder="最大输入10个汉字"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="10"
-              placeholder="最大输入10个汉字"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="-1"
+                placeholder="最大输入10个字符，汉字算两个"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="-1"
-              placeholder="最大输入10个字符，汉字算两个"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       
       
@@ -427,38 +427,38 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword t-search--center"
+                maxlength="-1"
+                placeholder="搜索预设文案"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword t-search--center"
-              maxlength="-1"
-              placeholder="搜索预设文案"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       
     </div>
@@ -488,74 +488,74 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="-1"
+                placeholder="搜索预设文案"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="-1"
-              placeholder="搜索预设文案"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--round"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--round"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                maxlength="-1"
+                placeholder="搜索预设文案"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword"
-              maxlength="-1"
-              placeholder="搜索预设文案"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       
       
@@ -585,38 +585,38 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
       <div
         class="example-search"
       >
-        
-        <div
-          class="t-search"
-        >
+        <div>
           <div
-            class="t-search__input-box t-search__input-box--square"
+            class="t-search"
           >
-            <svg
-              class="t-icon t-icon-search"
-              fill="none"
-              height="1em"
-              style="font-size: 24px;"
-              viewBox="0 0 24 24"
-              width="1em"
+            <div
+              class="t-search__input-box t-search__input-box--square"
             >
-              <path
-                d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                fill="currentColor"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword t-search--center"
+                maxlength="-1"
+                placeholder="搜索预设文案"
+                type="search"
               />
-            </svg>
-            <input
-              class="t-input__keyword t-search--center"
-              maxlength="-1"
-              placeholder="搜索预设文案"
-              type="search"
-            />
+              <!---->
+            </div>
             <!---->
           </div>
           <!---->
         </div>
-        <!---->
-        
       </div>
       
     </div>
@@ -628,50 +628,7 @@ exports[`Search > Search otherVue demo works fine 1`] = `
 <div
   class="example-search"
 >
-  
-  <div
-    class="t-search"
-  >
-    <div
-      class="t-search__input-box t-search__input-box--square"
-    >
-      <svg
-        class="t-icon t-icon-search"
-        fill="none"
-        height="1em"
-        style="font-size: 24px;"
-        viewBox="0 0 24 24"
-        width="1em"
-      >
-        <path
-          d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-          fill="currentColor"
-        />
-      </svg>
-      <input
-        class="t-input__keyword t-search--center"
-        maxlength="-1"
-        placeholder="搜索预设文案"
-        type="search"
-      />
-      <!---->
-    </div>
-    <!---->
-  </div>
-  <!---->
-  
-</div>
-`;
-
-exports[`Search > Search shapeVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="example-search"
-  >
-    
+  <div>
     <div
       class="t-search"
     >
@@ -692,7 +649,7 @@ exports[`Search > Search shapeVue demo works fine 1`] = `
           />
         </svg>
         <input
-          class="t-input__keyword"
+          class="t-input__keyword t-search--center"
           maxlength="-1"
           placeholder="搜索预设文案"
           type="search"
@@ -702,43 +659,86 @@ exports[`Search > Search shapeVue demo works fine 1`] = `
       <!---->
     </div>
     <!---->
-    
   </div>
+</div>
+`;
+
+exports[`Search > Search shapeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
   <div
     class="example-search"
   >
-    
-    <div
-      class="t-search"
-    >
+    <div>
       <div
-        class="t-search__input-box t-search__input-box--round"
+        class="t-search"
       >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-search__input-box t-search__input-box--square"
         >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="-1"
+            placeholder="搜索预设文案"
+            type="search"
           />
-        </svg>
-        <input
-          class="t-input__keyword"
-          maxlength="-1"
-          placeholder="搜索预设文案"
-          type="search"
-        />
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <div
+    class="example-search"
+  >
+    <div>
+      <div
+        class="t-search"
+      >
+        <div
+          class="t-search__input-box t-search__input-box--round"
+        >
+          <svg
+            class="t-icon t-icon-search"
+            fill="none"
+            height="1em"
+            style="font-size: 24px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+              fill="currentColor"
+            />
+          </svg>
+          <input
+            class="t-input__keyword"
+            maxlength="-1"
+            placeholder="搜索预设文案"
+            type="search"
+          />
+          <!---->
+        </div>
         <!---->
       </div>
       <!---->
     </div>
-    <!---->
-    
   </div>
   
 </div>
diff --git a/src/search/search.tsx b/src/search/search.tsx
index 964920f97..5ef488179 100644
--- a/src/search/search.tsx
+++ b/src/search/search.tsx
@@ -169,7 +169,7 @@ export default defineComponent({
       };
 
       return (
-        <>
+        <div>
           <div class={`${searchClass.value}`}>
             <div class={boxClasses.value}>
               {readerLeftIcon()}
@@ -198,7 +198,7 @@ export default defineComponent({
               {props.resultList.map((item, index) => listNodes({ item, index }))}
             </div>
           )}
-        </>
+        </div>
       );
     };
   },