From 0215914e3df46bbd8e5af2c13cd12ddc9768a9a3 Mon Sep 17 00:00:00 2001
From: lmmlala <1490970255@qq.com>
Date: Mon, 29 Aug 2022 19:33:04 +0800
Subject: [PATCH 1/4] chore: update tree demo

---
 .../__tests__/__snapshots__/demo.test.js.snap |   101 +-
 src/alert/_example/operation.vue              |     4 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 11497 ++++++++--------
 src/tree/_example/activable.vue               |    35 +-
 src/tree/_example/base.vue                    |    25 +-
 src/tree/_example/checkable.vue               |     4 +-
 src/tree/_example/empty.vue                   |    34 +-
 src/tree/_example/expand-all.vue              |    33 +-
 src/tree/_example/expand-level.vue            |    25 +-
 src/tree/_example/expand-mutex.vue            |    33 +-
 src/tree/_example/filter.vue                  |     4 +-
 src/tree/_example/icon.vue                    |    29 +-
 src/tree/_example/label.vue                   |    29 +-
 src/tree/_example/lazy.vue                    |    42 +-
 src/tree/_example/line.vue                    |    23 +-
 src/tree/_example/load.vue                    |    37 +-
 src/tree/_example/operations.vue              |    83 +-
 src/tree/_example/sync.vue                    |     8 +-
 test/ssr/__snapshots__/ssr.test.js.snap       |  1294 +-
 19 files changed, 6804 insertions(+), 6536 deletions(-)

diff --git a/src/alert/__tests__/__snapshots__/demo.test.js.snap b/src/alert/__tests__/__snapshots__/demo.test.js.snap
index ee7e3f401..9af681ec0 100644
--- a/src/alert/__tests__/__snapshots__/demo.test.js.snap
+++ b/src/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -616,66 +616,73 @@ exports[`Alert Alert iconVue demo works fine 1`] = `
 `;
 
 exports[`Alert Alert operationVue demo works fine 1`] = `
-<t-sapce>
+<div
+  class="t-space t-space-horizontal"
+  style="gap: 16px;"
+>
   <div
-    class="t-alert t-alert--info"
+    class="t-space-item"
   >
     <div
-      class="t-alert__icon"
-    >
-      <svg
-        class="t-icon t-icon-info-circle-filled"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-    </div>
-    <div
-      class="t-alert__content"
+      class="t-alert t-alert--info"
     >
       <div
-        class="t-alert__message"
+        class="t-alert__icon"
       >
-        <div
-          class="t-alert__description"
+        <svg
+          class="t-icon t-icon-info-circle-filled"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
         >
-          这是一条普通的消息提示
-        </div>
+          <path
+            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-alert__content"
+      >
         <div
-          class="t-alert__operation"
+          class="t-alert__message"
         >
-          <span>
-            相关操作
-          </span>
+          <div
+            class="t-alert__description"
+          >
+            这是一条普通的消息提示
+          </div>
+          <div
+            class="t-alert__operation"
+          >
+            <span>
+              相关操作
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="t-alert__close"
-    >
-      <svg
-        class="t-icon t-icon-close"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      <div
+        class="t-alert__close"
+      >
+        <svg
+          class="t-icon t-icon-close"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
     </div>
   </div>
-</t-sapce>
+</div>
 `;
 
 exports[`Alert Alert titleVue demo works fine 1`] = `
diff --git a/src/alert/_example/operation.vue b/src/alert/_example/operation.vue
index ee58b0716..8fd7f8a11 100644
--- a/src/alert/_example/operation.vue
+++ b/src/alert/_example/operation.vue
@@ -1,11 +1,11 @@
 <template>
-  <t-sapce>
+  <t-space>
     <t-alert theme="info" message="这是一条普通的消息提示" close>
       <template #operation>
         <span @click="handleOperation">相关操作</span>
       </template>
     </t-alert>
-  </t-sapce>
+  </t-space>
 </template>
 <script lang="jsx">
 export default {
diff --git a/src/tree/__tests__/__snapshots__/demo.test.js.snap b/src/tree/__tests__/__snapshots__/demo.test.js.snap
index 3c68dda46..90fa67e69 100644
--- a/src/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/src/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -2,2796 +2,1383 @@
 
 exports[`Tree Tree activableVue demo works fine 1`] = `
 <div
-  class="tdesign-tree-demo"
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
 >
   <div
-    class="operations"
+    class="t-space-item"
   >
-    <form
-      class="t-form"
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
     >
       <div
-        class="t-form__item t-form-item__"
+        class="t-space-item"
       >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            节点可高亮
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
+        <form
+          class="t-form"
         >
           <div
-            class="t-form__controls-content"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
             <div
-              class="t-switch t-size-m t-is-checked"
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                节点可高亮
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            节点可多选高亮
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
+           
           <div
-            class="t-form__controls-content"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
             <div
-              class="t-switch t-size-m"
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                节点可多选高亮
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            整个节点可点击
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
+           
           <div
-            class="t-form__controls-content"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
             <div
-              class="t-switch t-size-m"
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                整个节点可点击
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-   
   <div
-    class="t-tree t-tree--hoverable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition"
     >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t1"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="t1"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
-        >
           <span
-            style="position: relative;"
+            class="t-tree__label"
           >
-            1.1
+            <span
+              style="position: relative;"
+            >
+              1
+            </span>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t3"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t2"
+          style="--level: 1;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
           >
-            1.2
+            <span
+              style="position: relative;"
+            >
+              1.1
+            </span>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t4"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t3"
+          style="--level: 1;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
           >
-            2
+            <span
+              style="position: relative;"
+            >
+              1.2
+            </span>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t5"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="t4"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            2.1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t6"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              2
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t5"
+          style="--level: 1;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              2.1
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t6"
+          style="--level: 1;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
           >
-            2.2
+            <span
+              style="position: relative;"
+            >
+              2.2
+            </span>
           </span>
-        </span>
-      </div>
-    </transition-group-stub>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Tree Tree baseVue demo works fine 1`] = `
 <div
-  class="tdesign-tree-demo"
+  class="t-space t-space-horizontal"
+  style="gap: 16px;"
 >
   <div
-    class="t-tree t-tree--hoverable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition"
     >
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t7"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t7"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            第一段
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t10"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <span
+            class="t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+            <span
+              style="position: relative;"
+            >
+              第一段
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t10"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            第一段
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t13"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <span
+            class="t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+            <span
+              style="position: relative;"
+            >
+              第一段
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t13"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            第一段
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t16"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <span
+            class="t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+            <span
+              style="position: relative;"
+            >
+              第一段
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t16"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            第一段
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </span>
-      </div>
-    </transition-group-stub>
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              第一段
+            </span>
+          </span>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Tree Tree checkableVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block-column-large"
+  class="t-space t-space-vertical"
+  style="gap: 16px;"
 >
-  <form
-    class="t-form"
+  <div
+    class="t-space-item"
   >
-    <div
-      class="t-form__item t-form-item__"
-      style="margin-bottom: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-form__label t-form__label--right"
-        style="width: 100px;"
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
       >
-        <label
-          for=""
+        <div
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
         >
-          可选
-        </label>
-      </div>
-      <div
-        class="t-form__controls"
-        style="margin-left: 100px;"
-      >
+          <label
+            for=""
+          >
+            可选
+          </label>
+        </div>
         <div
-          class="t-form__controls-content"
+          class="t-form__controls"
+          style="margin-left: 100px;"
         >
           <div
-            class="t-switch t-size-m t-is-checked"
+            class="t-form__controls-content"
           >
-            <span
-              class="t-switch__handle"
-            />
             <div
-              class="t-switch__content t-size-m"
-            />
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-     
-    <div
-      class="t-form__item t-form-item__"
-      style="margin-bottom: 16px;"
-    >
+       
       <div
-        class="t-form__label t-form__label--right"
-        style="width: 100px;"
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
       >
-        <label
-          for=""
+        <div
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
         >
-          严格模式
-        </label>
-      </div>
-      <div
-        class="t-form__controls"
-        style="margin-left: 100px;"
-      >
+          <label
+            for=""
+          >
+            严格模式
+          </label>
+        </div>
         <div
-          class="t-form__controls-content"
+          class="t-form__controls"
+          style="margin-left: 100px;"
         >
           <div
-            class="t-switch t-size-m"
+            class="t-form__controls-content"
           >
-            <span
-              class="t-switch__handle"
-            />
             <div
-              class="t-switch__content t-size-m"
-            />
+              class="t-switch t-size-m"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-     
-    <div
-      class="t-form__item t-form-item__"
-      style="margin-bottom: 16px;"
-    >
+       
       <div
-        class="t-form__label t-form__label--right"
-        style="width: 100px;"
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
       >
-        <label
-          for=""
+        <div
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
         >
-          选中值模式
-        </label>
-      </div>
-      <div
-        class="t-form__controls"
-        style="margin-left: 100px;"
-      >
+          <label
+            for=""
+          >
+            选中值模式
+          </label>
+        </div>
         <div
-          class="t-form__controls-content"
+          class="t-form__controls"
+          style="margin-left: 100px;"
         >
           <div
-            class="t-radio-group t-size-m t-radio-group--filled"
+            class="t-form__controls-content"
           >
-            <label
-              class="t-radio-button t-is-checked"
+            <div
+              class="t-radio-group t-size-m t-radio-group--filled"
             >
-              <input
-                class="t-radio-button__former"
-                name="value-mode"
-                type="radio"
-                value="onlyLeaf"
-              />
-              <span
-                class="t-radio-button__input"
-              />
-              <span
-                class="t-radio-button__label"
+              <label
+                class="t-radio-button t-is-checked"
               >
-                onlyLeaf
-              </span>
-            </label>
-            <label
-              class="t-radio-button"
-            >
-              <input
-                class="t-radio-button__former"
-                name="value-mode"
-                type="radio"
-                value="parentFirst"
-              />
-              <span
-                class="t-radio-button__input"
-              />
-              <span
-                class="t-radio-button__label"
+                <input
+                  class="t-radio-button__former"
+                  name="value-mode"
+                  type="radio"
+                  value="onlyLeaf"
+                />
+                <span
+                  class="t-radio-button__input"
+                />
+                <span
+                  class="t-radio-button__label"
+                >
+                  onlyLeaf
+                </span>
+              </label>
+              <label
+                class="t-radio-button"
               >
-                parentFirst
-              </span>
-            </label>
-            <label
-              class="t-radio-button"
-            >
-              <input
-                class="t-radio-button__former"
-                name="value-mode"
-                type="radio"
-                value="all"
-              />
-              <span
-                class="t-radio-button__input"
-              />
-              <span
-                class="t-radio-button__label"
+                <input
+                  class="t-radio-button__former"
+                  name="value-mode"
+                  type="radio"
+                  value="parentFirst"
+                />
+                <span
+                  class="t-radio-button__input"
+                />
+                <span
+                  class="t-radio-button__label"
+                >
+                  parentFirst
+                </span>
+              </label>
+              <label
+                class="t-radio-button"
               >
-                all
-              </span>
-            </label>
-            <div
-              class="t-radio-group__bg-block"
-              style="width: 0px; left: 0px;"
-            />
+                <input
+                  class="t-radio-button__former"
+                  name="value-mode"
+                  type="radio"
+                  value="all"
+                />
+                <span
+                  class="t-radio-button__input"
+                />
+                <span
+                  class="t-radio-button__label"
+                >
+                  all
+                </span>
+              </label>
+              <div
+                class="t-radio-group__bg-block"
+                style="width: 0px; left: 0px;"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </form>
-   
+    </form>
+  </div>
   <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
     >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="1"
+          style="--level: 0;"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="1.1"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="1.1.1"
+          style="--level: 2;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.1"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.1.1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.1.1"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            1.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.1"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+            <input
+              class="t-checkbox__former"
+              name="1.1.1.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.1.2"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.1"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.1.1.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="1.1.2"
+          style="--level: 2;"
+        >
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1.1.1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.2"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.1.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.2.1"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.2"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.2"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.1.2.1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.2.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.2.2"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            1.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.2.1"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+            <input
+              class="t-checkbox__former"
+              name="1.1.2.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.2.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="1.2"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1.2.1
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.2.2"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="1.2.1"
+          style="--level: 2;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1.2.2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.2.1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.2.1.1"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.2"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.2.1"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.2.1.1"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.2.1.2"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.2.2"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.2.2.1"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="3"
-        data-value="1.2.2.2"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.2.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="2.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="2.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.2
-          </span>
-        </label>
-      </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree controlledVue demo works fine 1`] = `
-<div
-  class="tdesign-demo-block-column-large"
->
-  <div
-    class="tdesign-demo-block-column"
-  >
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        checked:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        expanded:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        actived:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="t-tree t-tree--checkable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-indeterminate t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            indeterminate="indeterminate"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-indeterminate t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            indeterminate="indeterminate"
-            name="1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.1"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.1"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.2"
-        style="--level: 3;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.2"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="1.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label t-is-active"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2 这个节点不允许展开, 不允许激活
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="2.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.1 这个节点不允许选中
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="2.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.2
-          </span>
-        </label>
-      </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree dataVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <h3
-    class="title"
-  >
-    数据切换
-  </h3>
-   
-  <div
-    class="operations"
-  >
-    <form
-      class="t-form"
-    >
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            切换数据
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            默认展开全部
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            可选
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            节点可高亮
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            展开动画
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-   
-  <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.1"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.2"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.2.1"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.2.2"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="2.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="2.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.2
-          </span>
-        </label>
-      </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree disabledVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <div
-    class="operations"
-  >
-    <form
-      class="t-form"
-    >
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            是否禁用整个 tree
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            是否只禁用 checkbox
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-   
-  <div
-    class="t-tree t-is-disabled t-tree--hoverable t-tree--checkable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="0"
-        data-value="t19"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t19"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="1"
-        data-value="t20"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.2.1.1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t20"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="2"
-        data-value="t21"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.2.1.2"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t21"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            1.1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="2"
-        data-value="t22"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+            <input
+              class="t-checkbox__former"
+              name="1.2.1.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="1.2.2"
+          style="--level: 2;"
         >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t22"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1.2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="1"
-        data-value="t23"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.2.2"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t23"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.2
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="2"
-        data-value="t24"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.2.2.1"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t24"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            1.2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="2"
-        data-value="t25"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+            <input
+              class="t-checkbox__former"
+              name="1.2.2.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.2.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="3"
+          data-value="1.2.2.2"
+          style="--level: 3;"
         >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t25"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.2.2.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2.2.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="2"
+          style="--level: 0;"
+        >
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.2.2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="0"
-        data-value="t26"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="2"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="2.1"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t26"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="2.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="2.2"
+          style="--level: 1;"
+        >
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <label
+            class="t-checkbox t-tree__label"
           >
-            2
-          </span>
-        </label>
-      </div>
+            <input
+              class="t-checkbox__former"
+              name="2.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2.2
+            </span>
+          </label>
+        </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree controlledVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-column-large"
+>
+  <div
+    class="tdesign-demo-block-column"
+  >
+    <div
+      class="t-input-adornment t-input-adornment--prepend"
+    >
+      <span
+        class="t-input-adornment__prepend"
+      >
+        checked:
+      </span>
       <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="1"
-        data-value="t27"
-        style="--level: 1;"
+        class="t-input__wrap"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+        <div
+          class="t-input t-size-m t-is-default"
         >
           <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t27"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
           />
-          <span
-            class="t-checkbox__label"
-          >
-            2.1
-          </span>
-        </label>
+        </div>
       </div>
+    </div>
+     
+    <div
+      class="t-input-adornment t-input-adornment--prepend"
+    >
+      <span
+        class="t-input-adornment__prepend"
+      >
+        expanded:
+      </span>
       <div
-        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
-        data-level="1"
-        data-value="t28"
-        style="--level: 1;"
+        class="t-input__wrap"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-disabled t-tree__label"
+        <div
+          class="t-input t-size-m t-is-default"
         >
           <input
-            class="t-checkbox__former"
-            disabled="disabled"
-            name="t28"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
           />
-          <span
-            class="t-checkbox__label"
-          >
-            2.2
-          </span>
-        </label>
+        </div>
       </div>
-    </transition-group-stub>
-  </div>
-   
-  <div
-    class="operations"
-  >
-    <form
-      class="t-form"
+    </div>
+     
+    <div
+      class="t-input-adornment t-input-adornment--prepend"
     >
+      <span
+        class="t-input-adornment__prepend"
+      >
+        actived:
+      </span>
       <div
-        class="t-form__item t-form-item__"
+        class="t-input__wrap"
       >
         <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            禁用指定节点 checkbox
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
+          class="t-input t-size-m t-is-default"
         >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
+          <input
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
+          />
         </div>
       </div>
-    </form>
+    </div>
   </div>
    
   <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+    class="t-tree t-tree--checkable t-tree--transition"
   >
     <transition-group-stub
       class="t-tree__list"
@@ -2802,7 +1389,7 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="0"
-        data-value="t29"
+        data-value="1"
         style="--level: 0;"
       >
         <span
@@ -2825,11 +1412,12 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           </svg>
         </span>
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-is-indeterminate t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t29"
+            indeterminate="indeterminate"
+            name="1"
             type="checkbox"
             value=""
           />
@@ -2846,7 +1434,7 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t30"
+        data-value="1.1"
         style="--level: 1;"
       >
         <span
@@ -2869,12 +1457,12 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           </svg>
         </span>
         <label
-          class="t-checkbox t-is-disabled t-tree__label"
+          class="t-checkbox t-is-indeterminate t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            disabled="disabled"
-            name="t30"
+            indeterminate="indeterminate"
+            name="1.1"
             type="checkbox"
             value=""
           />
@@ -2891,20 +1479,34 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="2"
-        data-value="t31"
+        data-value="1.1.1"
         style="--level: 2;"
       >
         <span
-          class="t-tree__icon t-folder-icon"
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
           ignore="active"
           trigger="expand"
-        />
+        >
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-is-checked t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t31"
+            name="1.1.1"
             type="checkbox"
             value=""
           />
@@ -2919,10 +1521,10 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t32"
-        style="--level: 2;"
+        class="t-tree__item t-tree__item--visible"
+        data-level="3"
+        data-value="1.1.1.1"
+        style="--level: 3;"
       >
         <span
           class="t-tree__icon t-folder-icon"
@@ -2930,11 +1532,11 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           trigger="expand"
         />
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-is-checked t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t32"
+            name="1.1.1.1"
             type="checkbox"
             value=""
           />
@@ -2944,42 +1546,27 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            1.1.2
+            1.1.1.1
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t33"
-        style="--level: 1;"
+        class="t-tree__item t-tree__item--visible"
+        data-level="3"
+        data-value="1.1.1.2"
+        style="--level: 3;"
       >
         <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
+        />
         <label
-          class="t-checkbox t-is-disabled t-tree__label"
+          class="t-checkbox t-is-checked t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            disabled="disabled"
-            name="t33"
+            name="1.1.1.2"
             type="checkbox"
             value=""
           />
@@ -2989,27 +1576,41 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            1.2
+            1.1.1.2
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        class="t-tree__item t-tree__item--visible"
         data-level="2"
-        data-value="t34"
+        data-value="1.1.2"
         style="--level: 2;"
       >
         <span
-          class="t-tree__icon t-folder-icon"
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
           ignore="active"
           trigger="expand"
-        />
+        >
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
         <label
           class="t-checkbox t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t34"
+            name="1.1.2"
             type="checkbox"
             value=""
           />
@@ -3019,27 +1620,41 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            1.2.1
+            1.1.2
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t35"
-        style="--level: 2;"
+        class="t-tree__item t-tree__item--visible"
+        data-level="1"
+        data-value="1.2"
+        style="--level: 1;"
       >
         <span
-          class="t-tree__icon t-folder-icon"
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
           ignore="active"
           trigger="expand"
-        />
+        >
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
         <label
           class="t-checkbox t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t35"
+            name="1.2"
             type="checkbox"
             value=""
           />
@@ -3049,14 +1664,14 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            1.2.2
+            1.2
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible"
         data-level="0"
-        data-value="t36"
+        data-value="2"
         style="--level: 0;"
       >
         <span
@@ -3079,11 +1694,11 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           </svg>
         </span>
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-tree__label t-is-active"
         >
           <input
             class="t-checkbox__former"
-            name="t36"
+            name="2"
             type="checkbox"
             value=""
           />
@@ -3093,14 +1708,14 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            2
+            2 这个节点不允许展开, 不允许激活
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        class="t-tree__item t-tree__item--visible"
         data-level="1"
-        data-value="t37"
+        data-value="2.1"
         style="--level: 1;"
       >
         <span
@@ -3109,12 +1724,11 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           trigger="expand"
         />
         <label
-          class="t-checkbox t-is-disabled t-tree__label"
+          class="t-checkbox t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            disabled="disabled"
-            name="t37"
+            name="2.1"
             type="checkbox"
             value=""
           />
@@ -3124,14 +1738,14 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            2.1
+            2.1 这个节点不允许选中
           </span>
         </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        class="t-tree__item t-tree__item--visible"
         data-level="1"
-        data-value="t38"
+        data-value="2.2"
         style="--level: 1;"
       >
         <span
@@ -3140,86 +1754,39 @@ exports[`Tree Tree disabledVue demo works fine 1`] = `
           trigger="expand"
         />
         <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="t38"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2.2
-          </span>
-        </label>
-      </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree emptyVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <div
-    class="t-tree t-tree--transition"
-  >
-    <div
-      class="t-tree__empty"
-    >
-      暂无数据
-    </div>
-  </div>
-  <br />
-   
-  <div
-    class="t-tree t-tree--transition"
-  >
-    <div
-      class="t-tree__empty"
-    >
-      😊 空数据（string）
-    </div>
-  </div>
-  <br />
-   
-  <div
-    class="t-tree t-tree--transition"
-  >
-    <div
-      class="t-tree__empty"
-    >
-      <div>
-        😊 空数据（ empty props ）
-      </div>
-    </div>
-  </div>
-  <br />
-   
-  <div
-    class="t-tree t-tree--transition"
-  >
-    <div
-      class="t-tree__empty"
-    >
-      <div>
-        😊 空数据（slot）
+          class="t-checkbox t-tree__label"
+        >
+          <input
+            class="t-checkbox__former"
+            name="2.2"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
+          >
+            2.2
+          </span>
+        </label>
       </div>
-    </div>
+    </transition-group-stub>
   </div>
 </div>
 `;
 
-exports[`Tree Tree expandAllVue demo works fine 1`] = `
+exports[`Tree Tree dataVue demo works fine 1`] = `
 <div
   class="tdesign-tree-demo"
 >
+  <h3
+    class="title"
+  >
+    数据切换
+  </h3>
+   
   <div
     class="operations"
   >
@@ -3267,7 +1834,7 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
           <label
             for=""
           >
-            展开动画
+            默认展开全部
           </label>
         </div>
         <div
@@ -3289,135 +1856,119 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-    </form>
-  </div>
-   
-  <div
-    class="t-tree t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
+       
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t39"
-        style="--level: 0;"
+        class="t-form__item t-form-item__"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
+        <div
+          class="t-form__label t-form__label--right"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            for=""
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+            可选
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
-          <span
-            style="position: relative;"
+          <div
+            class="t-form__controls-content"
           >
-            1
-          </span>
-        </span>
+            <div
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
+          </div>
+        </div>
       </div>
+       
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t40"
-        style="--level: 1;"
+        class="t-form__item t-form-item__"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
+        <div
+          class="t-form__label t-form__label--right"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            for=""
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
+            节点可高亮
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
-          <span
-            style="position: relative;"
+          <div
+            class="t-form__controls-content"
           >
-            1.1
-          </span>
-        </span>
+            <div
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
+          </div>
+        </div>
       </div>
+       
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t41"
-        style="--level: 2;"
+        class="t-form__item t-form-item__"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+        <div
+          class="t-form__label t-form__label--right"
         >
-          <span
-            style="position: relative;"
+          <label
+            for=""
           >
-            1.1.1
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t42"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+            展开动画
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
-          <span
-            style="position: relative;"
+          <div
+            class="t-form__controls-content"
           >
-            1.1.2
-          </span>
-        </span>
+            <div
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
+          </div>
+        </div>
       </div>
+    </form>
+  </div>
+   
+  <div
+    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+  >
+    <transition-group-stub
+      class="t-tree__list"
+      enteractiveclass="t-tree__item--enter-active"
+      leaveactiveclass="t-tree__item--leave-active"
+      tag="div"
+    >
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t43"
-        style="--level: 1;"
+        data-level="0"
+        data-value="1"
+        style="--level: 0;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -3431,70 +1982,37 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
             viewBox="0 0 16 16"
             width="1em"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
-          <span
-            style="position: relative;"
-          >
-            1.2
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t44"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
-        >
-          <span
-            style="position: relative;"
-          >
-            1.2.1
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="t45"
-        style="--level: 2;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="1"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            1.2.2
+            1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t46"
-        style="--level: 0;"
+        data-level="1"
+        data-value="1.1"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -3515,81 +2033,90 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="1.1"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            2
+            1.1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t47"
-        style="--level: 1;"
+        data-level="2"
+        data-value="1.1.1"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="1.1.1"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            2.1
+            1.1.1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t48"
-        style="--level: 1;"
+        data-level="2"
+        data-value="1.1.2"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="1.1.2"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            2.2
+            1.1.2
           </span>
-        </span>
+        </label>
       </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree expandLevelVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <div
