From 8f19617bdde0d2702e7fbed05389cd66ed4e9b51 Mon Sep 17 00:00:00 2001
From: Boomkaa <173308582@qq.com>
Date: Tue, 9 Sep 2025 10:16:12 +0800
Subject: [PATCH 1/2] test: add dialog test

---
 src/dialog/__tests__/dialog.test.tsx      | 318 +++++++++++++++++++
 src/dialog/_example/confirm.tsx           |  27 +-
 src/dialog/_example/feedback.tsx          |  18 +-
 src/dialog/_example/image-dialog.tsx      |  89 +++++-
 src/dialog/_example/index.tsx             |   7 +-
 src/dialog/_example/multi-state.tsx       |  30 +-
 src/dialog/_example/style/index.less      |   4 +
 src/dialog/show.tsx                       |   6 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 353 +++++++++++++++++-----
 test/snap/__snapshots__/ssr.test.jsx.snap |  10 +-
 10 files changed, 751 insertions(+), 111 deletions(-)
 create mode 100644 src/dialog/__tests__/dialog.test.tsx

diff --git a/src/dialog/__tests__/dialog.test.tsx b/src/dialog/__tests__/dialog.test.tsx
new file mode 100644
index 000000000..ebcda3dce
--- /dev/null
+++ b/src/dialog/__tests__/dialog.test.tsx
@@ -0,0 +1,318 @@
+import React, { act } from 'react';
+import { render, screen, fireEvent, vi, it, describe, expect, afterEach, beforeEach } from '@test/utils';
+import Button from 'tdesign-mobile-react/button/Button';
+import { DialogPlugin, Dialog } from '../index';
+
+const prefix = 't';
+const name = `.${prefix}-dialog`;
+
+describe('Dialog', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('props', () => {
+    it(': visible', async () => {
+      const { rerender } = render(<Dialog visible />);
+      expect(document.querySelector(name)).toBeInTheDocument();
+
+      rerender(<Dialog visible={false} title="标题" />);
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(document.querySelector('.t-popup')).toHaveStyle({ display: 'none' });
+    });
+
+    it(': title', () => {
+      render(<Dialog visible title="标题" />);
+      expect(document.querySelector(`${name}__header`).textContent).toBe('标题');
+    });
+
+    it(': content', () => {
+      render(<Dialog visible content="中间内容" />);
+      expect(document.querySelector(`${name}__content`).textContent).toBe('中间内容');
+    });
+
+    it(': middle', () => {
+      render(<Dialog visible middle={<div className="custom-middle">自定义内容</div>} />);
+      expect(document.querySelector('.custom-middle')).toBeInTheDocument();
+    });
+
+    it(': top', () => {
+      render(<Dialog visible top={<div className="custom-top">自定义顶部内容</div>} />);
+      expect(document.querySelector('.custom-top')).toBeInTheDocument();
+    });
+
+    it(': destroyOnClose', () => {
+      render(<Dialog visible destroyOnClose={true} content="中间内容" />);
+      expect(document.querySelector(name)).not.toBeNull();
+    });
+
+    it(': overlayProps', async () => {
+      const backgroundColor = 'rgba(0, 0, 0, 0.5)';
+      render(<Dialog visible overlayProps={{ backgroundColor, duration: 100 }} content="中间内容" />);
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      const overlay = document.querySelector('.t-overlay');
+      expect(overlay).toHaveStyle(`background-color: ${backgroundColor}`);
+    });
+
+    it(': preventScrollThrough', () => {
+      render(<Dialog visible preventScrollThrough content="中间内容" />);
+      const classNames = document.body.className;
+      expect(classNames).toBe('t-overlay--lock');
+    });
+
+    it(': showOverlay', () => {
+      render(<Dialog visible showOverlay={false} content="中间内容" />);
+      expect(document.querySelector('.t-overlay')).toBeFalsy();
+    });
+
+    it(': buttonLayout', () => {
+      const confirmBtn = {
+        content: '确认',
+        variant: 'text',
+        size: 'large',
+      };
+      const { rerender } = render(
+        <Dialog
+          visible
+          buttonLayout="vertical"
+          confirmBtn={confirmBtn}
+          cancelBtn={<Button content="取消" variant="text" size="large" />}
+        />,
+      );
+      expect(document.querySelector(`${name}__footer--column`)).toBeTruthy();
+
+      rerender(<Dialog visible buttonLayout="horizontal" confirmBtn="确定" cancelBtn="取消" />);
+      expect(document.querySelector(`${name}__button--horizontal`)).toBeTruthy();
+    });
+
+    it(': actions', () => {
+      const onClose = vi.fn();
+      const { rerender } = render(
+        <Dialog
+          visible
+          actions={[{ content: '按钮1', className: 'test-btn', key: 'btn1' }, <Button key="btn2">按钮2</Button>]}
+          onClose={onClose}
+        />,
+      );
+      fireEvent.click(document.querySelector('.test-btn'));
+      expect(onClose).toHaveBeenCalled();
+
+      rerender(<Dialog visible actions={[]} />);
+      const footer = document.querySelector(`${name}__footer`);
+      expect(footer).toBeTruthy();
+
+      rerender(<Dialog visible actions={[undefined, null]} />);
+      expect(document.querySelector(`${name}__footer`)).toBeTruthy();
+    });
+
+    it(': closeBtn', () => {
+      render(<Dialog visible closeBtn />);
+      expect(document.querySelector(`${name}__close-btn`)).toBeTruthy();
+    });
+
+    it(': zIndex', () => {
+      render(<Dialog visible zIndex={3000} content="内容" />);
+      expect(document.querySelector('.t-popup')).toBeTruthy();
+    });
+
+    it(': width', () => {
+      const { rerender } = render(<Dialog visible width="300px" />);
+      expect(document.querySelector(name)).toHaveStyle('width: 300px');
+
+      rerender(<Dialog visible width={400} />);
+      expect(document.querySelector(name)).toHaveStyle('width: 400px');
+    });
+
+    it(': closeOnOverlayClick', async () => {
+      const onClose = vi.fn();
+      render(<Dialog visible closeOnOverlayClick onClose={onClose} />);
+      const overlay = document.querySelector('.t-overlay');
+      fireEvent.click(overlay);
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('plugin', () => {
+    it(': show', async () => {
+      let instance = null;
+      const onClose = vi.fn();
+      const onConfirm = vi.fn();
+      const onClosed = vi.fn();
+      await act(async () => {
+        instance = DialogPlugin({
+          title: '标题',
+          visible: false,
+          closeBtn: true,
+          content: '中间内容',
+          confirmBtn: {
+            content: '确定',
+            className: 'confirm-btn',
+          },
+          cancelBtn: {
+            content: '取消',
+            className: 'cancel-btn',
+          },
+          onClose,
+          onConfirm,
+          onClosed,
+        });
+      });
+      instance.show();
+      const diaog = document.querySelector(name);
+      expect(diaog).toBeTruthy();
+
+      const closeBtn = document.querySelector('.t-icon');
+      const confirmBtn = document.querySelector('.confirm-btn');
+      const cancelBtn = document.querySelector('.cancel-btn');
+      await act(async () => {
+        fireEvent.click(closeBtn);
+        fireEvent.click(confirmBtn);
+        fireEvent.click(cancelBtn);
+      });
+      expect(onClose).toHaveBeenCalled();
+      expect(onConfirm).toHaveBeenCalled();
+      await act(async () => {
+        await vi.advanceTimersByTime(1000);
+      });
+      expect(onClosed).toHaveBeenCalled();
+    });
+
+    it(': hide', async () => {
+      let instance = null;
+      const onClosed = vi.fn();
+      await act(async () => {
+        instance = DialogPlugin({
+          title: '标题',
+          onClosed,
+        });
+      });
+      instance.hide();
+
+      setTimeout(() => {
+        expect(document.querySelector(name)).toBeFalsy();
+        expect(onClosed).toHaveBeenCalled();
+      }, 1000);
+    });
+
+    it(': update', async () => {
+      let instance = null;
+      await act(async () => {
+        instance = DialogPlugin({
+          title: '标题',
+          onConfirm: vi.fn(),
+          onCancel: vi.fn(),
+        });
+      });
+      instance.update({ title: '新标题' });
+      setInterval(() => {
+        expect(document.querySelector(`${name}__header`).textContent).toBe('新标题');
+      }, 1000);
+    });
+
+    it(': destroy', async () => {
+      let instance = null;
+      await act(async () => {
+        instance = DialogPlugin({
+          title: '标题',
+        });
+      });
+
+      instance.destroy();
+
+      setTimeout(() => {
+        expect(document.querySelector(name)).toBeFalsy();
+      }, 1000);
+    });
+
+    it(': alert', async () => {
+      await act(async () => {
+        Dialog.alert({
+          title: '标题',
+          content: '内容',
+        });
+      });
+
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(document.querySelector(`${name}__header`)).toBeTruthy();
+    });
+
+    it(': confirm', async () => {
+      await act(async () => {
+        Dialog.confirm({
+          title: '标题',
+          content: '内容',
+          onConfirm: vi.fn(),
+        });
+      });
+      expect(document.querySelector(`${name}__header`)).toBeTruthy();
+    });
+  });
+
+  describe('event', () => {
+    it(': onCancel', () => {
+      const onCancel = vi.fn();
+      const onClose = vi.fn();
+      const { rerender } = render(<Dialog cancelBtn="退出" visible onCancel={onCancel} onClose={onClose} />);
+      fireEvent.click(screen.getByText('退出'));
+      expect(onCancel).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+
+      rerender(<Dialog visible cancelBtn="退出" />);
+      fireEvent.click(screen.getByText('退出'));
+    });
+
+    it(': onClose', async () => {
+      const onClose = vi.fn();
+      render(<Dialog visible closeBtn onClose={onClose} />);
+      const closeBtn = document.querySelector('.t-icon');
+      fireEvent.click(closeBtn);
+      setTimeout(() => {
+        expect(onClose).toHaveBeenCalled();
+        expect(document.querySelector(name)).toBeFalsy();
+      }, 1000);
+    });
+
+    it(': onClosed', async () => {
+      const onClosed = vi.fn();
+      const { rerender } = render(<Dialog visible onClosed={onClosed} />);
+      rerender(<Dialog visible={false} onClosed={onClosed} />);
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(onClosed).toHaveBeenCalled();
+    });
+
+    it(': onConfirm', () => {
+      const onConfirm = vi.fn();
+      const { rerender } = render(<Dialog confirmBtn="下一步" visible onConfirm={onConfirm} />);
+      fireEvent.click(screen.getByText('下一步'));
+      expect(onConfirm).toHaveBeenCalled();
+
+      rerender(<Dialog visible confirmBtn="下一步" />);
+      fireEvent.click(screen.getByText('下一步'));
+    });
+
+    it(': onOverlayClick', async () => {
+      const onOverlayClick = vi.fn();
+      render(<Dialog visible onOverlayClick={onOverlayClick} />);
+      const overlay = document.querySelector('.t-overlay');
+      fireEvent.click(overlay);
+      setTimeout(() => {
+        expect(onOverlayClick).toHaveBeenCalled();
+      }, 1000);
+    });
+  });
+});
diff --git a/src/dialog/_example/confirm.tsx b/src/dialog/_example/confirm.tsx
index 01de7c1d0..2284117a2 100644
--- a/src/dialog/_example/confirm.tsx
+++ b/src/dialog/_example/confirm.tsx
@@ -42,7 +42,32 @@ const ConfirmUsage = React.memo(() => {
       >
         确认类-无标题
       </Button>
-
+      <Dialog
+        {...alertProps}
+        onClose={() => {
+          setAlertProps({ ...alertProps, visible: false });
+        }}
+        onConfirm={() => {
+          setAlertProps({ ...alertProps, visible: false });
+        }}
+      />
+      <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            title: '对话框标题',
+            confirmBtn: '确认',
+            cancelBtn: '取消',
+          });
+        }}
+      >
+        确认类-纯标题
+      </Button>
       <Dialog
         {...alertProps}
         onClose={() => {
diff --git a/src/dialog/_example/feedback.tsx b/src/dialog/_example/feedback.tsx
index abeacd42a..c05f2b540 100644
--- a/src/dialog/_example/feedback.tsx
+++ b/src/dialog/_example/feedback.tsx
@@ -21,7 +21,7 @@ const Feedback = React.memo(() => {
           });
         }}
       >
-        反馈类-基础
+        反馈类-带标题
       </Button>
       <div className="btn-gap"></div>
       <Button
@@ -41,6 +41,22 @@ const Feedback = React.memo(() => {
         反馈类-无标题
       </Button>
       <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            title: '对话框标题',
+            confirmBtn: '知道了',
+          });
+        }}
+      >
+        反馈类-纯标题
+      </Button>
+      <div className="btn-gap"></div>
       <Button
         variant="outline"
         size="large"
