From a19eb11575398fdae97215c092a9714cb6c86522 Mon Sep 17 00:00:00 2001
From: Mark1307779 <979424527@qq.com>
Date: Fri, 19 Aug 2022 14:52:32 +0800
Subject: [PATCH 1/2] chore: update dialog demo unit test snapshot

---
 examples/dialog/demos/async.vue               |   7 +-
 examples/dialog/demos/attach.vue              |  14 +-
 examples/dialog/demos/base.vue                |   2 +-
 examples/dialog/demos/custom.vue              |  36 +-
 examples/dialog/demos/custom/body.vue         |  35 +-
 examples/dialog/demos/custom/bottom.vue       |  25 +-
 examples/dialog/demos/drag.vue                |  23 +-
 examples/dialog/demos/icon.vue                |  24 +-
 examples/dialog/demos/modal.vue               |  15 +-
 examples/dialog/demos/plugin.vue              |   7 +-
 examples/dialog/demos/position.vue            |  28 +-
 examples/dialog/demos/warning.vue             |  35 +-
 .../dialog/__snapshots__/demo.test.js.snap    | 917 +++++++++++-------
 13 files changed, 639 insertions(+), 529 deletions(-)

diff --git a/examples/dialog/demos/async.vue b/examples/dialog/demos/async.vue
index 35cd6c161..76a876668 100644
--- a/examples/dialog/demos/async.vue
+++ b/examples/dialog/demos/async.vue
@@ -8,13 +8,11 @@
       :confirmBtn="{
         content: '保存中...',
         theme: 'primary',
-        loading: true
+        loading: true,
       }"
       :onConfirm="onConfirm"
       :onClose="close"
-    >
-    </t-dialog>
-
+    />
   </div>
 </template>
 <script>
@@ -33,6 +31,5 @@ export default {
       this.visible = false;
     },
   },
-
 };
 </script>
diff --git a/examples/dialog/demos/attach.vue b/examples/dialog/demos/attach.vue
index 44a703c03..999afcb1b 100644
--- a/examples/dialog/demos/attach.vue
+++ b/examples/dialog/demos/attach.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="dialog-attach-wrap">
     <!-- attach挂载 -->
-    <t-button theme="primary" @click="visibleBody = true">挂载在body</t-button>
-    <t-button theme="primary" @click="visibleIdAttach = true">挂载特定元素</t-button>
-    <t-button theme="primary" @click="visibleFunctionAttach = true">挂载函数返回节点</t-button>
-    <t-button theme="primary" @click="visibleShowInAttachedElement = true">展示在挂载元素区域</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visibleBody = true">挂载在body</t-button>
+      <t-button theme="primary" @click="visibleIdAttach = true">挂载特定元素</t-button>
+      <t-button theme="primary" @click="visibleFunctionAttach = true">挂载函数返回节点</t-button>
+      <t-button theme="primary" @click="visibleShowInAttachedElement = true">展示在挂载元素区域</t-button>
+    </t-space>
     <t-dialog
       :visible.sync="visibleBody"
       attach="body"
@@ -79,9 +80,6 @@ export default Vue.extend({
 });
 </script>
 <style scoped>