-    class="t-tree t-tree--hoverable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t49"
-        style="--level: 0;"
+        data-level="1"
+        data-value="1.2"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -3610,90 +2137,89 @@ exports[`Tree Tree expandLevelVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="1.2"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
-            1
+            1.2
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="t50"
-        style="--level: 1;"
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        data-level="2"
+        data-value="1.2.1"
+        style="--level: 2;"
       >
         <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
+          <input
+            class="t-checkbox__former"
+            name="1.2.1"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            1.1
+            1.2.1
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="t53"
-        style="--level: 1;"
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        data-level="2"
+        data-value="1.2.2"
+        style="--level: 2;"
       >
         <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
+          <input
+            class="t-checkbox__former"
+            name="1.2.2"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
-            1.2
+            1.2.2
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="0"
-        data-value="t56"
+        data-value="2"
         style="--level: 0;"
       >
         <span
@@ -3715,20 +2241,29 @@ exports[`Tree Tree expandLevelVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="2"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
             2
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t57"
+        data-value="2.1"
         style="--level: 1;"
       >
         <span
@@ -3736,20 +2271,29 @@ exports[`Tree Tree expandLevelVue demo works fine 1`] = `
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="2.1"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
             2.1
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t58"
+        data-value="2.2"
         style="--level: 1;"
       >
         <span
@@ -3757,22 +2301,31 @@ exports[`Tree Tree expandLevelVue demo works fine 1`] = `
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="2.2"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
             2.2
           </span>
-        </span>
+        </label>
       </div>
     </transition-group-stub>
   </div>
 </div>
 `;
 
-exports[`Tree Tree expandMutexVue demo works fine 1`] = `
+exports[`Tree Tree disabledVue demo works fine 1`] = `
 <div
   class="tdesign-tree-demo"
 >
@@ -3791,7 +2344,7 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
           <label
             for=""
           >
-            互斥展开
+            是否禁用整个 tree
           </label>
         </div>
         <div
@@ -3823,7 +2376,7 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
           <label
             for=""
           >
-            整个节点可点击
+            是否只禁用 checkbox
           </label>
         </div>
         <div
@@ -3833,7 +2386,7 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
             class="t-form__controls-content"
           >
             <div
-              class="t-switch t-size-m t-is-checked"
+              class="t-switch t-size-m"
             >
               <span
                 class="t-switch__handle"
@@ -3849,7 +2402,7 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
   </div>
    
   <div
-    class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
+    class="t-tree t-is-disabled t-tree--hoverable t-tree--checkable t-tree--transition"
   >
     <transition-group-stub
       class="t-tree__list"
@@ -3858,9 +2411,9 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
       tag="div"
     >
       <div
-        class="t-tree__item t-tree__item--visible"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
         data-level="0"
-        data-value="t59"
+        data-value="t19"
         style="--level: 0;"
       >
         <span
@@ -3882,21 +2435,31 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t19"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
             1
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t66"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="1"
+        data-value="t20"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -3917,99 +2480,93 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t20"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            2
+            1.1
           </span>
-        </span>
+        </label>
       </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree filterVue demo works fine 1`] = `
-<div
-  class="tdesign-demo-block-column-large"
->
-  <div
-    class="t-input-adornment t-input-adornment--prepend"
-  >
-    <span
-      class="t-input-adornment__prepend"
-    >
-      filter:
-    </span>
-    <div
-      class="t-input__wrap"
-    >
       <div
-        class="t-input t-size-m t-is-default"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="2"
+        data-value="t21"
+        style="--level: 2;"
       >
-        <input
-          autocomplete=""
-          class="t-input__inner"
-          placeholder="请输入"
-          type="text"
-          unselectable="off"
+        <span
+          class="t-tree__icon t-folder-icon"
+          ignore="active"
+          trigger="expand"
         />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
+        >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t21"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
+          >
+            1.1.1
+          </span>
+        </label>
       </div>
-    </div>
-  </div>
-   
-  <div
-    class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="2"
+        data-value="t22"
+        style="--level: 2;"
       >
         <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t22"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            1
+            1.1.2
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="1"
+        data-value="t23"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -4030,185 +2587,240 @@ exports[`Tree Tree filterVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t23"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            2
+            1.2
           </span>
-        </span>
+        </label>
       </div>
-    </transition-group-stub>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree iconVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <h3>
-    render:
-  </h3>
-   
-  <div
-    class="t-tree t-tree--hoverable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t73"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="2"
+        data-value="t24"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-folder"
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t24"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
-            <use
-              href="#t-icon-folder"
-            />
-          </svg>
-        </span>
+            1.2.1
+          </span>
+        </label>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="2"
+        data-value="t25"
+        style="--level: 2;"
+      >
         <span
-          class="t-tree__label"
+          class="t-tree__icon t-folder-icon"
+          ignore="active"
+          trigger="expand"
+        />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t25"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            1
+            1.2.2
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
         data-level="0"
-        data-value="t74"
+        data-value="t26"
         style="--level: 0;"
       >
         <span
-          class="t-tree__icon t-folder-icon"
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
           ignore="active"
           trigger="expand"
         >
           <svg
-            class="t-icon t-icon-folder"
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <use
-              href="#t-icon-folder"
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t26"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
             2
           </span>
-        </span>
+        </label>
       </div>
-    </transition-group-stub>
-  </div>
-   
-  <h3>
-    scope slot:
-  </h3>
-   
-  <div
-    class="t-tree t-tree--hoverable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t75"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="1"
+        data-value="t27"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-caret-right"
-          >
-            <use
-              href="#t-icon-caret-right"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t27"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            1
+            2.1
           </span>
-        </span>
+        </label>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="t76"
-        style="--level: 0;"
+        class="t-tree__item t-tree__item--open t-is-disabled t-tree__item--visible"
+        data-level="1"
+        data-value="t28"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
+        />
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
-          <svg
-            class="t-icon t-icon-caret-right"
-          >
-            <use
-              href="#t-icon-caret-right"
-            />
-          </svg>
-        </span>
-        <span
-          class="t-tree__label"
-        >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t28"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
           >
-            2
+            2.2
           </span>
-        </span>
+        </label>
       </div>
     </transition-group-stub>
   </div>
-</div>
-`;
-
-exports[`Tree Tree labelVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo"
->
-  <h3>
-    render:
-  </h3>
    
   <div
-    class="t-tree t-tree--transition"
+    class="operations"
+  >
+    <form
+      class="t-form"
+    >
+      <div
+        class="t-form__item t-form-item__"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            禁用指定节点 checkbox
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
+          <div
+            class="t-form__controls-content"
+          >
+            <div
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+   
+  <div
+    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
   >
     <transition-group-stub
       class="t-tree__list"
@@ -4219,7 +2831,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="0"
-        data-value="t77"
+        data-value="t29"
         style="--level: 0;"
       >
         <span
@@ -4241,69 +2853,30 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="t29"
+            type="checkbox"
+            value=""
+          />
           <span
-            style="position: relative;"
-          >
-            <strong>
-              value: t77, label: 1
-            </strong>
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t78"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
-        >
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            <strong>
-              value: t78, label: 1.1
-            </strong>
+            1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t79"
+        data-value="t30"
         style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
-        >
-          <span
-            style="position: relative;"
-          >
-            <strong>
-              value: t79, label: 1.2
-            </strong>
-          </span>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t80"
-        style="--level: 0;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -4324,85 +2897,91 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
             />
           </svg>
         </span>
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-is-disabled t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            disabled="disabled"
+            name="t30"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            <strong>
-              value: t80, label: 2
-            </strong>
+            1.1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t81"
-        style="--level: 1;"
+        data-level="2"
+        data-value="t31"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="t31"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            <strong>
-              value: t81, label: 2.1
-            </strong>
+            1.1.1
           </span>
-        </span>
+        </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t82"
-        style="--level: 1;"
+        data-level="2"
+        data-value="t32"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
           ignore="active"
           trigger="expand"
         />
-        <span
-          class="t-tree__label"
+        <label
+          class="t-checkbox t-tree__label"
         >
+          <input
+            class="t-checkbox__former"
+            name="t32"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="t-checkbox__input"
+          />
           <span
-            style="position: relative;"
+            class="t-checkbox__label"
           >
-            <strong>
-              value: t82, label: 2.2
-            </strong>
+            1.1.2
           </span>
-        </span>
+        </label>
       </div>
-    </transition-group-stub>
-  </div>
-   
-  <h3>
-    scope slot:
-  </h3>
-   
-  <div
-    class="t-tree t-tree--checkable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
-    >
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="t83"
-        style="--level: 0;"
+        data-level="1"
+        data-value="t33"
+        style="--level: 1;"
       >
         <span
           class="t-tree__icon t-folder-icon t-tree__icon--default"
@@ -4424,11 +3003,12 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           </svg>
         </span>
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-is-disabled t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t83"
+            disabled="disabled"
+            name="t33"
             type="checkbox"
             value=""
           />
@@ -4438,19 +3018,15 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 1, value: t83
-            </font>
+            1.2
           </span>
         </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t84"
-        style="--level: 1;"
+        data-level="2"
+        data-value="t34"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
@@ -4462,7 +3038,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
         >
           <input
             class="t-checkbox__former"
-            name="t84"
+            name="t34"
             type="checkbox"
             value=""
           />
@@ -4472,19 +3048,15 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 1.1, value: t84
-            </font>
+            1.2.1
           </span>
         </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="t85"
-        style="--level: 1;"
+        data-level="2"
+        data-value="t35"
+        style="--level: 2;"
       >
         <span
           class="t-tree__icon t-folder-icon"
@@ -4496,7 +3068,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
         >
           <input
             class="t-checkbox__former"
-            name="t85"
+            name="t35"
             type="checkbox"
             value=""
           />
@@ -4506,18 +3078,14 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 1.2, value: t85
-            </font>
+            1.2.2
           </span>
         </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="0"
-        data-value="t86"
+        data-value="t36"
         style="--level: 0;"
       >
         <span
@@ -4544,7 +3112,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
         >
           <input
             class="t-checkbox__former"
-            name="t86"
+            name="t36"
             type="checkbox"
             value=""
           />
@@ -4554,18 +3122,14 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 2, value: t86
-            </font>
+            2
           </span>
         </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t87"
+        data-value="t37"
         style="--level: 1;"
       >
         <span
@@ -4574,11 +3138,12 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           trigger="expand"
         />
         <label
-          class="t-checkbox t-tree__label"
+          class="t-checkbox t-is-disabled t-tree__label"
         >
           <input
             class="t-checkbox__former"
-            name="t87"
+            disabled="disabled"
+            name="t37"
             type="checkbox"
             value=""
           />
@@ -4588,18 +3153,14 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 2.1, value: t87
-            </font>
+            2.1
           </span>
         </label>
       </div>
       <div
         class="t-tree__item t-tree__item--open t-tree__item--visible"
         data-level="1"
-        data-value="t88"
+        data-value="t38"
         style="--level: 1;"
       >
         <span
@@ -4612,7 +3173,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
         >
           <input
             class="t-checkbox__former"
-            name="t88"
+            name="t38"
             type="checkbox"
             value=""
           />
@@ -4622,11 +3183,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
           <span
             class="t-checkbox__label"
           >
-            <font
-              color="blue"
-            >
-              label: 2.2, value: t88
-            </font>
+            2.2
           </span>
         </label>
       </div>
@@ -4635,290 +3192,159 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Tree Tree lazyVue demo works fine 1`] = `
+exports[`Tree Tree emptyVue demo works fine 1`] = `
 <div
-  class="tdesign-tree-demo"
+  class="t-space t-space-vertical"
+  style="gap: 20px;"
 >
-  <h3
-    class="title"
-  >
-    数据延迟加载
-  </h3>
-   
-  <p
-    class="tips"
-  >
-    默认为点击加载数据。
-  </p>
-   
-  <p
-    class="tips"
-  >
-    
-    valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
-  
-  </p>
-   
-  <p
-    class="tips"
-  >
-    所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。
-  </p>
-   
   <div
-    class="operations"
+    class="t-space-item"
   >
-    <form
-      class="t-form"
+    <div
+      class="t-tree t-tree--transition"
     >
       <div
-        class="t-form__item t-form-item__"
+        class="t-tree__empty"
       >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            可选
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m t-is-checked"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
+        暂无数据
       </div>
-       
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--transition"
+    >
       <div
-        class="t-form__item t-form-item__"
+        class="t-tree__empty"
       >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            严格模式
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
-            <div
-              class="t-switch t-size-m"
-            >
-              <span
-                class="t-switch__handle"
-              />
-              <div
-                class="t-switch__content t-size-m"
-              />
-            </div>
-          </div>
-        </div>
+        😊 空数据（string）
       </div>
-    </form>
+    </div>
   </div>
-   
   <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--transition"
     >
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
+        class="t-tree__empty"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
-          </span>
-        </label>
+        <div>
+          😊 空数据（ empty props ）
+        </div>
       </div>
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--transition"
+    >
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
+        class="t-tree__empty"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            2
-          </span>
-        </label>
+        <div>
+          😊 空数据（slot）
+        </div>
       </div>
-    </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Tree Tree lineVue demo works fine 1`] = `
+exports[`Tree Tree expandAllVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line"
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
 >
-  <form
-    class="t-form"
+  <div
+    class="t-space-item"
   >
     <div
-      class="t-form__item t-form-item__"
-      style="margin-bottom: 16px;"
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
     >
       <div
-        class="t-form__label t-form__label--right"
-        style="width: 100px;"
-      >
-        <label
-          for=""
-        >
-          显示连线
-        </label>
-      </div>
-      <div
-        class="t-form__controls"
-        style="margin-left: 100px;"
+        class="t-space-item"
       >
-        <div
-          class="t-form__controls-content"
+        <form
+          class="t-form"
         >
           <div
-            class="t-switch t-size-m t-is-checked"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
-            <span
-              class="t-switch__handle"
-            />
             <div
-              class="t-switch__content t-size-m"
-            />
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                切换数据
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="t-form__item t-form-item__"
-      style="margin-bottom: 16px;"
-    >
-      <div
-        class="t-form__label t-form__label--right"
-        style="width: 100px;"
-      >
-        <label
-          for=""
-        >
-          显示图标
-        </label>
-      </div>
-      <div
-        class="t-form__controls"
-        style="margin-left: 100px;"
-      >
-        <div
-          class="t-form__controls-content"
-        >
+           
           <div
-            class="t-switch t-size-m t-is-checked"
+            class="t-form__item t-form-item__"
           >
-            <span
-              class="t-switch__handle"
-            />
             <div
-              class="t-switch__content t-size-m"
-            />
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                展开动画
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                  style="margin-bottom: 5px;"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
     </div>
-  </form>
-   
+  </div>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space-item"
   >
     <div
       class="t-tree t-tree--transition"
@@ -4932,7 +3358,196 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="0"
-          data-value="1"
+          data-value="t39"
+          style="--level: 0;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t40"
+          style="--level: 1;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.1
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="t41"
+          style="--level: 2;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.1.1
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="t42"
+          style="--level: 2;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.1.2
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t43"
+          style="--level: 1;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.2
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="t44"
+          style="--level: 2;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.2.1
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="t45"
+          style="--level: 2;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              1.2.2
+            </span>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="t46"
           style="--level: 0;"
         >
           <span
@@ -4960,20 +3575,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              1
+              2
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="1.1"
+          data-value="t47"
           style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--leaf t-tree__line--first"
-            style="--level: 1;"
-          />
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -4985,20 +3596,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              1.1
+              2.1
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="1.2"
+          data-value="t48"
           style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--leaf"
-            style="--level: 1;"
-          />
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -5010,14 +3617,37 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              1.2
+              2.2
             </span>
           </span>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree expandLevelVue demo works fine 1`] = `
+<div
+  class="tdesign-tree-demo t-space t-space-horizontal"
+  style="gap: 16px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="0"
-          data-value="2"
+          data-value="t49"
           style="--level: 0;"
         >
           <span
@@ -5045,20 +3675,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2
+              1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="1"
-          data-value="2.1"
+          data-value="t50"
           style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--first"
-            style="--level: 1;"
-          />
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5084,20 +3710,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1
+              1.1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.1"
-          style="--level: 2;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="t53"
+          style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--first"
-            style="--level: 2; box-shadow: calc(-1 * var(--space)) 0 var(--color);"
-          />
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5123,20 +3745,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1
+              1.2
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="3"
-          data-value="2.1.1.1"
-          style="--level: 3;"
+          data-level="0"
+          data-value="t56"
+          style="--level: 0;"
         >
-          <span
-            class="t-tree__line t-tree__line--first"
-            style="--level: 3; box-shadow: calc(-1 * var(--space)) 0 var(--color),calc(-2 * var(--space)) 0 var(--color);"
-          />
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5162,20 +3780,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1
+              2
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.1"
-          style="--level: 4;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="t57"
+          style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--leaf t-tree__line--first"
-            style="--level: 4; box-shadow: calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"
-          />
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -5187,20 +3801,16 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1.1
+              2.1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.2"
-          style="--level: 4;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="t58"
+          style="--level: 1;"
         >
-          <span
-            class="t-tree__line t-tree__line--leaf"
-            style="--level: 4; box-shadow: calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"
-          />
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -5212,64 +3822,275 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1.2
+              2.2
             </span>
           </span>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree expandMutexVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <form
+          class="t-form"
+        >
+          <div
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
+          >
+            <div
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                互斥展开
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+           
+          <div
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
+          >
+            <div
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                整个节点可点击
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.2"
-          style="--level: 2;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t59"
+          style="--level: 0;"
         >
           <span
-            class="t-tree__line t-tree__line--leaf"
-            style="--level: 2; box-shadow: calc(-1 * var(--space)) 0 var(--color);"
-          />
-          <span
-            class="t-tree__icon t-folder-icon"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
             trigger="expand"
-          />
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              2.1.2
+              1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="2.2"
-          style="--level: 1;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t66"
+          style="--level: 0;"
         >
           <span
-            class="t-tree__line t-tree__line--leaf"
-            style="--level: 1;"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              2
+            </span>
+          </span>
+        </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree filterVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 16px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-input-adornment t-input-adornment--prepend"
+    >
+      <span
+        class="t-input-adornment__prepend"
+      >
+        filter:
+      </span>
+      <div
+        class="t-input__wrap"
+      >
+        <div
+          class="t-input t-size-m t-is-default"
+        >
+          <input
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
           />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="1"
+          style="--level: 0;"
+        >
           <span
-            class="t-tree__icon t-folder-icon"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
             trigger="expand"
-          />
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              2.2
+              1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="3"
+          data-value="2"
           style="--level: 0;"
         >
           <span
@@ -5297,90 +4118,115 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              3
+              2
             </span>
           </span>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree iconVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 0px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <h3>
+      render:
+    </h3>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition"
+      style="margin-bottom: 20px;"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="3.1"
-          style="--level: 1;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t73"
+          style="--level: 0;"
         >
-          <span
-            class="t-tree__line t-tree__line--leaf t-tree__line--first"
-            style="--level: 1;"
-          />
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
-          />
-          <span
-            class="t-tree__label"
           >
-            <span
-              style="position: relative;"
+            <svg
+              class="t-icon t-icon-folder"
             >
-              3.1
-            </span>
+              <use
+                href="#t-icon-folder"
+              />
+            </svg>
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="3.2"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__line t-tree__line--leaf"
-            style="--level: 1;"
-          />
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              3.2
+              1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="4"
+          data-value="t74"
           style="--level: 0;"
         >
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
-          />
+          >
+            <svg
+              class="t-icon t-icon-folder"
+            >
+              <use
+                href="#t-icon-folder"
+              />
+            </svg>
+          </span>
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              4
+              2
             </span>
           </span>
         </div>
       </transition-group-stub>
     </div>
-     
+  </div>
+  <div
+    class="t-space-item"
+  >
     <h3>
-      render
+      scope slot:
     </h3>
-     
+  </div>
+  <div
+    class="t-space-item"
+  >
     <div
-      class="t-tree t-tree--transition"
+      class="t-tree t-tree--hoverable t-tree--transition"
+      style="margin-bottom: 20px;"
     >
       <transition-group-stub
         class="t-tree__list"
@@ -5389,34 +4235,21 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
         tag="div"
       >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="1"
+          data-value="t75"
           style="--level: 0;"
         >
-          <div
-            class="custom-line custom-line-first"
-          >
-            <div
-              class="custom-line-box"
-            />
-          </div>
           <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
           >
             <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+              class="t-icon t-icon-caret-right"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <use
+                href="#t-icon-caret-right"
               />
             </svg>
           </span>
@@ -5431,104 +4264,71 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="1.1"
-          style="--level: 1;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="t76"
+          style="--level: 0;"
         >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              1.1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="1.2"
-          style="--level: 1;"
-        >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
           >
-            <div
-              class="custom-line-box"
+            <svg
+              class="t-icon t-icon-caret-right"
             >
-              <span
-                class=""
+              <use
+                href="#t-icon-caret-right"
               />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
+            </svg>
+          </span>
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              1.2
+              2
             </span>
           </span>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree labelVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 20px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <h3>
+      render:
+    </h3>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--transition"
+      style="margin-bottom: 20px;"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="0"
-          data-value="2"
+          data-value="t77"
           style="--level: 0;"
         >
-          <div
-            class="custom-line"
-          >
-            <div
-              class="custom-line-box"
-            />
-          </div>
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5554,128 +4354,64 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2
+              <strong>
+                value: t77, label: 1
+              </strong>
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="2.1"
+          data-value="t78"
           style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-first"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-          </div>
           <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+          />
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              2.1
+              <strong>
+                value: t78, label: 1.1
+              </strong>
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.1"
-          style="--level: 2;"
+          data-level="1"
+          data-value="t79"
+          style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-first"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class=""
-              />
-            </div>
-          </div>
           <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+          />
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              2.1.1
+              <strong>
+                value: t79, label: 1.2
+              </strong>
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="3"
-          data-value="2.1.1.1"
-          style="--level: 3;"
-        >
-          <div
-            class="custom-line custom-line-first custom-line-last"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class=""
-              />
-            </div>
-          </div>
+          data-level="0"
+          data-value="t80"
+          style="--level: 0;"
+        >
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5701,47 +4437,18 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1
+              <strong>
+                value: t80, label: 2
+              </strong>
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.1"
-          style="--level: 4;"
+          data-level="1"
+          data-value="t81"
+          style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class=""
-              />
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -5753,47 +4460,18 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1.1
+              <strong>
+                value: t81, label: 2.1
+              </strong>
             </span>
           </span>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.2"
-          style="--level: 4;"
+          data-level="1"
+          data-value="t82"
+          style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class=""
-              />
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
@@ -5805,112 +4483,157 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              2.1.1.1.2
+              <strong>
+                value: t82, label: 2.2
+              </strong>
             </span>
           </span>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <h3>
+      scope slot:
+    </h3>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--checkable t-tree--transition"
+      style="margin-bottom: 20px;"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
+      >
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.2"
-          style="--level: 2;"
+          data-level="0"
+          data-value="t83"
+          style="--level: 0;"
         >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            <div
-              class="custom-line-box"
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
             >
-              <span
-                class="custom-line-cross"
-              />
-              <span
-                class=""
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
               />
-            </div>
-            <i
-              class="custom-line-icon"
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="t83"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <font
+                color="blue"
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
+                label: 1, value: t83
+              </font>
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="t84"
+          style="--level: 1;"
+        >
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
           />
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="t84"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              2.1.2
+              <font
+                color="blue"
+              >
+                label: 1.1, value: t84
+              </font>
             </span>
-          </span>
+          </label>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="2.2"
+          data-value="t85"
           style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
           />
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="t85"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              2.2
+              <font
+                color="blue"
+              >
+                label: 1.2, value: t85
+              </font>
             </span>
-          </span>
+          </label>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="0"
-          data-value="3"
+          data-value="t86"
           style="--level: 0;"
         >
-          <div
-            class="custom-line"
-          >
-            <div
-              class="custom-line-box"
-            />
-          </div>
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -5930,150 +4653,225 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="t86"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              3
+              <font
+                color="blue"
+              >
+                label: 2, value: t86
+              </font>
             </span>
-          </span>
+          </label>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="3.1"
+          data-value="t87"
           style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
           />
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="t87"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              3.1
+              <font
+                color="blue"
+              >
+                label: 2.1, value: t87
+              </font>
             </span>
-          </span>
+          </label>
         </div>
         <div
           class="t-tree__item t-tree__item--open t-tree__item--visible"
           data-level="1"
-          data-value="3.2"
+          data-value="t88"
           style="--level: 1;"
         >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
             class="t-tree__icon t-folder-icon"
             ignore="active"
             trigger="expand"
           />
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="t88"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              3.2
+              <font
+                color="blue"
+              >
+                label: 2.2, value: t88
+              </font>
             </span>
-          </span>
+          </label>
         </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="4"
-          style="--level: 0;"
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree lazyVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <h3>
+      数据延迟加载
+    </h3>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <p>
+      默认为点击加载数据。
+    </p>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <p>
+      
+    valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
+  
+    </p>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <p>
+      所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。
+    </p>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <form
+          class="t-form"
         >
           <div
-            class="custom-line custom-line-leaf custom-line-last"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
             <div
-              class="custom-line-box"
-            />
-            <i
-              class="custom-line-icon"
+              class="t-form__label t-form__label--right"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <label
+                for=""
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
+                可选
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
+           
+          <div
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
-            <span
-              style="position: relative;"
+            <div
+              class="t-form__label t-form__label--right"
             >
-              4
-            </span>
-          </span>
-        </div>
-      </transition-group-stub>
+              <label
+                for=""
+              >
+                严格模式
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
-     
-    <h3>
-      scope slot
-    </h3>
-     
+  </div>
+  <div
+    class="t-space-item"
+  >
     <div
-      class="t-tree t-tree--transition"
+      class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
     >
       <transition-group-stub
         class="t-tree__list"
@@ -6082,20 +4880,11 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
         tag="div"
       >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
           data-value="1"
           style="--level: 0;"
         >
-          <div
-            class="custom-line custom-line-first"
-          >
-            <div
-              class="custom-line-box"
-            />
-             
-            <!---->
-          </div>
           <span
             class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
@@ -6115,671 +4904,2051 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="t-tree__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="1"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
               1
             </span>
-          </span>
+          </label>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="1.1"
-          style="--level: 1;"
+          class="t-tree__item t-tree__item--visible"
+          data-level="0"
+          data-value="2"
+          style="--level: 0;"
         >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
-            <div
-              class="custom-line-box"
-            >
-              <span
-                class=""
-              />
-            </div>
-             
-            <i
-              class="custom-line-icon"
-            >
-              <svg
-                class="t-icon t-icon-heart-filled"
-              >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
           <span
-            class="t-tree__icon t-folder-icon"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
             ignore="active"
             trigger="expand"
-          />
-          <span
-            class="t-tree__label"
           >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="2"
+              type="checkbox"
+              value=""
+            />
             <span
-              style="position: relative;"
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              1.1
+              2
             </span>
-          </span>
+          </label>
         </div>
+      </transition-group-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree lineVue demo works fine 1`] = `
+<div
+  class=" tdesign-tree-line t-space t-space-vertical"
+  style="gap: 16px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <form
+      class="t-form"
+    >
+      <div
+        class="t-space t-space-vertical"
+        style="gap: 5px;"
+      >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="1.2"
-          style="--level: 1;"
+          class="t-space-item"
         >
           <div
-            class="custom-line custom-line-leaf custom-line-last"
+            class="t-form__item t-form-item__"
           >
             <div
-              class="custom-line-box"
+              class="t-form__label t-form__label--right"
+              style="width: 100px;"
             >
-              <span
-                class=""
-              />
+              <label
+                for=""
+              >
+                显示连线
+              </label>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-form__controls"
+              style="margin-left: 100px;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="t-form__controls-content"
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              1.2
-            </span>
-          </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="2"
-          style="--level: 0;"
+          class="t-space-item"
         >
           <div
-            class="custom-line"
+            class="t-form__item t-form-item__"
           >
             <div
-              class="custom-line-box"
-            />
-             
-            <!---->
+              class="t-form__label t-form__label--right"
+              style="width: 100px;"
+            >
+              <label
+                for=""
+              >
+                显示图标
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
+              style="margin-left: 100px;"
+            >
+              <div
+                class="t-form__controls-content"
+              >
+                <div
+                  class="t-switch t-size-m t-is-checked"
+                >
+                  <span
+                    class="t-switch__handle"
+                  />
+                  <div
+                    class="t-switch__content t-size-m"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+        </div>
+      </div>
+    </form>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-space t-space-vertical"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-tree t-tree--transition"
+        >
+          <transition-group-stub
+            class="t-tree__list"
+            enteractiveclass="t-tree__item--enter-active"
+            leaveactiveclass="t-tree__item--leave-active"
+            tag="div"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="1"
+              style="--level: 0;"
+            >
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.1"
+              style="--level: 1;"
+            >
+              <span
+                class="t-tree__line t-tree__line--leaf t-tree__line--first"
+                style="--level: 1;"
+              />
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.2"
+              style="--level: 1;"
+            >
+              <span
+                class="t-tree__line t-tree__line--leaf"
+                style="--level: 1;"
+              />
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="2"
+              style="--level: 0;"
+            >
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.1"
+              style="--level: 1;"
+            >
+              <span
+                class="t-tree__line t-tree__line--first"
+                style="--level: 1;"
+              />
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.1"
+              style="--level: 2;"
+            >
+              <span
+                class="t-tree__line t-tree__line--first"
+                style="--level: 2; box-shadow: calc(-1 * var(--space)) 0 var(--color);"
+              />
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="3"
+              data-value="2.1.1.1"
+              style="--level: 3;"
+            >
+              <span
+                class="t-tree__line t-tree__line--first"
+                style="--level: 3; box-shadow: calc(-1 * var(--space)) 0 var(--color),calc(-2 * var(--space)) 0 var(--color);"
+              />
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.1"
+              style="--level: 4;"
+            >
+              <span
+                class="t-tree__line t-tree__line--leaf t-tree__line--first"
+                style="--level: 4; box-shadow: calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"
+              />
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.2"
+              style="--level: 4;"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <span
+                class="t-tree__line t-tree__line--leaf"
+                style="--level: 4; box-shadow: calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"
               />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="2.1"