diff --git a/src/dialog/_example/image-dialog.tsx b/src/dialog/_example/image-dialog.tsx
index 3d850158e..089fb2ea2 100644
--- a/src/dialog/_example/image-dialog.tsx
+++ b/src/dialog/_example/image-dialog.tsx
@@ -24,7 +24,63 @@ const ImageUsage = React.memo(() => {
           });
         }}
       >
-        图片置顶
+        图片置顶-带标题描述
+      </Button>
+      <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            closeOnOverlayClick: true,
+            content: '告知当前状态、信息和解决方法',
+            confirmBtn: '确认',
+            cancelBtn: '取消',
+            top: <Image src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" fit="contain" />,
+          });
+        }}
+      >
+        图片置顶-无标题
+      </Button>
+      <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            title: '对话框标题',
+            closeOnOverlayClick: true,
+            confirmBtn: '确认',
+            cancelBtn: '取消',
+            top: <Image src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" fit="contain" />,
+          });
+        }}
+      >
+        图片置顶-纯标题
+      </Button>
+      <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            closeOnOverlayClick: true,
+            confirmBtn: '确认',
+            cancelBtn: '取消',
+            top: <Image src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" fit="contain" />,
+          });
+        }}
+      >
+        图片置顶-纯图片
       </Button>
       <div className="btn-gap"></div>
       <Button