-.t-button {
-  margin-right: 20px;
-}
 .dialog-attach-wrap {
   position: relative;
   height: 300px;
diff --git a/examples/dialog/demos/base.vue b/examples/dialog/demos/base.vue
index 4cc60a186..656fe2b9d 100644
--- a/examples/dialog/demos/base.vue
+++ b/examples/dialog/demos/base.vue
@@ -20,7 +20,7 @@
     >
       <t-button theme="primary" @click="visible1 = true">弹窗二</t-button>
     </t-dialog>
-    <t-dialog header="对话框标题二" body="对话框内容二" :visible.sync="visible1"> </t-dialog>
+    <t-dialog header="对话框标题二" body="对话框内容二" :visible.sync="visible1" />
   </div>
 </template>
 <script>
diff --git a/examples/dialog/demos/custom.vue b/examples/dialog/demos/custom.vue
index 4a4b23585..cb49d0cc7 100644
--- a/examples/dialog/demos/custom.vue
+++ b/examples/dialog/demos/custom.vue
@@ -3,10 +3,11 @@
     <p>弹窗内容自定义</p>
     <br />
     <div>
-      <t-button theme="primary" @click="bodyVisible1 = true">隐藏标题</t-button>
-      <t-button theme="primary" @click="bodyVisible2 = true">渲染函数定义内容</t-button>
-      <t-button theme="primary" @click="bodyVisible3 = true">插槽方式定义内容</t-button>
-
+      <t-space break-line>
+        <t-button theme="primary" @click="bodyVisible1 = true">隐藏标题</t-button>
+        <t-button theme="primary" @click="bodyVisible2 = true">渲染函数定义内容</t-button>
+        <t-button theme="primary" @click="bodyVisible3 = true">插槽方式定义内容</t-button>
+      </t-space>
       <!-- :onClose="onClose" 和 @close="onClose" 等效 -->
       <!-- :onConfirm="onConfirm" 和 @confirm="onConfirm" 等效 -->
       <t-dialog
@@ -15,7 +16,7 @@
         :visible="bodyVisible1"
         :onClose="bodyClose1"
         :onConfirm="bodyClose1"
-      ></t-dialog>
+      />
 
       <t-dialog
         :visible="bodyVisible2"
@@ -42,11 +43,12 @@
       来自定义控制
     </p>
     <br />
-    <t-button theme="primary" @click="visible1 = true">按钮文字</t-button>
-    <t-button theme="primary" @click="visible2 = true">按钮属性</t-button>
-    <t-button theme="primary" @click="visible3 = true">渲染函数按钮</t-button>
-    <t-button theme="primary" @click="visible4 = true">隐藏底部</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">按钮文字</t-button>
+      <t-button theme="primary" @click="visible2 = true">按钮属性</t-button>
+      <t-button theme="primary" @click="visible3 = true">渲染函数按钮</t-button>
+      <t-button theme="primary" @click="visible4 = true">隐藏底部</t-button>
+    </t-space>
     <t-dialog
       :visible.sync="visible1"
       header="提示"
@@ -55,8 +57,7 @@
       cancelBtn="关闭"
       :onConfirm="onConfirm"
       :onClose="close1"
-    >
-    </t-dialog>
+    />
 
     <!-- 透传 ButtonProps，以自定义按钮样式 -->
     <t-dialog
@@ -73,7 +74,7 @@
         variant: 'outline',
       }"
       :onClose="close2"
-    ></t-dialog>
+    />
 
     <!-- cancelBtn 和 confirmBtn 值为 null 时，隐藏按钮 -->
     <!-- confirmBtn 可以作为渲染函数输出按钮 -->
@@ -84,7 +85,7 @@
       :confirmBtn="getConfirmBtn"
       :cancelBtn="null"
       :onClose="close3"
-    ></t-dialog>
+    />
 
     <t-dialog
       :visible="visible4"
@@ -93,7 +94,7 @@
       :footer="false"
       :onClose="close4"
       :onConfirm="close4"
-    ></t-dialog>
+    />
   </div>
 </template>
 <script lang="jsx">
@@ -164,8 +165,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/custom/body.vue b/examples/dialog/demos/custom/body.vue
index 2db509e7b..2d9ec7200 100644
--- a/examples/dialog/demos/custom/body.vue
+++ b/examples/dialog/demos/custom/body.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visible1 = true">隐藏标题</t-button>
-    <t-button theme="primary" @click="visible2 = true">隐藏底部</t-button>
-    <t-button theme="primary" @click="visible3 = true">渲染函数定义内容</t-button>
-    <t-button theme="primary" @click="visible4 = true">插槽方式定义内容</t-button>
-
-    <t-dialog :header="false" body="对话框内容" :visible="visible1" :onClose="close1" :onConfirm="close1" >
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">隐藏标题</t-button>
+      <t-button theme="primary" @click="visible2 = true">隐藏底部</t-button>
+      <t-button theme="primary" @click="visible3 = true">渲染函数定义内容</t-button>
+      <t-button theme="primary" @click="visible4 = true">插槽方式定义内容</t-button>
+    </t-space>
+    <t-dialog :header="false" body="对话框内容" :visible="visible1" :onClose="close1" :onConfirm="close1">
       <div slot="body">
         <div>不需要标题的内容</div>
         <div>我是内容</div>