-          style="--level: 1;"
-        >
-          <div
-            class="custom-line custom-line-first"
-          >
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.2
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.2"
+              style="--level: 2;"
             >
               <span
-                class=""
+                class="t-tree__line t-tree__line--leaf"
+                style="--level: 2; box-shadow: calc(-1 * var(--space)) 0 var(--color);"
+              />
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.2
+                </span>
+              </span>
             </div>
-             
-            <!---->
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.2"
+              style="--level: 1;"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <span
+                class="t-tree__line t-tree__line--leaf"
+                style="--level: 1;"
               />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="3"
+              style="--level: 0;"
             >
-              2.1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.1"
-          style="--level: 2;"
-        >
-          <div
-            class="custom-line custom-line-first"
-          >
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.1"
+              style="--level: 1;"
             >
               <span
-                class="custom-line-cross"
+                class="t-tree__line t-tree__line--leaf t-tree__line--first"
+                style="--level: 1;"
               />
               <span
-                class=""
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.1
+                </span>
+              </span>
             </div>
-             
-            <!---->
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.2"
+              style="--level: 1;"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <span
+                class="t-tree__line t-tree__line--leaf"
+                style="--level: 1;"
               />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="4"
+              style="--level: 0;"
             >
-              2.1.1
-            </span>
-          </span>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  4
+                </span>
+              </span>
+            </div>
+          </transition-group-stub>
         </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          render
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
+      >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="3"
-          data-value="2.1.1.1"
-          style="--level: 3;"
+          class="t-tree t-tree--transition"
         >
-          <div
-            class="custom-line custom-line-first custom-line-last"
+          <transition-group-stub
+            class="t-tree__list"
+            enteractiveclass="t-tree__item--enter-active"
+            leaveactiveclass="t-tree__item--leave-active"
+            tag="div"
           >
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="1"
+              style="--level: 0;"
             >
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                />
+              </div>
               <span
-                class="custom-line-cross"
-              />
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
               <span
-                class="custom-line-cross"
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.1"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class=""
-              />
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.1
+                </span>
+              </span>
             </div>
-             
-            <!---->
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.2"
+              style="--level: 1;"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="2"
+              style="--level: 0;"
             >
-              2.1.1.1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.1"
-          style="--level: 4;"
-        >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
+              <div
+                class="custom-line"
+              >
+                <div
+                  class="custom-line-box"
+                />
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.1"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.1"
+              style="--level: 2;"
+            >
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="3"
+              data-value="2.1.1.1"
+              style="--level: 3;"
+            >
+              <div
+                class="custom-line custom-line-first custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.1"
+              style="--level: 4;"
             >
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
               <span
-                class="custom-line-cross"
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.2"
+              style="--level: 4;"
+            >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class="custom-line-cross"
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.2"
+              style="--level: 2;"
+            >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class=""
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.2"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class=""
-              />
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.2
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="3"
+              style="--level: 0;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line"
               >
-                <use
-                  href="#t-icon-heart-filled"
+                <div
+                  class="custom-line-box"
                 />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2.1.1.1.1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="4"
-          data-value="2.1.1.1.2"
-          style="--level: 4;"
-        >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
-            <div
-              class="custom-line-box"
-            >
+              </div>
               <span
-                class="custom-line-cross"
-              />
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
               <span
-                class="custom-line-cross"
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.1"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class=""
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.2"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
               <span
-                class=""
-              />
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.2
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="4"
+              style="--level: 0;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
               >
-                <use
-                  href="#t-icon-heart-filled"
+                <div
+                  class="custom-line-box"
                 />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2.1.1.1.2
-            </span>
-          </span>
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  4
+                </span>
+              </span>
+            </div>
+          </transition-group-stub>
         </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          scope slot
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
+      >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="2"
-          data-value="2.1.2"
-          style="--level: 2;"
+          class="t-tree t-tree--transition"
         >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
+          <transition-group-stub
+            class="t-tree__list"
+            enteractiveclass="t-tree__item--enter-active"
+            leaveactiveclass="t-tree__item--leave-active"
+            tag="div"
           >
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="1"
+              style="--level: 0;"
             >
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                />
+                 
+                <!---->
+              </div>
               <span
-                class="custom-line-cross"
-              />
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
               <span
-                class=""
-              />
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.1"
+              style="--level: 1;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2.1.2
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="2.2"
-          style="--level: 1;"
-        >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.1
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="1.2"
+              style="--level: 1;"
             >
-              <span
-                class=""
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1.2
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="2"
+              style="--level: 0;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line"
               >
-                <use
-                  href="#t-icon-heart-filled"
+                <div
+                  class="custom-line-box"
                 />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+                 
+                <!---->
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.1"
+              style="--level: 1;"
             >
-              2.2
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="3"
-          style="--level: 0;"
-        >
-          <div
-            class="custom-line"
-          >
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <!---->
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
-            />
-             
-            <!---->
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.1"
+              style="--level: 2;"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+              <div
+                class="custom-line custom-line-first"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <!---->
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="3"
+              data-value="2.1.1.1"
+              style="--level: 3;"
             >
-              3
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="3.1"
-          style="--level: 1;"
-        >
-          <div
-            class="custom-line custom-line-first custom-line-leaf"
-          >
+              <div
+                class="custom-line custom-line-first custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <!---->
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.1"
+              style="--level: 4;"
             >
-              <span
-                class=""
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.1
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="4"
+              data-value="2.1.1.1.2"
+              style="--level: 4;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              3.1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="3.2"
-          style="--level: 1;"
-        >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.1.1.2
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="2"
+              data-value="2.1.2"
+              style="--level: 2;"
             >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class="custom-line-cross"
+                  />
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
               <span
-                class=""
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.1.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="2.2"
+              style="--level: 1;"
+            >
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
               />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2.2
+                </span>
+              </span>
             </div>
-             
-            <i
-              class="custom-line-icon"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="3"
+              style="--level: 0;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line"
               >
-                <use
-                  href="#t-icon-heart-filled"
+                <div
+                  class="custom-line-box"
                 />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+                 
+                <!---->
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon t-tree__icon--default"
+                ignore="active"
+                trigger="expand"
+              >
+                <svg
+                  class="t-icon t-icon-caret-right-small"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M6 5v6l4.5-3L6 5z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.1"
+              style="--level: 1;"
             >
-              3.2
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="4"
-          style="--level: 0;"
-        >
-          <div
-            class="custom-line custom-line-leaf custom-line-last"
-          >
+              <div
+                class="custom-line custom-line-first custom-line-leaf"
+              >
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.1
+                </span>
+              </span>
+            </div>
             <div
-              class="custom-line-box"
-            />
-             
-            <i
-              class="custom-line-icon"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="1"
+              data-value="3.2"
+              style="--level: 1;"
             >
-              <svg
-                class="t-icon t-icon-heart-filled"
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
               >
-                <use
-                  href="#t-icon-heart-filled"
-                />
-              </svg>
-            </i>
-          </div>
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+                <div
+                  class="custom-line-box"
+                >
+                  <span
+                    class=""
+                  />
+                </div>
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  3.2
+                </span>
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="4"
+              style="--level: 0;"
             >
-              4
-            </span>
-          </span>
+              <div
+                class="custom-line custom-line-leaf custom-line-last"
+              >
+                <div
+                  class="custom-line-box"
+                />
+                 
+                <i
+                  class="custom-line-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-heart-filled"
+                  >
+                    <use
+                      href="#t-icon-heart-filled"
+                    />
+                  </svg>
+                </i>
+              </div>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  4
+                </span>
+              </span>
+            </div>
+          </transition-group-stub>
         </div>
-      </transition-group-stub>
+      </div>
     </div>
   </div>
 </div>
@@ -6787,328 +6956,377 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
 
 exports[`Tree Tree loadVue demo works fine 1`] = `
 <div
-  class="tdesign-tree-demo"
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
 >
   <div
-    class="operations"
+    class="t-space-item"
   >
-    <form
-      class="t-form"
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
     >
       <div
-        class="t-form__item t-form-item__"
+        class="t-space-item"
       >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            可选
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
+        <form
+          class="t-form"
         >
           <div
-            class="t-form__controls-content"
+            class="t-space t-space-vertical"
+            style="gap: 5px;"
           >
             <div
-              class="t-switch t-size-m t-is-checked"
+              class="t-space-item"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__item t-form-item__"
+              >
+                <div
+                  class="t-form__label t-form__label--right"
+                >
+                  <label
+                    for=""
+                  >
+                    可选
+                  </label>
+                </div>
+                <div
+                  class="t-form__controls"
+                >
+                  <div
+                    class="t-form__controls-content"
+                  >
+                    <div
+                      class="t-switch t-size-m t-is-checked"
+                    >
+                      <span
+                        class="t-switch__handle"
+                      />
+                      <div
+                        class="t-switch__content t-size-m"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-   
   <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
     >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="1"
+          style="--level: 0;"
         >
-          <div
-            class="t-loading--center t-size-m t-loading"
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            <svg
-              class="t-loading__gradient t-icon-loading"
-              height="1em"
-              size="medium"
-              version="1.1"
-              viewBox="0 0 14 14"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-loading--center t-size-m t-loading"
             >
-              <foreignobject
-                height="12"
-                width="12"
-                x="1"
-                y="1"
+              <svg
+                class="t-loading__gradient t-icon-loading"
+                height="1em"
+                size="medium"
+                version="1.1"
+                viewBox="0 0 14 14"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  class="t-loading__gradient-conic"
-                />
-              </foreignobject>
-            </svg>
-          </div>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
+                <foreignobject
+                  height="12"
+                  width="12"
+                  x="1"
+                  y="1"
+                >
+                  <div
+                    class="t-loading__gradient-conic"
+                  />
+                </foreignobject>
+              </svg>
+            </div>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <div
-            class="t-loading--center t-size-m t-loading"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <svg
-              class="t-loading__gradient t-icon-loading"
-              height="1em"
-              size="medium"
-              version="1.1"
-              viewBox="0 0 14 14"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              class="t-checkbox__former"
+              name="1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
             >
-              <foreignobject
-                height="12"
-                width="12"
-                x="1"
-                y="1"
-              >
-                <div
-                  class="t-loading__gradient-conic"
-                />
-              </foreignobject>
-            </svg>
-          </div>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+              1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="2"
+          style="--level: 0;"
         >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            2
+            <div
+              class="t-loading--center t-size-m t-loading"
+            >
+              <svg
+                class="t-loading__gradient t-icon-loading"
+                height="1em"
+                size="medium"
+                version="1.1"
+                viewBox="0 0 14 14"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <foreignobject
+                  height="12"
+                  width="12"
+                  x="1"
+                  y="1"
+                >
+                  <div
+                    class="t-loading__gradient-conic"
+                  />
+                </foreignobject>
+              </svg>
+            </div>
           </span>
-        </label>
-      </div>
-    </transition-group-stub>
+          <label
+            class="t-checkbox t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2
+            </span>
+          </label>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Tree Tree operationsVue demo works fine 1`] = `
 <div
-  class="tdesign-tree-demo"
+  class="t-space t-space-vertical"
+  style="gap: 10px;"
 >
-  <h3
-    class="title"
+  <div
+    class="t-space-item"
   >
-    Render:
-  </h3>
-   
+    <h3>
+      Render:
+    </h3>
+  </div>
   <div
-    class="t-tree t-tree--hoverable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--transition"
+      style="margin-bottom: 20px;"
     >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="node1"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="node1"
+          style="--level: 0;"
         >
           <span
-            style="position: relative;"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
           >
-            1 | value: node1
+            <span
+              style="position: relative;"
+            >
+              1 | value: node1
+            </span>
           </span>
-        </span>
-        <span
-          class="t-tree__operations"
-          ignore="active,expand"
-        >
-          value: node1
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="node2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <span
-          class="t-tree__label"
-        >
           <span
-            style="position: relative;"
+            class="t-tree__operations"
+            ignore="active,expand"
           >
-            2 | value: node2
+            value: node1
           </span>
-        </span>
-        <span
-          class="t-tree__operations"
-          ignore="active,expand"
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="node2"
+          style="--level: 0;"
         >
-          value: node2
-        </span>
-      </div>
-    </transition-group-stub>
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <span
+            class="t-tree__label"
+          >
+            <span
+              style="position: relative;"
+            >
+              2 | value: node2
+            </span>
+          </span>
+          <span
+            class="t-tree__operations"
+            ignore="active,expand"
+          >
+            value: node2
+          </span>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
-   
-  <h3
-    class="title"
+  <div
+    class="t-space-item"
   >
-    Scope Slot:
-  </h3>
-   
+    <h3>
+      Scope Slot:
+    </h3>
+  </div>
   <div
-    class="operations"
+    class="t-space-item"
   >
-    <form
-      class="t-form"
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 5px;"
     >
       <div
-        class="t-form__item t-form-item__"
+        class="t-space-item"
       >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            插入节点使用高亮节点
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
+        <form
+          class="t-form"
         >
           <div
-            class="t-form__controls-content"
+            class="t-space t-space-vertical"
+            style="gap: 5px;"
           >
             <div
-              class="t-switch t-size-m"
+              class="t-space-item"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__item t-form-item__"
+              >
+                <div
+                  class="t-form__label t-form__label--right"
+                >
+                  <label
+                    for=""
+                  >
+                    插入节点使用高亮节点
+                  </label>
+                </div>
+                <div
+                  class="t-form__controls"
+                >
+                  <div
+                    class="t-form__controls-content"
+                  >
+                    <div
+                      class="t-switch t-size-m"
+                    >
+                      <span
+                        class="t-switch__handle"
+                      />
+                      <div
+                        class="t-switch__content t-size-m"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
-       
-      <div
-        class="t-form__item t-form-item__"
-      >
-        <div
-          class="t-form__label t-form__label--right"
-        >
-          <label
-            for=""
-          >
-            子节点展开触发父节点展开
-          </label>
-        </div>
-        <div
-          class="t-form__controls"
-        >
-          <div
-            class="t-form__controls-content"
-          >
             <div
-              class="t-switch t-size-m t-is-checked"
+              class="t-space-item"
             >
-              <span
-                class="t-switch__handle"
-              />
               <div
-                class="t-switch__content t-size-m"
-              />
+                class="t-form__item t-form-item__"
+              >
+                <div
+                  class="t-form__label t-form__label--right"
+                >
+                  <label
+                    for=""
+                  >
+                    子节点展开触发父节点展开
+                  </label>
+                </div>
+                <div
+                  class="t-form__controls"
+                >
+                  <div
+                    class="t-form__controls-content"
+                  >
+                    <div
+                      class="t-switch t-size-m t-is-checked"
+                    >
+                      <span
+                        class="t-switch__handle"
+                      />
+                      <div
+                        class="t-switch__content t-size-m"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-   
   <div
-    class="operations"
+    class="t-space-item"
   >
     <div
       class="t-input-adornment t-input-adornment--prepend"
@@ -7135,322 +7353,406 @@ exports[`Tree Tree operationsVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-   
   <div
-    class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
+    class="t-space-item"
   >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+    <div
+      class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
     >
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="node1"
-        style="--level: 0;"
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="node1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1 | value: node1
-          </span>
-        </label>
-        <span
-          class="t-tree__operations"
-          ignore="active,expand"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="node1"
+          style="--level: 0;"
         >
-          <button
-            class="t-button t-size-s t-button--variant-base t-button--theme-primary"
-            type="button"
-          >
-            <span
-              class="t-button__text"
-            >
-              添加子节点
-            </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-            type="button"
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
+          />
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="node1"
+              type="checkbox"
+              value=""
+            />
             <span
-              class="t-button__text"
-            >
-              前插节点
-            </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-            type="button"
-          >
+              class="t-checkbox__input"
+            />
             <span
-              class="t-button__text"
+              class="t-checkbox__label"
             >
-              后插节点
+              1 | value: node1
             </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-base t-button--theme-danger"
-            type="button"
+          </label>
+          <span
+            class="t-tree__operations"
+            ignore="active,expand"
           >
-            <span
-              class="t-button__text"
+            <div
+              class="t-space t-space-horizontal"
+              style="gap: 10px;"
             >
-              删除
-            </span>
-          </button>
-        </span>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="node2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    添加子节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-base t-button--theme-danger"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    删除
+                  </span>
+                </button>
+              </div>
+            </div>
+          </span>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="node2"
+          style="--level: 0;"
         >
-          <input
-            class="t-checkbox__former"
-            name="node2"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
-          >
-            2 | value: node2
-          </span>
-        </label>
-        <span
-          class="t-tree__operations"
-          ignore="active,expand"
-        >
-          <button
-            class="t-button t-size-s t-button--variant-base t-button--theme-primary"
-            type="button"
-          >
-            <span
-              class="t-button__text"
-            >
-              添加子节点
-            </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-            type="button"
+          <label
+            class="t-checkbox t-tree__label"
           >
+            <input
+              class="t-checkbox__former"
+              name="node2"
+              type="checkbox"
+              value=""
+            />
             <span
-              class="t-button__text"
-            >
-              前插节点
-            </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-            type="button"
-          >
+              class="t-checkbox__input"
+            />
             <span
-              class="t-button__text"
+              class="t-checkbox__label"
             >
-              后插节点
+              2 | value: node2
             </span>
-          </button>
-           
-          <button
-            class="t-button t-size-s t-button--variant-base t-button--theme-danger"
-            type="button"
+          </label>
+          <span
+            class="t-tree__operations"
+            ignore="active,expand"
           >
-            <span
-              class="t-button__text"
+            <div
+              class="t-space t-space-horizontal"
+              style="gap: 10px;"
             >
-              删除
-            </span>
-          </button>
-        </span>
-      </div>
-    </transition-group-stub>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    添加子节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插节点
+                  </span>
+                </button>
+              </div>
+              <div
+                class="t-space-item"
+              >
+                <button
+                  class="t-button t-size-s t-button--variant-base t-button--theme-danger"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    删除
+                  </span>
+                </button>
+              </div>
+            </div>
+          </span>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
-   
-  <h3
-    class="title"
+  <div
+    class="t-space-item"
   >
-    API:
-  </h3>
-   
+    <h3>
+      API:
+    </h3>
+  </div>
   <div
-    class="operations"
+    class="t-space-item"
   >
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px; flex-wrap: wrap;"
     >
-      <span
-        class="t-button__text"
+      <div
+        class="t-space-item"
       >
-        获取 value 为 'node1' 的单个节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取 value 为 'node1' 的单个节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取所有节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取所有节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点的所有子节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点的所有子节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取所有高亮节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取所有高亮节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点下的选中节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点下的选中节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        插入一个根节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            插入一个根节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点的父节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点的父节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点的所有父节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点的所有父节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点在子节点中的位置
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点在子节点中的位置
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        选中高亮节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            选中高亮节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        展开高亮节点
-      </span>
-    </button>
-     
-    <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-      type="button"
-    >
-      <span
-        class="t-button__text"
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            展开高亮节点
+          </span>
+        </button>
+      </div>
+      <div
+        class="t-space-item"
       >
-        获取高亮节点与其子节点的数据
-      </span>
-    </button>
+        <button
+          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            获取高亮节点与其子节点的数据
+          </span>
+        </button>
+      </div>
+    </div>
   </div>
-   
-  <p
-    class="tips"
+  <div
+    class="t-space-item"
   >
