From eb44308c207bebf72632b5f60b58a2d5d2bd6478 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 08:18:20 +0000
Subject: [PATCH] chore: update snapshot

---
 test/snap/__snapshots__/csr.test.jsx.snap | 2124 +++++++++++----------
 test/snap/__snapshots__/ssr.test.jsx.snap |   34 +-
 2 files changed, 1119 insertions(+), 1039 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 7e4b78054a..988238db95 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -17456,30 +17456,34 @@ exports[`csr snapshot test > csr test src/card/_example/base.tsx 1`] = `
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
           </div>
         </div>
+        <div
+          class="t-card__actions"
+        >
+          操作
+        </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        操作
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
-    </div>
   </div>
 </div>
 `;
@@ -17491,9 +17495,13 @@ exports[`csr snapshot test > csr test src/card/_example/bordered.tsx 1`] = `
     style="width: 400px;"
   >
     <div
-      class="t-card__body"
+      class="t-loading__parent"
     >
-      仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      <div
+        class="t-card__body"
+      >
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </div>
     </div>
   </div>
 </div>
@@ -17509,34 +17517,38 @@ exports[`csr snapshot test > csr test src/card/_example/bordered-none.tsx 1`] =
       style="width: 400px;"
     >
       <div
-        class="t-card__header"
+        class="t-loading__parent"
       >
         <div
-          class="t-card__header-wrapper"
+          class="t-card__header"
         >
-          <div>
-            <div
-              class="t-card__title"
-            >
-              标题
+          <div
+            class="t-card__header-wrapper"
+          >
+            <div>
+              <div
+                class="t-card__title"
+              >
+                标题
+              </div>
             </div>
           </div>
+          <div
+            class="t-card__actions"
+          >
+            <a
+              style="cursor: pointer;"
+            >
+              操作
+            </a>
+          </div>
         </div>
         <div
-          class="t-card__actions"
+          class="t-card__body"
         >
-          <a
-            style="cursor: pointer;"
-          >
-            操作
-          </a>
+          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
         </div>
       </div>
-      <div
-        class="t-card__body"
-      >
-        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
-      </div>
     </div>
   </div>
 </div>
@@ -17545,11 +17557,11 @@ exports[`csr snapshot test > csr test src/card/_example/bordered-none.tsx 1`] =
 exports[`csr snapshot test > csr test src/card/_example/custom-loading-props.tsx 1`] = `
 <div>
   <div
-    class="t-loading__parent"
+    class="t-card t-card--bordered"
     style="width: 400px;"
   >
     <div
-      class="t-card t-card--bordered"
+      class="t-loading__parent"
     >
       <div
         class="t-card__header"
@@ -17571,33 +17583,33 @@ exports[`csr snapshot test > csr test src/card/_example/custom-loading-props.tsx
       >
         仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
       </div>
-    </div>
-    <div
-      class="t-loading t-loading--center t-size-m t-loading--full t-loading__overlay"
-    >
-      <svg
-        class="t-loading__gradient t-icon-loading"
-        height="1em"
-        version="1.1"
-        viewBox="0 0 12 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <foreignobject
-          height="12"
-          width="12"
-          x="0"
-          y="0"
-        >
-          <div
-            class="t-loading__gradient-conic"
-          />
-        </foreignobject>
-      </svg>
       <div
-        class="t-loading__text"
+        class="t-loading t-loading--center t-size-m t-loading--full t-loading__overlay"
       >
-        TDesign努力加载中...
+        <svg
+          class="t-loading__gradient t-icon-loading"
+          height="1em"
+          version="1.1"
+          viewBox="0 0 12 12"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <foreignobject
+            height="12"
+            width="12"
+            x="0"
+            y="0"
+          >
+            <div
+              class="t-loading__gradient-conic"
+            />
+          </foreignobject>
+        </svg>
+        <div
+          class="t-loading__text"
+        >
+          TDesign努力加载中...
+        </div>
       </div>
     </div>
   </div>
@@ -17611,153 +17623,157 @@ exports[`csr snapshot test > csr test src/card/_example/footer.tsx 1`] = `
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
-      >
-        <div
-          class="t-card__avatar"
-        >
-          <div
-            class="t-avatar t-avatar--circle"
-            style="width: 56px; height: 56px; font-size: 28px;"
-          >
-            <span
-              style="transform: scale(1);"
-            >
-              <svg
-                class="t-icon t-icon-user"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div />
-      </div>
-      <div
-        class="t-card__actions"
-      >
-        <div
-          class="t-tag t-tag--success t-tag--dark"
-        >
-          <span
-            title="默认标签"
-          >
-            默认标签
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="t-card__cover"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/source/card-demo.png"
-      />
-    </div>
-    <div
-      class="t-card__footer"
-    >
-      <div
-        class="t-card__footer-wrapper"
+        class="t-card__header"
       >
         <div
-          class="t-row t-row--center t-row--middle"
-          style="margin-left: 0px; margin-right: 0px;"
+          class="t-card__header-wrapper"
         >
           <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            class="t-card__avatar"
           >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+            <div
+              class="t-avatar t-avatar--circle"
+              style="width: 56px; height: 56px; font-size: 28px;"
             >
               <span
-                class="t-button__text"
+                style="transform: scale(1);"
               >
                 <svg
-                  class="t-icon t-icon-thumb-up"
+                  class="t-icon t-icon-user"
                   fill="none"
                   height="1em"
                   viewBox="0 0 24 24"
                   width="1em"
                 >
                   <path
-                    d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
                     fill="currentColor"
                   />
                 </svg>
               </span>
-            </button>
+            </div>
           </div>
+          <div />
+        </div>
+        <div
+          class="t-card__actions"
+        >
           <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            class="t-tag t-tag--success t-tag--dark"
           >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+            <span
+              title="默认标签"
             >
-              <span
-                class="t-button__text"
-              >
-                <svg
-                  class="t-icon t-icon-chat"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
+              默认标签
+            </span>
           </div>
+        </div>
+      </div>
+      <div
+        class="t-card__cover"
+      >
+        <img
+          alt=""
+          src="https://tdesign.gtimg.com/site/source/card-demo.png"
+        />
+      </div>
+      <div
+        class="t-card__footer"
+      >
+        <div
+          class="t-card__footer-wrapper"
+        >
           <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            class="t-row t-row--center t-row--middle"
+            style="margin-left: 0px; margin-right: 0px;"
           >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-share"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
+                  <svg
+                    class="t-icon t-icon-thumb-up"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            >
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  <svg
+                    class="t-icon t-icon-chat"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            >
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  <svg
+                    class="t-icon t-icon-share"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -17780,106 +17796,110 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.tsx 1`] =
         style="width: 400px;"
       >
         <div
-          class="t-card__cover"
-        >
-          <img
-            alt=""
-            src="https://tdesign.gtimg.com/site/source/card-demo.png"
-          />
-        </div>
-        <div
-          class="t-card__footer"
+          class="t-loading__parent"
         >
           <div
-            class="t-card__footer-wrapper"
+            class="t-card__cover"
+          >
+            <img
+              alt=""
+              src="https://tdesign.gtimg.com/site/source/card-demo.png"
+            />
+          </div>
+          <div
+            class="t-card__footer"
           >
             <div
-              class="t-row t-row--center t-row--middle"
-              style="margin-left: 0px; margin-right: 0px;"
+              class="t-card__footer-wrapper"
             >
               <div
-                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-                style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+                class="t-row t-row--center t-row--middle"
+                style="margin-left: 0px; margin-right: 0px;"
               >
-                <button
-                  class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                  type="button"
+                <div
+                  class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                  style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
                 >
-                  <span
-                    class="t-button__text"
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                    type="button"
                   >
-                    <svg
-                      class="t-icon t-icon-thumb-up"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
+                    <span
+                      class="t-button__text"
                     >
-                      <path
-                        d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-divider t-divider--vertical"
-              />
-              <div
-                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-                style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-              >
-                <button
-                  class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                  type="button"
+                      <svg
+                        class="t-icon t-icon-thumb-up"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="t-divider t-divider--vertical"
+                />
+                <div
+                  class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                  style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
                 >
-                  <span
-                    class="t-button__text"
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                    type="button"
                   >
-                    <svg
-                      class="t-icon t-icon-chat"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
+                    <span
+                      class="t-button__text"
                     >
-                      <path
-                        d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-divider t-divider--vertical"
-              />
-              <div
-                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-                style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-              >
-                <button
-                  class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                  type="button"
+                      <svg
+                        class="t-icon t-icon-chat"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="t-divider t-divider--vertical"
+                />
+                <div
+                  class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                  style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
                 >
-                  <span
-                    class="t-button__text"
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                    type="button"
                   >
-                    <svg
-                      class="t-icon t-icon-share"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
+                    <span
+                      class="t-button__text"
                     >
-                      <path
-                        d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                      <svg
+                        class="t-icon t-icon-share"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -17894,50 +17914,85 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.tsx 1`] =
         style="width: 400px;"
       >
         <div