@@ -15,13 +16,7 @@
       </div>
     </t-dialog>
 
-    <t-dialog
-      :visible="visible2"
-      header="提示"
-      body="对话框内容"
-      :footer="false"
-      :onClose="close2" :onConfirm="close2"
-    >
+    <t-dialog :visible="visible2" header="提示" body="对话框内容" :footer="false" :onClose="close2" :onConfirm="close2">
       <div slot="body">
         <div>不需要底部按钮的内容</div>
         <div>我是内容</div>
@@ -31,16 +26,11 @@
       </div>
     </t-dialog>
 
-    <t-dialog
-      :visible="visible3"
-      header="对话框标题"
-      :body="renderDialog3Body"
-      :onClose="close3" :onConfirm="close3"
-    >
+    <t-dialog :visible="visible3" header="对话框标题" :body="renderDialog3Body" :onClose="close3" :onConfirm="close3">
       <div slot="body">被渲染函数覆盖的插槽内容</div>
     </t-dialog>
 
-    <t-dialog header="对话框标题" :visible="visible4" :onClose="close4" :onConfirm="close4" >
+    <t-dialog header="对话框标题" :visible="visible4" :onClose="close4" :onConfirm="close4">
       <div slot="body">
         <div>我是内容</div>
         <div>我是内容</div>