-    * 相关信息通过控制台输出
-  </p>
+    <p
+      class="tips"
+    >
+      * 相关信息通过控制台输出
+    </p>
+  </div>
 </div>
 `;
 
@@ -8074,483 +8376,502 @@ exports[`Tree Tree stateVue demo works fine 1`] = `
 
 exports[`Tree Tree syncVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block-column-large"
+  class="t-space t-space-vertical"
+  style="gap: 16px;"
 >
   <div
-    class="tdesign-demo-block-column"
+    class="t-space-item"
   >
     <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        checked:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        expanded:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-     
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        actived:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
-        <div
-          class="t-input t-size-m t-is-default"
-        >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="t-tree t-tree--checkable t-tree--transition"
-  >
-    <transition-group-stub
-      class="t-tree__list"
-      enteractiveclass="t-tree__item--enter-active"
-      leaveactiveclass="t-tree__item--leave-active"
-      tag="div"
+      class="t-space t-space-vertical"
+      style="gap: 16px;"
     >
       <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="0"
-        data-value="1"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-indeterminate t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            indeterminate="indeterminate"
-            name="1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="1"
-        data-value="1.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-indeterminate t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            indeterminate="indeterminate"
-            name="1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
-          >
-            1.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.1"
-        style="--level: 2;"
+        class="t-space-item"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
-        >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
+        <div
+          class="t-input-adornment t-input-adornment--prepend"
+        >
           <span
-            class="t-checkbox__label"
+            class="t-input-adornment__prepend"
           >
-            1.1.1
+            checked:
           </span>
-        </label>
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-size-m t-is-default"
+            >
+              <input
+                autocomplete=""
+                class="t-input__inner"
+                placeholder="请输入"
+                type="text"
+                unselectable="off"
+              />
+            </div>
+          </div>
+        </div>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.1"
-        style="--level: 3;"
+        class="t-space-item"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
+        <div
+          class="t-input-adornment t-input-adornment--prepend"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.1"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
-          />
-          <span
-            class="t-checkbox__label"
+            class="t-input-adornment__prepend"
           >
-            1.1.1.1
+            expanded:
           </span>
-        </label>
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-size-m t-is-default"
+            >
+              <input
+                autocomplete=""
+                class="t-input__inner"
+                placeholder="请输入"
+                type="text"
+                unselectable="off"
+              />
+            </div>
+          </div>
+        </div>
       </div>
       <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="3"
-        data-value="1.1.1.2"
-        style="--level: 3;"
+        class="t-space-item"
       >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-is-checked t-tree__label"
+        <div
+          class="t-input-adornment t-input-adornment--prepend"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-input-adornment__prepend"
           >
-            1.1.1.2
+            actived:
           </span>
-        </label>
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-size-m t-is-default"
+            >
+              <input
+                autocomplete=""
+                class="t-input__inner"
+                placeholder="请输入"
+                type="text"
+                unselectable="off"
+              />
+            </div>
+          </div>
+        </div>
       </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="2"
-        data-value="1.1.2"
-        style="--level: 2;"
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-tree t-tree--checkable t-tree--transition"
+    >
+      <transition-group-stub
+        class="t-tree__list"
+        enteractiveclass="t-tree__item--enter-active"
+        leaveactiveclass="t-tree__item--leave-active"
+        tag="div"
       >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="0"
+          data-value="1"
+          style="--level: 0;"
         >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-is-indeterminate t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              indeterminate="indeterminate"
+              name="1"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="1"
+          data-value="1.1"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.1.2"
-            type="checkbox"
-            value=""
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-is-indeterminate t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              indeterminate="indeterminate"
+              name="1.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          data-level="2"
+          data-value="1.1.1"
+          style="--level: 2;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
+          >
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+          <label
+            class="t-checkbox t-is-checked t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.1.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.1.1"
+          style="--level: 3;"
+        >
+          <span
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
+          <label
+            class="t-checkbox t-is-checked t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.1.1.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="3"
+          data-value="1.1.1.2"
+          style="--level: 3;"
+        >
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
+          <label
+            class="t-checkbox t-is-checked t-tree__label"
+          >
+            <input
+              class="t-checkbox__former"
+              name="1.1.1.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="2"
+          data-value="1.1.2"
+          style="--level: 2;"
+        >
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.1.2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="1.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.1.2"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="1.2"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="1.2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            1.2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible"
-        data-level="0"
-        data-value="2"
-        style="--level: 0;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon t-tree__icon--default"
-          ignore="active"
-          trigger="expand"
-        >
-          <svg
-            class="t-icon t-icon-caret-right-small"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            <path
-              d="M6 5v6l4.5-3L6 5z"
-              fill="currentColor"
-              fill-opacity="0.9"
+            <input
+              class="t-checkbox__former"
+              name="1.2"
+              type="checkbox"
+              value=""
             />
-          </svg>
-        </span>
-        <label
-          class="t-checkbox t-tree__label t-is-active"
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              1.2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible"
+          data-level="0"
+          data-value="2"
+          style="--level: 0;"
         >
-          <input
-            class="t-checkbox__former"
-            name="2"
-            type="checkbox"
-            value=""
-          />
-          <span
-            class="t-checkbox__input"
-          />
           <span
-            class="t-checkbox__label"
+            class="t-tree__icon t-folder-icon t-tree__icon--default"
+            ignore="active"
+            trigger="expand"
           >
-            2
+            <svg
+              class="t-icon t-icon-caret-right-small"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6 5v6l4.5-3L6 5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
           </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="2.1"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+          <label
+            class="t-checkbox t-tree__label t-is-active"
+          >
+            <input
+              class="t-checkbox__former"
+              name="2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="2.1"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="2.1"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            2.1
-          </span>
-        </label>
-      </div>
-      <div
-        class="t-tree__item t-tree__item--visible"
-        data-level="1"
-        data-value="2.2"
-        style="--level: 1;"
-      >
-        <span
-          class="t-tree__icon t-folder-icon"
-          ignore="active"
-          trigger="expand"
-        />
-        <label
-          class="t-checkbox t-tree__label"
+            <input
+              class="t-checkbox__former"
+              name="2.1"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2.1
+            </span>
+          </label>
+        </div>
+        <div
+          class="t-tree__item t-tree__item--visible"
+          data-level="1"
+          data-value="2.2"
+          style="--level: 1;"
         >
-          <input
-            class="t-checkbox__former"
-            name="2.2"
-            type="checkbox"
-            value=""
-          />
           <span
-            class="t-checkbox__input"
+            class="t-tree__icon t-folder-icon"
+            ignore="active"
+            trigger="expand"
           />
-          <span
-            class="t-checkbox__label"
+          <label
+            class="t-checkbox t-tree__label"
           >
-            2.2
-          </span>
-        </label>
-      </div>
-    </transition-group-stub>
+            <input
+              class="t-checkbox__former"
+              name="2.2"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="t-checkbox__input"
+            />
+            <span
+              class="t-checkbox__label"
+            >
+              2.2
+            </span>
+          </label>
+        </div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/tree/_example/activable.vue b/src/tree/_example/activable.vue
index da1a2c90a..f3dc80551 100644
--- a/src/tree/_example/activable.vue
+++ b/src/tree/_example/activable.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <div class="operations">
+  <t-space direction="vertical" :size="10">
+    <t-space>
       <t-form labelWidth="120">
-        <t-form-item label="节点可高亮">
+        <t-form-item label="节点可高亮" style="margin-bottom: 5px">
           <t-switch v-model="activable" />
         </t-form-item>
-        <t-form-item label="节点可多选高亮">
+        <t-form-item label="节点可多选高亮" style="margin-bottom: 5px">
           <t-switch v-model="activeMultiple" />
         </t-form-item>
-        <t-form-item label="整个节点可点击">
+        <t-form-item label="整个节点可点击" style="margin-bottom: 5px">
           <t-switch v-model="expandOnClickNode" />
         </t-form-item>
       </t-form>
-    </div>
+    </t-space>
     <t-tree
       :data="items"
       expand-all
@@ -24,7 +24,7 @@
       :onActive="propOnActive"
       hover
     />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -82,24 +82,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/base.vue b/src/tree/_example/base.vue
index 502c2b78a..ab1955641 100644
--- a/src/tree/_example/base.vue
+++ b/src/tree/_example/base.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="tdesign-tree-demo">
+  <t-space>
     <t-tree :data="items" activable hover transition />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -58,24 +58,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/checkable.vue b/src/tree/_example/checkable.vue
index b1615b715..6b821447b 100644
--- a/src/tree/_example/checkable.vue
+++ b/src/tree/_example/checkable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-demo-block-column-large">
+  <t-space direction="vertical">
     <t-form>
       <t-form-item label="可选" style="margin-bottom: 16px">
         <t-switch v-model="checkable" />
@@ -25,7 +25,7 @@
       @change="onChange"
       @click="onClick"
     />
-  </div>
+  </t-space>
 </template>
 
 <script>
diff --git a/src/tree/_example/empty.vue b/src/tree/_example/empty.vue
index dd5b8828a..1b2a83751 100644
--- a/src/tree/_example/empty.vue
+++ b/src/tree/_example/empty.vue
@@ -1,13 +1,12 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <t-tree :data="[]" /><br />
-    <t-tree :data="[]" empty="😊 空数据（string）" /><br />
-    <t-tree :data="[]" :empty="empty" /><br />
-    <t-tree :data="[]"
-    ><br />
+  <t-space direction="vertical" :size="20">
+    <t-tree :data="[]" />
+    <t-tree :data="[]" empty="😊 空数据（string）" />
+    <t-tree :data="[]" :empty="empty" />
+    <t-tree :data="[]">
       <div slot="empty">😊 空数据（slot）</div>
     </t-tree>
-  </div>
+  </t-space>
 </template>
 
 <script lang="jsx">
@@ -22,24 +21,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/expand-all.vue b/src/tree/_example/expand-all.vue
index 32fc7b9cb..bac5b6a1e 100644
--- a/src/tree/_example/expand-all.vue
+++ b/src/tree/_example/expand-all.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <div class="operations">
+  <t-space direction="vertical" :size="10">
+    <t-space>
       <t-form labelWidth="150">
-        <t-form-item label="切换数据">
+        <t-form-item label="切换数据" style="margin-bottom: 5px">
           <t-switch @change="toggleData" />
         </t-form-item>
         <t-form-item label="展开动画">
-          <t-switch v-model="transition" />
+          <t-switch v-model="transition" style="margin-bottom: 5px" />
         </t-form-item>
       </t-form>
-    </div>
+    </t-space>
     <t-tree :data="items" expand-all :transition="transition" />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -90,24 +90,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/expand-level.vue b/src/tree/_example/expand-level.vue
index 280e1bda7..4bdcef19c 100644
--- a/src/tree/_example/expand-level.vue
+++ b/src/tree/_example/expand-level.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="tdesign-tree-demo">
+  <t-space class="tdesign-tree-demo">
     <t-tree :data="items" hover :expand-level="1" />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -52,24 +52,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/expand-mutex.vue b/src/tree/_example/expand-mutex.vue
index 4dd6f3915..bb8943560 100644
--- a/src/tree/_example/expand-mutex.vue
+++ b/src/tree/_example/expand-mutex.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <div class="operations">
+  <t-space direction="vertical" :size="10">
+    <t-space>
       <t-form labelWidth="120">
-        <t-form-item label="互斥展开">
+        <t-form-item label="互斥展开" style="margin-bottom: 5px">
           <t-switch v-model="mutex" />
         </t-form-item>
-        <t-form-item label="整个节点可点击">
+        <t-form-item label="整个节点可点击" style="margin-bottom: 5px">
           <t-switch v-model="expandOnClickNode" />
         </t-form-item>
       </t-form>
-    </div>
+    </t-space>
     <t-tree
       :data="items"
       hover
@@ -19,7 +19,7 @@
       @expand="onExpand"
       :onExpand="propOnExpand"
     />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -105,24 +105,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/filter.vue b/src/tree/_example/filter.vue
index 049e8744d..f13f3fdb5 100644
--- a/src/tree/_example/filter.vue
+++ b/src/tree/_example/filter.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="tdesign-demo-block-column-large">
+  <t-space direction="vertical">
     <t-input-adornment prepend="filter:">
       <t-input v-model="filterText" @change="onInput" />
     </t-input-adornment>
 
     <t-tree :data="items" expand-on-click-node :default-expanded="expanded" :filter="filterByText" hover line />
-  </div>
+  </t-space>
 </template>
 
 <script>
diff --git a/src/tree/_example/icon.vue b/src/tree/_example/icon.vue
index aabc0f0e7..904895e1e 100644
--- a/src/tree/_example/icon.vue
+++ b/src/tree/_example/icon.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="tdesign-tree-demo">
+  <t-space direction="vertical" :size="0">
     <h3>render:</h3>
-    <t-tree :data="items" hover expand-all :load="load" :icon="icon" />
+    <t-tree :data="items" hover expand-all :load="load" :icon="icon" style="margin-bottom: 20px" />
     <h3>scope slot:</h3>
-    <t-tree :data="items" hover lazy :load="load">
+    <t-tree :data="items" hover lazy :load="load" style="margin-bottom: 20px">
       <template #icon="{ node }">
         <icon v-if="node.getChildren() && !node.expanded" name="caret-right" />
         <icon v-else-if="node.getChildren() && node.expanded && node.loading" name="loading" />
@@ -11,7 +11,7 @@
         <icon v-else name="attach" />
       </template>
     </t-tree>
-  </div>
+  </t-space>
 </template>
 
 <script lang="jsx">
@@ -74,24 +74,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/label.vue b/src/tree/_example/label.vue
index 81b14496a..f9bd76993 100644
--- a/src/tree/_example/label.vue
+++ b/src/tree/_example/label.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="tdesign-tree-demo">
+  <t-space direction="vertical" :size="20">
     <h3>render:</h3>
-    <t-tree :data="items" expand-all :label="label"></t-tree>
+    <t-tree :data="items" expand-all :label="label" style="margin-bottom: 20px"></t-tree>
     <h3>scope slot:</h3>
-    <t-tree :data="items" expand-all checkable>
+    <t-tree :data="items" expand-all checkable style="margin-bottom: 20px">
       <template #label="{ node }">
         <font color="blue">label: {{ node.label }}, value: {{ node.value }}</font>
       </template>
     </t-tree>
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -50,24 +50,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/lazy.vue b/src/tree/_example/lazy.vue
index 2e7a45e5d..22fd9bf9e 100644
--- a/src/tree/_example/lazy.vue
+++ b/src/tree/_example/lazy.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <h3 class="title">数据延迟加载</h3>
-    <p class="tips">默认为点击加载数据。</p>
-    <p class="tips">
+  <t-space direction="vertical" :size="10">
+    <h3>数据延迟加载</h3>
+    <p>默认为点击加载数据。</p>
+    <p>
       valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
     </p>
-    <p class="tips">所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
-    <div class="operations">
+    <p>所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
+    <t-space>
       <t-form labelWidth="150">
-        <t-form-item label="可选">
+        <t-form-item label="可选" style="margin-bottom: 5px">
           <t-switch v-model="checkable" />
         </t-form-item>
-        <t-form-item label="严格模式">
+        <t-form-item label="严格模式" style="margin-bottom: 5px">
           <t-switch v-model="checkStrictly" />
         </t-form-item>
       </t-form>
-    </div>
+    </t-space>
     <t-tree
       ref="tree"
       :data="items"
@@ -27,7 +27,7 @@
       valueMode="all"
       @load="onLoad"
     />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -81,23 +81,9 @@ export default {
 };
 </script>
 
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
+<style scoped>
+.tips {
+  font-size: 10px;
+  color: gray;
 }
 </style>
diff --git a/src/tree/_example/line.vue b/src/tree/_example/line.vue
index 2d31f641c..ad859af9f 100644
--- a/src/tree/_example/line.vue
+++ b/src/tree/_example/line.vue
@@ -1,15 +1,16 @@
 <template>
-  <div class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line">
+  <t-space class="tdesign-tree-line" direction="vertical">
     <t-form>
-      <t-form-item label="显示连线" style="margin-bottom: 16px">
-        <t-switch v-model="showLine" />
-      </t-form-item>
-      <t-form-item label="显示图标" style="margin-bottom: 16px">
-        <t-switch v-model="showIcon" />
-      </t-form-item>
+      <t-space direction="vertical" :size="5">
+        <t-form-item label="显示连线">
+          <t-switch v-model="showLine" />
+        </t-form-item>
+        <t-form-item label="显示图标">
+          <t-switch v-model="showIcon" />
+        </t-form-item>
+      </t-space>
     </t-form>
-
-    <div class="tdesign-demo-block-column">
+    <t-space direction="vertical">
       <t-tree :data="items" :line="showLine" :icon="showIcon" expand-all />
       <h3>render</h3>
       <t-tree :data="items" :icon="showIcon" expand-all :line="renderLine" />
@@ -30,8 +31,8 @@
           </div>
         </template>
       </t-tree>
-    </div>
-  </div>
+    </t-space>
+  </t-space>
 </template>
 
 <script lang="jsx">
diff --git a/src/tree/_example/load.vue b/src/tree/_example/load.vue
index b2312aaa6..c7ab776f7 100644
--- a/src/tree/_example/load.vue
+++ b/src/tree/_example/load.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <div class="operations">
+  <t-space direction="vertical" :size="10">
+    <t-space>
       <t-form labelWidth="150">
-        <t-form-item label="可选">
-          <t-switch v-model="checkable" />
-        </t-form-item>
+        <t-space direction="vertical" :size="5">
+          <t-form-item label="可选">
+            <t-switch v-model="checkable" />
+          </t-form-item>
+        </t-space>
       </t-form>
-    </div>
+    </t-space>
     <t-tree :data="items" hover expand-all :checkable="checkable" v-model="value" :load="load" :lazy="false" />
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -57,24 +59,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/operations.vue b/src/tree/_example/operations.vue
index 1c4c26861..b518fed06 100644
--- a/src/tree/_example/operations.vue
+++ b/src/tree/_example/operations.vue
@@ -1,23 +1,30 @@
 <template>
-  <div class="tdesign-tree-demo">
-    <h3 class="title">Render:</h3>
-    <t-tree :data="items" hover expand-all :label="getLabel" :operations="renderOperations" />
-    <h3 class="title">Scope Slot:</h3>
-    <div class="operations">
+  <t-space direction="vertical" :size="10">
+    <h3>Render:</h3>
+    <t-tree
+      :data="items"
+      hover
+      expand-all
+      :label="getLabel"
+      :operations="renderOperations"
+      style="margin-bottom: 20px"
+    />
+    <h3>Scope Slot:</h3>
+    <t-space :size="5">
       <t-form labelWidth="200">
-        <t-form-item label="插入节点使用高亮节点">
-          <t-switch v-model="useActived" />
-        </t-form-item>
-        <t-form-item label="子节点展开触发父节点展开">
-          <t-switch v-model="expandParent" />
-        </t-form-item>
+        <t-space direction="vertical" :size="5">
+          <t-form-item label="插入节点使用高亮节点">
+            <t-switch v-model="useActived" />
+          </t-form-item>
+          <t-form-item label="子节点展开触发父节点展开">
+            <t-switch v-model="expandParent" />
+          </t-form-item>
+        </t-space>
       </t-form>
-    </div>
-    <div class="operations">
-      <t-input-adornment prepend="filter:">
-        <t-input v-model="filterText" @change="onInputChange" />
-      </t-input-adornment>
-    </div>
+    </t-space>
+    <t-input-adornment prepend="filter:">
+      <t-input v-model="filterText" @change="onInputChange" />
+    </t-input-adornment>
     <t-tree
       :data="items"
       hover
@@ -35,14 +42,16 @@
       ref="tree"
     >
       <template #operations="{ node }">
-        <t-button size="small" variant="base" @click="append(node)">添加子节点</t-button>
-        <t-button size="small" variant="outline" @click="insertBefore(node)">前插节点</t-button>
-        <t-button size="small" variant="outline" @click="insertAfter(node)">后插节点</t-button>
-        <t-button size="small" variant="base" theme="danger" @click="remove(node)">删除</t-button>
+        <t-space :size="10">
+          <t-button size="small" variant="base" @click="append(node)">添加子节点</t-button>
+          <t-button size="small" variant="outline" @click="insertBefore(node)">前插节点</t-button>
+          <t-button size="small" variant="outline" @click="insertAfter(node)">后插节点</t-button>
+          <t-button size="small" variant="base" theme="danger" @click="remove(node)">删除</t-button>
+        </t-space>
       </template>
     </t-tree>
-    <h3 class="title">API:</h3>
-    <div class="operations">
+    <h3>API:</h3>
+    <t-space breakLine>
       <t-button theme="primary" @click="getItem">获取 value 为 'node1' 的单个节点</t-button>
       <t-button theme="primary" @click="getAllItems">获取所有节点</t-button>
       <t-button theme="primary" @click="getActiveChildren">获取高亮节点的所有子节点</t-button>
@@ -55,9 +64,9 @@
       <t-button theme="primary" @click="setActiveChecked">选中高亮节点</t-button>
       <t-button theme="primary" @click="setActiveExpanded">展开高亮节点</t-button>
       <t-button theme="primary" @click="getActivePlainData">获取高亮节点与其子节点的数据</t-button>
-    </div>
+    </t-space>
     <p class="tips">* 相关信息通过控制台输出</p>
-  </div>
+  </t-space>
 </template>
 
 <script>
@@ -312,27 +321,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-.tips {
-  font-size: 10px;
-  color: gray;
-}
-</style>
diff --git a/src/tree/_example/sync.vue b/src/tree/_example/sync.vue
index 0e3bc9fda..71c50f765 100644
--- a/src/tree/_example/sync.vue
+++ b/src/tree/_example/sync.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="tdesign-demo-block-column-large">
-    <div class="tdesign-demo-block-column">
+  <t-space direction="vertical">
+    <t-space direction="vertical">
       <t-input-adornment prepend="checked:">
         <t-input :value="allChecked" @change="onAllCheckedInput" />
       </t-input-adornment>
@@ -10,7 +10,7 @@
       <t-input-adornment prepend="actived:">
         <t-input :value="allActived" @change="onAllActivedInput" />
       </t-input-adornment>
-    </div>
+    </t-space>
     <t-tree
       :data="items"
       checkable
@@ -22,7 +22,7 @@
       :value.sync="checked"
       :value-mode="valueMode"
     />
-  </div>
+  </t-space>
 </template>
 
 <script>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 7e6b6da78..dbb159be8 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -224,22 +224,24 @@ exports[`ssr snapshot test renders ./src/alert/_example/icon.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/alert/_example/operation.vue correctly 1`] = `
-<t-sapce>
-  <div class="t-alert t-alert--info">
-    <div class="t-alert__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle-filled">
-        <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fill-opacity="0.9"></path>
-      </svg></div>
-    <div class="t-alert__content">
-      <div class="t-alert__message">
-        <div class="t-alert__description">这是一条普通的消息提示</div>
-        <div class="t-alert__operation"><span>相关操作</span></div>
+<div class="t-space t-space-horizontal" style="gap:16px;">
+  <div class="t-space-item">
+    <div class="t-alert t-alert--info">
+      <div class="t-alert__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle-filled">
+          <path fill="currentColor" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fill-opacity="0.9"></path>
+        </svg></div>
+      <div class="t-alert__content">
+        <div class="t-alert__message">
+          <div class="t-alert__description">这是一条普通的消息提示</div>
+          <div class="t-alert__operation"><span>相关操作</span></div>
+        </div>
       </div>
+      <div class="t-alert__close"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close">
+          <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+        </svg></div>
     </div>
-    <div class="t-alert__close"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close">
-        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
-      </svg></div>
   </div>
-</t-sapce>
+</div>
 `;
 
 exports[`ssr snapshot test renders ./src/alert/_example/title.vue correctly 1`] = `
@@ -20334,122 +20336,134 @@ exports[`ssr snapshot test renders ./src/transfer/_example/tree.vue correctly 1`
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/activable.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可高亮</label></div>
-        <div class="t-form__controls" style="margin-left:120;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:16px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可高亮</label></div>
+            <div class="t-form__controls" style="margin-left:120;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可多选高亮</label></div>
-        <div class="t-form__controls" style="margin-left:120;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可多选高亮</label></div>
+            <div class="t-form__controls" style="margin-left:120;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
-        <div class="t-form__controls" style="margin-left:120;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
+            <div class="t-form__controls" style="margin-left:120;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t15" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t16" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
-      <div data-value="t17" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
-      <div data-value="t18" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-      <div data-value="t19" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
-      <div data-value="t20" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t15" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t16" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
+        <div data-value="t17" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
+        <div data-value="t18" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+        <div data-value="t19" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
+        <div data-value="t20" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/base.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t33" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-      <div data-value="t36" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-      <div data-value="t39" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-      <div data-value="t42" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-    </transition-group-stub>
+<div class="t-space t-space-horizontal" style="gap:16px;">
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t33" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+        <div data-value="t36" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+        <div data-value="t39" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+        <div data-value="t42" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/checkable.vue correctly 1`] = `
-<div class="tdesign-demo-block-column-large">
-  <form class="t-form">
-    <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">可选</label></div>
-      <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content">
-          <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-            <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:16px;">
+  <div class="t-space-item">
+    <form class="t-form">
+      <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
+        <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">可选</label></div>
+        <div class="t-form__controls" style="margin-left:100px;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">严格模式</label></div>
-      <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content">
-          <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-            <div class="t-switch__content t-size-m"></div>
+      <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
+        <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">严格模式</label></div>
+        <div class="t-form__controls" style="margin-left:100px;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">选中值模式</label></div>
-      <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content">
-          <div class="t-radio-group t-size-m t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="onlyLeaf" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">onlyLeaf</span></label><label class="t-radio-button"><input type="radio" value="parentFirst" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">parentFirst</span></label><label class="t-radio-button"><input type="radio" value="all" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">all</span></label>
-            <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+      <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
+        <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">选中值模式</label></div>
+        <div class="t-form__controls" style="margin-left:100px;">
+          <div class="t-form__controls-content">
+            <div class="t-radio-group t-size-m t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="onlyLeaf" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">onlyLeaf</span></label><label class="t-radio-button"><input type="radio" value="parentFirst" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">parentFirst</span></label><label class="t-radio-button"><input type="radio" value="all" name="value-mode" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">all</span></label>
+              <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+            </div>
           </div>
         </div>
       </div>
+    </form>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
+        <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1</span></label></div>
+        <div data-value="1.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1</span></label></div>
+        <div data-value="1.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.1</span></label></div>
+        <div data-value="1.1.1.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.2</span></label></div>
+        <div data-value="1.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2</span></label></div>
+        <div data-value="1.1.2.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2.1</span></label></div>
+        <div data-value="1.1.2.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2.2</span></label></div>
+        <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2</span></label></div>
+        <div data-value="1.2.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1</span></label></div>
+        <div data-value="1.2.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1.1</span></label></div>
+        <div data-value="1.2.1.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1.2</span></label></div>
+        <div data-value="1.2.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2</span></label></div>
+        <div data-value="1.2.2.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2.1</span></label></div>
+        <div data-value="1.2.2.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2.2</span></label></div>
+        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
+        <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.1</span></label></div>
+        <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.2</span></label></div>
+      </transition-group-stub>
     </div>
-  </form>
-  <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
-      <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1</span></label></div>
-      <div data-value="1.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1</span></label></div>
-      <div data-value="1.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.1</span></label></div>
-      <div data-value="1.1.1.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.2</span></label></div>
-      <div data-value="1.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2</span></label></div>
-      <div data-value="1.1.2.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2.1</span></label></div>
-      <div data-value="1.1.2.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2.2</span></label></div>
-      <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2</span></label></div>
-      <div data-value="1.2.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1</span></label></div>
-      <div data-value="1.2.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1.1</span></label></div>
-      <div data-value="1.2.1.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.1.2</span></label></div>
-      <div data-value="1.2.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2</span></label></div>
-      <div data-value="1.2.2.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2.1</span></label></div>
-      <div data-value="1.2.2.2" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2.2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2.2.2</span></label></div>
-      <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
-      <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.1</span></label></div>
-      <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.2</span></label></div>
-    </transition-group-stub>
   </div>
 </div>
 `;
@@ -20636,548 +20650,680 @@ exports[`ssr snapshot test renders ./src/tree/_example/disabled.vue correctly 1`
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/empty.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="t-tree t-tree--transition">
-    <div class="t-tree__empty">暂无数据</div>
-  </div><br>
-  <div class="t-tree t-tree--transition">
-    <div class="t-tree__empty">😊 空数据（string）</div>
-  </div><br>
-  <div class="t-tree t-tree--transition">
-    <div class="t-tree__empty">
-      <div>😊 空数据（ empty props ）</div>
+<div class="t-space t-space-vertical" style="gap:20px;">
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition">
+      <div class="t-tree__empty">暂无数据</div>
     </div>
-  </div><br>
-  <div class="t-tree t-tree--transition">
-    <div class="t-tree__empty">
-      <div>😊 空数据（slot）</div>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition">
+      <div class="t-tree__empty">😊 空数据（string）</div>
+    </div>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition">
+      <div class="t-tree__empty">
+        <div>😊 空数据（ empty props ）</div>
+      </div>
+    </div>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition">
+      <div class="t-tree__empty">
+        <div>😊 空数据（slot）</div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-all.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">切换数据</label></div>
-        <div class="t-form__controls" style="margin-left:150;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:16px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">切换数据</label></div>
+            <div class="t-form__controls" style="margin-left:150;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">展开动画</label></div>
-        <div class="t-form__controls" style="margin-left:150;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+          <div class="t-form__item t-form-item__">
+            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">展开动画</label></div>
+            <div class="t-form__controls" style="margin-left:150;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked" style="margin-bottom:5px;"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="t-tree t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t95" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t96" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
-      <div data-value="t97" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1.1</span></span></div>
-      <div data-value="t98" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1.2</span></span></div>
-      <div data-value="t99" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
-      <div data-value="t100" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2.1</span></span></div>
-      <div data-value="t101" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2.2</span></span></div>
-      <div data-value="t102" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-      <div data-value="t103" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
-      <div data-value="t104" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t95" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t96" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
+        <div data-value="t97" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1.1</span></span></div>
+        <div data-value="t98" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1.2</span></span></div>
+        <div data-value="t99" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
+        <div data-value="t100" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2.1</span></span></div>
+        <div data-value="t101" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2.2</span></span></div>
+        <div data-value="t102" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+        <div data-value="t103" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
+        <div data-value="t104" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-level.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t115" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t116" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
-      <div data-value="t119" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
-      <div data-value="t122" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-      <div data-value="t123" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
-      <div data-value="t124" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
-    </transition-group-stub>
+<div class="tdesign-tree-demo t-space t-space-horizontal" style="gap:16px;">
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t115" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t116" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
+        <div data-value="t119" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
+        <div data-value="t122" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+        <div data-value="t123" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
+        <div data-value="t124" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">互斥展开</label></div>
-        <div class="t-form__controls" style="margin-left:120;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:16px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">互斥展开</label></div>
+            <div class="t-form__controls" style="margin-left:120;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
-        <div class="t-form__controls" style="margin-left:120;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
+            <div class="t-form__controls" style="margin-left:120;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t139" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t146" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t139" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t146" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/filter.vue correctly 1`] = `
-<div class="tdesign-demo-block-column-large">
-  <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
-    <div class="t-input__wrap">
-      <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="" class="t-input__inner"></div>
+<div class="t-space t-space-vertical" style="gap:16px;">
+  <div class="t-space-item">
+    <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
+      <div class="t-input__wrap">
+        <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="" class="t-input__inner"></div>
+      </div>
     </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="1" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="2" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/icon.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <h3>render:</h3>
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t157" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t158" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-    </transition-group-stub>
+<div class="t-space t-space-vertical" style="gap:0px;">
+  <div class="t-space-item">
+    <h3>render:</h3>
   </div>
-  <h3>scope slot:</h3>
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t159" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-      <div data-value="t160" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t157" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t158" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+      </transition-group-stub>
+    </div>
+  </div>
+  <div class="t-space-item">
+    <h3>scope slot:</h3>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t159" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+        <div data-value="t160" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/label.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <h3>render:</h3>
-  <div class="t-tree t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t173" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t173, label: 1</strong></span></span></div>
-      <div data-value="t174" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t174, label: 1.1</strong></span></span></div>
-      <div data-value="t175" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t175, label: 1.2</strong></span></span></div>
-      <div data-value="t176" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t176, label: 2</strong></span></span></div>
-      <div data-value="t177" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t177, label: 2.1</strong></span></span></div>
-      <div data-value="t178" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t178, label: 2.2</strong></span></span></div>
-    </transition-group-stub>
+<div class="t-space t-space-vertical" style="gap:20px;">
+  <div class="t-space-item">
+    <h3>render:</h3>
   </div>
-  <h3>scope slot:</h3>
-  <div class="t-tree t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="t179" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t179" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1, value: t179</font></span></label></div>
-      <div data-value="t180" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t180" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.1, value: t180</font></span></label></div>
-      <div data-value="t181" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t181" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.2, value: t181</font></span></label></div>
-      <div data-value="t182" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t182" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2, value: t182</font></span></label></div>
-      <div data-value="t183" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t183" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.1, value: t183</font></span></label></div>
-      <div data-value="t184" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t184" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.2, value: t184</font></span></label></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--transition" style="margin-bottom:20px;">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t173" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t173, label: 1</strong></span></span></div>
+        <div data-value="t174" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t174, label: 1.1</strong></span></span></div>
+        <div data-value="t175" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t175, label: 1.2</strong></span></span></div>
+        <div data-value="t176" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t176, label: 2</strong></span></span></div>
+        <div data-value="t177" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t177, label: 2.1</strong></span></span></div>
+        <div data-value="t178" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t178, label: 2.2</strong></span></span></div>
+      </transition-group-stub>
+    </div>
+  </div>
+  <div class="t-space-item">
+    <h3>scope slot:</h3>
+  </div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--checkable t-tree--transition" style="margin-bottom:20px;">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="t179" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t179" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1, value: t179</font></span></label></div>
+        <div data-value="t180" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t180" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.1, value: t180</font></span></label></div>
+        <div data-value="t181" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t181" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.2, value: t181</font></span></label></div>
+        <div data-value="t182" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t182" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2, value: t182</font></span></label></div>
+        <div data-value="t183" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t183" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.1, value: t183</font></span></label></div>
+        <div data-value="t184" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t184" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.2, value: t184</font></span></label></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/lazy.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <h3 class="title">数据延迟加载</h3>
-  <p class="tips">默认为点击加载数据。</p>
-  <p class="tips">
-    valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
-  </p>
-  <p class="tips">所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
-        <div class="t-form__controls" style="margin-left:150;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <h3>数据延迟加载</h3>
+  </div>
+  <div class="t-space-item">
+    <p>默认为点击加载数据。</p>
+  </div>
+  <div class="t-space-item">
+    <p>
+      valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
+    </p>
+  </div>
+  <div class="t-space-item">
+    <p>所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
+  </div>
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:16px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
+            <div class="t-form__controls" style="margin-left:150;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">严格模式</label></div>
-        <div class="t-form__controls" style="margin-left:150;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">严格模式</label></div>
+            <div class="t-form__controls" style="margin-left:150;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="1" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
-      <div data-value="2" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
+        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/line.vue correctly 1`] = `
-<div class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line">
-  <form class="t-form">
-    <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示连线</label></div>
-      <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content">
-          <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-            <div class="t-switch__content t-size-m"></div>
+<div class=" tdesign-tree-line t-space t-space-vertical" style="gap:16px;">
+  <div class="t-space-item">
+    <form class="t-form">
+      <div class="t-space t-space-vertical" style="gap:5px;">
+        <div class="t-space-item">
+          <div class="t-form__item t-form-item__">
+            <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示连线</label></div>
+            <div class="t-form__controls" style="margin-left:100px;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
-    <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示图标</label></div>
-      <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content">
-          <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-            <div class="t-switch__content t-size-m"></div>
+        <div class="t-space-item">
+          <div class="t-form__item t-form-item__">
+            <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示图标</label></div>
+            <div class="t-form__controls" style="margin-left:100px;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </form>
-  <div class="tdesign-demo-block-column">
-    <div class="t-tree t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-        <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
-        <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
-        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-        <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
-        <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span class="t-tree__line t-tree__line--first" style="--level:2;box-shadow:calc(-1 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span></div>
-        <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span class="t-tree__line t-tree__line--first" style="--level:3;box-shadow:calc(-1 * var(--space)) 0 var(--color),calc(-2 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span></div>
-        <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:4;box-shadow:calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span></div>
-        <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;"><span class="t-tree__line t-tree__line--leaf" style="--level:4;box-shadow:calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span></div>
-        <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span class="t-tree__line t-tree__line--leaf" style="--level:2;box-shadow:calc(-1 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span></div>
-        <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
-        <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span></div>
-        <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span></div>
-        <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span></div>
-        <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span></div>
-      </transition-group-stub>
-    </div>
-    <h3>render</h3>
-    <div class="t-tree t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span>
-        </div>
-        <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span>
-        </div>
-        <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span>
-        </div>
-        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line">
-            <div class="custom-line-box"></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span>
-        </div>
-        <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"><span></span></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span>
-        </div>
-        <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;">
-          <div class="custom-line custom-line-first custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span>
-        </div>
-        <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span>
-        </div>
-        <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span>
-        </div>
-        <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line">
-            <div class="custom-line-box"></div>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span>
-        </div>
-        <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span>
-        </div>
-        <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span>
-        </div>
-        <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span>
+    </form>
+  </div>
+  <div class="t-space-item">
+    <div class="t-space t-space-vertical" style="gap:16px;">
+      <div class="t-space-item">
+        <div class="t-tree t-tree--transition">
+          <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+            <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+            <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
+            <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
+            <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+            <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
+            <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span class="t-tree__line t-tree__line--first" style="--level:2;box-shadow:calc(-1 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span></div>
+            <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;"><span class="t-tree__line t-tree__line--first" style="--level:3;box-shadow:calc(-1 * var(--space)) 0 var(--color),calc(-2 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span></div>
+            <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:4;box-shadow:calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span></div>
+            <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;"><span class="t-tree__line t-tree__line--leaf" style="--level:4;box-shadow:calc(-2 * var(--space)) 0 var(--color),calc(-3 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span></div>
+            <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span class="t-tree__line t-tree__line--leaf" style="--level:2;box-shadow:calc(-1 * var(--space)) 0 var(--color);"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span></div>
+            <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
+            <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span></div>
+            <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf t-tree__line--first" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span></div>
+            <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span class="t-tree__line t-tree__line--leaf" style="--level:1;box-shadow:;"></span><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span></div>
+            <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span></div>
+          </transition-group-stub>
         </div>
-      </transition-group-stub>
-    </div>
-    <h3>scope slot</h3>
-    <div class="t-tree t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span>
-        </div>
-        <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span>
-        </div>
-        <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span>
-        </div>
-        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line">
-            <div class="custom-line-box"></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span>
-        </div>
-        <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"><span></span></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span>
-        </div>
-        <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
-          <div class="custom-line custom-line-first">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;">
-          <div class="custom-line custom-line-first custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span>
-        </div>
-        <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span>
-        </div>
-        <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span>
-        </div>
-        <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span>
-        </div>
-        <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line">
-            <div class="custom-line-box"></div>
-            <!---->
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span>
-        </div>
-        <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-first custom-line-leaf">
-            <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span>
-        </div>
-        <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span>
-        </div>
-        <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
-          <div class="custom-line custom-line-leaf custom-line-last">
-            <div class="custom-line-box"></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
-                <use href="#t-icon-heart-filled"></use>
-              </svg></i>
-          </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span>
+      </div>
+      <div class="t-space-item">
+        <h3>render</h3>
+      </div>
+      <div class="t-space-item">
+        <div class="t-tree t-tree--transition">
+          <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+            <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span>
+            </div>
+            <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span>
+            </div>
+            <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span>
+            </div>
+            <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line">
+                <div class="custom-line-box"></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span>
+            </div>
+            <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"><span></span></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span>
+            </div>
+            <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;">
+              <div class="custom-line custom-line-first custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span>
+            </div>
+            <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span>
+            </div>
+            <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span>
+            </div>
+            <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line">
+                <div class="custom-line-box"></div>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span>
+            </div>
+            <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span>
+            </div>
+            <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span>
+            </div>
+            <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"></div><i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span>
+            </div>
+          </transition-group-stub>
         </div>
-      </transition-group-stub>
+      </div>
+      <div class="t-space-item">
+        <h3>scope slot</h3>
+      </div>
+      <div class="t-space-item">
+        <div class="t-tree t-tree--transition">
+          <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+            <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span>
+            </div>
+            <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span>
+            </div>
+            <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span>
+            </div>
+            <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line">
+                <div class="custom-line-box"></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span>
+            </div>
+            <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"><span></span></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span>
+            </div>
+            <div data-value="2.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
+              <div class="custom-line custom-line-first">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1" data-level="3" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:3;">
+              <div class="custom-line custom-line-first custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1.1" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.1</span></span>
+            </div>
+            <div data-value="2.1.1.1.2" data-level="4" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:4;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span class="custom-line-cross"></span><span></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.1.1.2</span></span>
+            </div>
+            <div data-value="2.1.2" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span class="custom-line-cross"></span><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1.2</span></span>
+            </div>
+            <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span>
+            </div>
+            <div data-value="3" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line">
+                <div class="custom-line-box"></div>
+                <!---->
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">3</span></span>
+            </div>
+            <div data-value="3.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-first custom-line-leaf">
+                <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.1</span></span>
+            </div>
+            <div data-value="3.2" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"><span></span></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">3.2</span></span>
+            </div>
+            <div data-value="4" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;">
+              <div class="custom-line custom-line-leaf custom-line-last">
+                <div class="custom-line-box"></div> <i class="custom-line-icon"><svg class="t-icon t-icon-heart-filled">
+                    <use href="#t-icon-heart-filled"></use>
+                  </svg></i>
+              </div><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">4</span></span>
+            </div>
+          </transition-group-stub>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/load.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
-        <div class="t-form__controls" style="margin-left:150;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:16px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-space t-space-vertical" style="gap:5px;">
+            <div class="t-space-item">
+              <div class="t-form__item t-form-item__">
+                <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
+                <div class="t-form__controls" style="margin-left:150;">
+                  <div class="t-form__controls-content">
+                    <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                      <div class="t-switch__content t-size-m"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><div class="t-loading--center t-size-m t-loading"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="medium" class="t-loading__gradient t-icon-loading"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
-      <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><div class="t-loading--center t-size-m t-loading"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="medium" class="t-loading__gradient t-icon-loading"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><div class="t-loading--center t-size-m t-loading"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="medium" class="t-loading__gradient t-icon-loading"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
+        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><div class="t-loading--center t-size-m t-loading"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="medium" class="t-loading__gradient t-icon-loading"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/operations.vue correctly 1`] = `
-<div class="tdesign-tree-demo">
-  <h3 class="title">Render:</h3>
-  <div class="t-tree t-tree--hoverable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1 | value: node1</span></span><span ignore="active,expand" class="t-tree__operations">value: node1</span></div>
-      <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2 | value: node2</span></span><span ignore="active,expand" class="t-tree__operations">value: node2</span></div>
-    </transition-group-stub>
+<div class="t-space t-space-vertical" style="gap:10px;">
+  <div class="t-space-item">
+    <h3>Render:</h3>
   </div>
-  <h3 class="title">Scope Slot:</h3>
-  <div class="operations">
-    <form class="t-form">
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:200;"><label for="">插入节点使用高亮节点</label></div>
-        <div class="t-form__controls" style="margin-left:200;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1 | value: node1</span></span><span ignore="active,expand" class="t-tree__operations">value: node1</span></div>
+        <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2 | value: node2</span></span><span ignore="active,expand" class="t-tree__operations">value: node2</span></div>
+      </transition-group-stub>
+    </div>
+  </div>
+  <div class="t-space-item">
+    <h3>Scope Slot:</h3>
+  </div>
+  <div class="t-space-item">
+    <div class="t-space t-space-horizontal" style="gap:5px;">
+      <div class="t-space-item">
+        <form class="t-form">
+          <div class="t-space t-space-vertical" style="gap:5px;">
+            <div class="t-space-item">
+              <div class="t-form__item t-form-item__">
+                <div class="t-form__label t-form__label--right" style="width:200;"><label for="">插入节点使用高亮节点</label></div>
+                <div class="t-form__controls" style="margin-left:200;">
+                  <div class="t-form__controls-content">
+                    <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                      <div class="t-switch__content t-size-m"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="t-form__item t-form-item__">
-        <div class="t-form__label t-form__label--right" style="width:200;"><label for="">子节点展开触发父节点展开</label></div>
-        <div class="t-form__controls" style="margin-left:200;">
-          <div class="t-form__controls-content">
-            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-              <div class="t-switch__content t-size-m"></div>
+            <div class="t-space-item">
+              <div class="t-form__item t-form-item__">
+                <div class="t-form__label t-form__label--right" style="width:200;"><label for="">子节点展开触发父节点展开</label></div>
+                <div class="t-form__controls" style="margin-left:200;">
+                  <div class="t-form__controls-content">
+                    <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                      <div class="t-switch__content t-size-m"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
-  <div class="operations">
+  <div class="t-space-item">
     <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
       <div class="t-input__wrap">
         <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="" class="t-input__inner"></div>
       </div>
     </div>
   </div>
-  <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1 | value: node1</span></label><span ignore="active,expand" class="t-tree__operations"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></span></div>
-      <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2 | value: node2</span></label><span ignore="active,expand" class="t-tree__operations"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button> <button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></span></div>
-    </transition-group-stub>
-  </div>
-  <h3 class="title">API:</h3>
-  <div class="operations"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取 value 为 'node1' 的单个节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有子节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有高亮节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点下的选中节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">插入一个根节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的父节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有父节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点在子节点中的位置</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">选中高亮节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">展开高亮节点</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点与其子节点的数据</span></button></div>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1 | value: node1</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
+    </div></span>
+  </div>
+  <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2 | value: node2</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
+  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
+  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
+  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
+</div></span></div>
+</transition-group-stub>
+</div>
+</div>
+<div class="t-space-item">
+  <h3>API:</h3>
+</div>
+<div class="t-space-item">
+  <div class="t-space t-space-horizontal" style="gap:16px;flex-wrap:wrap;">
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取 value 为 'node1' 的单个节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有子节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有高亮节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点下的选中节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">插入一个根节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的父节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有父节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点在子节点中的位置</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">选中高亮节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">展开高亮节点</span></button></div>
+    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点与其子节点的数据</span></button></div>
+  </div>
+</div>
+<div class="t-space-item">
   <p class="tips">* 相关信息通过控制台输出</p>
 </div>
+</div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/performance.vue correctly 1`] = `
@@ -21249,37 +21395,47 @@ exports[`ssr snapshot test renders ./src/tree/_example/state.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/sync.vue correctly 1`] = `
-<div class="tdesign-demo-block-column-large">
-  <div class="tdesign-demo-block-column">
-    <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">checked:</span>
-      <div class="t-input__wrap">
-        <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{1.1.1.1}, {1.1.1.2}" class="t-input__inner"></div>
+<div class="t-space t-space-vertical" style="gap:16px;">
+  <div class="t-space-item">
+    <div class="t-space t-space-vertical" style="gap:16px;">
+      <div class="t-space-item">
+        <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">checked:</span>
+          <div class="t-input__wrap">
+            <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{1.1.1.1}, {1.1.1.2}" class="t-input__inner"></div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">expanded:</span>
-      <div class="t-input__wrap">
-        <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{1}, {1.1}, {1.1.1}, {2}" class="t-input__inner"></div>
+      <div class="t-space-item">
+        <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">expanded:</span>
+          <div class="t-input__wrap">
+            <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{1}, {1.1}, {1.1.1}, {2}" class="t-input__inner"></div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">actived:</span>
-      <div class="t-input__wrap">
-        <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{2}" class="t-input__inner"></div>
+      <div class="t-space-item">
+        <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">actived:</span>
+          <div class="t-input__wrap">
+            <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="{2}" class="t-input__inner"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="t-tree t-tree--checkable t-tree--transition">
-    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-      <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-indeterminate t-tree__label"><input type="checkbox" indeterminate="indeterminate" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
-      <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-indeterminate t-tree__label"><input type="checkbox" indeterminate="indeterminate" name="1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1</span></label></div>
-      <div data-value="1.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1</span></label></div>
-      <div data-value="1.1.1.1" data-level="3" class="t-tree__item t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1.1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.1</span></label></div>
-      <div data-value="1.1.1.2" data-level="3" class="t-tree__item t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1.2" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.2</span></label></div>
-      <div data-value="1.1.2" data-level="2" class="t-tree__item t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2</span></label></div>
-      <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2</span></label></div>
-      <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-is-active"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
-      <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.1</span></label></div>
-      <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.2</span></label></div>
-    </transition-group-stub>
+  <div class="t-space-item">
+    <div class="t-tree t-tree--checkable t-tree--transition">
+      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+        <div data-value="1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-indeterminate t-tree__label"><input type="checkbox" indeterminate="indeterminate" name="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1</span></label></div>
+        <div data-value="1.1" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-indeterminate t-tree__label"><input type="checkbox" indeterminate="indeterminate" name="1.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1</span></label></div>
+        <div data-value="1.1.1" data-level="2" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1</span></label></div>
+        <div data-value="1.1.1.1" data-level="3" class="t-tree__item t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1.1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.1</span></label></div>
+        <div data-value="1.1.1.2" data-level="3" class="t-tree__item t-tree__item--visible" style="--level:3;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-is-checked t-tree__label"><input type="checkbox" name="1.1.1.2" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.1.2</span></label></div>
+        <div data-value="1.1.2" data-level="2" class="t-tree__item t-tree__item--visible" style="--level:2;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.1.2</span></label></div>
+        <div data-value="1.2" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="1.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1.2</span></label></div>
+        <div data-value="2" data-level="0" class="t-tree__item t-tree__item--open t-is-active t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-is-active"><input type="checkbox" name="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2</span></label></div>
+        <div data-value="2.1" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.1</span></label></div>
+        <div data-value="2.2" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="2.2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2.2</span></label></div>
+      </transition-group-stub>
+    </div>
   </div>
 </div>
 `;

From 10ad71e8720c0ea912c84ee1333b99de8e7b5a31 Mon Sep 17 00:00:00 2001
From: lmmlala <1490970255@qq.com>
Date: Mon, 29 Aug 2022 19:34:01 +0800
Subject: [PATCH 2/4] chore: updare tree snapshots

---
 test/ssr/__snapshots__/ssr.test.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index dbb159be8..634327749 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -20923,7 +20923,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/lazy.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/line.vue correctly 1`] = `
-<div class=" tdesign-tree-line t-space t-space-vertical" style="gap:16px;">
+<div class="tdesign-tree-line t-space t-space-vertical" style="gap:16px;">
   <div class="t-space-item">
     <form class="t-form">
       <div class="t-space t-space-vertical" style="gap:5px;">

From bc7a325a01e9d2c11dbc967830d8c2adda78a271 Mon Sep 17 00:00:00 2001
From: lmmlala <1490970255@qq.com>
Date: Mon, 5 Sep 2022 12:53:15 +0800
Subject: [PATCH 3/4] chore: update tree demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 3436 ++++++++---------
 src/tree/_example/activable.vue               |   49 +-
 src/tree/_example/base.vue                    |   25 +-
 src/tree/_example/checkable.vue               |    2 +-
 src/tree/_example/empty.vue                   |   32 +-
 src/tree/_example/expand-all.vue              |   43 +-
 src/tree/_example/expand-level.vue            |   25 +-
 src/tree/_example/expand-mutex.vue            |   43 +-
 src/tree/_example/filter.vue                  |    2 +-
 src/tree/_example/icon.vue                    |   49 +-
 src/tree/_example/label.vue                   |   43 +-
 src/tree/_example/lazy.vue                    |   46 +-
 src/tree/_example/line.vue                    |   27 +-
 src/tree/_example/load.vue                    |   39 +-
 src/tree/_example/operations.vue              |  158 +-
 src/tree/_example/sync.vue                    |    4 +-
 test/ssr/__snapshots__/ssr.test.js.snap       |  508 ++-
 17 files changed, 2335 insertions(+), 2196 deletions(-)

diff --git a/src/tree/__tests__/__snapshots__/demo.test.js.snap b/src/tree/__tests__/__snapshots__/demo.test.js.snap
index 90fa67e69..5b0a25ea4 100644
--- a/src/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/src/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -8,117 +8,105 @@ exports[`Tree Tree activableVue demo works fine 1`] = `
   <div
     class="t-space-item"
   >