-          class="t-card__cover"
-        >
-          <img
-            alt=""
-            src="https://tdesign.gtimg.com/site/source/card-demo.png"
-          />
-        </div>
-        <div
-          class="t-card__footer"
+          class="t-loading__parent"
         >
           <div
-            class="t-card__footer-wrapper"
+            class="t-card__cover"
+          >
+            <img
+              alt=""
+              src="https://tdesign.gtimg.com/site/source/card-demo.png"
+            />
+          </div>
+          <div
+            class="t-card__footer"
           >
             <div
-              class="t-row t-row--center t-row--middle"
-              style="margin-left: 0px; margin-right: 0px;"
+              class="t-card__footer-wrapper"
             >
               <div
-                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-                style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+                class="t-row t-row--center t-row--middle"
+                style="margin-left: 0px; margin-right: 0px;"
               >
-                <button
-                  class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                  style="margin-right: 8px;"
-                  type="button"
+                <div
+                  class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                  style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
                 >
-                  <span
-                    class="t-button__text"
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                    style="margin-right: 8px;"
+                    type="button"
                   >
-                    <svg
-                      class="t-icon t-icon-heart"
-                      fill="none"
-                      height="1em"
-                      style="font-size: 16px;"
-                      viewBox="0 0 24 24"
-                      width="1em"
+                    <span
+                      class="t-button__text"
                     >
-                      <path
-                        d="M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                      <svg
+                        class="t-icon t-icon-heart"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 16px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      <svg
+                        class="t-icon t-icon-share"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 16px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-card__actions"
+            >
+              <div
+                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                style="flex-basis: auto;"
+              >
                 <button
                   class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
                   type="button"
@@ -17946,15 +18001,14 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.tsx 1`] =
                     class="t-button__text"
                   >
                     <svg
-                      class="t-icon t-icon-share"
+                      class="t-icon t-icon-more"
                       fill="none"
                       height="1em"
-                      style="font-size: 16px;"
                       viewBox="0 0 24 24"
                       width="1em"
                     >
                       <path
-                        d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                        d="M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z"
                         fill="currentColor"
                       />
                     </svg>
@@ -17963,36 +18017,6 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.tsx 1`] =
               </div>
             </div>
           </div>
-          <div
-            class="t-card__actions"
-          >
-            <div
-              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-              style="flex-basis: auto;"
-            >
-              <button
-                class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                type="button"
-              >
-                <span
-                  class="t-button__text"
-                >
-                  <svg
-                    class="t-icon t-icon-more"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -18000,117 +18024,121 @@ exports[`csr snapshot test > csr test src/card/_example/footer-actions.tsx 1`] =
       class="t-space-item"
     >
       <div
-        class="t-card t-card--bordered"
-        style="width: 400px;"
-      >
-        <div
-          class="t-card__cover"
-        >
-          <img
-            alt=""
-            src="https://tdesign.gtimg.com/site/source/card-demo.png"
-          />
-        </div>
+        class="t-card t-card--bordered"
+        style="width: 400px;"
+      >
         <div
-          class="t-card__footer"
+          class="t-loading__parent"
         >
           <div
-            class="t-card__footer-wrapper"
+            class="t-card__cover"
+          >
+            <img
+              alt=""
+              src="https://tdesign.gtimg.com/site/source/card-demo.png"
+            />
+          </div>
+          <div
+            class="t-card__footer"
           >
             <div
-              class="t-avatar-group t-avatar--offset-left"
+              class="t-card__footer-wrapper"
             >
               <div
-                class="t-avatar t-avatar--circle"
+                class="t-avatar-group t-avatar--offset-left"
               >
                 <div
-                  class="t-image__wrapper t-image__wrapper--shape-square"
+                  class="t-avatar t-avatar--circle"
                 >
-                  <img
-                    class="t-image t-image--fit-fill t-image--position-center"
-                    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-                  />
                   <div
-                    class="t-image__loading"
+                    class="t-image__wrapper t-image__wrapper--shape-square"
                   >
+                    <img
+                      class="t-image t-image--fit-fill t-image--position-center"
+                      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                    />
                     <div
-                      class="t-space t-space-align-center t-space-vertical"
-                      style="gap: 8px;"
+                      class="t-image__loading"
                     >
                       <div
-                        class="t-space-item"
+                        class="t-space t-space-align-center t-space-vertical"
+                        style="gap: 8px;"
                       >