@@ -84,8 +74,3 @@ export default Vue.extend({
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/custom/bottom.vue b/examples/dialog/demos/custom/bottom.vue
index 4f41a9082..2d0795198 100644
--- a/examples/dialog/demos/custom/bottom.vue
+++ b/examples/dialog/demos/custom/bottom.vue
@@ -2,19 +2,18 @@
   <div>
     <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p>
     <br />
-    <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
-    <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
-    <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
+      <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
+      <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
+    </t-space>
     <t-dialog
       :visible="visible1"
       header="提示"
       body="自定义底部按钮，直接传入文字"
       confirmBtn="前往支付"
       cancelBtn="关闭"
-    >
-    </t-dialog>
-
+    />
     <t-dialog
       :visible="visible2"
       header="提示"
@@ -28,17 +27,14 @@
         content: '我知道了',
         variant: 'outline',
       }"
-    >
-    </t-dialog>
-
+    />
     <t-dialog
       :visible="visible3"
       header="提示"
       body="自定义底部按钮，传入自定义组件"
       :confirmBtn="getConfirmBtn"
       :cancelBtn="false"
-    >
-    </t-dialog>
+    />
   </div>
 </template>
 <script>
@@ -61,8 +57,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/drag.vue b/examples/dialog/demos/drag.vue
index de4e77ef8..f6d1ede9e 100644
--- a/examples/dialog/demos/drag.vue
+++ b/examples/dialog/demos/drag.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框-可拖拽</t-button>
-    <t-button theme="primary" @click="visibleModeless = true">非模态对话框-不可拖拽</t-button>
-    <t-button theme="primary" @click="visibleModal = true">模态对话框-不支持拖拽</t-button>
-    <br>
+    <t-space break-line>
+      <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框-可拖拽</t-button>
+      <t-button theme="primary" @click="visibleModeless = true">非模态对话框-不可拖拽</t-button>
+      <t-button theme="primary" @click="visibleModal = true">模态对话框-不支持拖拽</t-button>
+    </t-space>
+    <br />
 
     <t-dialog
       header="模态对话框"
       :visible.sync="visibleModal"
       mode="modal"
       draggable
-      :onConfirm="()=>this.visibleModal = false"
+      :onConfirm="() => (this.visibleModal = false)"
     >
       <div slot="body">
         <div>默认点击蒙层或按ESC可关闭</div>
@@ -23,7 +25,7 @@
       :visible.sync="visibleModelessDrag"
       mode="modeless"
       draggable
-      :onConfirm="()=>this.visibleModelessDrag = false"
+      :onConfirm="() => (this.visibleModelessDrag = false)"
     >
       <div slot="body">
         <div>对话框内容</div>
@@ -34,13 +36,12 @@
       header="非模态对话框-不可拖拽"
       :visible.sync="visibleModeless"
       mode="modeless"
-      :onConfirm="()=>this.visibleModeless = false"
+      :onConfirm="() => (this.visibleModeless = false)"
     >
       <div slot="body">
         <div>对话框内容</div>
       </div>
     </t-dialog>
-
   </div>
 </template>
 <script>
@@ -58,12 +59,6 @@ export default Vue.extend({
     getAttach() {
       return this.$root.$el;
     },
-
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/icon.vue b/examples/dialog/demos/icon.vue
index 09a8b49fc..4a74f3332 100644
--- a/examples/dialog/demos/icon.vue
+++ b/examples/dialog/demos/icon.vue
@@ -8,7 +8,7 @@
       theme="info"
       :onConfirm="close1"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible2"
       header="温馨提示"
@@ -17,7 +17,7 @@
       theme="warning"
       :onConfirm="close2"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible3"
       header="推送失败"
@@ -26,7 +26,7 @@
       theme="danger"
       :onConfirm="close3"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible4"
       header="操作成功"
@@ -35,11 +35,13 @@
       theme="success"
       :onConfirm="close4"
     />
-    <br>
-    <t-button v-if="!visible1" theme="primary" @click="visible1 = true">theme: info</t-button>
-    <t-button v-if="!visible2" theme="primary" @click="visible2 = true">theme: warning</t-button>
-    <t-button v-if="!visible3" theme="primary" @click="visible3 = true">theme: danger</t-button>
-    <t-button v-if="!visible4" theme="primary" @click="visible4 = true">theme: success</t-button>
+    <br />
+    <t-space break-line>
+      <t-button v-if="!visible1" theme="primary" @click="visible1 = true">theme: info</t-button>
+      <t-button v-if="!visible2" theme="primary" @click="visible2 = true">theme: warning</t-button>
+      <t-button v-if="!visible3" theme="primary" @click="visible3 = true">theme: danger</t-button>
+      <t-button v-if="!visible4" theme="primary" @click="visible4 = true">theme: success</t-button>
+    </t-space>
   </div>
 </template>
 <script>
@@ -65,12 +67,6 @@ export default {
     close4() {
       this.visible4 = false;
     },
-
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/modal.vue b/examples/dialog/demos/modal.vue
index df92f88e5..3af73c300 100644
--- a/examples/dialog/demos/modal.vue
+++ b/examples/dialog/demos/modal.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visibleModal = true">模态对话框</t-button>
-    <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框</t-button>
-    <t-button theme="primary" @click="visibleModeless = true">模态对话框-不可拖拽</t-button>
-    <t-button theme="primary" @click="visibleNormal = true">普通对话框-不可拖拽</t-button>
+    <t-space break-line>
+      <t-button theme="primary" @click="visibleModal = true">模态对话框</t-button>
+      <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框</t-button>
+      <t-button theme="primary" @click="visibleModeless = true">模态对话框-不可拖拽</t-button>
+      <t-button theme="primary" @click="visibleNormal = true">普通对话框-不可拖拽</t-button>
+    </t-space>
 
     <t-dialog
       header="模态对话框"
@@ -77,8 +79,3 @@ export default {
   methods: {},
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/plugin.vue b/examples/dialog/demos/plugin.vue
index c7fb9d48e..128ff3808 100644
--- a/examples/dialog/demos/plugin.vue
+++ b/examples/dialog/demos/plugin.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <t-space break-line>
     <t-button theme="primary" @click="showDialog">dialog</t-button>
     <t-button theme="primary" @click="handleDN">handleDialogNode</t-button>
     <t-button theme="primary" @click="onConfirm">confirm</t-button>
     <t-button theme="primary" @click="onAlert">alert</t-button>
     <t-button theme="primary" @click="onDialogPluginConfirm">DialogPlugin.confirm</t-button>
-  </div>
+  </t-space>
 </template>
 <script>
 import Vue from 'vue';
@@ -115,9 +115,6 @@ export default Vue.extend({
 });
 </script>
 <style scoped>
-.t-button {
-  margin-right: 20px;
-}
 p {
   line-height: 25px;
 }
diff --git a/examples/dialog/demos/position.vue b/examples/dialog/demos/position.vue
index 83cfbddfc..11f46b166 100644
--- a/examples/dialog/demos/position.vue
+++ b/examples/dialog/demos/position.vue
@@ -1,17 +1,14 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visible = true">默认位置</t-button>
-    <t-button theme="primary" @click="visibleCenter = true">垂直居中</t-button>
-    <t-button theme="primary" @click="visibleTop = true">自定义top</t-button>
-    <t-button theme="primary" @click="visibleOverflow = true">文本溢出</t-button>
-    <t-dialog header="对话框标题" body="对话框内容" :visible="visible" :onClose="close1" :onConfirm="close1"></t-dialog>
-    <t-dialog
-      placement="center"
-      header="对话框标题"
-      :visible="visibleCenter"
-      :onConfirm="close2"
-      :onClose="close2"
-    >
+    <t-space break-line>
+      <t-button theme="primary" @click="visible = true">默认位置</t-button>
+      <t-button theme="primary" @click="visibleCenter = true">垂直居中</t-button>
+      <t-button theme="primary" @click="visibleTop = true">自定义top</t-button>
+      <t-button theme="primary" @click="visibleOverflow = true">文本溢出</t-button>
+    </t-space>
+    <t-dialog header="对话框标题" body="对话框内容" :visible="visible" :onClose="close1" :onConfirm="close1" />
+
+    <t-dialog placement="center" header="对话框标题" :visible="visibleCenter" :onConfirm="close2" :onClose="close2">
       <p>水平居中显示的对话框</p>
     </t-dialog>
     <t-dialog
@@ -22,7 +19,7 @@
       :visible="visibleTop"
       :onConfirm="close3"
       :onClose="close3"
-    ></t-dialog>
+    />
     <t-dialog
       placement="center"
       header="文本溢出对话框标题"
@@ -108,8 +105,3 @@ export default Vue.extend({
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/examples/dialog/demos/warning.vue b/examples/dialog/demos/warning.vue
index 5a35bd601..0112e49bd 100644
--- a/examples/dialog/demos/warning.vue
+++ b/examples/dialog/demos/warning.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visible1 = true">提示反馈</t-button>
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">提示反馈</t-button>
+      <t-button theme="primary" @click="visible2 = true">成功反馈</t-button>
+      <t-button theme="primary" @click="visible3 = true">警示反馈</t-button>
+      <t-button theme="primary" @click="visible4 = true">错误反馈</t-button>
+      <t-button theme="primary" @click="visible5 = true">自定义图标</t-button>
+    </t-space>
     <t-dialog
       theme="info"
       header="提示"
@@ -8,10 +14,7 @@
       :visible.sync="visible1"
       @confirm="onConfirm"
       :onClose="close1"
-    >
-    </t-dialog>
-
-    <t-button theme="primary" @click="visible2 = true">成功反馈</t-button>
+    />
     <t-dialog
       theme="success"
       header="成功"
@@ -19,10 +22,7 @@
       :visible.sync="visible2"
       @confirm="onConfirm"
       :onClose="close2"
-    >
-    </t-dialog>
-
-    <t-button theme="primary" @click="visible3 = true">警示反馈</t-button>
+    />
     <t-dialog
       theme="warning"
       header="警示"
@@ -31,10 +31,7 @@
       @confirm="onConfirm"
       :onClose="close3"
       :cancelBtn="null"
-    >
-    </t-dialog>
-
-    <t-button theme="primary" @click="visible4 = true">错误反馈</t-button>
+    />
     <t-dialog
       theme="danger"
       header="错误"
@@ -43,10 +40,7 @@
       @confirm="onConfirm"
       :onClose="close4"
       :cancelBtn="null"
-    >
-    </t-dialog>
-
-    <t-button theme="primary" @click="visible5 = true">自定义图标</t-button>
+    />
     <t-dialog body="对话框内容" :closeBtn="false" :visible.sync="visible5" @confirm="onConfirm" :onClose="close5">
       <div slot="header">
         <icon name="check-circle-filled" color="orange" />
@@ -58,9 +52,11 @@
 <script>
 import Vue from 'vue';
 import { Icon } from 'tdesign-icons-vue';
+import TSpace from '../../../src/space/space';
 
 export default Vue.extend({
   components: {
+    TSpace,
     Icon,
   },
   data() {
@@ -106,8 +102,3 @@ export default Vue.extend({
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>
diff --git a/test/unit/dialog/__snapshots__/demo.test.js.snap b/test/unit/dialog/__snapshots__/demo.test.js.snap
index e42924ac5..6402b3e61 100644
--- a/test/unit/dialog/__snapshots__/demo.test.js.snap
+++ b/test/unit/dialog/__snapshots__/demo.test.js.snap
@@ -123,49 +123,67 @@ exports[`Dialog Dialog attachVue demo works fine 1`] = `
 <div
   class="dialog-attach-wrap"
 >
-  <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"
     >
-      挂载在body
-    </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"
+        >
+          挂载在body
+        </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>
    
   <transition-stub
     duration="300"
@@ -462,38 +480,53 @@ exports[`Dialog Dialog custom demo works fine 1`] = `
   <br />
    
   <div>
-    <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"
       >
-        隐藏标题
-      </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>
      
     <transition-stub
       duration="300"
@@ -756,49 +789,67 @@ exports[`Dialog Dialog custom demo works fine 1`] = `
    
   <br />
    
-  <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"
     >
-      按钮文字
-    </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>
    
   <transition-stub
     duration="300"
@@ -1110,38 +1161,53 @@ exports[`Dialog Dialog customVue demo works fine 1`] = `
   <br />
    
   <div>
-    <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"
       >
-        隐藏标题
-      </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>
      
     <transition-stub
       duration="300"
@@ -1404,49 +1470,67 @@ exports[`Dialog Dialog customVue demo works fine 1`] = `
    
   <br />
    
-  <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"
     >
-      按钮文字
-    </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>
    
   <transition-stub
     duration="300"
@@ -1751,38 +1835,53 @@ exports[`Dialog Dialog customVue demo works fine 1`] = `
 
 exports[`Dialog Dialog dragVue demo works fine 1`] = `
 <div>
-  <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"
     >
-      非模态对话框-可拖拽
-    </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>
    
   <br />
    
@@ -2409,49 +2508,67 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
 
 exports[`Dialog Dialog modalVue demo works fine 1`] = `
 <div>
-  <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"
     >
-      模态对话框
-    </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>
    
   <transition-stub
     duration="300"
@@ -2863,109 +2980,146 @@ exports[`Dialog Dialog modalVue demo works fine 1`] = `
 `;
 
 exports[`Dialog Dialog pluginVue demo works fine 1`] = `
-<div>
-  <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;"
+>
+  <div
+    class="t-space-item"
   >
-    <span
-      class="t-button__text"
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
     >
-      dialog
-    </span>
-  </button>
-   
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
+      <span
+        class="t-button__text"
+      >
+        dialog
+      </span>
+    </button>
+  </div>
+  <div
+    class="t-space-item"
   >
-    <span
-      class="t-button__text"
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
     >
-      handleDialogNode
-    </span>
-  </button>
-   
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
+      <span
+        class="t-button__text"
+      >
+        handleDialogNode
+      </span>
+    </button>
+  </div>
+  <div
+    class="t-space-item"
   >
-    <span
-      class="t-button__text"
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
     >
-      confirm
-    </span>
-  </button>
-   
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
+      <span
+        class="t-button__text"
+      >
+        confirm
+      </span>
+    </button>
+  </div>
+  <div
+    class="t-space-item"
   >
-    <span
-      class="t-button__text"
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
     >
-      alert
-    </span>
-  </button>
-   
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
+      <span
+        class="t-button__text"
+      >
+        alert
+      </span>
+    </button>
+  </div>
+  <div
+    class="t-space-item"
   >
-    <span
-      class="t-button__text"
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+      type="button"
     >
-      DialogPlugin.confirm
-    </span>
-  </button>
+      <span
+        class="t-button__text"
+      >
+        DialogPlugin.confirm
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`Dialog Dialog positionVue demo works fine 1`] = `
 <div>
-  <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"
     >
-      默认位置
-    </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"
     >
-      自定义top
-    </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"
+        >
+          自定义top
+        </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>
    
   <transition-stub
     duration="300"
@@ -3468,16 +3622,81 @@ exports[`Dialog Dialog positionVue demo works fine 1`] = `
 
 exports[`Dialog Dialog warningVue demo works fine 1`] = `
 <div>
-  <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"
     >
-      提示反馈
-    </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
+      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>
    
   <transition-stub
     duration="300"
@@ -3571,17 +3790,6 @@ exports[`Dialog Dialog warningVue demo works fine 1`] = `
     </div>
   </transition-stub>
    
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
-  >
-    <span
-      class="t-button__text"
-    >
-      成功反馈
-    </span>
-  </button>
-   
   <transition-stub
     duration="300"
     name="t-dialog-zoom__vue"
@@ -3674,17 +3882,6 @@ exports[`Dialog Dialog warningVue demo works fine 1`] = `
     </div>
   </transition-stub>
    
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
-  >
-    <span
-      class="t-button__text"
-    >
-      警示反馈
-    </span>
-  </button>
-   
   <transition-stub
     duration="300"
     name="t-dialog-zoom__vue"
@@ -3767,17 +3964,6 @@ exports[`Dialog Dialog warningVue demo works fine 1`] = `
     </div>
   </transition-stub>
    
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
-  >
-    <span
-      class="t-button__text"
-    >
-      错误反馈
-    </span>
-  </button>
-   
   <transition-stub
     duration="300"
     name="t-dialog-zoom__vue"
@@ -3860,17 +4046,6 @@ exports[`Dialog Dialog warningVue demo works fine 1`] = `
     </div>
   </transition-stub>
    
-  <button
-    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
-    type="button"
-  >
-    <span
-      class="t-button__text"
-    >
-      自定义图标
-    </span>
-  </button>
-   
   <transition-stub
     duration="300"
     name="t-dialog-zoom__vue"

From 46c150fbd0018e868d29dbe1b65b9bc60af5d4f5 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Fri, 19 Aug 2022 16:16:31 +0800
Subject: [PATCH 2/2] chore: update snapshot

---
 examples/dialog/demos/icon.vue                | 13 ++--
 examples/dialog/demos/warning.vue             |  2 -
 test/ssr/__snapshots__/ssr.test.js.snap       | 76 +++++++++++++++----
 .../dialog/__snapshots__/demo.test.js.snap    | 12 ++-
 4 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/examples/dialog/demos/icon.vue b/examples/dialog/demos/icon.vue
index 4a74f3332..4ae607d25 100644
--- a/examples/dialog/demos/icon.vue
+++ b/examples/dialog/demos/icon.vue
@@ -36,19 +36,18 @@
       :onConfirm="close4"
     />
     <br />
-    <t-space break-line>
-      <t-button v-if="!visible1" theme="primary" @click="visible1 = true">theme: info</t-button>
-      <t-button v-if="!visible2" theme="primary" @click="visible2 = true">theme: warning</t-button>
-      <t-button v-if="!visible3" theme="primary" @click="visible3 = true">theme: danger</t-button>
-      <t-button v-if="!visible4" theme="primary" @click="visible4 = true">theme: success</t-button>
-    </t-space>
+
+    <t-button v-if="!visible1" theme="primary" @click="visible1 = true">theme: info</t-button>
+    <t-button v-if="!visible2" theme="primary" @click="visible2 = true">theme: warning</t-button>
+    <t-button v-if="!visible3" theme="primary" @click="visible3 = true">theme: danger</t-button>
+    <t-button v-if="!visible4" theme="primary" @click="visible4 = true">theme: success</t-button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
-      visible1: true,
+      visible1: false,
       visible2: true,
       visible3: true,
       visible4: true,
diff --git a/examples/dialog/demos/warning.vue b/examples/dialog/demos/warning.vue
index 0112e49bd..0fe7c309c 100644
--- a/examples/dialog/demos/warning.vue
+++ b/examples/dialog/demos/warning.vue
@@ -52,11 +52,9 @@
 <script>
 import Vue from 'vue';
 import { Icon } from 'tdesign-icons-vue';
-import TSpace from '../../../src/space/space';
 
 export default Vue.extend({
   components: {
-    TSpace,
     Icon,
   },
   data() {
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 456566a0f..d1b24a29f 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -5623,7 +5623,13 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/async.vue correctly 1
 `;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/attach.vue correctly 1`] = `
-<div class="dialog-attach-wrap"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">挂载在body</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 class="dialog-attach-wrap">
+  <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">挂载在body</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 duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5641,7 +5647,12 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/base.vue correctly 1`
 exports[`ssr snapshot test renders ./examples/dialog/demos/custom.vue correctly 1`] = `
 <div>
   <p>弹窗内容自定义</p> <br>
-  <div><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 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">隐藏标题</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 duration="300" name="t-dialog-zoom__vue"></div>
     <div duration="300" name="t-dialog-zoom__vue"></div>
     <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5650,7 +5661,13 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/custom.vue correctly
   <p>
     底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string | ButtonProps | TNode。也可以通过 footer
     来自定义控制
-  </p> <br> <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>
+  </p> <br>
+  <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">按钮文字</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 duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5659,7 +5676,12 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/custom.vue correctly
 `;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/drag.vue correctly 1`] = `
-<div><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> <br>
+<div>
+  <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">非模态对话框-可拖拽</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> <br>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5671,8 +5693,7 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/icon.vue correctly 1`
   <div duration="300" name="t-dialog-zoom__vue"></div> <br>
   <div duration="300" name="t-dialog-zoom__vue"></div> <br>
   <div duration="300" name="t-dialog-zoom__vue"></div> <br>
-  <div duration="300" name="t-dialog-zoom__vue"></div> <br>
-  <!---->
+  <div duration="300" name="t-dialog-zoom__vue"></div> <br> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">theme: info</span></button>
   <!---->
   <!---->
   <!---->
@@ -5680,7 +5701,13 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/icon.vue correctly 1`
 `;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/modal.vue correctly 1`] = `
-<div><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 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">模态对话框</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 duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5689,10 +5716,24 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/modal.vue correctly 1
 </div>
 `;
 
-exports[`ssr snapshot test renders ./examples/dialog/demos/plugin.vue correctly 1`] = `<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">dialog</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">handleDialogNode</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">confirm</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">alert</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">DialogPlugin.confirm</span></button></div>`;
+exports[`ssr snapshot test renders ./examples/dialog/demos/plugin.vue correctly 1`] = `
+<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">dialog</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">handleDialogNode</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">confirm</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">alert</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">DialogPlugin.confirm</span></button></div>
+</div>
+`;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/position.vue correctly 1`] = `
-<div><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">自定义top</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 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">默认位置</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">自定义top</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 duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
@@ -5701,11 +5742,18 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/position.vue correctl
 `;
 
 exports[`ssr snapshot test renders ./examples/dialog/demos/warning.vue correctly 1`] = `
-<div><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 duration="300" name="t-dialog-zoom__vue"></div> <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 duration="300" name="t-dialog-zoom__vue"></div> <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 duration="300" name="t-dialog-zoom__vue"></div> <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 duration="300" name="t-dialog-zoom__vue"></div> <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 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">提示反馈</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 duration="300" name="t-dialog-zoom__vue"></div>
+  <div duration="300" name="t-dialog-zoom__vue"></div>
+  <div duration="300" name="t-dialog-zoom__vue"></div>
+  <div duration="300" name="t-dialog-zoom__vue"></div>
   <div duration="300" name="t-dialog-zoom__vue"></div>
 </div>
 `;
diff --git a/test/unit/dialog/__snapshots__/demo.test.js.snap b/test/unit/dialog/__snapshots__/demo.test.js.snap
index 6402b3e61..e69ce8d54 100644
--- a/test/unit/dialog/__snapshots__/demo.test.js.snap
+++ b/test/unit/dialog/__snapshots__/demo.test.js.snap
@@ -2142,6 +2142,7 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
   >
     <div
       class="t-dialog__ctx"
+      style="display: none;"
     >
       <div
         class=""
@@ -2496,7 +2497,16 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
    
   <br />
    
-  <!---->
+  <button
+    class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+      theme: info
+    </span>
+  </button>
    
   <!---->