-    <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-space-item"
+        class="t-form__item t-form-item__"
       >
-        <form
-          class="t-form"
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            节点可高亮
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                节点可高亮
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-           
+        </div>
+      </div>
+       
+      <div
+        class="t-form__item t-form-item__"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            节点可多选高亮
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                节点可多选高亮
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-           
+        </div>
+      </div>
+       
+      <div
+        class="t-form__item t-form-item__"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            整个节点可点击
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                整个节点可点击
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="t-space-item"
@@ -293,164 +281,157 @@ exports[`Tree Tree activableVue demo works fine 1`] = `
 `;
 
 exports[`Tree Tree baseVue demo works fine 1`] = `
-<div
-  class="t-space t-space-horizontal"
-  style="gap: 16px;"
->
+<div>
   <div
-    class="t-space-item"
+    class="t-tree t-tree--hoverable t-tree--transition"
   >
-    <div
-      class="t-tree t-tree--hoverable t-tree--transition"
+    <transition-group-stub
+      class="t-tree__list"
+      enteractiveclass="t-tree__item--enter-active"
+      leaveactiveclass="t-tree__item--leave-active"
+      tag="div"
     >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="0"
+        data-value="t7"
+        style="--level: 0;"
       >
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t7"
-          style="--level: 0;"
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              第一段
-            </span>
+            第一段
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t10"
-          style="--level: 0;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="0"
+        data-value="t10"
+        style="--level: 0;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
+        >
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
         >
           <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+            style="position: relative;"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              第一段
-            </span>
+            第一段
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t13"
-          style="--level: 0;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="0"
+        data-value="t13"
+        style="--level: 0;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              第一段
-            </span>
+            第一段
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t16"
-          style="--level: 0;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="0"
+        data-value="t16"
+        style="--level: 0;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              第一段
-            </span>
+            第一段
           </span>
-        </div>
-      </transition-group-stub>
-    </div>
+        </span>
+      </div>
+    </transition-group-stub>
   </div>
 </div>
 `;
@@ -458,7 +439,7 @@ exports[`Tree Tree baseVue demo works fine 1`] = `
 exports[`Tree Tree checkableVue demo works fine 1`] = `
 <div
   class="t-space t-space-vertical"
-  style="gap: 16px;"
+  style="gap: 32px;"
 >
   <div
     class="t-space-item"