-                        <svg
-                          class="t-icon t-icon-image"
-                          fill="none"
-                          height="1em"
-                          style="font-size: 24px;"
-                          viewBox="0 0 24 24"
-                          width="1em"
+                        <div
+                          class="t-space-item"
                         >
-                          <path
-                            d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                      </div>
-                      <div
-                        class="t-space-item"
-                      >
-                        loading
+                          <svg
+                            class="t-icon t-icon-image"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 24px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="t-space-item"
+                        >
+                          loading
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="t-avatar t-avatar--circle"
-              >
-                <span
-                  style="transform: scale(1);"
+                <div
+                  class="t-avatar t-avatar--circle"
                 >
-                  Q
-                </span>
-              </div>
-              <div
-                class="t-avatar t-avatar__collapse t-avatar--circle"
-              >
-                <span
-                  style="transform: scale(1);"
+                  <span
+                    style="transform: scale(1);"
+                  >
+                    Q
+                  </span>
+                </div>
+                <div
+                  class="t-avatar t-avatar__collapse t-avatar--circle"
                 >
-                  +3
-                </span>
+                  <span
+                    style="transform: scale(1);"
+                  >
+                    +3
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="t-card__actions"
-          >
             <div
-              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-              style="flex-basis: auto;"
+              class="t-card__actions"
             >
-              <button
-                class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-                type="button"
+              <div
+                class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+                style="flex-basis: auto;"
               >
-                <span
-                  class="t-button__text"
+                <button
+                  class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+                  type="button"
                 >
-                  <svg
-                    class="t-icon t-icon-more"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
+                  <span
+                    class="t-button__text"
                   >
-                    <path
-                      d="M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
-              </button>
+                    <svg
+                      class="t-icon t-icon-more"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -18127,50 +18155,54 @@ exports[`csr snapshot test > csr test src/card/_example/footer-content.tsx 1`] =
     style="width: 400px;"
   >
     <div
-      class="t-card__cover"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/source/card-demo.png"
-      />
-    </div>
-    <div
-      class="t-card__footer"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__footer-wrapper"
+        class="t-card__cover"
+      >
+        <img
+          alt=""
+          src="https://tdesign.gtimg.com/site/source/card-demo.png"
+        />
+      </div>
+      <div
+        class="t-card__footer"
       >
         <div
-          class="t-comment"
+          class="t-card__footer-wrapper"
         >
           <div
-            class="t-comment__inner"
+            class="t-comment"
           >
             <div
-              class="t-comment__avatar"
-            >
-              <img
-                alt=""
-                class="t-comment__avatar-image"
-                src="https://tdesign.gtimg.com/site/avatar-boy.jpg"
-              />
-            </div>
-            <div
-              class="t-comment__content"
+              class="t-comment__inner"
             >
               <div
-                class="t-comment__author"
+                class="t-comment__avatar"
               >
-                <span
-                  class="t-comment__name"
-                >
-                  标题
-                </span>
+                <img
+                  alt=""
+                  class="t-comment__avatar-image"
+                  src="https://tdesign.gtimg.com/site/avatar-boy.jpg"
+                />
               </div>
               <div
-                class="t-comment__detail"
+                class="t-comment__content"
               >
-                卡片内容
+                <div
+                  class="t-comment__author"
+                >
+                  <span
+                    class="t-comment__name"
+                  >
+                    标题
+                  </span>
+                </div>
+                <div
+                  class="t-comment__detail"
+                >
+                  卡片内容
+                </div>
               </div>
             </div>
           </div>