@@ -44,7 +100,36 @@ const ImageUsage = React.memo(() => {
           });
         }}
       >
-        图片居中
+        图片居中-带标题描述
+      </Button>
+
+      <Dialog
+        {...alertProps}
+        onClose={() => {
+          setAlertProps({ ...alertProps, visible: false });
+        }}
+        onConfirm={() => {
+          setAlertProps({ ...alertProps, visible: false });
+        }}
+      />
+      <div className="btn-gap"></div>
+      <Button
+        variant="outline"
+        size="large"
+        theme="primary"
+        block
+        onClick={() => {
+          setAlertProps({
+            visible: true,
+            title: '对话框标题',
+            closeOnOverlayClick: true,
+            confirmBtn: '确认',
+            cancelBtn: '取消',
+            middle: <Image src="https://tdesign.gtimg.com/mobile/demos/dialog1.png" fit="contain" />,
+          });
+        }}
+      >
+        图片居中-纯标题
       </Button>
 
       <Dialog
diff --git a/src/dialog/_example/index.tsx b/src/dialog/_example/index.tsx
index c2144da18..ffac29df1 100644
--- a/src/dialog/_example/index.tsx
+++ b/src/dialog/_example/index.tsx
@@ -6,7 +6,6 @@ import ConfirmUsage from './confirm';
 import InputUsage from './input';
 import ImageUsage from './image-dialog';
 import MultiStateUsage from './multi-state';