@@ -3210,6 +3191,11 @@ exports[`Tree Tree emptyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="t-space-item"
+  >
+    <br />
+  </div>
   <div
     class="t-space-item"
   >
@@ -3223,6 +3209,11 @@ exports[`Tree Tree emptyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="t-space-item"
+  >
+    <br />
+  </div>
   <div
     class="t-space-item"
   >
@@ -3238,6 +3229,11 @@ exports[`Tree Tree emptyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="t-space-item"
+  >
+    <br />
+  </div>
   <div
     class="t-space-item"
   >
@@ -3264,84 +3260,73 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
   <div
     class="t-space-item"
   >
-    <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-space-item"
+        class="t-form__item t-form-item__"
       >
-        <form
-          class="t-form"
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            切换数据
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                切换数据
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-           
+        </div>
+      </div>
+       
+      <div
+        class="t-form__item t-form-item__"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            展开动画
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
           <div
-            class="t-form__item t-form-item__"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                展开动画
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                  style="margin-bottom: 5px;"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="t-space-item"
@@ -3628,206 +3613,199 @@ exports[`Tree Tree expandAllVue demo works fine 1`] = `
 `;
 
 exports[`Tree Tree expandLevelVue demo works fine 1`] = `
-<div
-  class="tdesign-tree-demo t-space t-space-horizontal"
-  style="gap: 16px;"
->
+<div>
   <div
-    class="t-space-item"
+    class="t-tree t-tree--hoverable t-tree--transition"
   >
-    <div
-      class="t-tree t-tree--hoverable t-tree--transition"
-    >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+    <transition-group-stub
+      class="t-tree__list"
+      enteractiveclass="t-tree__item--enter-active"
+      leaveactiveclass="t-tree__item--leave-active"
+      tag="div"
+    >
+      <div
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        data-level="0"
+        data-value="t49"
+        style="--level: 0;"
       >
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="t49"
-          style="--level: 0;"
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              1
-            </span>
+            1
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="1"
-          data-value="t50"
-          style="--level: 1;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="1"
+        data-value="t50"
+        style="--level: 1;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              1.1
-            </span>
+            1.1
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="1"
-          data-value="t53"
-          style="--level: 1;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="1"
+        data-value="t53"
+        style="--level: 1;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              1.2
-            </span>
+            1.2
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="t56"
-          style="--level: 0;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--open t-tree__item--visible"
+        data-level="0"
+        data-value="t56"
+        style="--level: 0;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon t-tree__icon--default"
+          ignore="active"
+          trigger="expand"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <svg
+            class="t-icon t-icon-caret-right-small"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
+            <path
+              d="M6 5v6l4.5-3L6 5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+        <span
+          class="t-tree__label"
+        >
           <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              2
-            </span>
+            2
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="1"
-          data-value="t57"
-          style="--level: 1;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="1"
+        data-value="t57"
+        style="--level: 1;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon"
+          ignore="active"
+          trigger="expand"
+        />
+        <span
+          class="t-tree__label"
         >
           <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              2.1
-            </span>
+            2.1
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="1"
-          data-value="t58"
-          style="--level: 1;"
+        </span>
+      </div>
+      <div
+        class="t-tree__item t-tree__item--visible"
+        data-level="1"
+        data-value="t58"
+        style="--level: 1;"
+      >
+        <span
+          class="t-tree__icon t-folder-icon"
+          ignore="active"
+          trigger="expand"
+        />
+        <span
+          class="t-tree__label"
         >
           <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
+            style="position: relative;"
           >
-            <span
-              style="position: relative;"
-            >
-              2.2
-            </span>
+            2.2
           </span>
-        </div>
-      </transition-group-stub>
-    </div>
+        </span>
+      </div>
+    </transition-group-stub>
   </div>
 </div>
 `;
@@ -3840,205 +3818,73 @@ exports[`Tree Tree expandMutexVue demo works fine 1`] = `
   <div
     class="t-space-item"
   >
-    <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-space-item"
+        class="t-form__item t-form-item__"
       >
-        <form
-          class="t-form"
+        <div
+          class="t-form__label t-form__label--right"
         >
-          <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+          <label
+            for=""
           >
-            <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                互斥展开
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
-            >
-              <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-           
+            互斥展开
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                整个节点可点击
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-space-item"
-  >
-    <div
-      class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
-    >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+       
+      <div
+        class="t-form__item t-form-item__"
       >
         <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t59"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t66"
-          style="--level: 0;"
+          class="t-form__label t-form__label--right"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
-            >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
+          <label
+            for=""
           >
-            <span
-              style="position: relative;"
-            >
-              2
-            </span>
-          </span>
+            整个节点可点击
+          </label>
         </div>
-      </transition-group-stub>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Tree Tree filterVue demo works fine 1`] = `
-<div
-  class="t-space t-space-vertical"
-  style="gap: 16px;"
->
-  <div
-    class="t-space-item"
-  >
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        filter:
-      </span>
-      <div
-        class="t-input__wrap"
-      >
         <div
-          class="t-input t-size-m t-is-default"
+          class="t-form__controls"
         >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
+          <div
+            class="t-form__controls-content"
+          >
+            <div
+              class="t-switch t-size-m t-is-checked"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="t-space-item"
@@ -4055,7 +3901,7 @@ exports[`Tree Tree filterVue demo works fine 1`] = `
         <div
           class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="1"
+          data-value="t59"
           style="--level: 0;"
         >
           <span
@@ -4090,7 +3936,7 @@ exports[`Tree Tree filterVue demo works fine 1`] = `
         <div
           class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="2"
+          data-value="t66"
           style="--level: 0;"
         >
           <span
@@ -4128,194 +3974,44 @@ exports[`Tree Tree filterVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Tree Tree iconVue demo works fine 1`] = `
+exports[`Tree Tree filterVue demo works fine 1`] = `
 <div
   class="t-space t-space-vertical"
-  style="gap: 0px;"
+  style="gap: 32px;"
 >
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      render:
-    </h3>
-  </div>
   <div
     class="t-space-item"
   >
     <div
-      class="t-tree t-tree--hoverable t-tree--transition"
-      style="margin-bottom: 20px;"
+      class="t-input-adornment t-input-adornment--prepend"
     >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+      <span
+        class="t-input-adornment__prepend"
       >
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t73"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-folder"
-            >
-              <use
-                href="#t-icon-folder"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t74"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-folder"
-            >
-              <use
-                href="#t-icon-folder"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2
-            </span>
-          </span>
-        </div>
-      </transition-group-stub>
-    </div>
-  </div>
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      scope slot:
-    </h3>
-  </div>
-  <div
-    class="t-space-item"
-  >
-    <div
-      class="t-tree t-tree--hoverable t-tree--transition"
-      style="margin-bottom: 20px;"
-    >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+        filter:
+      </span>
+      <div
+        class="t-input__wrap"
       >
         <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t75"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right"
-            >
-              <use
-                href="#t-icon-caret-right"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              1
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--visible"
-          data-level="0"
-          data-value="t76"
-          style="--level: 0;"
+          class="t-input t-size-m t-is-default"
         >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right"
-            >
-              <use
-                href="#t-icon-caret-right"
-              />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              2
-            </span>
-          </span>
+          <input
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
+          />
         </div>
-      </transition-group-stub>
+      </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`Tree Tree labelVue demo works fine 1`] = `
-<div
-  class="t-space t-space-vertical"
-  style="gap: 20px;"
->
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      render:
-    </h3>
-  </div>
   <div
     class="t-space-item"
   >
     <div
-      class="t-tree t-tree--transition"
-      style="margin-bottom: 20px;"
+      class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node"
     >
       <transition-group-stub
         class="t-tree__list"
@@ -4324,9 +4020,9 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
         tag="div"
       >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="t77"
+          data-value="1"
           style="--level: 0;"
         >
           <span
@@ -4354,62 +4050,14 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
             <span
               style="position: relative;"
             >
-              <strong>
-                value: t77, label: 1
-              </strong>
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t78"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              <strong>
-                value: t78, label: 1.1
-              </strong>
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t79"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              <strong>
-                value: t79, label: 1.2
-              </strong>
+              1
             </span>
           </span>
         </div>
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
+          class="t-tree__item t-tree__item--visible"
           data-level="0"
-          data-value="t80"
+          data-value="2"
           style="--level: 0;"
         >
           <span
@@ -4429,322 +4077,633 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
                 fill="currentColor"
                 fill-opacity="0.9"
               />
-            </svg>
-          </span>
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              <strong>
-                value: t80, label: 2
-              </strong>
-            </span>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t81"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
-            >
-              <strong>
-                value: t81, label: 2.1
-              </strong>
-            </span>
+            </svg>
           </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t82"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
           <span
             class="t-tree__label"
           >
             <span
               style="position: relative;"
             >
-              <strong>
-                value: t82, label: 2.2
-              </strong>
+              2
             </span>
           </span>
         </div>
       </transition-group-stub>
     </div>
   </div>
+</div>
+`;
+
+exports[`Tree Tree iconVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 20px;"
+>
   <div
     class="t-space-item"
   >
-    <h3>
-      scope slot:
-    </h3>
+    <div>
+      <h3>
+        render:
+      </h3>
+       
+      <div
+        class="t-tree t-tree--hoverable t-tree--transition"
+      >
+        <transition-group-stub
+          class="t-tree__list"
+          enteractiveclass="t-tree__item--enter-active"
+          leaveactiveclass="t-tree__item--leave-active"
+          tag="div"
+        >
+          <div
+            class="t-tree__item t-tree__item--visible"
+            data-level="0"
+            data-value="t73"
+            style="--level: 0;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
+            >
+              <svg
+                class="t-icon t-icon-folder"
+              >
+                <use
+                  href="#t-icon-folder"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                1
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--visible"
+            data-level="0"
+            data-value="t74"
+            style="--level: 0;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
+            >
+              <svg
+                class="t-icon t-icon-folder"
+              >
+                <use
+                  href="#t-icon-folder"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                2
+              </span>
+            </span>
+          </div>
+        </transition-group-stub>
+      </div>
+    </div>
   </div>
   <div
     class="t-space-item"
   >
-    <div
-      class="t-tree t-tree--checkable t-tree--transition"
-      style="margin-bottom: 20px;"
-    >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+    <div>
+      <h3>
+        scope slot:
+      </h3>
+       
+      <div
+        class="t-tree t-tree--hoverable t-tree--transition"
       >
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="t83"
-          style="--level: 0;"
+        <transition-group-stub
+          class="t-tree__list"
+          enteractiveclass="t-tree__item--enter-active"
+          leaveactiveclass="t-tree__item--leave-active"
+          tag="div"
         >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
+          <div
+            class="t-tree__item t-tree__item--visible"
+            data-level="0"
+            data-value="t75"
+            style="--level: 0;"
           >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
-              />
-            </svg>
-          </span>
-          <label
-            class="t-checkbox t-tree__label"
+              <svg
+                class="t-icon t-icon-caret-right"
+              >
+                <use
+                  href="#t-icon-caret-right"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                1
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--visible"
+            data-level="0"
+            data-value="t76"
+            style="--level: 0;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t83"
-              type="checkbox"
-              value=""
-            />
             <span
-              class="t-checkbox__input"
-            />
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
+            >
+              <svg
+                class="t-icon t-icon-caret-right"
+              >
+                <use
+                  href="#t-icon-caret-right"
+                />
+              </svg>
+            </span>
             <span
-              class="t-checkbox__label"
+              class="t-tree__label"
             >
-              <font
-                color="blue"
+              <span
+                style="position: relative;"
               >
-                label: 1, value: t83
-              </font>
+                2
+              </span>
             </span>
-          </label>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t84"
-          style="--level: 1;"
+          </div>
+        </transition-group-stub>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tree Tree labelVue demo works fine 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 20px;"
+>
+  <div
+    class="t-space-item"
+  >
+    <div>
+      <h3>
+        render:
+      </h3>
+       
+      <div
+        class="t-tree t-tree--transition"
+      >
+        <transition-group-stub
+          class="t-tree__list"
+          enteractiveclass="t-tree__item--enter-active"
+          leaveactiveclass="t-tree__item--leave-active"
+          tag="div"
         >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="0"
+            data-value="t77"
+            style="--level: 0;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t84"
-              type="checkbox"
-              value=""
+            <span
+              class="t-tree__icon t-folder-icon t-tree__icon--default"
+              ignore="active"
+              trigger="expand"
+            >
+              <svg
+                class="t-icon t-icon-caret-right-small"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M6 5v6l4.5-3L6 5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t77, label: 1
+                </strong>
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t78"
+            style="--level: 1;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
             <span
-              class="t-checkbox__input"
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t78, label: 1.1
+                </strong>
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t79"
+            style="--level: 1;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
             <span
-              class="t-checkbox__label"
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t79, label: 1.2
+                </strong>
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="0"
+            data-value="t80"
+            style="--level: 0;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon t-tree__icon--default"
+              ignore="active"
+              trigger="expand"
             >
-              <font
-                color="blue"
+              <svg
+                class="t-icon t-icon-caret-right-small"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
               >
-                label: 1.1, value: t84
-              </font>
+                <path
+                  d="M6 5v6l4.5-3L6 5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
             </span>
-          </label>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t85"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
+            <span
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t80, label: 2
+                </strong>
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t81"
+            style="--level: 1;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t85"
-              type="checkbox"
-              value=""
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
             <span
-              class="t-checkbox__input"
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t81, label: 2.1
+                </strong>
+              </span>
+            </span>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t82"
+            style="--level: 1;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
             <span
-              class="t-checkbox__label"
+              class="t-tree__label"
+            >
+              <span
+                style="position: relative;"
+              >
+                <strong>
+                  value: t82, label: 2.2
+                </strong>
+              </span>
+            </span>
+          </div>
+        </transition-group-stub>
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div>
+      <h3>
+        scope slot:
+      </h3>
+       
+      <div
+        class="t-tree t-tree--checkable t-tree--transition"
+      >
+        <transition-group-stub
+          class="t-tree__list"
+          enteractiveclass="t-tree__item--enter-active"
+          leaveactiveclass="t-tree__item--leave-active"
+          tag="div"
+        >
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="0"
+            data-value="t83"
+            style="--level: 0;"
+          >
+            <span
+              class="t-tree__icon t-folder-icon t-tree__icon--default"
+              ignore="active"
+              trigger="expand"
             >
-              <font
-                color="blue"
+              <svg
+                class="t-icon t-icon-caret-right-small"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
               >
-                label: 1.2, value: t85
-              </font>
+                <path
+                  d="M6 5v6l4.5-3L6 5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
             </span>
-          </label>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="t86"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon t-tree__icon--default"
-            ignore="active"
-            trigger="expand"
-          >
-            <svg
-              class="t-icon t-icon-caret-right-small"
-              fill="none"
-              height="1em"
-              viewBox="0 0 16 16"
-              width="1em"
+            <label
+              class="t-checkbox t-tree__label"
             >
-              <path
-                d="M6 5v6l4.5-3L6 5z"
-                fill="currentColor"
-                fill-opacity="0.9"
+              <input
+                class="t-checkbox__former"
+                name="t83"
+                type="checkbox"
+                value=""
               />
-            </svg>
-          </span>
-          <label
-            class="t-checkbox t-tree__label"
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
+              >
+                <font
+                  color="blue"
+                >
+                  label: 1, value: t83
+                </font>
+              </span>
+            </label>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t84"
+            style="--level: 1;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t86"
-              type="checkbox"
-              value=""
-            />
             <span
-              class="t-checkbox__input"
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
-            <span
-              class="t-checkbox__label"
+            <label
+              class="t-checkbox t-tree__label"
             >
-              <font
-                color="blue"
+              <input
+                class="t-checkbox__former"
+                name="t84"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
               >
-                label: 2, value: t86
-              </font>
-            </span>
-          </label>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t87"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
+                <font
+                  color="blue"
+                >
+                  label: 1.1, value: t84
+                </font>
+              </span>
+            </label>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t85"
+            style="--level: 1;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t87"
-              type="checkbox"
-              value=""
-            />
             <span
-              class="t-checkbox__input"
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
+            <label
+              class="t-checkbox t-tree__label"
+            >
+              <input
+                class="t-checkbox__former"
+                name="t85"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
+              >
+                <font
+                  color="blue"
+                >
+                  label: 1.2, value: t85
+                </font>
+              </span>
+            </label>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="0"
+            data-value="t86"
+            style="--level: 0;"
+          >
             <span
-              class="t-checkbox__label"
+              class="t-tree__icon t-folder-icon t-tree__icon--default"
+              ignore="active"
+              trigger="expand"
             >
-              <font
-                color="blue"
+              <svg
+                class="t-icon t-icon-caret-right-small"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
               >
-                label: 2.1, value: t87
-              </font>
+                <path
+                  d="M6 5v6l4.5-3L6 5z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
             </span>
-          </label>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="1"
-          data-value="t88"
-          style="--level: 1;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
+            <label
+              class="t-checkbox t-tree__label"
+            >
+              <input
+                class="t-checkbox__former"
+                name="t86"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
+              >
+                <font
+                  color="blue"
+                >
+                  label: 2, value: t86
+                </font>
+              </span>
+            </label>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t87"
+            style="--level: 1;"
           >
-            <input
-              class="t-checkbox__former"
-              name="t88"
-              type="checkbox"
-              value=""
-            />
             <span
-              class="t-checkbox__input"
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
             />
+            <label
+              class="t-checkbox t-tree__label"
+            >
+              <input
+                class="t-checkbox__former"
+                name="t87"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
+              >
+                <font
+                  color="blue"
+                >
+                  label: 2.1, value: t87
+                </font>
+              </span>
+            </label>
+          </div>
+          <div
+            class="t-tree__item t-tree__item--open t-tree__item--visible"
+            data-level="1"
+            data-value="t88"
+            style="--level: 1;"
+          >
             <span
-              class="t-checkbox__label"
+              class="t-tree__icon t-folder-icon"
+              ignore="active"
+              trigger="expand"
+            />
+            <label
+              class="t-checkbox t-tree__label"
             >
-              <font
-                color="blue"
+              <input
+                class="t-checkbox__former"
+                name="t88"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+              <span
+                class="t-checkbox__label"
               >
-                label: 2.2, value: t88
-              </font>
-            </span>
-          </label>
-        </div>
-      </transition-group-stub>
+                <font
+                  color="blue"
+                >
+                  label: 2.2, value: t88
+                </font>
+              </span>
+            </label>
+          </div>
+        </transition-group-stub>
+      </div>
     </div>
   </div>
 </div>
@@ -4788,84 +4747,73 @@ exports[`Tree Tree lazyVue demo works fine 1`] = `
   <div
     class="t-space-item"
   >
-    <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-space-item"
+        class="t-form__item t-form-item__"
       >
-        <form
-          class="t-form"
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            可选
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                可选
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-           
+        </div>
+      </div>
+       
+      <div
+        class="t-form__item t-form-item__"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            严格模式
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+        >
           <div
-            class="t-form__item t-form-item__"
-            style="margin-bottom: 5px;"
+            class="t-form__controls-content"
           >
-            <div
-              class="t-form__label t-form__label--right"
-            >
-              <label
-                for=""
-              >
-                严格模式
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
-            >
-              <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+            <div
+              class="t-switch t-size-m"
+            >
+              <span
+                class="t-switch__handle"
+              />
+              <div
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="t-space-item"
@@ -4975,8 +4923,8 @@ exports[`Tree Tree lazyVue demo works fine 1`] = `
 
 exports[`Tree Tree lineVue demo works fine 1`] = `
 <div
-  class=" tdesign-tree-line t-space t-space-vertical"
-  style="gap: 16px;"
+  class="tdesign-tree-line t-space t-space-vertical"
+  style="gap: 32px;"
 >
   <div
     class="t-space-item"
@@ -4985,80 +4933,70 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
       class="t-form"
     >
       <div
-        class="t-space t-space-vertical"
-        style="gap: 5px;"
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
       >
         <div
-          class="t-space-item"
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
+        >
+          <label
+            for=""
+          >
+            显示连线
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
+          style="margin-left: 100px;"
         >
           <div
-            class="t-form__item t-form-item__"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-              style="width: 100px;"
-            >
-              <label
-                for=""
-              >
-                显示连线
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
-              style="margin-left: 100px;"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
         </div>
+      </div>
+       
+      <div
+        class="t-form__item t-form-item__"
+        style="margin-bottom: 16px;"
+      >
+        <div
+          class="t-form__label t-form__label--right"
+          style="width: 100px;"
+        >
+          <label
+            for=""
+          >
+            显示图标
+          </label>
+        </div>
         <div
-          class="t-space-item"
+          class="t-form__controls"
+          style="margin-left: 100px;"
         >
           <div
-            class="t-form__item t-form-item__"
+            class="t-form__controls-content"
           >
             <div
-              class="t-form__label t-form__label--right"
-              style="width: 100px;"
-            >
-              <label
-                for=""
-              >
-                显示图标
-              </label>
-            </div>
-            <div
-              class="t-form__controls"
-              style="margin-left: 100px;"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__controls-content"
-              >
-                <div
-                  class="t-switch t-size-m t-is-checked"
-                >
-                  <span
-                    class="t-switch__handle"
-                  />
-                  <div
-                    class="t-switch__content t-size-m"
-                  />
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
         </div>
@@ -5070,7 +5008,7 @@ exports[`Tree Tree lineVue demo works fine 1`] = `
   >
     <div
       class="t-space t-space-vertical"
-      style="gap: 16px;"
+      style="gap: 16px; width: 100%;"
     >
       <div
         class="t-space-item"
@@ -6962,59 +6900,41 @@ exports[`Tree Tree loadVue demo works fine 1`] = `
   <div
     class="t-space-item"
   >
-    <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px;"
+    <form
+      class="t-form"
     >
       <div
-        class="t-space-item"
+        class="t-form__item t-form-item__"
       >
-        <form
-          class="t-form"
+        <div
+          class="t-form__label t-form__label--right"
+        >
+          <label
+            for=""
+          >
+            可选
+          </label>
+        </div>
+        <div
+          class="t-form__controls"
         >
           <div
-            class="t-space t-space-vertical"
-            style="gap: 5px;"
+            class="t-form__controls-content"
           >
             <div
-              class="t-space-item"
+              class="t-switch t-size-m t-is-checked"
             >
+              <span
+                class="t-switch__handle"
+              />
               <div
-                class="t-form__item t-form-item__"
-              >
-                <div
-                  class="t-form__label t-form__label--right"
-                >
-                  <label
-                    for=""
-                  >
-                    可选
-                  </label>
-                </div>
-                <div
-                  class="t-form__controls"
-                >
-                  <div
-                    class="t-form__controls-content"
-                  >
-                    <div
-                      class="t-switch t-size-m t-is-checked"
-                    >
-                      <span
-                        class="t-switch__handle"
-                      />
-                      <div
-                        class="t-switch__content t-size-m"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+                class="t-switch__content t-size-m"
+              />
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="t-space-item"
@@ -7147,99 +7067,107 @@ exports[`Tree Tree loadVue demo works fine 1`] = `
 exports[`Tree Tree operationsVue demo works fine 1`] = `
 <div
   class="t-space t-space-vertical"
-  style="gap: 10px;"
+  style="gap: 20px;"
 >
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      Render:
-    </h3>
-  </div>
   <div
     class="t-space-item"
   >
     <div
-      class="t-tree t-tree--hoverable t-tree--transition"
-      style="margin-bottom: 20px;"
+      class="t-space t-space-vertical"
+      style="gap: 10px; width: 100%;"
     >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          Render:
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
       >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="node1"
-          style="--level: 0;"
+          class="t-tree t-tree--hoverable t-tree--transition"
         >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
+          <transition-group-stub
+            class="t-tree__list"
+            enteractiveclass="t-tree__item--enter-active"
+            leaveactiveclass="t-tree__item--leave-active"
+            tag="div"
           >
-            <span
-              style="position: relative;"
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="node1"
+              style="--level: 0;"
             >
-              1 | value: node1
-            </span>
-          </span>
-          <span
-            class="t-tree__operations"
-            ignore="active,expand"
-          >
-            value: node1
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="node2"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <span
-            class="t-tree__label"
-          >
-            <span
-              style="position: relative;"
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  1 | value: node1
+                </span>
+              </span>
+              <span
+                class="t-tree__operations"
+                ignore="active,expand"
+              >
+                value: node1
+              </span>
+            </div>
+            <div
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="node2"
+              style="--level: 0;"
             >
-              2 | value: node2
-            </span>
-          </span>
-          <span
-            class="t-tree__operations"
-            ignore="active,expand"
-          >
-            value: node2
-          </span>
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <span
+                class="t-tree__label"
+              >
+                <span
+                  style="position: relative;"
+                >
+                  2 | value: node2
+                </span>
+              </span>
+              <span
+                class="t-tree__operations"
+                ignore="active,expand"
+              >
+                value: node2
+              </span>
+            </div>
+          </transition-group-stub>
         </div>
-      </transition-group-stub>
+      </div>
     </div>
   </div>
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      Scope Slot:
-    </h3>
-  </div>
   <div
     class="t-space-item"
   >
     <div
-      class="t-space t-space-horizontal"
-      style="gap: 5px;"
+      class="t-space t-space-vertical"
+      style="gap: 10px; width: 100%;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          Scope Slot:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -7247,512 +7175,510 @@ exports[`Tree Tree operationsVue demo works fine 1`] = `
           class="t-form"
         >
           <div
-            class="t-space t-space-vertical"
-            style="gap: 5px;"
+            class="t-form__item t-form-item__"
+            style="margin-bottom: 5px;"
           >
             <div
-              class="t-space-item"
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                插入节点使用高亮节点
+              </label>
+            </div>
+            <div
+              class="t-form__controls"
             >
               <div
-                class="t-form__item t-form-item__"
+                class="t-form__controls-content"
               >
                 <div
-                  class="t-form__label t-form__label--right"
-                >
-                  <label
-                    for=""
-                  >
-                    插入节点使用高亮节点
-                  </label>
-                </div>
-                <div
-                  class="t-form__controls"
+                  class="t-switch t-size-m"
                 >
+                  <span
+                    class="t-switch__handle"
+                  />
                   <div
-                    class="t-form__controls-content"
-                  >
-                    <div
-                      class="t-switch t-size-m"
-                    >
-                      <span
-                        class="t-switch__handle"
-                      />
-                      <div
-                        class="t-switch__content t-size-m"
-                      />
-                    </div>
-                  </div>
+                    class="t-switch__content t-size-m"
+                  />
                 </div>
               </div>
             </div>
+          </div>
+           
+          <div
+            class="t-form__item t-form-item__"
+          >
+            <div
+              class="t-form__label t-form__label--right"
+            >
+              <label
+                for=""
+              >
+                子节点展开触发父节点展开
+              </label>
+            </div>
             <div
-              class="t-space-item"
+              class="t-form__controls"
             >
               <div
-                class="t-form__item t-form-item__"
+                class="t-form__controls-content"
               >
                 <div
-                  class="t-form__label t-form__label--right"
-                >
-                  <label
-                    for=""
-                  >
-                    子节点展开触发父节点展开
-                  </label>
-                </div>
-                <div
-                  class="t-form__controls"
+                  class="t-switch t-size-m t-is-checked"
                 >
+                  <span
+                    class="t-switch__handle"
+                  />
                   <div
-                    class="t-form__controls-content"
-                  >
-                    <div
-                      class="t-switch t-size-m t-is-checked"
-                    >
-                      <span
-                        class="t-switch__handle"
-                      />
-                      <div
-                        class="t-switch__content t-size-m"
-                      />
-                    </div>
-                  </div>
+                    class="t-switch__content t-size-m"
+                  />
                 </div>
               </div>
             </div>
           </div>
         </form>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-space-item"
-  >
-    <div
-      class="t-input-adornment t-input-adornment--prepend"
-    >
-      <span
-        class="t-input-adornment__prepend"
-      >
-        filter:
-      </span>
       <div
-        class="t-input__wrap"
+        class="t-space-item"
       >
         <div
-          class="t-input t-size-m t-is-default"
+          class="t-input-adornment t-input-adornment--prepend"
         >
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请输入"
-            type="text"
-            unselectable="off"
-          />
+          <span
+            class="t-input-adornment__prepend"
+          >
+            filter:
+          </span>
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-size-m t-is-default"
+            >
+              <input
+                autocomplete=""
+                class="t-input__inner"
+                placeholder="请输入"
+                type="text"
+                unselectable="off"
+              />
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="t-space-item"
-  >
-    <div
-      class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
-    >
-      <transition-group-stub
-        class="t-tree__list"
-        enteractiveclass="t-tree__item--enter-active"
-        leaveactiveclass="t-tree__item--leave-active"
-        tag="div"
+      <div
+        class="t-space-item"
       >
         <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="node1"
-          style="--level: 0;"
+          class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition"
         >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
-          >
-            <input
-              class="t-checkbox__former"
-              name="node1"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="t-checkbox__input"
-            />
-            <span
-              class="t-checkbox__label"
-            >
-              1 | value: node1
-            </span>
-          </label>
-          <span
-            class="t-tree__operations"
-            ignore="active,expand"
+          <transition-group-stub
+            class="t-tree__list"
+            enteractiveclass="t-tree__item--enter-active"
+            leaveactiveclass="t-tree__item--leave-active"
+            tag="div"
           >
             <div
-              class="t-space t-space-horizontal"
-              style="gap: 10px;"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="node1"
+              style="--level: 0;"
             >
-              <div
-                class="t-space-item"
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <label
+                class="t-checkbox t-tree__label"
               >
-                <button
-                  class="t-button t-size-s t-button--variant-base t-button--theme-primary"
-                  type="button"
+                <input
+                  class="t-checkbox__former"
+                  name="node1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+                <span
+                  class="t-checkbox__label"
                 >
-                  <span
-                    class="t-button__text"
-                  >
-                    添加子节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
+                  1 | value: node1
+                </span>
+              </label>
+              <span
+                class="t-tree__operations"
+                ignore="active,expand"
               >
-                <button
-                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-                  type="button"
+                <div
+                  class="t-space t-space-horizontal"
+                  style="gap: 10px;"
                 >
-                  <span
-                    class="t-button__text"
+                  <div
+                    class="t-space-item"
                   >
-                    前插节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
-              >
-                <button
-                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-                  type="button"
-                >
-                  <span
-                    class="t-button__text"
+                    <button
+                      class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        添加子节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
                   >
-                    后插节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
-              >
-                <button
-                  class="t-button t-size-s t-button--variant-base t-button--theme-danger"
-                  type="button"
-                >
-                  <span
-                    class="t-button__text"
+                    <button
+                      class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        前插节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
                   >
-                    删除
-                  </span>
-                </button>
-              </div>
+                    <button
+                      class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        后插节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
+                  >
+                    <button
+                      class="t-button t-size-s t-button--variant-base t-button--theme-danger"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        删除
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </span>
             </div>
-          </span>
-        </div>
-        <div
-          class="t-tree__item t-tree__item--open t-tree__item--visible"
-          data-level="0"
-          data-value="node2"
-          style="--level: 0;"
-        >
-          <span
-            class="t-tree__icon t-folder-icon"
-            ignore="active"
-            trigger="expand"
-          />
-          <label
-            class="t-checkbox t-tree__label"
-          >
-            <input
-              class="t-checkbox__former"
-              name="node2"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="t-checkbox__input"
-            />
-            <span
-              class="t-checkbox__label"
-            >
-              2 | value: node2
-            </span>
-          </label>
-          <span
-            class="t-tree__operations"
-            ignore="active,expand"
-          >
             <div
-              class="t-space t-space-horizontal"
-              style="gap: 10px;"
+              class="t-tree__item t-tree__item--open t-tree__item--visible"
+              data-level="0"
+              data-value="node2"
+              style="--level: 0;"
             >
-              <div
-                class="t-space-item"
-              >
-                <button
-                  class="t-button t-size-s t-button--variant-base t-button--theme-primary"
-                  type="button"
-                >
-                  <span
-                    class="t-button__text"
-                  >
-                    添加子节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
+              <span
+                class="t-tree__icon t-folder-icon"
+                ignore="active"
+                trigger="expand"
+              />
+              <label
+                class="t-checkbox t-tree__label"
               >
-                <button
-                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-                  type="button"
+                <input
+                  class="t-checkbox__former"
+                  name="node2"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+                <span
+                  class="t-checkbox__label"
                 >
-                  <span
-                    class="t-button__text"
-                  >
-                    前插节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
+                  2 | value: node2
+                </span>
+              </label>
+              <span
+                class="t-tree__operations"
+                ignore="active,expand"
               >
-                <button
-                  class="t-button t-size-s t-button--variant-outline t-button--theme-default"
-                  type="button"
+                <div
+                  class="t-space t-space-horizontal"
+                  style="gap: 10px;"
                 >
-                  <span
-                    class="t-button__text"
+                  <div
+                    class="t-space-item"
                   >
-                    后插节点
-                  </span>
-                </button>
-              </div>
-              <div
-                class="t-space-item"
-              >
-                <button
-                  class="t-button t-size-s t-button--variant-base t-button--theme-danger"
-                  type="button"
-                >
-                  <span
-                    class="t-button__text"
+                    <button
+                      class="t-button t-size-s t-button--variant-base t-button--theme-primary"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        添加子节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
                   >
-                    删除
-                  </span>
-                </button>
-              </div>
+                    <button
+                      class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        前插节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
+                  >
+                    <button
+                      class="t-button t-size-s t-button--variant-outline t-button--theme-default"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        后插节点
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="t-space-item"
+                  >
+                    <button
+                      class="t-button t-size-s t-button--variant-base t-button--theme-danger"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        删除
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </span>
             </div>
-          </span>
+          </transition-group-stub>
         </div>
-      </transition-group-stub>
+      </div>
     </div>
   </div>
-  <div
-    class="t-space-item"
-  >
-    <h3>
-      API:
-    </h3>
-  </div>
   <div
     class="t-space-item"
   >
     <div
-      class="t-space t-space-horizontal"
-      style="gap: 16px; flex-wrap: wrap;"
+      class="t-space t-space-vertical"
+      style="gap: 10px;"
     >
       <div
         class="t-space-item"
       >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
-          >
-            获取 value 为 'node1' 的单个节点
-          </span>
-        </button>
+        <h3>
+          API:
+        </h3>
       </div>
       <div
         class="t-space-item"
       >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
+        <div
+          class="t-space t-space-horizontal"
+          style="gap: 10px; flex-wrap: wrap;"
         >
-          <span
-            class="t-button__text"
+          <div
+            class="t-space-item"
           >
-            获取所有节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取 value 为 'node1' 的单个节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取高亮节点的所有子节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取所有节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取所有高亮节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点的所有子节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取高亮节点下的选中节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取所有高亮节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            插入一个根节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点下的选中节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取高亮节点的父节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                插入一个根节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取高亮节点的所有父节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点的父节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            获取高亮节点在子节点中的位置
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点的所有父节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            选中高亮节点
-          </span>
-        </button>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
-        >
-          <span
-            class="t-button__text"
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点在子节点中的位置
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
           >
-            展开高亮节点
-          </span>
-        </button>
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                选中高亮节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                展开高亮节点
+              </span>
+            </button>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <button
+              class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                获取高亮节点与其子节点的数据
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
       <div
         class="t-space-item"
       >
-        <button
-          class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-          type="button"
+        <p
+          class="tips"
         >
-          <span
-            class="t-button__text"
-          >
-            获取高亮节点与其子节点的数据
-          </span>
-        </button>
+          * 相关信息通过控制台输出
+        </p>
       </div>
     </div>
   </div>
-  <div
-    class="t-space-item"
-  >
-    <p
-      class="tips"
-    >
-      * 相关信息通过控制台输出
-    </p>
-  </div>
 </div>
 `;
 
@@ -8377,14 +8303,14 @@ exports[`Tree Tree stateVue demo works fine 1`] = `
 exports[`Tree Tree syncVue demo works fine 1`] = `
 <div
   class="t-space t-space-vertical"
-  style="gap: 16px;"
+  style="gap: 32px;"
 >
   <div
     class="t-space-item"
   >
     <div
       class="t-space t-space-vertical"
-      style="gap: 16px;"
+      style="gap: 16px; width: 100%;"
     >
       <div
         class="t-space-item"
diff --git a/src/tree/_example/activable.vue b/src/tree/_example/activable.vue
index f3dc80551..0da6ca0cc 100644
--- a/src/tree/_example/activable.vue
+++ b/src/tree/_example/activable.vue
@@ -1,18 +1,18 @@
 <template>
-  <t-space direction="vertical" :size="10">
-    <t-space>
-      <t-form labelWidth="120">
-        <t-form-item label="节点可高亮" style="margin-bottom: 5px">
-          <t-switch v-model="activable" />
-        </t-form-item>
-        <t-form-item label="节点可多选高亮" style="margin-bottom: 5px">
-          <t-switch v-model="activeMultiple" />
-        </t-form-item>
-        <t-form-item label="整个节点可点击" style="margin-bottom: 5px">
-          <t-switch v-model="expandOnClickNode" />
-        </t-form-item>
-      </t-form>
-    </t-space>
+  <t-space :size="10" direction="vertical">
+    <!-- <t-space class="operations"> -->
+    <t-form labelWidth="120">
+      <t-form-item label="节点可高亮">
+        <t-switch v-model="activable" />
+      </t-form-item>
+      <t-form-item label="节点可多选高亮">
+        <t-switch v-model="activeMultiple" />
+      </t-form-item>
+      <t-form-item label="整个节点可点击">
+        <t-switch v-model="expandOnClickNode" />
+      </t-form-item>
+    </t-form>
+    <!-- </t-space> -->
     <t-tree
       :data="items"
       expand-all
@@ -82,3 +82,24 @@ export default {
   },
 };
 </script>
+
+<!-- <style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style> -->
diff --git a/src/tree/_example/base.vue b/src/tree/_example/base.vue
index ab1955641..6d5f3e21a 100644
--- a/src/tree/_example/base.vue
+++ b/src/tree/_example/base.vue
@@ -1,7 +1,7 @@
 <template>
-  <t-space>
+  <div>
     <t-tree :data="items" activable hover transition />
-  </t-space>
+  </div>
 </template>
 
 <script>
@@ -58,3 +58,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+/* .t-tree {
+  margin-bottom: 20px;
+} */
+/* .tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+} */
+</style>
diff --git a/src/tree/_example/checkable.vue b/src/tree/_example/checkable.vue
index 6b821447b..8de6011d1 100644
--- a/src/tree/_example/checkable.vue
+++ b/src/tree/_example/checkable.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-space direction="vertical">
+  <t-space size="32px" direction="vertical">
     <t-form>
       <t-form-item label="可选" style="margin-bottom: 16px">
         <t-switch v-model="checkable" />
diff --git a/src/tree/_example/empty.vue b/src/tree/_example/empty.vue
index 1b2a83751..fb993caec 100644
--- a/src/tree/_example/empty.vue
+++ b/src/tree/_example/empty.vue
@@ -1,9 +1,10 @@
 <template>
-  <t-space direction="vertical" :size="20">
-    <t-tree :data="[]" />
-    <t-tree :data="[]" empty="😊 空数据（string）" />
-    <t-tree :data="[]" :empty="empty" />
-    <t-tree :data="[]">
+  <t-space :size="20" direction="vertical">
+    <t-tree :data="[]" /><br />
+    <t-tree :data="[]" empty="😊 空数据（string）" /><br />
+    <t-tree :data="[]" :empty="empty" /><br />
+    <t-tree :data="[]"
+    ><br />
       <div slot="empty">😊 空数据（slot）</div>
     </t-tree>
   </t-space>
@@ -21,3 +22,24 @@ export default {
   },
 };
 </script>
+
+<style>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/expand-all.vue b/src/tree/_example/expand-all.vue
index bac5b6a1e..a84419e87 100644
--- a/src/tree/_example/expand-all.vue
+++ b/src/tree/_example/expand-all.vue
@@ -1,15 +1,15 @@
 <template>
-  <t-space direction="vertical" :size="10">
-    <t-space>
-      <t-form labelWidth="150">
-        <t-form-item label="切换数据" style="margin-bottom: 5px">
-          <t-switch @change="toggleData" />
-        </t-form-item>
-        <t-form-item label="展开动画">
-          <t-switch v-model="transition" style="margin-bottom: 5px" />
-        </t-form-item>
-      </t-form>
-    </t-space>
+  <t-space :size="10" direction="vertical">
+    <!-- <div class="operations"> -->
+    <t-form labelWidth="150">
+      <t-form-item label="切换数据">
+        <t-switch @change="toggleData" />
+      </t-form-item>
+      <t-form-item label="展开动画">
+        <t-switch v-model="transition" />
+      </t-form-item>
+    </t-form>
+    <!-- </div> -->
     <t-tree :data="items" expand-all :transition="transition" />
   </t-space>
 </template>
@@ -90,3 +90,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/expand-level.vue b/src/tree/_example/expand-level.vue
index 4bdcef19c..4d924c86b 100644
--- a/src/tree/_example/expand-level.vue
+++ b/src/tree/_example/expand-level.vue
@@ -1,7 +1,7 @@
 <template>
-  <t-space class="tdesign-tree-demo">
+  <div>
     <t-tree :data="items" hover :expand-level="1" />
-  </t-space>
+  </div>
 </template>
 
 <script>
@@ -52,3 +52,24 @@ export default {
   },
 };
 </script>
+
+<!-- <style>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style> -->
diff --git a/src/tree/_example/expand-mutex.vue b/src/tree/_example/expand-mutex.vue
index bb8943560..40b9636d6 100644
--- a/src/tree/_example/expand-mutex.vue
+++ b/src/tree/_example/expand-mutex.vue
@@ -1,15 +1,15 @@
 <template>
-  <t-space direction="vertical" :size="10">
-    <t-space>
-      <t-form labelWidth="120">
-        <t-form-item label="互斥展开" style="margin-bottom: 5px">
-          <t-switch v-model="mutex" />
-        </t-form-item>
-        <t-form-item label="整个节点可点击" style="margin-bottom: 5px">
-          <t-switch v-model="expandOnClickNode" />
-        </t-form-item>
-      </t-form>
-    </t-space>
+  <t-space :size="10" direction="vertical">
+    <!-- <div class="operations"> -->
+    <t-form labelWidth="120">
+      <t-form-item label="互斥展开">
+        <t-switch v-model="mutex" />
+      </t-form-item>
+      <t-form-item label="整个节点可点击">
+        <t-switch v-model="expandOnClickNode" />
+      </t-form-item>
+    </t-form>
+    <!-- </div> -->
     <t-tree
       :data="items"
       hover
@@ -105,3 +105,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/filter.vue b/src/tree/_example/filter.vue
index f13f3fdb5..f19d26b2e 100644
--- a/src/tree/_example/filter.vue
+++ b/src/tree/_example/filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-space direction="vertical">
+  <t-space :size="32" direction="vertical">
     <t-input-adornment prepend="filter:">
       <t-input v-model="filterText" @change="onInput" />
     </t-input-adornment>
diff --git a/src/tree/_example/icon.vue b/src/tree/_example/icon.vue
index 904895e1e..c3c10fa74 100644
--- a/src/tree/_example/icon.vue
+++ b/src/tree/_example/icon.vue
@@ -1,16 +1,20 @@
 <template>
-  <t-space direction="vertical" :size="0">
-    <h3>render:</h3>
-    <t-tree :data="items" hover expand-all :load="load" :icon="icon" style="margin-bottom: 20px" />
-    <h3>scope slot:</h3>
-    <t-tree :data="items" hover lazy :load="load" style="margin-bottom: 20px">
-      <template #icon="{ node }">
-        <icon v-if="node.getChildren() && !node.expanded" name="caret-right" />
-        <icon v-else-if="node.getChildren() && node.expanded && node.loading" name="loading" />
-        <icon v-else-if="node.getChildren() && node.expanded" name="caret-down" />
-        <icon v-else name="attach" />
-      </template>
-    </t-tree>
+  <t-space :size="20" direction="vertical">
+    <div>
+      <h3>render:</h3>
+      <t-tree :data="items" hover expand-all :load="load" :icon="icon" />
+    </div>
+    <div>
+      <h3>scope slot:</h3>
+      <t-tree :data="items" hover lazy :load="load">
+        <template #icon="{ node }">
+          <icon v-if="node.getChildren() && !node.expanded" name="caret-right" />
+          <icon v-else-if="node.getChildren() && node.expanded && node.loading" name="loading" />
+          <icon v-else-if="node.getChildren() && node.expanded" name="caret-down" />
+          <icon v-else name="attach" />
+        </template>
+      </t-tree>
+    </div>
   </t-space>
 </template>
 
@@ -74,3 +78,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/label.vue b/src/tree/_example/label.vue
index f9bd76993..62a40c365 100644
--- a/src/tree/_example/label.vue
+++ b/src/tree/_example/label.vue
@@ -1,13 +1,17 @@
 <template>
-  <t-space direction="vertical" :size="20">
-    <h3>render:</h3>
-    <t-tree :data="items" expand-all :label="label" style="margin-bottom: 20px"></t-tree>
-    <h3>scope slot:</h3>
-    <t-tree :data="items" expand-all checkable style="margin-bottom: 20px">
-      <template #label="{ node }">
-        <font color="blue">label: {{ node.label }}, value: {{ node.value }}</font>
-      </template>
-    </t-tree>
+  <t-space :size="20" direction="vertical">
+    <div>
+      <h3>render:</h3>
+      <t-tree :data="items" expand-all :label="label"></t-tree>
+    </div>
+    <div>
+      <h3>scope slot:</h3>
+      <t-tree :data="items" expand-all checkable>
+        <template #label="{ node }">
+          <font color="blue">label: {{ node.label }}, value: {{ node.value }}</font>
+        </template>
+      </t-tree>
+    </div>
   </t-space>
 </template>
 
@@ -50,3 +54,24 @@ export default {
   },
 };
 </script>
+
+<style>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/lazy.vue b/src/tree/_example/lazy.vue
index 22fd9bf9e..de9c752fb 100644
--- a/src/tree/_example/lazy.vue
+++ b/src/tree/_example/lazy.vue
@@ -1,21 +1,21 @@
 <template>
-  <t-space direction="vertical" :size="10">
+  <t-space :size="10" direction="vertical">
     <h3>数据延迟加载</h3>
     <p>默认为点击加载数据。</p>
     <p>
       valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。
     </p>
     <p>所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
-    <t-space>
-      <t-form labelWidth="150">
-        <t-form-item label="可选" style="margin-bottom: 5px">
-          <t-switch v-model="checkable" />
-        </t-form-item>
-        <t-form-item label="严格模式" style="margin-bottom: 5px">
-          <t-switch v-model="checkStrictly" />
-        </t-form-item>
-      </t-form>
-    </t-space>
+    <!-- <div class="operations"> -->
+    <t-form labelWidth="150">
+      <t-form-item label="可选">
+        <t-switch v-model="checkable" />
+      </t-form-item>
+      <t-form-item label="严格模式">
+        <t-switch v-model="checkStrictly" />
+      </t-form-item>
+    </t-form>
+    <!-- </div> -->
     <t-tree
       ref="tree"
       :data="items"
@@ -81,9 +81,23 @@ export default {
 };
 </script>
 
-<style scoped>
-.tips {
-  font-size: 10px;
-  color: gray;
+<!-- <style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
 }
-</style>
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style> -->
diff --git a/src/tree/_example/line.vue b/src/tree/_example/line.vue
index ad859af9f..d5938601f 100644
--- a/src/tree/_example/line.vue
+++ b/src/tree/_example/line.vue
@@ -1,16 +1,15 @@
 <template>
-  <t-space class="tdesign-tree-line" direction="vertical">
+  <!-- <div class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line"> -->
+  <t-space :size="32" direction="vertical" class="tdesign-tree-line">
     <t-form>
-      <t-space direction="vertical" :size="5">
-        <t-form-item label="显示连线">
-          <t-switch v-model="showLine" />
-        </t-form-item>
-        <t-form-item label="显示图标">
-          <t-switch v-model="showIcon" />
-        </t-form-item>
-      </t-space>
+      <t-form-item label="显示连线" style="margin-bottom: 16px">
+        <t-switch v-model="showLine" />
+      </t-form-item>
+      <t-form-item label="显示图标" style="margin-bottom: 16px">
+        <t-switch v-model="showIcon" />
+      </t-form-item>
     </t-form>
-    <t-space direction="vertical">
+    <t-space :size="16" direction="vertical" style="width: 100%">
       <t-tree :data="items" :line="showLine" :icon="showIcon" expand-all />
       <h3>render</h3>
       <t-tree :data="items" :icon="showIcon" expand-all :line="renderLine" />
@@ -199,11 +198,11 @@ export default {
   },
 };
 </script>
-<style>
-.tdesign-tree-demo .t-tree {
+<style scoped>
+.t-tree {
   margin-bottom: 20px;
 }
-.tdesign-tree-demo .title {
+/* .tdesign-tree-demo .title {
   margin-bottom: 10px;
 }
 .tdesign-tree-demo .tips {
@@ -217,7 +216,7 @@ export default {
 }
 .tdesign-tree-demo .t-button {
   margin: 0 10px 10px 0;
-}
+} */
 
 .tdesign-tree-line .custom-line {
   display: flex;
diff --git a/src/tree/_example/load.vue b/src/tree/_example/load.vue
index c7ab776f7..a64d46115 100644
--- a/src/tree/_example/load.vue
+++ b/src/tree/_example/load.vue
@@ -1,14 +1,12 @@
 <template>
-  <t-space direction="vertical" :size="10">
-    <t-space>
-      <t-form labelWidth="150">
-        <t-space direction="vertical" :size="5">
-          <t-form-item label="可选">
-            <t-switch v-model="checkable" />
-          </t-form-item>
-        </t-space>
-      </t-form>
-    </t-space>
+  <t-space :size="10" direction="vertical">
+    <!-- <div class="operations"> -->
+    <t-form labelWidth="150">
+      <t-form-item label="可选">
+        <t-switch v-model="checkable" />
+      </t-form-item>
+    </t-form>
+    <!-- </div> -->
     <t-tree :data="items" hover expand-all :checkable="checkable" v-model="value" :load="load" :lazy="false" />
   </t-space>
 </template>
@@ -59,3 +57,24 @@ export default {
   },
 };
 </script>
+
+<style>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+</style>
diff --git a/src/tree/_example/operations.vue b/src/tree/_example/operations.vue
index b518fed06..035db9fb4 100644
--- a/src/tree/_example/operations.vue
+++ b/src/tree/_example/operations.vue
@@ -1,71 +1,70 @@
 <template>
-  <t-space direction="vertical" :size="10">
-    <h3>Render:</h3>
-    <t-tree
-      :data="items"
-      hover
-      expand-all
-      :label="getLabel"
-      :operations="renderOperations"
-      style="margin-bottom: 20px"
-    />
-    <h3>Scope Slot:</h3>
-    <t-space :size="5">
+  <t-space :size="20" direction="vertical">
+    <t-space :size="10" direction="vertical" style="width: 100%">
+      <h3>Render:</h3>
+      <t-tree :data="items" hover expand-all :label="getLabel" :operations="renderOperations" />
+    </t-space>
+    <!-- <div> -->
+    <t-space :size="10" direction="vertical" style="width: 100%">
+      <h3>Scope Slot:</h3>
       <t-form labelWidth="200">
-        <t-space direction="vertical" :size="5">
-          <t-form-item label="插入节点使用高亮节点">
-            <t-switch v-model="useActived" />
-          </t-form-item>
-          <t-form-item label="子节点展开触发父节点展开">
-            <t-switch v-model="expandParent" />
-          </t-form-item>
-        </t-space>
+        <t-form-item label="插入节点使用高亮节点" style="margin-bottom: 5px">
+          <t-switch v-model="useActived" />
+        </t-form-item>
+        <t-form-item label="子节点展开触发父节点展开">
+          <t-switch v-model="expandParent" />
+        </t-form-item>
       </t-form>
+      <!-- <div> -->
+      <t-input-adornment prepend="filter:">
+        <t-input v-model="filterText" @change="onInputChange" />
+      </t-input-adornment>
+      <!-- </div> -->
+      <t-tree
+        :data="items"
+        hover
+        expand-all
+        activable
+        checkable
+        :expand-on-click-node="false"
+        :label="getLabel"
+        :expand-parent="expandParent"
+        :filter="filterByText"
+        @expand="onExpand"
+        @change="onChange"
+        @active="onActive"
+        line
+        ref="tree"
+      >
+        <template #operations="{ node }">
+          <t-space :size="10">
+            <t-button size="small" variant="base" @click="append(node)">添加子节点</t-button>
+            <t-button size="small" variant="outline" @click="insertBefore(node)">前插节点</t-button>
+            <t-button size="small" variant="outline" @click="insertAfter(node)">后插节点</t-button>
+            <t-button size="small" variant="base" theme="danger" @click="remove(node)">删除</t-button>
+          </t-space>
+        </template>
+      </t-tree>
     </t-space>
-    <t-input-adornment prepend="filter:">
-      <t-input v-model="filterText" @change="onInputChange" />
-    </t-input-adornment>
-    <t-tree
-      :data="items"
-      hover
-      expand-all
-      activable
-      checkable
-      :expand-on-click-node="false"
-      :label="getLabel"
-      :expand-parent="expandParent"
-      :filter="filterByText"
-      @expand="onExpand"
-      @change="onChange"
-      @active="onActive"
-      line
-      ref="tree"
-    >
-      <template #operations="{ node }">
-        <t-space :size="10">
-          <t-button size="small" variant="base" @click="append(node)">添加子节点</t-button>
-          <t-button size="small" variant="outline" @click="insertBefore(node)">前插节点</t-button>
-          <t-button size="small" variant="outline" @click="insertAfter(node)">后插节点</t-button>
-          <t-button size="small" variant="base" theme="danger" @click="remove(node)">删除</t-button>
-        </t-space>
-      </template>
-    </t-tree>
-    <h3>API:</h3>
-    <t-space breakLine>
-      <t-button theme="primary" @click="getItem">获取 value 为 'node1' 的单个节点</t-button>
-      <t-button theme="primary" @click="getAllItems">获取所有节点</t-button>
-      <t-button theme="primary" @click="getActiveChildren">获取高亮节点的所有子节点</t-button>
-      <t-button theme="primary" @click="getAllActived">获取所有高亮节点</t-button>
-      <t-button theme="primary" @click="getActiveChecked">获取高亮节点下的选中节点</t-button>
-      <t-button theme="primary" @click="append()">插入一个根节点</t-button>
-      <t-button theme="primary" @click="getActiveParent">获取高亮节点的父节点</t-button>
-      <t-button theme="primary" @click="getActiveParents">获取高亮节点的所有父节点</t-button>
-      <t-button theme="primary" @click="getActiveIndex">获取高亮节点在子节点中的位置</t-button>
-      <t-button theme="primary" @click="setActiveChecked">选中高亮节点</t-button>
-      <t-button theme="primary" @click="setActiveExpanded">展开高亮节点</t-button>
-      <t-button theme="primary" @click="getActivePlainData">获取高亮节点与其子节点的数据</t-button>
+    <!-- </div> -->
+    <t-space :size="10" direction="vertical">
+      <h3>API:</h3>
+      <t-space :size="10" breakLine>
+        <t-button theme="primary" @click="getItem">获取 value 为 'node1' 的单个节点</t-button>
+        <t-button theme="primary" @click="getAllItems">获取所有节点</t-button>
+        <t-button theme="primary" @click="getActiveChildren">获取高亮节点的所有子节点</t-button>
+        <t-button theme="primary" @click="getAllActived">获取所有高亮节点</t-button>
+        <t-button theme="primary" @click="getActiveChecked">获取高亮节点下的选中节点</t-button>
+        <t-button theme="primary" @click="append()">插入一个根节点</t-button>
+        <t-button theme="primary" @click="getActiveParent">获取高亮节点的父节点</t-button>
+        <t-button theme="primary" @click="getActiveParents">获取高亮节点的所有父节点</t-button>
+        <t-button theme="primary" @click="getActiveIndex">获取高亮节点在子节点中的位置</t-button>
+        <t-button theme="primary" @click="setActiveChecked">选中高亮节点</t-button>
+        <t-button theme="primary" @click="setActiveExpanded">展开高亮节点</t-button>
+        <t-button theme="primary" @click="getActivePlainData">获取高亮节点与其子节点的数据</t-button>
+      </t-space>
+      <p class="tips">* 相关信息通过控制台输出</p>
     </t-space>
-    <p class="tips">* 相关信息通过控制台输出</p>
   </t-space>
 </template>
 
@@ -321,3 +320,36 @@ export default {
   },
 };
 </script>
+<style scoped>
+.tips {
+  font-size: 10px;
+  color: gray;
+}
+/* .t-space{
+  width: 100%;
+} */
+</style>
+<!-- <style scoped>
+.tdesign-tree-demo .t-tree {
+  margin-bottom: 20px;
+}
+.tdesign-tree-demo .title {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .tips {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .operations {
+  margin-bottom: 10px;
+}
+.tdesign-tree-demo .t-form__item {
+  margin-bottom: 5px;
+}
+.tdesign-tree-demo .t-button {
+  margin: 0 10px 10px 0;
+}
+.tips {
+  font-size: 10px;
+  color: gray;
+}
+</style> -->
diff --git a/src/tree/_example/sync.vue b/src/tree/_example/sync.vue
index 71c50f765..b9d6eb320 100644
--- a/src/tree/_example/sync.vue
+++ b/src/tree/_example/sync.vue
@@ -1,6 +1,6 @@
 <template>
-  <t-space direction="vertical">
-    <t-space direction="vertical">
+  <t-space :size="32" direction="vertical">
+    <t-space :size="16" direction="vertical" style="width: 100%">
       <t-input-adornment prepend="checked:">
         <t-input :value="allChecked" @change="onAllCheckedInput" />
       </t-input-adornment>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 8798d8f39..54ce8202c 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -20338,42 +20338,38 @@ exports[`ssr snapshot test renders ./src/transfer/_example/tree.vue correctly 1`
 exports[`ssr snapshot test renders ./src/tree/_example/activable.vue correctly 1`] = `
 <div class="t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:16px;">
-      <div class="t-space-item">
-        <form class="t-form">
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可高亮</label></div>
-            <div class="t-form__controls" style="margin-left:120;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+    <form class="t-form">
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可高亮</label></div>
+        <div class="t-form__controls" style="margin-left:120;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可多选高亮</label></div>
-            <div class="t-form__controls" style="margin-left:120;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+        </div>
+      </div>
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">节点可多选高亮</label></div>
+        <div class="t-form__controls" style="margin-left:120;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
-            <div class="t-form__controls" style="margin-left:120;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+        </div>
+      </div>
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
+        <div class="t-form__controls" style="margin-left:120;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div class="t-space-item">
     <div class="t-tree t-tree--hoverable t-tree--transition">
@@ -20391,22 +20387,20 @@ exports[`ssr snapshot test renders ./src/tree/_example/activable.vue correctly 1
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/base.vue correctly 1`] = `
-<div class="t-space t-space-horizontal" style="gap:16px;">
-  <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t33" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-        <div data-value="t36" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-        <div data-value="t39" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-        <div data-value="t42" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
-      </transition-group-stub>
-    </div>
+<div>
+  <div class="t-tree t-tree--hoverable t-tree--transition">
+    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+      <div data-value="t33" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+      <div data-value="t36" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+      <div data-value="t39" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+      <div data-value="t42" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
+    </transition-group-stub>
   </div>
 </div>
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/checkable.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:16px;">
+<div class="t-space t-space-vertical" style="gap:32px;">
   <div class="t-space-item">
     <form class="t-form">
       <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
@@ -20656,11 +20650,13 @@ exports[`ssr snapshot test renders ./src/tree/_example/empty.vue correctly 1`] =
       <div class="t-tree__empty">暂无数据</div>
     </div>
   </div>
+  <div class="t-space-item"><br></div>
   <div class="t-space-item">
     <div class="t-tree t-tree--transition">
       <div class="t-tree__empty">😊 空数据（string）</div>
     </div>
   </div>
+  <div class="t-space-item"><br></div>
   <div class="t-space-item">
     <div class="t-tree t-tree--transition">
       <div class="t-tree__empty">
@@ -20668,6 +20664,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/empty.vue correctly 1`] =
       </div>
     </div>
   </div>
+  <div class="t-space-item"><br></div>
   <div class="t-space-item">
     <div class="t-tree t-tree--transition">
       <div class="t-tree__empty">
@@ -20681,32 +20678,28 @@ exports[`ssr snapshot test renders ./src/tree/_example/empty.vue correctly 1`] =
 exports[`ssr snapshot test renders ./src/tree/_example/expand-all.vue correctly 1`] = `
 <div class="t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:16px;">
-      <div class="t-space-item">
-        <form class="t-form">
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">切换数据</label></div>
-            <div class="t-form__controls" style="margin-left:150;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+    <form class="t-form">
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">切换数据</label></div>
+        <div class="t-form__controls" style="margin-left:150;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-          <div class="t-form__item t-form-item__">
-            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">展开动画</label></div>
-            <div class="t-form__controls" style="margin-left:150;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked" style="margin-bottom:5px;"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+        </div>
+      </div>
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">展开动画</label></div>
+        <div class="t-form__controls" style="margin-left:150;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div class="t-space-item">
     <div class="t-tree t-tree--transition">
@@ -20728,18 +20721,16 @@ exports[`ssr snapshot test renders ./src/tree/_example/expand-all.vue correctly
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-level.vue correctly 1`] = `
-<div class="tdesign-tree-demo t-space t-space-horizontal" style="gap:16px;">
-  <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t115" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-        <div data-value="t116" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
-        <div data-value="t119" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
-        <div data-value="t122" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-        <div data-value="t123" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
-        <div data-value="t124" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
-      </transition-group-stub>
-    </div>
+<div>
+  <div class="t-tree t-tree--hoverable t-tree--transition">
+    <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+      <div data-value="t115" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+      <div data-value="t116" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.1</span></span></div>
+      <div data-value="t119" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">1.2</span></span></div>
+      <div data-value="t122" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+      <div data-value="t123" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.1</span></span></div>
+      <div data-value="t124" data-level="1" class="t-tree__item t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2.2</span></span></div>
+    </transition-group-stub>
   </div>
 </div>
 `;
@@ -20747,32 +20738,28 @@ exports[`ssr snapshot test renders ./src/tree/_example/expand-level.vue correctl
 exports[`ssr snapshot test renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `
 <div class="t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:16px;">
-      <div class="t-space-item">
-        <form class="t-form">
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">互斥展开</label></div>
-            <div class="t-form__controls" style="margin-left:120;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+    <form class="t-form">
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">互斥展开</label></div>
+        <div class="t-form__controls" style="margin-left:120;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
-            <div class="t-form__controls" style="margin-left:120;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+        </div>
+      </div>
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:120;"><label for="">整个节点可点击</label></div>
+        <div class="t-form__controls" style="margin-left:120;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div class="t-space-item">
     <div class="t-tree t-tree--hoverable t-tree--transition t-tree--block-node">
@@ -20786,7 +20773,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/expand-mutex.vue correctl
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/filter.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:16px;">
+<div class="t-space t-space-vertical" style="gap:32px;">
   <div class="t-space-item">
     <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
       <div class="t-input__wrap">
@@ -20806,27 +20793,27 @@ exports[`ssr snapshot test renders ./src/tree/_example/filter.vue correctly 1`]
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/icon.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:0px;">
-  <div class="t-space-item">
-    <h3>render:</h3>
-  </div>
+<div class="t-space t-space-vertical" style="gap:20px;">
   <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t157" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-        <div data-value="t158" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-      </transition-group-stub>
+    <div>
+      <h3>render:</h3>
+      <div class="t-tree t-tree--hoverable t-tree--transition">
+        <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+          <div data-value="t157" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+          <div data-value="t158" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-folder"><use href="#t-icon-folder"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+        </transition-group-stub>
+      </div>
     </div>
   </div>
   <div class="t-space-item">
-    <h3>scope slot:</h3>
-  </div>
-  <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t159" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
-        <div data-value="t160" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
-      </transition-group-stub>
+    <div>
+      <h3>scope slot:</h3>
+      <div class="t-tree t-tree--hoverable t-tree--transition">
+        <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+          <div data-value="t159" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">1</span></span></div>
+          <div data-value="t160" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"><svg class="t-icon t-icon-caret-right"><use href="#t-icon-caret-right"></use></svg></span><span class="t-tree__label"><span style="position:relative;">2</span></span></div>
+        </transition-group-stub>
+      </div>
     </div>
   </div>
 </div>
@@ -20835,33 +20822,33 @@ exports[`ssr snapshot test renders ./src/tree/_example/icon.vue correctly 1`] =
 exports[`ssr snapshot test renders ./src/tree/_example/label.vue correctly 1`] = `
 <div class="t-space t-space-vertical" style="gap:20px;">
   <div class="t-space-item">
-    <h3>render:</h3>
-  </div>
-  <div class="t-space-item">
-    <div class="t-tree t-tree--transition" style="margin-bottom:20px;">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t173" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t173, label: 1</strong></span></span></div>
-        <div data-value="t174" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t174, label: 1.1</strong></span></span></div>
-        <div data-value="t175" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t175, label: 1.2</strong></span></span></div>
-        <div data-value="t176" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t176, label: 2</strong></span></span></div>
-        <div data-value="t177" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t177, label: 2.1</strong></span></span></div>
-        <div data-value="t178" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t178, label: 2.2</strong></span></span></div>
-      </transition-group-stub>
+    <div>
+      <h3>render:</h3>
+      <div class="t-tree t-tree--transition">
+        <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+          <div data-value="t173" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t173, label: 1</strong></span></span></div>
+          <div data-value="t174" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t174, label: 1.1</strong></span></span></div>
+          <div data-value="t175" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t175, label: 1.2</strong></span></span></div>
+          <div data-value="t176" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t176, label: 2</strong></span></span></div>
+          <div data-value="t177" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t177, label: 2.1</strong></span></span></div>
+          <div data-value="t178" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;"><strong>value: t178, label: 2.2</strong></span></span></div>
+        </transition-group-stub>
+      </div>
     </div>
   </div>
   <div class="t-space-item">
-    <h3>scope slot:</h3>
-  </div>
-  <div class="t-space-item">
-    <div class="t-tree t-tree--checkable t-tree--transition" style="margin-bottom:20px;">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="t179" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t179" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1, value: t179</font></span></label></div>
-        <div data-value="t180" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t180" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.1, value: t180</font></span></label></div>
-        <div data-value="t181" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t181" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.2, value: t181</font></span></label></div>
-        <div data-value="t182" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t182" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2, value: t182</font></span></label></div>
-        <div data-value="t183" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t183" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.1, value: t183</font></span></label></div>
-        <div data-value="t184" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t184" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.2, value: t184</font></span></label></div>
-      </transition-group-stub>
+    <div>
+      <h3>scope slot:</h3>
+      <div class="t-tree t-tree--checkable t-tree--transition">
+        <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+          <div data-value="t179" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t179" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1, value: t179</font></span></label></div>
+          <div data-value="t180" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t180" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.1, value: t180</font></span></label></div>
+          <div data-value="t181" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t181" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 1.2, value: t181</font></span></label></div>
+          <div data-value="t182" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t182" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2, value: t182</font></span></label></div>
+          <div data-value="t183" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t183" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.1, value: t183</font></span></label></div>
+          <div data-value="t184" data-level="1" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:1;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="t184" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><font color="blue">label: 2.2, value: t184</font></span></label></div>
+        </transition-group-stub>
+      </div>
     </div>
   </div>
 </div>
@@ -20884,32 +20871,28 @@ exports[`ssr snapshot test renders ./src/tree/_example/lazy.vue correctly 1`] =
     <p>所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。</p>
   </div>
   <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:16px;">
-      <div class="t-space-item">
-        <form class="t-form">
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
-            <div class="t-form__controls" style="margin-left:150;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+    <form class="t-form">
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
+        <div class="t-form__controls" style="margin-left:150;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
-            <div class="t-form__label t-form__label--right" style="width:150;"><label for="">严格模式</label></div>
-            <div class="t-form__controls" style="margin-left:150;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+        </div>
+      </div>
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">严格模式</label></div>
+        <div class="t-form__controls" style="margin-left:150;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div class="t-space-item">
     <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
@@ -20923,31 +20906,25 @@ exports[`ssr snapshot test renders ./src/tree/_example/lazy.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/line.vue correctly 1`] = `
-<div class="tdesign-tree-line t-space t-space-vertical" style="gap:16px;">
+<div class="tdesign-tree-line t-space t-space-vertical" style="gap:32px;">
   <div class="t-space-item">
     <form class="t-form">
-      <div class="t-space t-space-vertical" style="gap:5px;">
-        <div class="t-space-item">
-          <div class="t-form__item t-form-item__">
-            <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示连线</label></div>
-            <div class="t-form__controls" style="margin-left:100px;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+      <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
+        <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示连线</label></div>
+        <div class="t-form__controls" style="margin-left:100px;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
         </div>
-        <div class="t-space-item">
-          <div class="t-form__item t-form-item__">
-            <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示图标</label></div>
-            <div class="t-form__controls" style="margin-left:100px;">
-              <div class="t-form__controls-content">
-                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                  <div class="t-switch__content t-size-m"></div>
-                </div>
-              </div>
+      </div>
+      <div class="t-form__item t-form-item__" style="margin-bottom:16px;">
+        <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">显示图标</label></div>
+        <div class="t-form__controls" style="margin-left:100px;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
         </div>
@@ -20955,7 +20932,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/line.vue correctly 1`] =
     </form>
   </div>
   <div class="t-space-item">
-    <div class="t-space t-space-vertical" style="gap:16px;">
+    <div class="t-space t-space-vertical" style="gap:16px;width:100%;">
       <div class="t-space-item">
         <div class="t-tree t-tree--transition">
           <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
@@ -21195,26 +21172,18 @@ exports[`ssr snapshot test renders ./src/tree/_example/line.vue correctly 1`] =
 exports[`ssr snapshot test renders ./src/tree/_example/load.vue correctly 1`] = `
 <div class="t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:16px;">
-      <div class="t-space-item">
-        <form class="t-form">
-          <div class="t-space t-space-vertical" style="gap:5px;">
-            <div class="t-space-item">
-              <div class="t-form__item t-form-item__">
-                <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
-                <div class="t-form__controls" style="margin-left:150;">
-                  <div class="t-form__controls-content">
-                    <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                      <div class="t-switch__content t-size-m"></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+    <form class="t-form">
+      <div class="t-form__item t-form-item__">
+        <div class="t-form__label t-form__label--right" style="width:150;"><label for="">可选</label></div>
+        <div class="t-form__controls" style="margin-left:150;">
+          <div class="t-form__controls-content">
+            <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+              <div class="t-switch__content t-size-m"></div>
             </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div class="t-space-item">
     <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
@@ -21228,100 +21197,103 @@ exports[`ssr snapshot test renders ./src/tree/_example/load.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/operations.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:10px;">
-  <div class="t-space-item">
-    <h3>Render:</h3>
-  </div>
+<div class="t-space t-space-vertical" style="gap:20px;">
   <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--transition" style="margin-bottom:20px;">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1 | value: node1</span></span><span ignore="active,expand" class="t-tree__operations">value: node1</span></div>
-        <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2 | value: node2</span></span><span ignore="active,expand" class="t-tree__operations">value: node2</span></div>
-      </transition-group-stub>
+    <div class="t-space t-space-vertical" style="gap:10px;width:100%;">
+      <div class="t-space-item">
+        <h3>Render:</h3>
+      </div>
+      <div class="t-space-item">
+        <div class="t-tree t-tree--hoverable t-tree--transition">
+          <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+            <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">1 | value: node1</span></span><span ignore="active,expand" class="t-tree__operations">value: node1</span></div>
+            <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><span class="t-tree__label"><span style="position:relative;">2 | value: node2</span></span><span ignore="active,expand" class="t-tree__operations">value: node2</span></div>
+          </transition-group-stub>
+        </div>
+      </div>
     </div>
   </div>
   <div class="t-space-item">
-    <h3>Scope Slot:</h3>
-  </div>
-  <div class="t-space-item">
-    <div class="t-space t-space-horizontal" style="gap:5px;">
+    <div class="t-space t-space-vertical" style="gap:10px;width:100%;">
+      <div class="t-space-item">
+        <h3>Scope Slot:</h3>
+      </div>
       <div class="t-space-item">
         <form class="t-form">
-          <div class="t-space t-space-vertical" style="gap:5px;">
-            <div class="t-space-item">
-              <div class="t-form__item t-form-item__">
-                <div class="t-form__label t-form__label--right" style="width:200;"><label for="">插入节点使用高亮节点</label></div>
-                <div class="t-form__controls" style="margin-left:200;">
-                  <div class="t-form__controls-content">
-                    <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
-                      <div class="t-switch__content t-size-m"></div>
-                    </div>
-                  </div>
+          <div class="t-form__item t-form-item__" style="margin-bottom:5px;">
+            <div class="t-form__label t-form__label--right" style="width:200;"><label for="">插入节点使用高亮节点</label></div>
+            <div class="t-form__controls" style="margin-left:200;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
                 </div>
               </div>
             </div>
-            <div class="t-space-item">
-              <div class="t-form__item t-form-item__">
-                <div class="t-form__label t-form__label--right" style="width:200;"><label for="">子节点展开触发父节点展开</label></div>
-                <div class="t-form__controls" style="margin-left:200;">
-                  <div class="t-form__controls-content">
-                    <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
-                      <div class="t-switch__content t-size-m"></div>
-                    </div>
-                  </div>
+          </div>
+          <div class="t-form__item t-form-item__">
+            <div class="t-form__label t-form__label--right" style="width:200;"><label for="">子节点展开触发父节点展开</label></div>
+            <div class="t-form__controls" style="margin-left:200;">
+              <div class="t-form__controls-content">
+                <div class="t-switch t-size-m t-is-checked"><span class="t-switch__handle"></span>
+                  <div class="t-switch__content t-size-m"></div>
                 </div>
               </div>
             </div>
           </div>
         </form>
       </div>
-    </div>
-  </div>
-  <div class="t-space-item">
-    <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
-      <div class="t-input__wrap">
-        <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="" class="t-input__inner"></div>
+      <div class="t-space-item">
+        <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">filter:</span>
+          <div class="t-input__wrap">
+            <div class="t-input t-size-m t-is-default"><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="" class="t-input__inner"></div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  <div class="t-space-item">
-    <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
-      <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
-        <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1 | value: node1</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
-        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
-        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
-        <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
+      <div class="t-space-item">
+        <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+          <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
+            <div data-value="node1" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">1 | value: node1</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
+            <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
+            <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
+            <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
+        </div></span>
+      </div>
+      <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2 | value: node2</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
+      <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
+      <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
+      <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
     </div></span>
   </div>
-  <div data-value="node2" data-level="0" class="t-tree__item t-tree__item--open t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon"></span><label class="t-checkbox t-tree__label"><input type="checkbox" name="node2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">2 | value: node2</span></label><span ignore="active,expand" class="t-tree__operations"><div class="t-space t-space-horizontal" style="gap:10px;"><div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-primary"><span class="t-button__text">添加子节点</span></button></div>
-  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">前插节点</span></button></div>
-  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-outline t-button--theme-default"><span class="t-button__text">后插节点</span></button></div>
-  <div class="t-space-item"><button type="button" class="t-button t-size-s t-button--variant-base t-button--theme-danger"><span class="t-button__text">删除</span></button></div>
-</div></span></div>
-</transition-group-stub>
+  </transition-group-stub>
 </div>
 </div>
-<div class="t-space-item">
-  <h3>API:</h3>
 </div>
-<div class="t-space-item">
-  <div class="t-space t-space-horizontal" style="gap:16px;flex-wrap:wrap;">
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取 value 为 'node1' 的单个节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有子节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有高亮节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点下的选中节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">插入一个根节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的父节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有父节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点在子节点中的位置</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">选中高亮节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">展开高亮节点</span></button></div>
-    <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点与其子节点的数据</span></button></div>
-  </div>
 </div>
 <div class="t-space-item">
-  <p class="tips">* 相关信息通过控制台输出</p>
+  <div class="t-space t-space-vertical" style="gap:10px;">
+    <div class="t-space-item">
+      <h3>API:</h3>
+    </div>
+    <div class="t-space-item">
+      <div class="t-space t-space-horizontal" style="gap:10px;flex-wrap:wrap;">
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取 value 为 'node1' 的单个节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有子节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取所有高亮节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点下的选中节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">插入一个根节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的父节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点的所有父节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点在子节点中的位置</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">选中高亮节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">展开高亮节点</span></button></div>
+        <div class="t-space-item"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">获取高亮节点与其子节点的数据</span></button></div>
+      </div>
+    </div>
+    <div class="t-space-item">
+      <p class="tips">* 相关信息通过控制台输出</p>
+    </div>
+  </div>
 </div>
 </div>
 `;
@@ -21395,9 +21367,9 @@ exports[`ssr snapshot test renders ./src/tree/_example/state.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/sync.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:16px;">
+<div class="t-space t-space-vertical" style="gap:32px;">
   <div class="t-space-item">
-    <div class="t-space t-space-vertical" style="gap:16px;">
+    <div class="t-space t-space-vertical" style="gap:16px;width:100%;">
       <div class="t-space-item">
         <div class="t-input-adornment t-input-adornment--prepend"><span class="t-input-adornment__prepend">checked:</span>
           <div class="t-input__wrap">

From 057edbd074b91add029c654a9d582d59fdc314a4 Mon Sep 17 00:00:00 2001
From: lmmlala <1490970255@qq.com>
Date: Mon, 12 Sep 2022 21:55:05 +0800
Subject: [PATCH 4/4] chore: update tree demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 12 ++++++-----
 src/tree/_example/activable.vue               | 21 +++----------------
 src/tree/_example/base.vue                    |  9 +++-----
 src/tree/_example/empty.vue                   | 21 -------------------
 src/tree/_example/expand-all.vue              | 19 +----------------
 src/tree/_example/expand-level.vue            | 21 -------------------
 src/tree/_example/expand-mutex.vue            | 17 +--------------
 src/tree/_example/lazy.vue                    | 21 +++----------------
 src/tree/_example/line.vue                    |  1 -
 src/tree/_example/load.vue                    |  2 --
 test/ssr/__snapshots__/ssr.test.js.snap       | 10 ++++-----
 11 files changed, 23 insertions(+), 131 deletions(-)

diff --git a/src/tree/__tests__/__snapshots__/demo.test.js.snap b/src/tree/__tests__/__snapshots__/demo.test.js.snap
index 5b0a25ea4..258e5eaac 100644
--- a/src/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/src/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Tree Tree activableVue demo works fine 1`] = `
 <div
-  class="t-space t-space-vertical"
+  class="tdesign-tree-demo t-space t-space-vertical"
   style="gap: 10px;"
 >
   <div
@@ -281,7 +281,9 @@ exports[`Tree Tree activableVue demo works fine 1`] = `
 `;
 
 exports[`Tree Tree baseVue demo works fine 1`] = `
-<div>
+<div
+  class="tdesign-tree-demo"
+>
   <div
     class="t-tree t-tree--hoverable t-tree--transition"
   >
@@ -3254,7 +3256,7 @@ exports[`Tree Tree emptyVue demo works fine 1`] = `
 
 exports[`Tree Tree expandAllVue demo works fine 1`] = `
 <div
-  class="t-space t-space-vertical"
+  class="tdesign-tree-demo t-space t-space-vertical"
   style="gap: 10px;"
 >
   <div
@@ -3812,7 +3814,7 @@ exports[`Tree Tree expandLevelVue demo works fine 1`] = `
 
 exports[`Tree Tree expandMutexVue demo works fine 1`] = `
 <div
-  class="t-space t-space-vertical"
+  class="tdesign-tree-demo t-space t-space-vertical"
   style="gap: 10px;"
 >
   <div
@@ -4711,7 +4713,7 @@ exports[`Tree Tree labelVue demo works fine 1`] = `
 
 exports[`Tree Tree lazyVue demo works fine 1`] = `
 <div
-  class="t-space t-space-vertical"
+  class="tdesign-tree-demo t-space t-space-vertical"
   style="gap: 10px;"
 >
   <div
diff --git a/src/tree/_example/activable.vue b/src/tree/_example/activable.vue
index 0da6ca0cc..924e75ccf 100644
--- a/src/tree/_example/activable.vue
+++ b/src/tree/_example/activable.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-space :size="10" direction="vertical">
+  <t-space :size="10" direction="vertical" class="tdesign-tree-demo">
     <!-- <t-space class="operations"> -->
     <t-form labelWidth="120">
       <t-form-item label="节点可高亮">
@@ -83,23 +83,8 @@ export default {
 };
 </script>
 
-<!-- <style scoped>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
+<style scoped>
 .tdesign-tree-demo .t-form__item {
   margin-bottom: 5px;
 }
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style> -->
+</style>
diff --git a/src/tree/_example/base.vue b/src/tree/_example/base.vue
index 6d5f3e21a..e0ce032d1 100644
--- a/src/tree/_example/base.vue
+++ b/src/tree/_example/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="tdesign-tree-demo">
     <t-tree :data="items" activable hover transition />
   </div>
 </template>
@@ -60,10 +60,7 @@ export default {
 </script>
 
 <style scoped>
-/* .t-tree {
-  margin-bottom: 20px;
-} */
-/* .tdesign-tree-demo .title {
+.tdesign-tree-demo .title {
   margin-bottom: 10px;
 }
 .tdesign-tree-demo .tips {
@@ -77,5 +74,5 @@ export default {
 }
 .tdesign-tree-demo .t-button {
   margin: 0 10px 10px 0;
-} */
+}
 </style>
diff --git a/src/tree/_example/empty.vue b/src/tree/_example/empty.vue
index fb993caec..accf50df0 100644
--- a/src/tree/_example/empty.vue
+++ b/src/tree/_example/empty.vue
@@ -22,24 +22,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style>
diff --git a/src/tree/_example/expand-all.vue b/src/tree/_example/expand-all.vue
index a84419e87..6d4626eed 100644
--- a/src/tree/_example/expand-all.vue
+++ b/src/tree/_example/expand-all.vue
@@ -1,6 +1,5 @@
 <template>
-  <t-space :size="10" direction="vertical">
-    <!-- <div class="operations"> -->
+  <t-space :size="10" direction="vertical" class="tdesign-tree-demo">
     <t-form labelWidth="150">
       <t-form-item label="切换数据">
         <t-switch @change="toggleData" />
@@ -9,7 +8,6 @@
         <t-switch v-model="transition" />
       </t-form-item>
     </t-form>
-    <!-- </div> -->
     <t-tree :data="items" expand-all :transition="transition" />
   </t-space>
 </template>
@@ -92,22 +90,7 @@ export default {
 </script>
 
 <style scoped>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
 .tdesign-tree-demo .t-form__item {
   margin-bottom: 5px;
 }
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
 </style>
diff --git a/src/tree/_example/expand-level.vue b/src/tree/_example/expand-level.vue
index 4d924c86b..5e588cba3 100644
--- a/src/tree/_example/expand-level.vue
+++ b/src/tree/_example/expand-level.vue
@@ -52,24 +52,3 @@ export default {
   },
 };
 </script>
-
-<!-- <style>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .t-form__item {
-  margin-bottom: 5px;
-}
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style> -->
diff --git a/src/tree/_example/expand-mutex.vue b/src/tree/_example/expand-mutex.vue
index 40b9636d6..a47621b89 100644
--- a/src/tree/_example/expand-mutex.vue
+++ b/src/tree/_example/expand-mutex.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-space :size="10" direction="vertical">
+  <t-space :size="10" direction="vertical" class="tdesign-tree-demo">
     <!-- <div class="operations"> -->
     <t-form labelWidth="120">
       <t-form-item label="互斥展开">
@@ -107,22 +107,7 @@ export default {
 </script>
 
 <style scoped>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
 .tdesign-tree-demo .t-form__item {
   margin-bottom: 5px;
 }
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
 </style>
diff --git a/src/tree/_example/lazy.vue b/src/tree/_example/lazy.vue
index de9c752fb..b7065bbf6 100644
--- a/src/tree/_example/lazy.vue
+++ b/src/tree/_example/lazy.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-space :size="10" direction="vertical">
+  <t-space :size="10" direction="vertical" class="tdesign-tree-demo">
     <h3>数据延迟加载</h3>
     <p>默认为点击加载数据。</p>
     <p>
@@ -81,23 +81,8 @@ export default {
 };
 </script>
 
-<!-- <style scoped>
-.tdesign-tree-demo .t-tree {
-  margin-bottom: 20px;
-}
-.tdesign-tree-demo .title {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .tips {
-  margin-bottom: 10px;
-}
-.tdesign-tree-demo .operations {
-  margin-bottom: 10px;
-}
+<style scoped>
 .tdesign-tree-demo .t-form__item {
   margin-bottom: 5px;
 }
-.tdesign-tree-demo .t-button {
-  margin: 0 10px 10px 0;
-}
-</style> -->
+</style>
diff --git a/src/tree/_example/line.vue b/src/tree/_example/line.vue
index d5938601f..2a1f27259 100644
--- a/src/tree/_example/line.vue
+++ b/src/tree/_example/line.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- <div class="tdesign-demo-block-column-large tdesign-tree-demo tdesign-tree-line"> -->
   <t-space :size="32" direction="vertical" class="tdesign-tree-line">
     <t-form>
       <t-form-item label="显示连线" style="margin-bottom: 16px">
diff --git a/src/tree/_example/load.vue b/src/tree/_example/load.vue
index a64d46115..10c2843f1 100644
--- a/src/tree/_example/load.vue
+++ b/src/tree/_example/load.vue
@@ -1,12 +1,10 @@
 <template>
   <t-space :size="10" direction="vertical">
-    <!-- <div class="operations"> -->
     <t-form labelWidth="150">
       <t-form-item label="可选">
         <t-switch v-model="checkable" />
       </t-form-item>
     </t-form>
-    <!-- </div> -->
     <t-tree :data="items" hover expand-all :checkable="checkable" v-model="value" :load="load" :lazy="false" />
   </t-space>
 </template>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 54ce8202c..f1b1d318d 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -20336,7 +20336,7 @@ exports[`ssr snapshot test renders ./src/transfer/_example/tree.vue correctly 1`
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/activable.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:10px;">
+<div class="tdesign-tree-demo t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
     <form class="t-form">
       <div class="t-form__item t-form-item__">
@@ -20387,7 +20387,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/activable.vue correctly 1
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/base.vue correctly 1`] = `
-<div>
+<div class="tdesign-tree-demo">
   <div class="t-tree t-tree--hoverable t-tree--transition">
     <transition-group-stub tag="div" enterActiveClass="t-tree__item--enter-active" leaveActiveClass="t-tree__item--leave-active" class="t-tree__list">
       <div data-value="t33" data-level="0" class="t-tree__item t-tree__item--visible" style="--level:0;"><span trigger="expand" ignore="active" class="t-tree__icon t-folder-icon t-tree__icon--default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small"><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fill-opacity="0.9"></path></svg></span><span class="t-tree__label"><span style="position:relative;">第一段</span></span></div>
@@ -20676,7 +20676,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/empty.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-all.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:10px;">
+<div class="tdesign-tree-demo t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
     <form class="t-form">
       <div class="t-form__item t-form-item__">
@@ -20736,7 +20736,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/expand-level.vue correctl
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:10px;">
+<div class="tdesign-tree-demo t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
     <form class="t-form">
       <div class="t-form__item t-form-item__">
@@ -20855,7 +20855,7 @@ exports[`ssr snapshot test renders ./src/tree/_example/label.vue correctly 1`] =
 `;
 
 exports[`ssr snapshot test renders ./src/tree/_example/lazy.vue correctly 1`] = `
-<div class="t-space t-space-vertical" style="gap:10px;">
+<div class="tdesign-tree-demo t-space t-space-vertical" style="gap:10px;">
   <div class="t-space-item">
     <h3>数据延迟加载</h3>
   </div>