@@ -18188,74 +18220,78 @@ exports[`csr snapshot test > csr test src/card/_example/footer-content-actions.t
     style="width: 400px;"
   >
     <div
-      class="t-card__cover"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/source/card-demo.png"
-      />
-    </div>
-    <div
-      class="t-card__footer"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__footer-wrapper"
+        class="t-card__cover"
+      >
+        <img
+          alt=""
+          src="https://tdesign.gtimg.com/site/source/card-demo.png"
+        />
+      </div>
+      <div
+        class="t-card__footer"
       >
         <div
-          class="t-comment"
+          class="t-card__footer-wrapper"
         >
           <div
-            class="t-comment__inner"
+            class="t-comment"
           >
             <div
-              class="t-comment__avatar"
-            >
-              <img
-                alt=""
-                class="t-comment__avatar-image"
-                src="https://tdesign.gtimg.com/site/avatar-boy.jpg"
-              />
-            </div>
-            <div
-              class="t-comment__content"
+              class="t-comment__inner"
             >
               <div
-                class="t-comment__author"
+                class="t-comment__avatar"
               >
-                <span
-                  class="t-comment__name"
-                >
-                  标题
-                </span>
+                <img
+                  alt=""
+                  class="t-comment__avatar-image"
+                  src="https://tdesign.gtimg.com/site/avatar-boy.jpg"
+                />
               </div>
               <div
-                class="t-comment__detail"
+                class="t-comment__content"
               >
-                卡片内容
+                <div
+                  class="t-comment__author"
+                >
+                  <span
+                    class="t-comment__name"
+                  >
+                    标题
+                  </span>
+                </div>
+                <div
+                  class="t-comment__detail"
+                >
+                  卡片内容
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-card__actions"
-      >
-        <button
-          class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-          type="button"
+        <div
+          class="t-card__actions"
         >
-          <span
-            class="t-button__text"
+          <button
+            class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+            type="button"
           >
-            <svg
-              class="t-icon t-icon-more"
+            <span
+              class="t-button__text"
             >
-              <use
-                xlink:href="#t-icon-more"
-              />
-            </svg>
-          </span>
-        </button>
+              <svg
+                class="t-icon t-icon-more"
+              >
+                <use
+                  xlink:href="#t-icon-more"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -18269,34 +18305,38 @@ exports[`csr snapshot test > csr test src/card/_example/header.tsx 1`] = `
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
           </div>
         </div>
+        <div
+          class="t-card__actions"
+        >
+          <a
+            style="cursor: pointer;"
+          >
+            操作
+          </a>
+        </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        <a
-          style="cursor: pointer;"
-        >
-          操作
-        </a>
+        卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
-    </div>
   </div>
 </div>
 `;
@@ -18308,40 +18348,44 @@ exports[`csr snapshot test > csr test src/card/_example/header-all-props.tsx 1`]
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
-          </div>
-          <div
-            class="t-card__subtitle"
-          >
-            副标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
+            <div
+              class="t-card__subtitle"
+            >
+              副标题
+            </div>
+            <p
+              class="t-card__description"
+            >
+              描述
+            </p>
           </div>
-          <p
-            class="t-card__description"
-          >
-            描述
-          </p>
+        </div>
+        <div
+          class="t-card__actions"
+        >
+          操作
         </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        操作
+        卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
-    </div>
   </div>
 </div>
 `;
@@ -18353,34 +18397,38 @@ exports[`csr snapshot test > csr test src/card/_example/header-bordered.tsx 1`]
     style="width: 400px;"
   >
     <div
-      class="t-card__header t-card__title--bordered"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header t-card__title--bordered"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
           </div>
         </div>
+        <div
+          class="t-card__actions"
+        >
+          <a
+            style="cursor: pointer;"
+          >
+            操作
+          </a>
+        </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        <a
-          style="cursor: pointer;"
-        >
-          操作
-        </a>
+        卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
-    </div>
   </div>
 </div>
 `;
@@ -18392,35 +18440,39 @@ exports[`csr snapshot test > csr test src/card/_example/header-description.tsx 1
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
+            <p
+              class="t-card__description"
+            >
+              描述
+            </p>
           </div>
-          <p
-            class="t-card__description"
-          >
-            描述
-          </p>
+        </div>
+        <div
+          class="t-card__actions"
+        >
+          操作
         </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        操作
+        卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
-    </div>
   </div>
 </div>
 `;
@@ -18432,195 +18484,199 @@ exports[`csr snapshot test > csr test src/card/_example/header-footer-actions.ts
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
         <div
-          class="t-card__avatar"
+          class="t-card__header-wrapper"
         >
           <div
-            class="t-avatar t-avatar--circle"
-            style="width: 40px; height: 40px; font-size: 20px;"
+            class="t-card__avatar"
           >
             <div
-              class="t-image__wrapper t-image__wrapper--shape-square"
-              style="width: 40px; height: 40px;"
+              class="t-avatar t-avatar--circle"
+              style="width: 40px; height: 40px; font-size: 20px;"
             >
-              <img
-                class="t-image t-image--fit-fill t-image--position-center"
-                src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-              />
               <div
-                class="t-image__loading"
+                class="t-image__wrapper t-image__wrapper--shape-square"
+                style="width: 40px; height: 40px;"
               >
+                <img
+                  class="t-image t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                />
                 <div
-                  class="t-space t-space-align-center t-space-vertical"
-                  style="gap: 8px;"
+                  class="t-image__loading"
                 >
                   <div
-                    class="t-space-item"
+                    class="t-space t-space-align-center t-space-vertical"
+                    style="gap: 8px;"
                   >
-                    <svg
-                      class="t-icon t-icon-image"
-                      fill="none"
-                      height="1em"
-                      style="font-size: 24px;"
-                      viewBox="0 0 24 24"
-                      width="1em"
+                    <div
+                      class="t-space-item"
                     >
-                      <path
-                        d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="t-space-item"
-                  >
-                    loading
+                      <svg
+                        class="t-icon t-icon-image"
+                        fill="none"
+                        height="1em"
+                        style="font-size: 24px;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="t-space-item"
+                    >
+                      loading
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
+            <p
+              class="t-card__description"
+            >
+              卡片内容
+            </p>
           </div>
-          <p
-            class="t-card__description"
+        </div>
+        <div
+          class="t-card__actions"
+        >
+          <button
+            class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+            type="button"
           >
-            卡片内容
-          </p>
+            <span
+              class="t-button__text"
+            >
+              <svg
+                class="t-icon t-icon-more"
+              >
+                <use
+                  xlink:href="#t-icon-more"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__cover"
       >
-        <button
-          class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-          type="button"
-        >
-          <span
-            class="t-button__text"
-          >
-            <svg
-              class="t-icon t-icon-more"
-            >
-              <use
-                xlink:href="#t-icon-more"
-              />
-            </svg>
-          </span>
-        </button>
+        <img
+          alt=""
+          src="https://tdesign.gtimg.com/site/source/card-demo.png"
+        />
       </div>
-    </div>
-    <div
-      class="t-card__cover"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/source/card-demo.png"
-      />
-    </div>
-    <div
-      class="t-card__footer"
-    >
       <div
-        class="t-card__footer-wrapper"
+        class="t-card__footer"
       >
         <div
-          class="t-row t-row--center t-row--middle"
-          style="margin-left: 0px; margin-right: 0px;"
+          class="t-card__footer-wrapper"
         >
           <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            class="t-row t-row--center t-row--middle"
+            style="margin-left: 0px; margin-right: 0px;"
           >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-thumb-up"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-          >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+                  <svg
+                    class="t-icon t-icon-thumb-up"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-chat"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-          >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+                  <svg
+                    class="t-icon t-icon-chat"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-share"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
+                  <svg
+                    class="t-icon t-icon-share"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -18636,35 +18692,39 @@ exports[`csr snapshot test > csr test src/card/_example/header-subtitle.tsx 1`]
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
-          </div>
-          <div
-            class="t-card__subtitle"
-          >
-            副标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
+            <div
+              class="t-card__subtitle"
+            >
+              副标题
+            </div>
           </div>
         </div>
+        <div
+          class="t-card__actions"
+        >
+          操作
+        </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__body"
       >
-        操作
+        卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
       </div>
     </div>
-    <div
-      class="t-card__body"
-    >
-      卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
-    </div>
   </div>
 </div>
 `;
@@ -18676,146 +18736,150 @@ exports[`csr snapshot test > csr test src/card/_example/header-subtitle-footer-a
     style="width: 400px;"
   >
     <div
-      class="t-card__header"
+      class="t-loading__parent"
     >
       <div
-        class="t-card__header-wrapper"
+        class="t-card__header"
       >
-        <div>
-          <div
-            class="t-card__title"
-          >
-            标题
+        <div
+          class="t-card__header-wrapper"
+        >
+          <div>
+            <div
+              class="t-card__title"
+            >
+              标题
+            </div>
+            <div
+              class="t-card__subtitle"
+            >
+              副标题
+            </div>
           </div>
-          <div
-            class="t-card__subtitle"
+        </div>
+        <div
+          class="t-card__actions"
+        >
+          <button
+            class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+            type="button"
           >
-            副标题
-          </div>
+            <span
+              class="t-button__text"
+            >
+              <svg
+                class="t-icon t-icon-more"
+              >
+                <use
+                  xlink:href="#t-icon-more"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
       <div
-        class="t-card__actions"
+        class="t-card__cover"
       >
-        <button
-          class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
-          type="button"
-        >
-          <span
-            class="t-button__text"
-          >
-            <svg
-              class="t-icon t-icon-more"
-            >
-              <use
-                xlink:href="#t-icon-more"
-              />
-            </svg>
-          </span>
-        </button>
+        <img
+          alt=""
+          src="https://tdesign.gtimg.com/site/source/card-demo.png"
+        />
       </div>
-    </div>
-    <div
-      class="t-card__cover"
-    >
-      <img
-        alt=""
-        src="https://tdesign.gtimg.com/site/source/card-demo.png"
-      />
-    </div>
-    <div
-      class="t-card__footer"
-    >
       <div
-        class="t-card__footer-wrapper"
+        class="t-card__footer"
       >
         <div
-          class="t-row t-row--center t-row--middle"
-          style="margin-left: 0px; margin-right: 0px;"
+          class="t-card__footer-wrapper"
         >
           <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
+            class="t-row t-row--center t-row--middle"
+            style="margin-left: 0px; margin-right: 0px;"
           >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-thumb-up"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-          >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+                  <svg
+                    class="t-icon t-icon-thumb-up"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-chat"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="t-divider t-divider--vertical"
-          />
-          <div
-            class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
-            style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
-          >
-            <button
-              class="t-button t-button--theme-default t-button--variant-text"
-              type="button"
+                  <svg
+                    class="t-icon t-icon-chat"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="t-divider t-divider--vertical"
+            />
+            <div
+              class="t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0"
+              style="padding-left: 0px; padding-right: 0px; flex-basis: auto;"
             >
-              <span
-                class="t-button__text"
+              <button
+                class="t-button t-button--theme-default t-button--variant-text"
+                type="button"
               >
-                <svg
-                  class="t-icon t-icon-share"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="t-button__text"
                 >
-                  <path
-                    d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
+                  <svg
+                    class="t-icon t-icon-share"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -79006,12 +79070,16 @@ exports[`csr snapshot test > csr test src/space/_example/vertical.tsx 1`] = `
         class="t-card t-card--bordered t-card--shadow-hover"
       >
         <div
-          class="t-card__header"
-        />
-        <div
-          class="t-card__body"
+          class="t-loading__parent"
         >
-          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          <div
+            class="t-card__header"
+          />
+          <div
+            class="t-card__body"
+          >
+            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          </div>
         </div>
       </div>
     </div>
@@ -79022,12 +79090,16 @@ exports[`csr snapshot test > csr test src/space/_example/vertical.tsx 1`] = `
         class="t-card t-card--bordered t-card--shadow-hover"
       >
         <div
-          class="t-card__header"
-        />
-        <div
-          class="t-card__body"
+          class="t-loading__parent"
         >
-          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          <div
+            class="t-card__header"
+          />
+          <div
+            class="t-card__body"
+          >
+            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          </div>
         </div>
       </div>
     </div>
@@ -79038,12 +79110,16 @@ exports[`csr snapshot test > csr test src/space/_example/vertical.tsx 1`] = `
         class="t-card t-card--bordered t-card--shadow-hover"
       >
         <div
-          class="t-card__header"
-        />
-        <div
-          class="t-card__body"
+          class="t-loading__parent"
         >
-          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          <div
+            class="t-card__header"
+          />
+          <div
+            class="t-card__body"
+          >
+            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+          </div>
         </div>
       </div>
     </div>
@@ -79593,208 +79669,212 @@ exports[`csr snapshot test > csr test src/statistic/_example/combination.tsx 1`]
         class="t-card t-card--bordered t-card--shadow-hover"
       >
         <div
-          class="t-card__header t-card__title--bordered"
+          class="t-loading__parent"
         >
           <div
-            class="t-card__header-wrapper"
+            class="t-card__header t-card__title--bordered"
           >
-            <div>
-              <div
-                class="t-card__title"
-              >
-                Yesterday traffic
+            <div
+              class="t-card__header-wrapper"
+            >
+              <div>
+                <div
+                  class="t-card__title"
+                >
+                  Yesterday traffic
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          class="t-card__body"
-        >
           <div
-            class="t-space t-space-horizontal"
-            style="gap: 16px;"
+            class="t-card__body"
           >
             <div
-              class="t-space-item"
+              class="t-space t-space-horizontal"
+              style="gap: 16px;"
             >
               <div
-                class="t-statistic"
+                class="t-space-item"
               >
                 <div
-                  class="t-statistic-title"
-                >
-                  Voice duration
-                </div>
-                <div
-                  class="t-statistic-content"
+                  class="t-statistic"
                 >
-                  <span
-                    class="t-statistic-content-value"
+                  <div
+                    class="t-statistic-title"
                   >
-                    789
-                  </span>
-                  <span
-                    class="t-statistic-content-unit"
+                    Voice duration
+                  </div>
+                  <div
+                    class="t-statistic-content"
                   >
-                    minute
-                  </span>
-                </div>
-                <div
-                  class="t-statistic-extra"
-                >
-                  the day before 9%
+                    <span
+                      class="t-statistic-content-value"
+                    >
+                      789
+                    </span>
+                    <span
+                      class="t-statistic-content-unit"
+                    >
+                      minute
+                    </span>
+                  </div>
+                  <div
+                    class="t-statistic-extra"
+                  >
+                    the day before 9%
+                  </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="t-space-item-separator"
-            >
-              <div
-                class="t-divider t-divider--vertical"
-                style="height: 100%;"
-              />
-            </div>
-            <div
-              class="t-space-item"
-            >
               <div
-                class="t-statistic"
+                class="t-space-item-separator"
               >
                 <div
-                  class="t-statistic-title"
-                >
-                  Total number of voice DAUs
-                </div>
+                  class="t-divider t-divider--vertical"
+                  style="height: 100%;"
+                />
+              </div>
+              <div
+                class="t-space-item"
+              >
                 <div
-                  class="t-statistic-content"
+                  class="t-statistic"
                 >
-                  <span
-                    class="t-statistic-content-value"
+                  <div
+                    class="t-statistic-title"
                   >
-                    188
-                  </span>
-                </div>
-                <div
-                  class="t-statistic-extra"
-                >
+                    Total number of voice DAUs
+                  </div>
+                  <div
+                    class="t-statistic-content"
+                  >
+                    <span
+                      class="t-statistic-content-value"
+                    >
+                      188
+                    </span>
+                  </div>
                   <div
-                    class="t-space t-space-vertical"
-                    style="gap: 0px;"
+                    class="t-statistic-extra"
                   >
                     <div
-                      class="t-space-item"
+                      class="t-space t-space-vertical"
+                      style="gap: 0px;"
                     >
                       <div
-                        class="t-space t-space-align-center t-space-horizontal"
-                        style="gap: 7px;"
+                        class="t-space-item"
                       >
                         <div
-                          class="t-space-item"
+                          class="t-space t-space-align-center t-space-horizontal"
+                          style="gap: 7px;"
                         >
                           <div
-                            style="width: 120px;"
+                            class="t-space-item"
                           >
-                            the day before
+                            <div
+                              style="width: 120px;"
+                            >
+                              the day before
+                            </div>
+                          </div>
+                          <div
+                            class="t-space-item"
+                          >
+                            <i
+                              class="t-icon t-icon-arrow-up"
+                              style="color: rgb(213, 73, 65);"
+                            />
+                          </div>
+                          <div
+                            class="t-space-item"
+                          >
+                            9%
                           </div>
-                        </div>
-                        <div
-                          class="t-space-item"
-                        >
-                          <i
-                            class="t-icon t-icon-arrow-up"
-                            style="color: rgb(213, 73, 65);"
-                          />
-                        </div>
-                        <div
-                          class="t-space-item"
-                        >
-                          9%
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="t-space-item"
-                    >
                       <div
-                        class="t-space t-space-align-center t-space-horizontal"
-                        style="gap: 7px;"
+                        class="t-space-item"
                       >
                         <div
-                          class="t-space-item"
+                          class="t-space t-space-align-center t-space-horizontal"
+                          style="gap: 7px;"
                         >
                           <div
-                            style="width: 120px;"
+                            class="t-space-item"
                           >
-                            last week
+                            <div
+                              style="width: 120px;"
+                            >
+                              last week
+                            </div>
+                          </div>
+                          <div
+                            class="t-space-item"
+                          >
+                            <i
+                              class="t-icon t-icon-arrow-down"
+                              style="color: rgb(43, 164, 113);"
+                            />
+                          </div>
+                          <div
+                            class="t-space-item"
+                          >
+                            9%
                           </div>
-                        </div>
-                        <div
-                          class="t-space-item"
-                        >
-                          <i
-                            class="t-icon t-icon-arrow-down"
-                            style="color: rgb(43, 164, 113);"
-                          />
-                        </div>
-                        <div
-                          class="t-space-item"
-                        >
-                          9%
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="t-space-item-separator"
-            >
-              <div
-                class="t-divider t-divider--vertical"
-                style="height: 100%;"
-              />
-            </div>
-            <div
-              class="t-space-item"
-            >
               <div
-                class="t-statistic"
+                class="t-space-item-separator"
               >
                 <div
-                  class="t-statistic-title"
-                >
-                  Total Assets
-                </div>
+                  class="t-divider t-divider--vertical"
+                  style="height: 100%;"
+                />
+              </div>
+              <div
+                class="t-space-item"
+              >
                 <div
-                  class="t-statistic-content"
+                  class="t-statistic"
                 >
-                  <span
-                    class="t-statistic-content-prefix"
-                  >
-                    <svg
-                      class="t-icon t-icon-arrow-triangle-down-filled"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M15 12h4.5L12 22 4.5 12H9V2h6v10z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="t-statistic-content-value"
+                  <div
+                    class="t-statistic-title"
                   >
-                    52.18
-                  </span>
-                  <span
-                    class="t-statistic-content-unit"
+                    Total Assets
+                  </div>
+                  <div
+                    class="t-statistic-content"
                   >
-                    %
-                  </span>
+                    <span
+                      class="t-statistic-content-prefix"
+                    >
+                      <svg
+                        class="t-icon t-icon-arrow-triangle-down-filled"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M15 12h4.5L12 22 4.5 12H9V2h6v10z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="t-statistic-content-value"
+                    >
+                      52.18
+                    </span>
+                    <span
+                      class="t-statistic-content-unit"
+                    >
+                      %
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -132387,35 +132467,35 @@ exports[`ssr snapshot test > ssr test src/calendar/_example/value.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/calendar/_example/week.tsx 1`] = `"<div class=\\"t-calendar t-calendar--full undefined\\"><div class=\\"t-calendar__control\\"><div class=\\"t-calendar__title\\"></div><div class=\\"t-calendar__control-section\\"><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-calendar__control-section-cell\\" style=\\"height:auto\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;month&#x27;\\" checked=\\"\\" value=\\"month\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">月</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;year&#x27;\\" value=\\"year\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">年</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check t-calendar__control-tag\\" tabindex=\\"0\\"><span title=\\"隐藏周末\\">隐藏周末</span></div></div><div class=\\"t-calendar__control-section-cell\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">今天</span></button></div></div></div><div class=\\"t-calendar__panel t-calendar__panel--month\\"><table class=\\"t-calendar__table\\"><thead class=\\"t-calendar__table-head\\"><tr class=\\"t-calendar__table-head-row\\"><th class=\\"t-calendar__table-head-cell\\"><div>星期1</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期2</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期3</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期4</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期5</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期6</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期7</div></th></tr></thead><tbody class=\\"t-calendar__table-body\\"><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">30</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">01</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">02</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">03</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">04</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">05</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">06</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">07</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">08</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">09</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">10</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">11</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">12</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">13</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">14</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">15</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">16</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">17</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">18</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">19</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">20</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">21</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">22</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">23</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">24</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">25</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">26</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">27</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell t-is-checked t-calendar__table-body-cell--now\\"><div class=\\"t-calendar__table-body-cell-display\\">28</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">29</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">30</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">31</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">01</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">02</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">03</div></td></tr></tbody></table></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/base.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/base.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/bordered-none.tsx 1`] = `"<div style=\\"padding:16px;background-color:var(--td-bg-color-container-hover)\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/bordered-none.tsx 1`] = `"<div style=\\"padding:16px;background-color:var(--td-bg-color-container-hover)\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/custom-loading-props.tsx 1`] = `"<div class=\\"t-loading__parent\\" style=\\"width:400px\\"><div class=\\"t-card t-card--bordered\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">自定义loadingProps Card</div></div></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div><div class=\\"t-loading t-loading--center t-size-m t-loading--full t-loading__overlay\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">TDesign努力加载中...</div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/custom-loading-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">自定义loadingProps Card</div></div></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div><div class=\\"t-loading t-loading--center t-size-m t-loading--full t-loading__overlay\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">TDesign努力加载中...</div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:56px;height:56px;font-size:28px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg></span></div></div><div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-tag t-tag--success t-tag--dark\\"><span title=\\"默认标签\\">默认标签</span></div></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:56px;height:56px;font-size:28px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg></span></div></div><div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-tag t-tag--success t-tag--dark\\"><span title=\\"默认标签\\">默认标签</span></div></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-actions.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button style=\\"margin-right:8px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:default;height:default\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">Q</span></div><div class=\\"t-avatar t-avatar__collapse t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">+3</span></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-actions.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button style=\\"margin-right:8px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:default;height:default\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">Q</span></div><div class=\\"t-avatar t-avatar__collapse t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">+3</span></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-content.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-content.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-content-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-content-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-all-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-all-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-description.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-description.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:40px;height:40px;font-size:20px\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:40px;height:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div></div><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">卡片内容</p></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:40px;height:40px;font-size:20px\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:40px;height:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div></div><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">卡片内容</p></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"<div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div>"`;
 
@@ -133101,7 +133181,7 @@ exports[`ssr snapshot test > ssr test src/space/_example/separator.tsx 1`] = `"<
 
 exports[`ssr snapshot test > ssr test src/space/_example/size.tsx 1`] = `"<div class=\\"t-slider__container\\"><div class=\\"t-slider\\"><div class=\\"t-slider__rail\\"><div style=\\"left:0%;width:8%\\" class=\\"t-slider__track\\"></div><div style=\\"left:8%\\" class=\\"t-slider__button-wrapper\\"><div class=\\"t-slider__button\\"></div></div><div class=\\"t-slider__stops\\"></div><div class=\\"t-slider__mark\\"></div></div></div></div><br/><div style=\\"gap:8px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/space/_example/vertical.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/space/_example/vertical.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/animation.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Start</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Update value</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">refs</span></button></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">0.00</span><span class=\\"t-statistic-content-suffix\\">%</span></div></div></div></div>"`;
 
@@ -133109,7 +133189,7 @@ exports[`ssr snapshot test > ssr test src/statistic/_example/base.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/color.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-text-color-primary)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-brand-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-warning-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/statistic/_example/combination.tsx 1`] = `"<div style=\\"gap:100px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:var(--td-radius-medium);padding:12px\\" class=\\"t-icon t-icon-chart\\"></i></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span><span class=\\"t-statistic-content-suffix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:50%;padding:12px\\" class=\\"t-icon t-icon-internet\\"></i></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">Yesterday traffic</div></div></div></div><div class=\\"t-card__body\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Voice duration</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">789</span><span class=\\"t-statistic-content-unit\\">minute</span></div><div class=\\"t-statistic-extra\\">the day before 9%</div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total number of voice DAUs</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-value\\">188</span></div><div class=\\"t-statistic-extra\\"><div style=\\"gap:0px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">the day before</div></div><div class=\\"t-space-item\\"><i style=\\"color:#d54941;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-up\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">last week</div></div><div class=\\"t-space-item\\"><i style=\\"color:#2ba471;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-down\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div></div></div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/statistic/_example/combination.tsx 1`] = `"<div style=\\"gap:100px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:var(--td-radius-medium);padding:12px\\" class=\\"t-icon t-icon-chart\\"></i></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span><span class=\\"t-statistic-content-suffix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:50%;padding:12px\\" class=\\"t-icon t-icon-internet\\"></i></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">Yesterday traffic</div></div></div></div><div class=\\"t-card__body\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Voice duration</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">789</span><span class=\\"t-statistic-content-unit\\">minute</span></div><div class=\\"t-statistic-extra\\">the day before 9%</div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total number of voice DAUs</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-value\\">188</span></div><div class=\\"t-statistic-extra\\"><div style=\\"gap:0px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">the day before</div></div><div class=\\"t-space-item\\"><i style=\\"color:#d54941;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-up\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">last week</div></div><div class=\\"t-space-item\\"><i style=\\"color:#2ba471;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-down\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div></div></div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/loading.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-is-checked t-size-l\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Downloads</div><div><div class=\\"t-skeleton__row\\"><div class=\\"t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient\\"></div></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index b989efc081..a7399027ba 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -146,35 +146,35 @@ exports[`ssr snapshot test > ssr test src/calendar/_example/value.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/calendar/_example/week.tsx 1`] = `"<div class=\\"t-calendar t-calendar--full undefined\\"><div class=\\"t-calendar__control\\"><div class=\\"t-calendar__title\\"></div><div class=\\"t-calendar__control-section\\"><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-calendar__control-section-cell\\" style=\\"height:auto\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;month&#x27;\\" checked=\\"\\" value=\\"month\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">月</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;year&#x27;\\" value=\\"year\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">年</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-calendar__control-section-cell\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check t-calendar__control-tag\\" tabindex=\\"0\\"><span title=\\"隐藏周末\\">隐藏周末</span></div></div><div class=\\"t-calendar__control-section-cell\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">今天</span></button></div></div></div><div class=\\"t-calendar__panel t-calendar__panel--month\\"><table class=\\"t-calendar__table\\"><thead class=\\"t-calendar__table-head\\"><tr class=\\"t-calendar__table-head-row\\"><th class=\\"t-calendar__table-head-cell\\"><div>星期1</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期2</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期3</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期4</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期5</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期6</div></th><th class=\\"t-calendar__table-head-cell\\"><div>星期7</div></th></tr></thead><tbody class=\\"t-calendar__table-body\\"><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">30</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">01</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">02</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">03</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">04</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">05</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">06</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">07</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">08</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">09</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">10</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">11</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">12</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">13</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">14</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">15</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">16</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">17</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">18</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">19</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">20</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">21</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">22</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">23</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">24</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">25</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">26</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">27</div></td></tr><tr class=\\"t-calendar__table-body-row\\"><td class=\\"t-calendar__table-body-cell t-is-checked t-calendar__table-body-cell--now\\"><div class=\\"t-calendar__table-body-cell-display\\">28</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">29</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">30</div></td><td class=\\"t-calendar__table-body-cell\\"><div class=\\"t-calendar__table-body-cell-display\\">31</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">01</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">02</div></td><td class=\\"t-calendar__table-body-cell t-is-disabled\\"><div class=\\"t-calendar__table-body-cell-display\\">03</div></td></tr></tbody></table></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/base.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/base.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/bordered-none.tsx 1`] = `"<div style=\\"padding:16px;background-color:var(--td-bg-color-container-hover)\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/bordered-none.tsx 1`] = `"<div style=\\"padding:16px;background-color:var(--td-bg-color-container-hover)\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/custom-loading-props.tsx 1`] = `"<div class=\\"t-loading__parent\\" style=\\"width:400px\\"><div class=\\"t-card t-card--bordered\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">自定义loadingProps Card</div></div></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div><div class=\\"t-loading t-loading--center t-size-m t-loading--full t-loading__overlay\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">TDesign努力加载中...</div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/custom-loading-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">自定义loadingProps Card</div></div></div></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div><div class=\\"t-loading t-loading--center t-size-m t-loading--full t-loading__overlay\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">TDesign努力加载中...</div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:56px;height:56px;font-size:28px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg></span></div></div><div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-tag t-tag--success t-tag--dark\\"><span title=\\"默认标签\\">默认标签</span></div></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:56px;height:56px;font-size:28px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg></span></div></div><div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-tag t-tag--success t-tag--dark\\"><span title=\\"默认标签\\">默认标签</span></div></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-actions.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button style=\\"margin-right:8px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:default;height:default\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">Q</span></div><div class=\\"t-avatar t-avatar__collapse t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">+3</span></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-actions.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button style=\\"margin-right:8px\\" type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:default;height:default\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">Q</span></div><div class=\\"t-avatar t-avatar__collapse t-avatar--circle\\" style=\\"width:default;height:default;font-size:NaNpx\\"><span style=\\"transform:scale(1)\\">+3</span></div></div></div><div class=\\"t-card__actions\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-content.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-content.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/footer-content-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/footer-content-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-comment\\"><div class=\\"t-comment__inner\\"><div class=\\"t-comment__avatar\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-comment__avatar-image\\"/></div><div class=\\"t-comment__content\\"><div class=\\"t-comment__author\\"><span class=\\"t-comment__name\\">标题</span></div><div class=\\"t-comment__detail\\">卡片内容</div></div></div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-all-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-all-props.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-bordered.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a style=\\"cursor:pointer\\">操作</a></div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-description.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-description.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">描述</p></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:40px;height:40px;font-size:20px\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:40px;height:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div></div><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">卡片内容</p></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div class=\\"t-card__avatar\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:40px;height:40px;font-size:20px\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:40px;height:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"/><div class=\\"t-image__loading\\"><div style=\\"gap:8px\\" class=\\"t-space t-space-align-center t-space-vertical\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div></div><div><div class=\\"t-card__title\\">标题</div><p class=\\"t-card__description\\">卡片内容</p></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle.tsx 1`] = `"<div class=\\"t-card t-card--bordered t-card--shadow-hover\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\">操作</div></div><div class=\\"t-card__body\\">卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/card/_example/header-subtitle-footer-actions.tsx 1`] = `"<div class=\\"t-card t-card--bordered\\" style=\\"width:400px\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div><div class=\\"t-card__subtitle\\">副标题</div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-button--shape-square\\"><span class=\\"t-button__text\\"><svg class=\\"t-icon t-icon-more\\"><use xlink:href=\\"#t-icon-more\\"></use></svg></span></button></div></div><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\" alt=\\"\\"/></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--middle\\" style=\\"margin-left:0px;margin-right:0px\\"><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-divider t-divider--vertical\\"></div><div class=\\"t-col t-col-offset-0 t-col-pull-0 t-col-push-0 t-col-order-0\\" style=\\"padding-left:0px;padding-right:0px;flex:auto\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"<div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div>"`;
 
