diff --git a/src/_common b/src/_common
index c569a218e..9bed9e485 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit c569a218ec1547b4924c429337237ebdcf3b23d3
+Subproject commit 9bed9e485fdc50f4e5d869c2fcca3b5fcd9bb071
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 0bc3439a1..f6bfc4f30 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -29,7 +29,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -122,7 +122,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -184,6 +184,91 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   <!--teleport end-->
+  <div
+    class="btn-gap"
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      确认类-纯标题
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确定
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
   
 </div>
 `;
@@ -217,7 +302,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -297,7 +382,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -373,7 +458,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -398,7 +483,11 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             class="t-dialog__body-text"
           >
             
-            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.
+            <div
+              class="content-container"
+            >
+              这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            </div>
             
           </div>
         </div>
@@ -449,7 +538,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      图片置顶
+      图片置顶-带标题描述
       
     </span>
     <!---->
@@ -462,7 +551,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -589,7 +678,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      图片居中
+      图片置顶-无标题
       
     </span>
     <!---->
@@ -602,7 +691,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -610,29 +699,9 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
-      <div
-        class="t-dialog__content"
-      >
-        <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
-        >
-          <div
-            class="t-dialog__body-text"
-          >
-            告知当前状态、信息和解决方法
-          </div>
-        </div>
-      </div>
       
       <div
-        class="t-image t-image--square image"
+        class="t-image t-image--square"
         data-v-ddf95d52=""
       >
         <div
@@ -676,6 +745,22 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
         </picture>
       </div>
       
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <!---->
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            告知当前状态、信息和解决方法
+          </div>
+        </div>
+      </div>
+      <!---->
       <div
         class="t-dialog__footer"
       >
@@ -713,19 +798,14 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   <!--teleport end-->
-  
-</div>
-`;
-
-exports[`Dialog > Dialog inputVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
     role="button"
     type="button"
   >
@@ -734,7 +814,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      输入类-无描述
+      图片置顶-纯标题
       
     </span>
     <!---->
@@ -747,7 +827,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -755,71 +835,71 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
+      
       <div
-        class="t-dialog__content"
+        class="t-image t-image--square"
+        data-v-ddf95d52=""
       >
         <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
+          class="t-image__mask"
         >
           <div
-            class="t-dialog__body-text"
+            class="t-loading"
+            style="font-size: 20px;"
           >
-            
             <div
-              class="t-input t-input--layout-horizontal t-input--border"
-              data-v-4a76bf3d=""
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
             >
+              
               <div
-                class="t-input__wrap--prefix"
-              >
-                <!---->
-                <div
-                  class="t-input__label"
-                >
-                  <!---->
-                </div>
-              </div>
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
               <div
-                class="t-input__wrap"
-              >
-                <div
-                  class="t-input__content t-input--default"
-                >
-                  <input
-                    autocomplete="Off"
-                    class="t-input__control t-input--default"
-                    name=""
-                    placeholder="请输入文字"
-                    spellcheck="false"
-                    style="--td-input-cursor-color: #0052d9;"
-                    type="text"
-                  />
-                  <!---->
-                  <!---->
-                  <!---->
-                </div>
-                <!---->
-              </div>
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+              
             </div>
-            
+            <!---->
+            <!---->
           </div>
         </div>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
       </div>
+      
       <!---->
       <div
-        class="t-dialog__footer t-dialog__footer--full"
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
       >
         <!---->
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
           role="button"
           type="button"
         >
@@ -833,7 +913,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
           role="button"
           type="button"
         >
@@ -852,12 +932,12 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
   <!--teleport end-->
   <div
     class="btn-gap"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
   />
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
     role="button"
     type="button"
   >
@@ -866,7 +946,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      输入类-带描述
+      图片置顶-纯图片
       
     </span>
     <!---->
@@ -879,7 +959,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -887,146 +967,1126 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
+      
       <div
-        class="t-dialog__content"
+        class="t-image t-image--square"
+        data-v-ddf95d52=""
       >
         <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
+          class="t-image__mask"
         >
           <div
-            class="t-dialog__body-text"
+            class="t-loading"
+            style="font-size: 20px;"
           >
-            
-            <p
-              data-v-4a76bf3d=""
-            >
+            <div
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
+            >
+              
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+              
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-ddf95d52=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      图片居中-带标题描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            告知当前状态、信息和解决方法
+          </div>
+        </div>
+      </div>
+      
+      <div
+        class="t-image t-image--square image"
+        data-v-ddf95d52=""
+      >
+        <div
+          class="t-image__mask"
+        >
+          <div
+            class="t-loading"
+            style="font-size: 20px;"
+          >
+            <div
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
+            >
+              
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+              
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-ddf95d52=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      图片居中-纯标题
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      
+      <div
+        class="t-image t-image--square image"
+        data-v-ddf95d52=""
+      >
+        <div
+          class="t-image__mask"
+        >
+          <div
+            class="t-loading"
+            style="font-size: 20px;"
+          >
+            <div
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
+            >
+              
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+              
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`Dialog > Dialog inputVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-4a76bf3d=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      输入类-无描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            
+            <div
+              class="t-input t-input--layout-horizontal t-input--border"
+              data-v-4a76bf3d=""
+            >
+              <div
+                class="t-input__wrap--prefix"
+              >
+                <!---->
+                <div
+                  class="t-input__label"
+                >
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="t-input__wrap"
+              >
+                <div
+                  class="t-input__content t-input--default"
+                >
+                  <input
+                    autocomplete="Off"
+                    class="t-input__control t-input--default"
+                    name=""
+                    placeholder="请输入文字"
+                    spellcheck="false"
+                    style="--td-input-cursor-color: #0052d9;"
+                    type="text"
+                  />
+                  <!---->
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer t-dialog__footer--full"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-4a76bf3d=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-4a76bf3d=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      输入类-带描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            
+            <p
+              data-v-4a76bf3d=""
+            >
               告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
             </p>
             <div
-              class="t-input t-input--layout-horizontal t-input--border"
-              data-v-4a76bf3d=""
+              class="t-input t-input--layout-horizontal t-input--border"
+              data-v-4a76bf3d=""
+            >
+              <div
+                class="t-input__wrap--prefix"
+              >
+                <!---->
+                <div
+                  class="t-input__label"
+                >
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="t-input__wrap"
+              >
+                <div
+                  class="t-input__content t-input--default"
+                >
+                  <input
+                    autocomplete="Off"
+                    class="t-input__control t-input--default"
+                    name=""
+                    placeholder="请输入文字"
+                    spellcheck="false"
+                    style="--td-input-cursor-color: #0052d9;"
+                    type="text"
+                  />
+                  <!---->
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer t-dialog__footer--full"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    Dialog 对话框
+  </h1>
+  <p
+    class="summary"
+  >
+    用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        反馈类对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-基础 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-无标题 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <!---->
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-内容超长 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
             >
               <div
-                class="t-input__wrap--prefix"
+                class="t-dialog__body-text"
               >
-                <!---->
+                
                 <div
-                  class="t-input__label"
+                  class="content-container"
                 >
-                  <!---->
+                  这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
                 </div>
+                
               </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        确认类对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+          确认类-带标题
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
               <div
-                class="t-input__wrap"
+                class="t-dialog__body-text"
               >
-                <div
-                  class="t-input__content t-input--default"
-                >
-                  <input
-                    autocomplete="Off"
-                    class="t-input__control t-input--default"
-                    name=""
-                    placeholder="请输入文字"
-                    spellcheck="false"
-                    style="--td-input-cursor-color: #0052d9;"
-                    type="text"
-                  />
-                  <!---->
-                  <!---->
-                  <!---->
-                </div>
-                <!---->
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
               </div>
             </div>
-            
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
+              </span>
+              <!---->
+            </button>
           </div>
         </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+          确认类-无标题
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
       </div>
-      <!---->
       <div
-        class="t-dialog__footer t-dialog__footer--full"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
       >
         <!---->
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
-          role="button"
-          type="button"
+        
+        <div
+          class="t-dialog "
         >
           <!---->
-          <span
-            class="t-button__content"
-          >
-            取消
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
-          role="button"
-          type="button"
-        >
           <!---->
-          <span
-            class="t-button__content"
+          <div
+            class="t-dialog__content"
           >
-            确认
-          </span>
+            <!---->
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
           <!---->
-        </button>
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                警示操作
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
       </div>
-    </div>
-    
-  </div>
-  <!--teleport end-->
-  
-</div>
-`;
-
-exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
-<div
-  class="tdesign-mobile-demo"
->
-  <h1
-    class="title"
-  >
-    Dialog 对话框
-  </h1>
-  <p
-    class="summary"
-  >
-    用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
-  </p>
-  <div
-    class="tdesign-mobile-demo-block"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        01 组件类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        反馈类对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1038,7 +2098,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-基础 
+          确认类-纯标题
           
         </span>
         <!---->
@@ -1051,7 +2111,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1069,25 +2129,16 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             >
               对话框标题
             </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息等内容。描述文案尽可能控制在三行内
-              </div>
-            </div>
+            <!---->
           </div>
           <!---->
           <div
             class="t-dialog__footer"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1095,7 +2146,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确定
               </span>
               <!---->
             </button>
@@ -1104,12 +2169,32 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      <div
-        class="btn-gap"
-      />
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        输入对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-4a76bf3d=""
         role="button"
         type="button"
       >
@@ -1118,7 +2203,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-无标题 
+          输入类-无描述
           
         </span>
         <!---->
@@ -1131,7 +2216,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1144,26 +2229,66 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <div
             class="t-dialog__content"
           >
-            <!---->
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
             <div
               class="t-dialog__body"
             >
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                
+                <div
+                  class="t-input t-input--layout-horizontal t-input--border"
+                  data-v-4a76bf3d=""
+                >
+                  <div
+                    class="t-input__wrap--prefix"
+                  >
+                    <!---->
+                    <div
+                      class="t-input__label"
+                    >
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input__content t-input--default"
+                    >
+                      <input
+                        autocomplete="Off"
+                        class="t-input__control t-input--default"
+                        name=""
+                        placeholder="请输入文字"
+                        spellcheck="false"
+                        style="--td-input-cursor-color: #0052d9;"
+                        type="text"
+                      />
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                    <!---->
+                  </div>
+                </div>
+                
               </div>
             </div>
           </div>
           <!---->
           <div
-            class="t-dialog__footer"
+            class="t-dialog__footer t-dialog__footer--full"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
               role="button"
               type="button"
             >
@@ -1171,7 +2296,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
               </span>
               <!---->
             </button>
@@ -1182,10 +2321,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
+        data-v-4a76bf3d=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-4a76bf3d=""
         role="button"
         type="button"
       >
@@ -1194,7 +2335,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-内容超长 
+          输入类-带描述
           
         </span>
         <!---->
@@ -1207,7 +2348,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1232,20 +2373,59 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 class="t-dialog__body-text"
               >
                 
-                这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.
+                <p
+                  data-v-4a76bf3d=""
+                >
+                  告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
+                </p>
+                <div
+                  class="t-input t-input--layout-horizontal t-input--border"
+                  data-v-4a76bf3d=""
+                >
+                  <div
+                    class="t-input__wrap--prefix"
+                  >
+                    <!---->
+                    <div
+                      class="t-input__label"
+                    >
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input__content t-input--default"
+                    >
+                      <input
+                        autocomplete="Off"
+                        class="t-input__control t-input--default"
+                        name=""
+                        placeholder="请输入文字"
+                        spellcheck="false"
+                        style="--td-input-cursor-color: #0052d9;"
+                        type="text"
+                      />
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                    <!---->
+                  </div>
+                </div>
                 
               </div>
             </div>
           </div>
           <!---->
           <div
-            class="t-dialog__footer"
+            class="t-dialog__footer t-dialog__footer--full"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
               role="button"
               type="button"
             >
@@ -1253,7 +2433,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
               </span>
               <!---->
             </button>
@@ -1276,7 +2470,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        确认类对话框
+        带图片的对话框
       </p>
     </div>
     <div
@@ -1287,6 +2481,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1295,7 +2490,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          确认类-带标题
+          图片置顶-带标题描述
           
         </span>
         <!---->
@@ -1308,7 +2503,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1316,7 +2511,52 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
+          
+          <div
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                  
+                </div>
+                <!---->
+                <!---->
+              </div>
+            </div>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
+          </div>
+          
           <!---->
           <div
             class="t-dialog__content"
@@ -1332,7 +2572,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                告知当前状态、信息和解决方法
               </div>
             </div>
           </div>
@@ -1376,10 +2616,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
+        data-v-ddf95d52=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1388,7 +2630,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          确认类-无标题
+          图片置顶-无标题
           
         </span>
         <!---->
@@ -1401,7 +2643,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1409,7 +2651,52 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
+          
+          <div
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                  
+                </div>
+                <!---->
+                <!---->
+              </div>
+            </div>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
+          </div>
+          
           <!---->
           <div
             class="t-dialog__content"
@@ -1421,7 +2708,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                告知当前状态、信息和解决方法
               </div>
             </div>
           </div>
@@ -1446,7 +2733,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1454,7 +2741,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                警示操作
+                确认
               </span>
               <!---->
             </button>
@@ -1463,32 +2750,14 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        输入对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <div
+        class="btn-gap"
+        data-v-ddf95d52=""
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1497,7 +2766,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          输入类-无描述
+          图片置顶-纯标题
           
         </span>
         <!---->
@@ -1510,7 +2779,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1518,71 +2787,71 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
-          <!---->
+          
           <div
-            class="t-dialog__content"
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
           >
             <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
+              class="t-image__mask"
             >
               <div
-                class="t-dialog__body-text"
+                class="t-loading"
+                style="font-size: 20px;"
               >
-                
                 <div
-                  class="t-input t-input--layout-horizontal t-input--border"
-                  data-v-4a76bf3d=""
-                >
-                  <div
-                    class="t-input__wrap--prefix"
-                  >
-                    <!---->
-                    <div
-                      class="t-input__label"
-                    >
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="t-input__wrap"
-                  >
-                    <div
-                      class="t-input__content t-input--default"
-                    >
-                      <input
-                        autocomplete="Off"
-                        class="t-input__control t-input--default"
-                        name=""
-                        placeholder="请输入文字"
-                        spellcheck="false"
-                        style="--td-input-cursor-color: #0052d9;"
-                        type="text"
-                      />
-                      <!---->
-                      <!---->
-                      <!---->
-                    </div>
-                    <!---->
-                  </div>
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                  
                 </div>
-                
+                <!---->
+                <!---->
               </div>
             </div>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
           </div>
+          
           <!---->
           <div
-            class="t-dialog__footer t-dialog__footer--full"
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <!---->
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
           >
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1596,7 +2865,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1615,12 +2884,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1629,7 +2898,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          输入类-带描述
+          图片置顶-纯图片
           
         </span>
         <!---->
@@ -1642,7 +2911,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1650,76 +2919,67 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
-          <!---->
+          
           <div
-            class="t-dialog__content"
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
           >
             <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
+              class="t-image__mask"
             >
               <div
-                class="t-dialog__body-text"
+                class="t-loading"
+                style="font-size: 20px;"
               >
-                
-                <p
-                  data-v-4a76bf3d=""
-                >
-                  告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
-                </p>
                 <div
-                  class="t-input t-input--layout-horizontal t-input--border"
-                  data-v-4a76bf3d=""
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
                 >
+                  
                   <div
-                    class="t-input__wrap--prefix"
-                  >
-                    <!---->
-                    <div
-                      class="t-input__label"
-                    >
-                      <!---->
-                    </div>
-                  </div>
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
                   <div
-                    class="t-input__wrap"
-                  >
-                    <div
-                      class="t-input__content t-input--default"
-                    >
-                      <input
-                        autocomplete="Off"
-                        class="t-input__control t-input--default"
-                        name=""
-                        placeholder="请输入文字"
-                        spellcheck="false"
-                        style="--td-input-cursor-color: #0052d9;"
-                        type="text"
-                      />
-                      <!---->
-                      <!---->
-                      <!---->
-                    </div>
-                    <!---->
-                  </div>
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                  
                 </div>
-                
+                <!---->
+                <!---->
               </div>
             </div>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
           </div>
+          
           <!---->
           <div
-            class="t-dialog__footer t-dialog__footer--full"
+            class="t-dialog__content"
+          >
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
           >
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1733,7 +2993,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1750,28 +3010,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        带图片的对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <div
+        class="btn-gap"
+        data-v-ddf95d52=""
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1784,7 +3026,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          图片置顶
+          图片居中-带标题描述
           
         </span>
         <!---->
@@ -1797,7 +3039,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1805,9 +3047,29 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法
+              </div>
+            </div>
+          </div>
           
           <div
-            class="t-image t-image--square"
+            class="t-image t-image--square image"
             data-v-ddf95d52=""
           >
             <div
@@ -1851,26 +3113,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </picture>
           </div>
           
-          <!---->
-          <div
-            class="t-dialog__content"
-          >
-            <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息和解决方法
-              </div>
-            </div>
-          </div>
-          <!---->
           <div
             class="t-dialog__footer"
           >
@@ -1924,7 +3166,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          图片居中
+          图片居中-纯标题
           
         </span>
         <!---->
@@ -1937,7 +3179,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1955,15 +3197,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             >
               对话框标题
             </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息和解决方法
-              </div>
-            </div>
+            <!---->
           </div>
           
           <div
@@ -2061,19 +3295,20 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 组件状态
+        02 组件类型
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        其它形态对话框
-      </p>
+      <!--v-if-->
     </div>
     <div
       class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       
+      <div
+        class="demo-desc"
+      >
+        文字按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2098,7 +3333,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2167,6 +3402,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        水平基础按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2191,7 +3431,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2260,6 +3500,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        垂直基础按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2284,7 +3529,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2353,6 +3598,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        多按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2364,7 +3614,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           垂直多按钮 
+           多按钮 
           
         </span>
         <!---->
@@ -2377,7 +3627,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2463,6 +3713,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        带关闭按钮的对话框
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2474,7 +3729,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           带关闭按钮 
+           带关闭按钮的对话框 
           
         </span>
         <!---->
@@ -2487,7 +3742,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2586,7 +3841,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        命令行调用
+        命令调用
       </p>
     </div>
     <div
@@ -2618,6 +3873,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <div
+    class="demo-desc"
+  >
+    文字按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2642,7 +3902,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2711,6 +3971,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    水平基础按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2735,7 +4000,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2804,6 +4069,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    垂直基础按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2828,7 +4098,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2897,6 +4167,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    多按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2908,7 +4183,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-       垂直多按钮 
+       多按钮 
       
     </span>
     <!---->
@@ -2921,7 +4196,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -3007,6 +4282,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    带关闭按钮的对话框
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -3018,7 +4298,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-       带关闭按钮 
+       带关闭按钮的对话框 
       
     </span>
     <!---->
@@ -3031,7 +4311,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
diff --git a/src/dialog/demos/confirm.vue b/src/dialog/demos/confirm.vue
index c62f250b7..593081982 100644
--- a/src/dialog/demos/confirm.vue
+++ b/src/dialog/demos/confirm.vue
@@ -26,12 +26,29 @@
     @close="onClose"
   >
   </t-dialog>
+
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true">确认类-纯标题</t-button>
+
+  <t-dialog
+    v-model:visible="isShowDialog7"
+    close-on-overlay-click
+    title="对话框标题"
+    cancel-btn="取消"
+    :confirm-btn="{ content: '确定', variant: 'base', theme: 'light' }"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+    @close="onClose"
+  >
+  </t-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
 
 const isShowDialog5 = ref(false);
 const isShowDialog6 = ref(false);
+const isShowDialog7 = ref(false);
 
 const onConfirm = () => {
   console.log('dialog:confirm');
diff --git a/src/dialog/demos/feedback.vue b/src/dialog/demos/feedback.vue
index 3819b69d1..efa931127 100644
--- a/src/dialog/demos/feedback.vue
+++ b/src/dialog/demos/feedback.vue
@@ -30,7 +30,9 @@
     @confirm="onConfirm"
     @overlay-click="onClickOverlay"
   >
-    {{ content }}
+    <div class="content-container">
+      {{ content }}
+    </div>
   </t-dialog>
 </template>
 
@@ -41,7 +43,7 @@ const isShowDialog1 = ref(false);
 const isShowDialog2 = ref(false);
 const isShowDialog3 = ref(false);
 const content =
-  '这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.';
+  '这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案';
 
 const onConfirm = (e: string) => {
   console.log('dialog:confirm', e);
@@ -51,3 +53,20 @@ const onClickOverlay = () => {
   console.log('dialog:clickOverlay');
 };
 </script>
+
+<style lang="less">
+.content-container {
+  height: 264px;
+  overflow-y: auto;
+  font-size: 16px;
+  color: var(--td-font-gray-2);
+  line-height: 24px;
+  white-space: pre-line;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+</style>
diff --git a/src/dialog/demos/image-dialog.vue b/src/dialog/demos/image-dialog.vue
index 6bd116cd7..d1f500ece 100644
--- a/src/dialog/demos/image-dialog.vue
+++ b/src/dialog/demos/image-dialog.vue
@@ -1,5 +1,7 @@
 <template>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true">图片置顶</t-button>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true"
+    >图片置顶-带标题描述</t-button
+  >
   <t-dialog
     v-model:visible="isShowDialog5"
     title="对话框标题"
@@ -14,10 +16,63 @@
     </template>
   </t-dialog>
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true">图片居中</t-button>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog6 = true"
+    >图片置顶-无标题</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog6"
+    content="告知当前状态、信息和解决方法"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"
+    >图片置顶-纯标题</t-button
+  >
   <t-dialog
     v-model:visible="isShowDialog7"
     title="对话框标题"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true"
+    >图片置顶-纯图片</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog8"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog9 = true"
+    >图片居中-带标题描述</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog9"
+    title="对话框标题"
     content="告知当前状态、信息和解决方法"
     cancel-btn="取消"
     confirm-btn="确认"
@@ -28,12 +83,33 @@
       <t-image class="image" fit="contain" :src="imageSrc"></t-image>
     </template>
   </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog10 = true"
+    >图片居中-纯标题</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog10"
+    title="对话框标题"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #middle>
+      <t-image class="image" fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
 
 const isShowDialog5 = ref(false);
+const isShowDialog6 = ref(false);
 const isShowDialog7 = ref(false);
+const isShowDialog8 = ref(false);
+const isShowDialog9 = ref(false);
+const isShowDialog10 = ref(false);
 
 const imageSrc = ref('https://tdesign.gtimg.com/mobile/demos/dialog1.png');
 
diff --git a/src/dialog/demos/mobile.vue b/src/dialog/demos/mobile.vue
index 09245af99..5e2cc629f 100644
--- a/src/dialog/demos/mobile.vue
+++ b/src/dialog/demos/mobile.vue
@@ -14,10 +14,10 @@
     <tdesign-demo-block summary="带图片的对话框" :padding="true">
       <imgVue />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 组件状态" summary="其它形态对话框" :padding="true">
+    <tdesign-demo-block title="02 组件类型" :padding="true">
       <multiState />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 组件用法" summary="命令行调用" :padding="true">
+    <tdesign-demo-block title="03 组件用法" summary="命令调用" :padding="true">
       <pluginDemo />
     </tdesign-demo-block>
   </div>
diff --git a/src/dialog/demos/multi-state.vue b/src/dialog/demos/multi-state.vue
index 13d48ab7c..f10e2caf0 100644
--- a/src/dialog/demos/multi-state.vue
+++ b/src/dialog/demos/multi-state.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-desc">文字按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog4 = true"> 文字按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog4"
@@ -12,6 +13,7 @@
   </t-dialog>
   <div class="btn-gap"></div>
 
+  <div class="demo-desc">水平基础按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true"> 水平基础按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog5"
@@ -24,6 +26,8 @@
   >
   </t-dialog>
   <div class="btn-gap"></div>
+
+  <div class="demo-desc">垂直基础按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog6 = true"> 垂直基础按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog6"
@@ -38,7 +42,9 @@
   </t-dialog>
 
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"> 垂直多按钮 </t-button>
+
+  <div class="demo-desc">多按钮</div>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"> 多按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog7"
     title="对话框标题"
@@ -53,7 +59,11 @@
   </t-dialog>
 
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true"> 带关闭按钮 </t-button>
+
+  <div class="demo-desc">带关闭按钮的对话框</div>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true">
+    带关闭按钮的对话框
+  </t-button>
   <t-dialog
     v-model:visible="isShowDialog8"
     title="对话框标题"
@@ -106,3 +116,11 @@ const onClose = () => {
   console.log('dialog: close');
 };
 </script>
+
+<style lang="less">
+.demo-desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md
index 095c9a37b..b15f7852c 100644
--- a/src/dialog/dialog.en-US.md
+++ b/src/dialog/dialog.en-US.md
@@ -85,14 +85,14 @@ options | Object | - | Typescript：`Omit<DialogOptions, 'cancelBtn'>`
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-border-radius | @radius-extra-large | - 
 --td-dialog-body-max-height | 456px | - 
---td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
 --td-dialog-close-font-size | 22px | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 16px | - 
 --td-dialog-content-line-height | 24px | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 18px | - 
 --td-dialog-title-line-height | 26px | - 
---td-dialog-width | 311px | -
\ No newline at end of file
+--td-dialog-width | 311px | - 
diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md
index 6ceb63a1e..53b78974c 100644
--- a/src/dialog/dialog.md
+++ b/src/dialog/dialog.md
@@ -85,14 +85,14 @@ options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-border-radius | @radius-extra-large | - 
 --td-dialog-body-max-height | 456px | - 
---td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
 --td-dialog-close-font-size | 22px | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 16px | - 
 --td-dialog-content-line-height | 24px | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 18px | - 
 --td-dialog-title-line-height | 26px | - 
---td-dialog-width | 311px | -
\ No newline at end of file
+--td-dialog-width | 311px | - 
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
index f10fd0843..0b3938798 100644
--- a/src/dialog/dialog.tsx
+++ b/src/dialog/dialog.tsx
@@ -154,6 +154,7 @@ export default defineComponent({
       };
       return (
         <TPopup
+          class={`${dialogClass.value}__wrapper`}
           visible={props.visible}
           placement="center"
           show-overlay={props.showOverlay}