-import PluginUsage from './plugin';
 import './style/index.less';
 
 export default function Base() {
@@ -28,12 +27,12 @@ export default function Base() {
       <TDemoBlock summary="带图片的对话框" padding={true}>
         <ImageUsage />
       </TDemoBlock>
-      <TDemoBlock title="02 组件状态" summary="其它形态对话框" padding={true}>
+      <TDemoBlock title="02 组件状态" summary="文字按钮" padding={true}>
         <MultiStateUsage />
       </TDemoBlock>
-      <TDemoBlock title="03 组件用法" summary="命令调用" padding={true}>
+      {/* <TDemoBlock title="03 组件用法" summary="命令调用" padding={true}>
         <PluginUsage />
-      </TDemoBlock>
+      </TDemoBlock> */}
     </div>
   );
 }
diff --git a/src/dialog/_example/multi-state.tsx b/src/dialog/_example/multi-state.tsx
index e5714e177..13a84b429 100644
--- a/src/dialog/_example/multi-state.tsx
+++ b/src/dialog/_example/multi-state.tsx
@@ -36,6 +36,8 @@ const MultiStateUsage = React.memo(() => {
         文字按钮
       </Button>
       <div className="btn-gap"></div>
+      <div className="diaog-demo__summary">水平基础按钮</div>
+      <div className="btn-gap"></div>
       <Button
         variant="outline"
         size="large"
@@ -54,6 +56,8 @@ const MultiStateUsage = React.memo(() => {
         水平基础按钮
       </Button>
       <div className="btn-gap"></div>
+      <div className="diaog-demo__summary">垂直基础按钮</div>
+      <div className="btn-gap"></div>
       <Button
         variant="outline"
         size="large"
@@ -73,29 +77,7 @@ const MultiStateUsage = React.memo(() => {
         垂直基础按钮
       </Button>
       <div className="btn-gap"></div>
-      <Button
-        variant="outline"
-        size="large"
-        theme="primary"
-        block
-        onClick={() => {
-          setAlertProps({
-            visible: true,
-            title: '对话框标题',
-            content: '告知当前状态、信息和解决方法',
-            buttonLayout: 'vertical',
-            confirmBtn: '确认',
-            cancelBtn: '取消',
-            actions: [
-              { content: '次要按钮', theme: 'light' },
-              { content: '次要按钮', theme: 'light' },
-              { content: '主要按钮', theme: 'primary' },
-            ],
-          });
-        }}
-      >
-        垂直多按钮
-      </Button>
+      <div className="diaog-demo__summary">带关闭按钮的对话框</div>
       <div className="btn-gap"></div>
       <Button
         variant="outline"
@@ -114,7 +96,7 @@ const MultiStateUsage = React.memo(() => {
           });
         }}
       >
-        带关闭按钮
+        带关闭按钮的对话框
       </Button>
       <Dialog
         {...alertProps}
diff --git a/src/dialog/_example/style/index.less b/src/dialog/_example/style/index.less
index 2c002c821..18d522e48 100644
--- a/src/dialog/_example/style/index.less
+++ b/src/dialog/_example/style/index.less
@@ -14,6 +14,10 @@
     overflow: auto;
     max-height: 100px;
   }
+  .diaog-demo__summary{
+    font-size: 14px;
+    color: var(--text-secondary);
+  }
 }
 .t-input {
   margin-top: 16px;
diff --git a/src/dialog/show.tsx b/src/dialog/show.tsx
index de049bc71..b52864d17 100644
--- a/src/dialog/show.tsx
+++ b/src/dialog/show.tsx
@@ -68,9 +68,9 @@ export function show(props: DialogShowProps): DialogInstance {
   destroy = renderToBody(<Wrapper ref={ref} />);
 
   return {
-    hide: ref.current?.hide,
-    show: ref.current?.show,
-    update: ref.current?.update,
+    hide: () => ref.current?.hide(),
+    show: () => ref.current?.show(),
+    update: (opts: DialogShowProps) => ref.current?.update(opts),
     destroy,
   };
 }
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index b718f4356..25abd93c4 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -44983,6 +44983,35 @@ exports[`csr snapshot test > csr test src/dialog/_example/confirm.tsx 1`] = `
         />
       </div>
     </div>
+    <div
+      class="btn-gap"
+    />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        确认类-纯标题
+      </span>
+    </button>
+    <div
+      class="t-popup t-popup--center"
+      style="display: none; animation-fill-mode: forwards;"
+    >
+      <div
+        class="t-dialog undefined"
+      >
+        <div
+          class="t-dialog__content"
+        />
+        <div
+          class="t-dialog__footer"
+        />
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -45000,7 +45029,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/feedback.tsx 1`] = `
         class="t-button__content"
       >
          
-        反馈类-基础
+        反馈类-带标题
       </span>
     </button>
     <div
@@ -45020,6 +45049,20 @@ exports[`csr snapshot test > csr test src/dialog/_example/feedback.tsx 1`] = `
     <div
       class="btn-gap"
     />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        反馈类-纯标题
+      </span>
+    </button>
+    <div
+      class="btn-gap"
+    />
     <button
       class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       type="button"
@@ -45063,7 +45106,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/image-dialog.tsx 1`] =
         class="t-button__content"
       >
          
-        图片置顶
+        图片置顶-带标题描述
       </span>
     </button>
     <div
@@ -45077,7 +45120,78 @@ exports[`csr snapshot test > csr test src/dialog/_example/image-dialog.tsx 1`] =
         class="t-button__content"
       >
          
-        图片居中
+        图片置顶-无标题
+      </span>
+    </button>
+    <div
+      class="btn-gap"
+    />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        图片置顶-纯标题
+      </span>
+    </button>
+    <div
+      class="btn-gap"
+    />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        图片置顶-纯图片
+      </span>
+    </button>
+    <div
+      class="btn-gap"
+    />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        图片居中-带标题描述
+      </span>
+    </button>
+    <div
+      class="t-popup t-popup--center"
+      style="display: none; animation-fill-mode: forwards;"
+    >
+      <div
+        class="t-dialog undefined"
+      >
+        <div
+          class="t-dialog__content"
+        />
+        <div
+          class="t-dialog__footer"
+        />
+      </div>
+    </div>
+    <div
+      class="btn-gap"
+    />
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        图片居中-纯标题
       </span>
     </button>
     <div
@@ -45149,7 +45263,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
               class="t-button__content"
             >
                
-              反馈类-基础
+              反馈类-带标题
             </span>
           </button>
           <div
@@ -45169,6 +45283,20 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
           <div
             class="btn-gap"
           />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              反馈类-纯标题
+            </span>
+          </button>
+          <div
+            class="btn-gap"
+          />
           <button
             class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
             type="button"
@@ -45256,6 +45384,35 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
               />
             </div>
           </div>
+          <div
+            class="btn-gap"
+          />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              确认类-纯标题
+            </span>
+          </button>
+          <div
+            class="t-popup t-popup--center"
+            style="display: none; animation-fill-mode: forwards;"
+          >
+            <div
+              class="t-dialog undefined"
+            >
+              <div
+                class="t-dialog__content"
+              />
+              <div
+                class="t-dialog__footer"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -45346,7 +45503,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
               class="t-button__content"
             >
                
-              图片置顶
+              图片置顶-带标题描述
             </span>
           </button>
           <div
@@ -45360,7 +45517,78 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
               class="t-button__content"
             >
                
-              图片居中
+              图片置顶-无标题
+            </span>
+          </button>
+          <div
+            class="btn-gap"
+          />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              图片置顶-纯标题
+            </span>
+          </button>
+          <div
+            class="btn-gap"
+          />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              图片置顶-纯图片
+            </span>
+          </button>
+          <div
+            class="btn-gap"
+          />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              图片居中-带标题描述
+            </span>
+          </button>
+          <div
+            class="t-popup t-popup--center"
+            style="display: none; animation-fill-mode: forwards;"
+          >
+            <div
+              class="t-dialog undefined"
+            >
+              <div
+                class="t-dialog__content"
+              />
+              <div
+                class="t-dialog__footer"
+              />
+            </div>
+          </div>
+          <div
+            class="btn-gap"
+          />
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              图片居中-纯标题
             </span>
           </button>
           <div
@@ -45395,7 +45623,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
         <p
           class="tdesign-mobile-demo-block__summary"
         >
-          其它形态对话框
+          文字按钮
         </p>
       </div>
       <div
@@ -45418,6 +45646,14 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
           <div
             class="btn-gap"
           />
+          <div
+            class="diaog-demo__summary"
+          >
+            水平基础按钮
+          </div>
+          <div
+            class="btn-gap"
+          />
           <button
             class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
             type="button"
@@ -45432,6 +45668,14 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
           <div
             class="btn-gap"
           />
+          <div
+            class="diaog-demo__summary"
+          >
+            垂直基础按钮
+          </div>
+          <div
+            class="btn-gap"
+          />
           <button
             class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
             type="button"
@@ -45446,17 +45690,11 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
           <div
             class="btn-gap"
           />
-          <button
-            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-            type="button"
+          <div
+            class="diaog-demo__summary"
           >
-            <span
-              class="t-button__content"
-            >
-               
-              垂直多按钮
-            </span>
-          </button>
+            带关闭按钮的对话框
+          </div>
           <div
             class="btn-gap"
           />
@@ -45468,7 +45706,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
               class="t-button__content"
             >
                
-              带关闭按钮
+              带关闭按钮的对话框
             </span>
           </button>
           <div
@@ -45489,43 +45727,6 @@ exports[`csr snapshot test > csr test src/dialog/_example/index.tsx 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          03 组件用法
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          命令调用
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot with-padding"
-      >
-        <div
-          class="t-dialog__demo-wrap"
-        >
-          <button
-            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-            type="button"
-          >
-            <span
-              class="t-button__content"
-            >
-               
-              命令行操作
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 `;
@@ -45598,6 +45799,14 @@ exports[`csr snapshot test > csr test src/dialog/_example/multi-state.tsx 1`] =
     <div
       class="btn-gap"
     />
+    <div
+      class="diaog-demo__summary"
+    >
+      水平基础按钮
+    </div>
+    <div
+      class="btn-gap"
+    />
     <button
       class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       type="button"
@@ -45612,6 +45821,14 @@ exports[`csr snapshot test > csr test src/dialog/_example/multi-state.tsx 1`] =
     <div
       class="btn-gap"
     />
+    <div
+      class="diaog-demo__summary"
+    >
+      垂直基础按钮
+    </div>
+    <div
+      class="btn-gap"
+    />
     <button
       class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       type="button"
@@ -45626,17 +45843,11 @@ exports[`csr snapshot test > csr test src/dialog/_example/multi-state.tsx 1`] =
     <div
       class="btn-gap"
     />
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      type="button"
+    <div
+      class="diaog-demo__summary"
     >
-      <span
-        class="t-button__content"
-      >
-         
-        垂直多按钮
-      </span>
-    </button>
+      带关闭按钮的对话框
+    </div>
     <div
       class="btn-gap"
     />
@@ -45648,7 +45859,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/multi-state.tsx 1`] =
         class="t-button__content"
       >
          
-        带关闭按钮
+        带关闭按钮的对话框
       </span>
     </button>
     <div
@@ -121470,17 +121681,17 @@ exports[`ssr snapshot test > ssr test src/date-time-picker/_example/with-title.t
 
 exports[`ssr snapshot test > ssr test src/date-time-picker/_example/year-month.tsx 1`] = `"<div><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">选择时间</div></div><div class="t-cell__note">2025-07</div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-picker"><div class="t-picker__toolbar"><div class="t-picker__cancel">取消</div><div class="t-picker__title">选择时间</div><div class="t-picker__confirm">确认</div></div><div class="t-picker__main"><div class="t-picker-item__group"><ul class="t-picker-item"><li class="t-picker-item__item">2022 年</li><li class="t-picker-item__item">2023 年</li><li class="t-picker-item__item">2024 年</li><li class="t-picker-item__item">2025 年</li><li class="t-picker-item__item">2026 年</li><li class="t-picker-item__item">2027 年</li><li class="t-picker-item__item">2028 年</li><li class="t-picker-item__item">2029 年</li><li class="t-picker-item__item">2030 年</li></ul></div><div class="t-picker-item__group"><ul class="t-picker-item"><li class="t-picker-item__item">1 月</li><li class="t-picker-item__item">2 月</li><li class="t-picker-item__item">3 月</li><li class="t-picker-item__item">4 月</li><li class="t-picker-item__item">5 月</li><li class="t-picker-item__item">6 月</li><li class="t-picker-item__item">7 月</li><li class="t-picker-item__item">8 月</li><li class="t-picker-item__item">9 月</li><li class="t-picker-item__item">10 月</li><li class="t-picker-item__item">11 月</li><li class="t-picker-item__item">12 月</li></ul></div><div class="t-picker__mask t-picker__mask--top"></div><div class="t-picker__mask t-picker__mask--bottom"></div><div class="t-picker__indicator"></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/confirm.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/confirm.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/feedback.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-基础</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/feedback.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/image-dialog.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/image-dialog.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-带标题描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯图片</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-带标题描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Dialog 对话框</h1><p class="tdesign-mobile-demo-header__summary">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</p></div><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"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-基础</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">其它形态对话框</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直多按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件用法</h2><p class="tdesign-mobile-demo-block__summary">命令调用</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->命令行操作</span></button></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Dialog 对话框</h1><p class="tdesign-mobile-demo-header__summary">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</p></div><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"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-带标题描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯图片</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-带标题描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">文字按钮</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">水平基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">垂直基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">带关闭按钮的对话框</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮的对话框</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/input.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/multi-state.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直多按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/multi-state.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">水平基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">垂直基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">带关闭按钮的对话框</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮的对话框</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/plugin.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->命令行操作</span></button></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index a6a5ee090..c2c8316a9 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -174,17 +174,17 @@ exports[`ssr snapshot test > ssr test src/date-time-picker/_example/with-title.t
 
 exports[`ssr snapshot test > ssr test src/date-time-picker/_example/year-month.tsx 1`] = `"<div><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">选择时间</div></div><div class="t-cell__note">2025-07</div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-picker"><div class="t-picker__toolbar"><div class="t-picker__cancel">取消</div><div class="t-picker__title">选择时间</div><div class="t-picker__confirm">确认</div></div><div class="t-picker__main"><div class="t-picker-item__group"><ul class="t-picker-item"><li class="t-picker-item__item">2022 年</li><li class="t-picker-item__item">2023 年</li><li class="t-picker-item__item">2024 年</li><li class="t-picker-item__item">2025 年</li><li class="t-picker-item__item">2026 年</li><li class="t-picker-item__item">2027 年</li><li class="t-picker-item__item">2028 年</li><li class="t-picker-item__item">2029 年</li><li class="t-picker-item__item">2030 年</li></ul></div><div class="t-picker-item__group"><ul class="t-picker-item"><li class="t-picker-item__item">1 月</li><li class="t-picker-item__item">2 月</li><li class="t-picker-item__item">3 月</li><li class="t-picker-item__item">4 月</li><li class="t-picker-item__item">5 月</li><li class="t-picker-item__item">6 月</li><li class="t-picker-item__item">7 月</li><li class="t-picker-item__item">8 月</li><li class="t-picker-item__item">9 月</li><li class="t-picker-item__item">10 月</li><li class="t-picker-item__item">11 月</li><li class="t-picker-item__item">12 月</li></ul></div><div class="t-picker__mask t-picker__mask--top"></div><div class="t-picker__mask t-picker__mask--bottom"></div><div class="t-picker__indicator"></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/confirm.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/confirm.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/feedback.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-基础</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/feedback.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/image-dialog.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/image-dialog.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-带标题描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯图片</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-带标题描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Dialog 对话框</h1><p class="tdesign-mobile-demo-header__summary">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</p></div><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"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-基础</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">其它形态对话框</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直多按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件用法</h2><p class="tdesign-mobile-demo-block__summary">命令调用</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->命令行操作</span></button></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Dialog 对话框</h1><p class="tdesign-mobile-demo-header__summary">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</p></div><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"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->反馈类-内容超长</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-带标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-无标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->确认类-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><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="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-带标题描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-无标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯标题</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片置顶-纯图片</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-带标题描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->图片居中-纯标题</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">文字按钮</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">水平基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">垂直基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">带关闭按钮的对话框</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮的对话框</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/input.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-无描述</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->输入类-带描述</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/multi-state.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直多按钮</span></button><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/multi-state.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->文字按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">水平基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->水平基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">垂直基础按钮</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->垂直基础按钮</span></button><div class="btn-gap"></div><div class="diaog-demo__summary">带关闭按钮的对话框</div><div class="btn-gap"></div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带关闭按钮的对话框</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards"><div class="t-dialog undefined" style="width:undefinedpx"><div class="t-dialog__content"></div><div class="t-dialog__footer"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/plugin.tsx 1`] = `"<div class="t-dialog__demo-wrap"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->命令行操作</span></button></div>"`;
 

From 26b1092ebbe2c3849ffc17a6f1642cddba0075f7 Mon Sep 17 00:00:00 2001
From: Boomkaa <173308582@qq.com>
Date: Fri, 12 Sep 2025 14:15:19 +0800
Subject: [PATCH 2/2] test: add dialog test

---
 src/dialog/__tests__/dialog.test.tsx | 38 +++++++++++++++-------------
 src/dialog/show.tsx                  |  2 +-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/dialog/__tests__/dialog.test.tsx b/src/dialog/__tests__/dialog.test.tsx
index ebcda3dce..e13f087c7 100644
--- a/src/dialog/__tests__/dialog.test.tsx
+++ b/src/dialog/__tests__/dialog.test.tsx
@@ -1,5 +1,5 @@
 import React, { act } from 'react';
-import { render, screen, fireEvent, vi, it, describe, expect, afterEach, beforeEach } from '@test/utils';
+import { render, screen, fireEvent, vi, it, describe, expect, afterEach, beforeEach, cleanup } from '@test/utils';
 import Button from 'tdesign-mobile-react/button/Button';
 import { DialogPlugin, Dialog } from '../index';
 
@@ -12,6 +12,14 @@ describe('Dialog', () => {
   });
 
   afterEach(() => {
+    cleanup();
+    const overlays = document.querySelectorAll('.t-overlay');
+    const popups = document.querySelectorAll('.t-popup');
+    const dialogs = document.querySelectorAll('.t-dialog');
+
+    overlays.forEach((overlay) => overlay.remove());
+    popups.forEach((popup) => popup.remove());
+    dialogs.forEach((dialog) => dialog.remove());
     vi.useRealTimers();
   });
 
@@ -76,16 +84,12 @@ describe('Dialog', () => {
     it(': buttonLayout', () => {
       const confirmBtn = {
         content: '确认',
-        variant: 'text',
-        size: 'large',
+        variant: 'text' as const,
+        size: 'large' as const,
       };
+      const cancelBtn = () => <Button content="取消" variant="text" size="large" />;
       const { rerender } = render(
-        <Dialog
-          visible
-          buttonLayout="vertical"
-          confirmBtn={confirmBtn}
-          cancelBtn={<Button content="取消" variant="text" size="large" />}
-        />,
+        <Dialog visible buttonLayout="vertical" confirmBtn={confirmBtn} cancelBtn={cancelBtn} />,
       );
       expect(document.querySelector(`${name}__footer--column`)).toBeTruthy();
 
@@ -227,12 +231,11 @@ describe('Dialog', () => {
           title: '标题',
         });
       });
-
       instance.destroy();
-
-      setTimeout(() => {
-        expect(document.querySelector(name)).toBeFalsy();
-      }, 1000);
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(document.querySelector(name)).toBeFalsy();
     });
 
     it(': alert', async () => {
@@ -310,9 +313,10 @@ describe('Dialog', () => {
       render(<Dialog visible onOverlayClick={onOverlayClick} />);
       const overlay = document.querySelector('.t-overlay');
       fireEvent.click(overlay);
-      setTimeout(() => {
-        expect(onOverlayClick).toHaveBeenCalled();
-      }, 1000);
+      await act(async () => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(onOverlayClick).toHaveBeenCalled();
     });
   });
 });
diff --git a/src/dialog/show.tsx b/src/dialog/show.tsx
index b52864d17..eff446851 100644
--- a/src/dialog/show.tsx
+++ b/src/dialog/show.tsx
@@ -71,7 +71,7 @@ export function show(props: DialogShowProps): DialogInstance {
     hide: () => ref.current?.hide(),
     show: () => ref.current?.show(),
     update: (opts: DialogShowProps) => ref.current?.update(opts),
-    destroy,
+    destroy: () => ref.current?.destroy(),
   };
 }