@@ -860,7 +860,7 @@ exports[`ssr snapshot test > ssr test src/space/_example/separator.tsx 1`] = `"<
 
 exports[`ssr snapshot test > ssr test src/space/_example/size.tsx 1`] = `"<div class=\\"t-slider__container\\"><div class=\\"t-slider\\"><div class=\\"t-slider__rail\\"><div style=\\"left:0%;width:8%\\" class=\\"t-slider__track\\"></div><div style=\\"left:8%\\" class=\\"t-slider__button-wrapper\\"><div class=\\"t-slider__button\\"></div></div><div class=\\"t-slider__stops\\"></div><div class=\\"t-slider__mark\\"></div></div></div></div><br/><div style=\\"gap:8px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Button</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/space/_example/vertical.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/space/_example/vertical.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header\\"></div><div class=\\"t-card__body\\">仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/animation.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Start</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Update value</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">refs</span></button></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">0.00</span><span class=\\"t-statistic-content-suffix\\">%</span></div></div></div></div>"`;
 
@@ -868,7 +868,7 @@ exports[`ssr snapshot test > ssr test src/statistic/_example/base.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/color.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-text-color-primary)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-brand-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-warning-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/statistic/_example/combination.tsx 1`] = `"<div style=\\"gap:100px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:var(--td-radius-medium);padding:12px\\" class=\\"t-icon t-icon-chart\\"></i></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span><span class=\\"t-statistic-content-suffix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:50%;padding:12px\\" class=\\"t-icon t-icon-internet\\"></i></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">Yesterday traffic</div></div></div></div><div class=\\"t-card__body\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Voice duration</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">789</span><span class=\\"t-statistic-content-unit\\">minute</span></div><div class=\\"t-statistic-extra\\">the day before 9%</div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total number of voice DAUs</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-value\\">188</span></div><div class=\\"t-statistic-extra\\"><div style=\\"gap:0px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">the day before</div></div><div class=\\"t-space-item\\"><i style=\\"color:#d54941;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-up\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">last week</div></div><div class=\\"t-space-item\\"><i style=\\"color:#2ba471;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-down\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div></div></div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/statistic/_example/combination.tsx 1`] = `"<div style=\\"gap:100px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:var(--td-radius-medium);padding:12px\\" class=\\"t-icon t-icon-chart\\"></i></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">82.76</span><span class=\\"t-statistic-content-unit\\">%</span><span class=\\"t-statistic-content-suffix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-up-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 2 4.5 12H9v10h6V12z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div><div class=\\"t-space-item\\"><i style=\\"font-size:32px;color:var(--td-brand-color);background:var(--td-brand-color-light);border-radius:50%;padding:12px\\" class=\\"t-icon t-icon-internet\\"></i></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered t-card--shadow-hover\\"><div class=\\"t-loading__parent\\"><div class=\\"t-card__header t-card__title--bordered\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">Yesterday traffic</div></div></div></div><div class=\\"t-card__body\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Voice duration</div><div class=\\"t-statistic-content\\"><span class=\\"t-statistic-content-value\\">789</span><span class=\\"t-statistic-content-unit\\">minute</span></div><div class=\\"t-statistic-extra\\">the day before 9%</div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total number of voice DAUs</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-error-color)\\"><span class=\\"t-statistic-content-value\\">188</span></div><div class=\\"t-statistic-extra\\"><div style=\\"gap:0px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">the day before</div></div><div class=\\"t-space-item\\"><i style=\\"color:#d54941;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-up\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:7px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"width:120px\\">last week</div></div><div class=\\"t-space-item\\"><i style=\\"color:#2ba471;font-size:var(--td-font-size-body-large)\\" class=\\"t-icon t-icon-arrow-down\\"></i></div><div class=\\"t-space-item\\">9%</div></div></div></div></div></div></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\" style=\\"height:100%\\"></div></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Total Assets</div><div class=\\"t-statistic-content\\" style=\\"color:var(--td-success-color)\\"><span class=\\"t-statistic-content-prefix\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-arrow-triangle-down-filled\\"><path fill=\\"currentColor\\" d=\\"M15 12h4.5L12 22 4.5 12H9V2h6v10z\\"></path></svg></span><span class=\\"t-statistic-content-value\\">52.18</span><span class=\\"t-statistic-content-unit\\">%</span></div></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/statistic/_example/loading.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><button type=\\"button\\" role=\\"switch\\" class=\\"t-switch t-is-checked t-size-l\\"><span class=\\"t-switch__handle\\"></span><div class=\\"t-switch__content\\"></div></button></div><div class=\\"t-space-item\\"><div class=\\"t-statistic\\"><div class=\\"t-statistic-title\\">Downloads</div><div><div class=\\"t-skeleton__row\\"><div class=\\"t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient\\"></div></div></div></div></div></div>"`;