From 2c8c013e38dadf2a8a44c8b2e976aec3dd5c79a5 Mon Sep 17 00:00:00 2001
From: YilunSun <osirisnero@gmail.com>
Date: Tue, 25 Oct 2022 22:58:33 +0800
Subject: [PATCH] fix: handle pr

---
 src/guide/_example/base.css               |   40 -
 src/guide/_example/base.jsx               |   53 +-
 src/guide/_example/custom-popup.css       |   40 -
 src/guide/_example/custom-popup.jsx       |   53 +-
 src/guide/_example/dialog-body.css        |   12 -
 src/guide/_example/dialog-body.jsx        |   35 +-
 src/guide/_example/dialog.css             |   55 -
 src/guide/_example/dialog.jsx             |   68 +-
 src/guide/_example/my-popup.css           |   28 -
 src/guide/_example/my-popup.jsx           |   42 +-
 src/guide/_example/no-mask.css            |   40 -
 src/guide/_example/no-mask.jsx            |   54 +-
 src/guide/_example/popup-dialog.css       |   40 -
 src/guide/_example/popup-dialog.jsx       |   53 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 2187 ++++++++++++++++++++-
 15 files changed, 2528 insertions(+), 272 deletions(-)
 delete mode 100644 src/guide/_example/base.css
 delete mode 100644 src/guide/_example/custom-popup.css
 delete mode 100644 src/guide/_example/dialog-body.css
 delete mode 100644 src/guide/_example/dialog.css
 delete mode 100644 src/guide/_example/my-popup.css
 delete mode 100644 src/guide/_example/no-mask.css
 delete mode 100644 src/guide/_example/popup-dialog.css

diff --git a/src/guide/_example/base.css b/src/guide/_example/base.css
deleted file mode 100644
index f771d5eef3..0000000000
--- a/src/guide/_example/base.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.guide-container {
-  max-width: 600px;
-  padding: 40px;
-}
-
-.title-major {
-  color: var(--td-text-color-primary);
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 44px;
-}
-
-.title-sub {
-  margin-top: 8px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.field {
-  margin-top: 50px;
-}
-
-.label {
-  margin-bottom: 8px;
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.action {
-  display: inline-flex;
-  margin-top: 50px;
-}
-
-.action button {
-  margin-right: 10px;
-}
diff --git a/src/guide/_example/base.jsx b/src/guide/_example/base.jsx
index 41926c8606..c04b7047df 100644
--- a/src/guide/_example/base.jsx
+++ b/src/guide/_example/base.jsx
@@ -1,8 +1,57 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './base.css';
+
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+</style>
+`;
 
 export default function BasicGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-base',
diff --git a/src/guide/_example/custom-popup.css b/src/guide/_example/custom-popup.css
deleted file mode 100644
index f771d5eef3..0000000000
--- a/src/guide/_example/custom-popup.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.guide-container {
-  max-width: 600px;
-  padding: 40px;
-}
-
-.title-major {
-  color: var(--td-text-color-primary);
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 44px;
-}
-
-.title-sub {
-  margin-top: 8px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.field {
-  margin-top: 50px;
-}
-
-.label {
-  margin-bottom: 8px;
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.action {
-  display: inline-flex;
-  margin-top: 50px;
-}
-
-.action button {
-  margin-right: 10px;
-}
diff --git a/src/guide/_example/custom-popup.jsx b/src/guide/_example/custom-popup.jsx
index fb0f717e00..e1b3292532 100644
--- a/src/guide/_example/custom-popup.jsx
+++ b/src/guide/_example/custom-popup.jsx
@@ -1,9 +1,58 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './custom-popup.css';
 import MyPopup from './my-popup';
 
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+</style>
+`;
+
 export default function CustomPopupGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const [visible, setVisible] = React.useState(false);
   const [current, setCurrent] = React.useState(-1);
 
diff --git a/src/guide/_example/dialog-body.css b/src/guide/_example/dialog-body.css
deleted file mode 100644
index 55a00ac294..0000000000
--- a/src/guide/_example/dialog-body.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.dialog-img {
-  width: 100%;
-}
-
-p {
-  margin-top: 16px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  text-align: left;
-  line-height: 22px;
-}
diff --git a/src/guide/_example/dialog-body.jsx b/src/guide/_example/dialog-body.jsx
index e096e3ce8c..b82fb82f6a 100644
--- a/src/guide/_example/dialog-body.jsx
+++ b/src/guide/_example/dialog-body.jsx
@@ -1,10 +1,39 @@
-import React from 'react';
-import './dialog-body.css';
+import React, { useEffect } from 'react';
+
+const classStyles = `
+<style>
+.dialog-body .img-wrapper {
+  border-radius: var(--td-radius-default);
+  overflow: hidden;
+}
+
+.dialog-body p {
+  margin-top: 24px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+
+.dialog-body .img-wrapper img {
+  vertical-align: bottom;
+  width: 100%;
+}
+</style>
+`;
 
 export default function DialogBody() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   return (
     <div className="dialog-body">
-      <img className="dialog-img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+      <div className="img-wrapper">
+        <img className="img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+      </div>
       <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
     </div>
   );
diff --git a/src/guide/_example/dialog.css b/src/guide/_example/dialog.css
deleted file mode 100644
index 249e8c71e6..0000000000
--- a/src/guide/_example/dialog.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.guide-container {
-  max-width: 600px;
-  padding: 40px;
-}
-
-.title-major {
-  color: var(--td-text-color-primary);
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 44px;
-}
-
-.title-sub {
-  margin-top: 8px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.field {
-  margin-top: 50px;
-}
-
-.label {
-  margin-bottom: 8px;
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.action {
-  display: inline-flex;
-  margin-top: 50px;
-}
-
-.action button {
-  margin-right: 10px;
-}
-
-/* dialog body */
-
-.dialog-img {
-  width: 100%;
-}
-
-p {
-  margin-top: 16px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  text-align: left;
-  line-height: 22px;
-}
diff --git a/src/guide/_example/dialog.jsx b/src/guide/_example/dialog.jsx
index 160501436f..16793c58ca 100644
--- a/src/guide/_example/dialog.jsx
+++ b/src/guide/_example/dialog.jsx
@@ -1,9 +1,73 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './base.css';
 import DialogBody from './dialog-body';
 
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+
+/* dialog body */
+
+.dialog-img {
+  width: 100%;
+}
+
+p {
+  margin-top: 16px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+</style>
+`;
+
 export default function DialogGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-dialog',
diff --git a/src/guide/_example/my-popup.css b/src/guide/_example/my-popup.css
deleted file mode 100644
index 716c8b6cc0..0000000000
--- a/src/guide/_example/my-popup.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.my-popup {
-  width: 240px;
-}
-
-.pop-icon {
-  margin-top: 10px;
-  color: white;
-  font-size: 30px;
-  font-weight: bold;
-}
-
-.popup-desc {
-  margin-top: 10px;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 12px;
-  font-weight: 400;
-  text-align: left;
-  line-height: 20px;
-}
-
-.popup-action {
-  margin-top: 10px;
-  text-align: right;
-}
-
-.popup-action button {
-  margin-left: 8px;
-}
diff --git a/src/guide/_example/my-popup.jsx b/src/guide/_example/my-popup.jsx
index 8ba3b21b62..94b5962b3d 100644
--- a/src/guide/_example/my-popup.jsx
+++ b/src/guide/_example/my-popup.jsx
@@ -1,9 +1,47 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ArrowUpIcon } from 'tdesign-icons-react';
 import Button from '../../button';
-import './my-popup.css';
+
+const classStyles = `
+<style>
+.my-popup {
+  width: 240px;
+}
+
+.pop-icon {
+  margin-top: 10px;
+  color: white;
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.popup-desc {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 20px;
+}
+
+.popup-action {
+  margin-top: 10px;
+  text-align: right;
+}
+
+.popup-action button {
+  margin-left: 8px;
+}
+
+</style>
+`;
 
 export default function MyPopup(props) {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const { handlePrev, handleNext, handleSkip, handleFinish, current, total } = props;
 
   return (
diff --git a/src/guide/_example/no-mask.css b/src/guide/_example/no-mask.css
deleted file mode 100644
index f771d5eef3..0000000000
--- a/src/guide/_example/no-mask.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.guide-container {
-  max-width: 600px;
-  padding: 40px;
-}
-
-.title-major {
-  color: var(--td-text-color-primary);
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 44px;
-}
-
-.title-sub {
-  margin-top: 8px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.field {
-  margin-top: 50px;
-}
-
-.label {
-  margin-bottom: 8px;
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.action {
-  display: inline-flex;
-  margin-top: 50px;
-}
-
-.action button {
-  margin-right: 10px;
-}
diff --git a/src/guide/_example/no-mask.jsx b/src/guide/_example/no-mask.jsx
index a274e87669..bdca014272 100644
--- a/src/guide/_example/no-mask.jsx
+++ b/src/guide/_example/no-mask.jsx
@@ -1,8 +1,58 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './no-mask.css';
+
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+
+</style>
+`;
 
 export default function NoMaskGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-no-mask',
diff --git a/src/guide/_example/popup-dialog.css b/src/guide/_example/popup-dialog.css
deleted file mode 100644
index f771d5eef3..0000000000
--- a/src/guide/_example/popup-dialog.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.guide-container {
-  max-width: 600px;
-  padding: 40px;
-}
-
-.title-major {
-  color: var(--td-text-color-primary);
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 44px;
-}
-
-.title-sub {
-  margin-top: 8px;
-  color: var(--td-text-color-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.field {
-  margin-top: 50px;
-}
-
-.label {
-  margin-bottom: 8px;
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-}
-
-.action {
-  display: inline-flex;
-  margin-top: 50px;
-}
-
-.action button {
-  margin-right: 10px;
-}
diff --git a/src/guide/_example/popup-dialog.jsx b/src/guide/_example/popup-dialog.jsx
index 1876cf994b..b9e499744d 100644
--- a/src/guide/_example/popup-dialog.jsx
+++ b/src/guide/_example/popup-dialog.jsx
@@ -1,9 +1,58 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './popup-dialog.css';
 import DialogBody from './dialog-body';
 
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+</style>
+`;
+
 export default function PopupDialogGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-popup-dialog',
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 8bae073a82..e488ec2567 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`csr snapshot test > csr test src/affix/_example/base.jsx 1`] = `
+exports[`csr snapshot test > csr test src/affix/_example/container.jsx 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
@@ -91,10 +91,26 @@ exports[`csr snapshot test > csr test src/affix/_example/base.jsx 1`] = `
 }
 `;
 
-exports[`csr snapshot test > csr test src/affix/_example/container.jsx 1`] = `
+exports[`csr snapshot test > csr test src/affix/_example/container.jsx 2`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
+    <div>
+      <div>
+        <div>
+          <button
+            class="t-button t-button--theme-primary t-button--variant-base"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              固钉
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
     <div>
       <div
         style="border-radius: 3px; height: 400px; overflow-x: hidden; overflow-y: auto;"
@@ -95854,6 +95870,2173 @@ exports[`csr snapshot test > csr test src/grid/_example/valign.jsx 1`] = `
 }
 `;
 
+exports[`csr snapshot test > csr test src/guide/_example/base.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="t-row t-row--center t-row--top"
+        style="margin-left: 0px; margin-right: 0px;"
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            新手引导
+          </span>
+        </button>
+        <div>
+          <div
+            class="t-drawer t-drawer--right t-drawer--without-mask"
+            tabindex="-1"
+          >
+            <div
+              class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+              style="width: 60%;"
+            >
+              <div
+                class="t-drawer__close-btn"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-drawer__header"
+              >
+                演示新手引导
+              </div>
+              <div
+                class="t-drawer__body"
+              >
+                <div
+                  class="guide-container"
+                >
+                  <div
+                    class="main-title-base"
+                  >
+                    <div
+                      class="title-major"
+                    >
+                      Guide 用户引导
+                    </div>
+                    <div
+                      class="title-sub"
+                    >
+                      按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-base"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="field"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-row action action-base t-row--start t-row--top"
+                    style="margin-left: 0px; margin-right: 0px;"
+                  >
+                    <button
+                      class="t-button t-button--theme-primary t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        确定
+                      </span>
+                    </button>
+                    <button
+                      class="t-button t-button--theme-default t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        取消
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-drawer__footer"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-base"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                     关闭抽屉 
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-row t-row--center t-row--top"
+      style="margin-left: 0px; margin-right: 0px;"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          新手引导
+        </span>
+      </button>
+      <div>
+        <div
+          class="t-drawer t-drawer--right t-drawer--without-mask"
+          tabindex="-1"
+        >
+          <div
+            class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+            style="width: 60%;"
+          >
+            <div
+              class="t-drawer__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-drawer__header"
+            >
+              演示新手引导
+            </div>
+            <div
+              class="t-drawer__body"
+            >
+              <div
+                class="guide-container"
+              >
+                <div
+                  class="main-title-base"
+                >
+                  <div
+                    class="title-major"
+                  >
+                    Guide 用户引导
+                  </div>
+                  <div
+                    class="title-sub"
+                  >
+                    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                  </div>
+                </div>
+                <div
+                  class="field label-field-base"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-row action action-base t-row--start t-row--top"
+                  style="margin-left: 0px; margin-right: 0px;"
+                >
+                  <button
+                    class="t-button t-button--theme-primary t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      确定
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      取消
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-drawer__footer"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                   关闭抽屉 
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/custom-popup.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="t-row t-row--center t-row--top"
+        style="margin-left: 0px; margin-right: 0px;"
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            新手引导
+          </span>
+        </button>
+        <div>
+          <div
+            class="t-drawer t-drawer--right t-drawer--without-mask"
+            tabindex="-1"
+          >
+            <div
+              class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+              style="width: 60%;"
+            >
+              <div
+                class="t-drawer__close-btn"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-drawer__header"
+              >
+                演示新手引导
+              </div>
+              <div
+                class="t-drawer__body"
+              >
+                <div
+                  class="guide-container"
+                >
+                  <div
+                    class="main-title-custom-popup"
+                  >
+                    <div
+                      class="title-major"
+                    >
+                      Guide 用户引导
+                    </div>
+                    <div
+                      class="title-sub"
+                    >
+                      按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-1-custom-popup"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-2-custom-popup"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-row action t-row--start t-row--top"
+                    style="margin-left: 0px; margin-right: 0px;"
+                  >
+                    <button
+                      class="t-button t-button--theme-primary t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        确定
+                      </span>
+                    </button>
+                    <button
+                      class="t-button t-button--theme-default t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        取消
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-drawer__footer"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-base"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                     关闭抽屉 
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-row t-row--center t-row--top"
+      style="margin-left: 0px; margin-right: 0px;"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          新手引导
+        </span>
+      </button>
+      <div>
+        <div
+          class="t-drawer t-drawer--right t-drawer--without-mask"
+          tabindex="-1"
+        >
+          <div
+            class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+            style="width: 60%;"
+          >
+            <div
+              class="t-drawer__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-drawer__header"
+            >
+              演示新手引导
+            </div>
+            <div
+              class="t-drawer__body"
+            >
+              <div
+                class="guide-container"
+              >
+                <div
+                  class="main-title-custom-popup"
+                >
+                  <div
+                    class="title-major"
+                  >
+                    Guide 用户引导
+                  </div>
+                  <div
+                    class="title-sub"
+                  >
+                    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                  </div>
+                </div>
+                <div
+                  class="field label-field-1-custom-popup"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="field label-field-2-custom-popup"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-row action t-row--start t-row--top"
+                  style="margin-left: 0px; margin-right: 0px;"
+                >
+                  <button
+                    class="t-button t-button--theme-primary t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      确定
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      取消
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-drawer__footer"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                   关闭抽屉 
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/dialog.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="t-row t-row--center t-row--top"
+        style="margin-left: 0px; margin-right: 0px;"
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            新手引导
+          </span>
+        </button>
+        <div>
+          <div
+            class="t-drawer t-drawer--right t-drawer--without-mask"
+            tabindex="-1"
+          >
+            <div
+              class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+              style="width: 60%;"
+            >
+              <div
+                class="t-drawer__close-btn"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-drawer__header"
+              >
+                演示新手引导
+              </div>
+              <div
+                class="t-drawer__body"
+              >
+                <div
+                  class="guide-container"
+                >
+                  <div
+                    class="main-title-dialog"
+                  >
+                    <div
+                      class="title-major"
+                    >
+                      Guide 用户引导
+                    </div>
+                    <div
+                      class="title-sub"
+                    >
+                      按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-dialog"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="field"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-row action action-dialog t-row--start t-row--top"
+                    style="margin-left: 0px; margin-right: 0px;"
+                  >
+                    <button
+                      class="t-button t-button--theme-primary t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        确定
+                      </span>
+                    </button>
+                    <button
+                      class="t-button t-button--theme-default t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        取消
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-drawer__footer"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-base"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                     关闭抽屉 
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-row t-row--center t-row--top"
+      style="margin-left: 0px; margin-right: 0px;"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          新手引导
+        </span>
+      </button>
+      <div>
+        <div
+          class="t-drawer t-drawer--right t-drawer--without-mask"
+          tabindex="-1"
+        >
+          <div
+            class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+            style="width: 60%;"
+          >
+            <div
+              class="t-drawer__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-drawer__header"
+            >
+              演示新手引导
+            </div>
+            <div
+              class="t-drawer__body"
+            >
+              <div
+                class="guide-container"
+              >
+                <div
+                  class="main-title-dialog"
+                >
+                  <div
+                    class="title-major"
+                  >
+                    Guide 用户引导
+                  </div>
+                  <div
+                    class="title-sub"
+                  >
+                    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                  </div>
+                </div>
+                <div
+                  class="field label-field-dialog"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-row action action-dialog t-row--start t-row--top"
+                  style="margin-left: 0px; margin-right: 0px;"
+                >
+                  <button
+                    class="t-button t-button--theme-primary t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      确定
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      取消
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-drawer__footer"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                   关闭抽屉 
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/dialog-body.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="dialog-body"
+      >
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="demo"
+            class="img"
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          />
+        </div>
+        <p>
+          此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。
+        </p>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="dialog-body"
+    >
+      <div
+        class="img-wrapper"
+      >
+        <img
+          alt="demo"
+          class="img"
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        />
+      </div>
+      <p>
+        此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。
+      </p>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/my-popup.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="my-popup"
+      >
+        <svg
+          class="t-icon t-icon-arrow-up pop-icon"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+        <p
+          class="popup-desc"
+        >
+          自定义的图形或说明文案，用来解释或指导该功能使用。
+        </p>
+        <div
+          class="popup-action"
+        >
+          <button
+            class="t-button t-button--theme-default t-button--variant-base t-size-s"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              跳过
+            </span>
+          </button>
+          <button
+            class="t-button t-button--theme-default t-button--variant-base t-size-s"
+            type="button"
+          >
+            <span
+              class="t-button__text"
+            >
+              上一步
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="my-popup"
+    >
+      <svg
+        class="t-icon t-icon-arrow-up pop-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M7.5 3.91L3.85 7.56l-.7-.7L7.79 2.2a.3.3 0 01.42 0l4.64 4.64-.7.71L8.5 3.91V14h-1V3.91z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+      <p
+        class="popup-desc"
+      >
+        自定义的图形或说明文案，用来解释或指导该功能使用。
+      </p>
+      <div
+        class="popup-action"
+      >
+        <button
+          class="t-button t-button--theme-default t-button--variant-base t-size-s"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            跳过
+          </span>
+        </button>
+        <button
+          class="t-button t-button--theme-default t-button--variant-base t-size-s"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            上一步
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/no-mask.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="t-row t-row--center t-row--top"
+        style="margin-left: 0px; margin-right: 0px;"
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            新手引导
+          </span>
+        </button>
+        <div>
+          <div
+            class="t-drawer t-drawer--right t-drawer--without-mask"
+            tabindex="-1"
+          >
+            <div
+              class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+              style="width: 60%;"
+            >
+              <div
+                class="t-drawer__close-btn"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-drawer__header"
+              >
+                演示新手引导
+              </div>
+              <div
+                class="t-drawer__body"
+              >
+                <div
+                  class="guide-container"
+                >
+                  <div
+                    class="main-title-no-mask"
+                  >
+                    <div
+                      class="title-major"
+                    >
+                      Guide 用户引导
+                    </div>
+                    <div
+                      class="title-sub"
+                    >
+                      按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-no-mask"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="field"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-row action action-no-mask t-row--start t-row--top"
+                    style="margin-left: 0px; margin-right: 0px;"
+                  >
+                    <button
+                      class="t-button t-button--theme-primary t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        确定
+                      </span>
+                    </button>
+                    <button
+                      class="t-button t-button--theme-default t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        取消
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-drawer__footer"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-base"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                     关闭抽屉 
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-row t-row--center t-row--top"
+      style="margin-left: 0px; margin-right: 0px;"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          新手引导
+        </span>
+      </button>
+      <div>
+        <div
+          class="t-drawer t-drawer--right t-drawer--without-mask"
+          tabindex="-1"
+        >
+          <div
+            class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+            style="width: 60%;"
+          >
+            <div
+              class="t-drawer__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-drawer__header"
+            >
+              演示新手引导
+            </div>
+            <div
+              class="t-drawer__body"
+            >
+              <div
+                class="guide-container"
+              >
+                <div
+                  class="main-title-no-mask"
+                >
+                  <div
+                    class="title-major"
+                  >
+                    Guide 用户引导
+                  </div>
+                  <div
+                    class="title-sub"
+                  >
+                    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                  </div>
+                </div>
+                <div
+                  class="field label-field-no-mask"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-row action action-no-mask t-row--start t-row--top"
+                  style="margin-left: 0px; margin-right: 0px;"
+                >
+                  <button
+                    class="t-button t-button--theme-primary t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      确定
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      取消
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-drawer__footer"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                   关闭抽屉 
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/guide/_example/popup-dialog.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    style="transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;"
+  >
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.1.2/fonts/index.js"
+    />
+    <div>
+      <div
+        class="t-row t-row--center t-row--top"
+        style="margin-left: 0px; margin-right: 0px;"
+      >
+        <button
+          class="t-button t-button--theme-primary t-button--variant-base"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+            新手引导
+          </span>
+        </button>
+        <div>
+          <div
+            class="t-drawer t-drawer--right t-drawer--without-mask"
+            tabindex="-1"
+          >
+            <div
+              class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+              style="width: 60%;"
+            >
+              <div
+                class="t-drawer__close-btn"
+              >
+                <svg
+                  class="t-icon t-icon-close"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="t-drawer__header"
+              >
+                演示新手引导
+              </div>
+              <div
+                class="t-drawer__body"
+              >
+                <div
+                  class="guide-container"
+                >
+                  <div
+                    class="main-title-popup-dialog"
+                  >
+                    <div
+                      class="title-major"
+                    >
+                      Guide 用户引导
+                    </div>
+                    <div
+                      class="title-sub"
+                    >
+                      按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                    </div>
+                  </div>
+                  <div
+                    class="field label-field-popup-dialog"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="field"
+                  >
+                    <div
+                      class="label"
+                    >
+                      Label
+                    </div>
+                    <div
+                      class="t-input__wrap"
+                    >
+                      <div
+                        class="t-input t-size-m t-align-left t-is-default"
+                      >
+                        <input
+                          class="t-input__inner"
+                          placeholder="请输入内容"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="t-row action action-popup-dialog t-row--start t-row--top"
+                    style="margin-left: 0px; margin-right: 0px;"
+                  >
+                    <button
+                      class="t-button t-button--theme-primary t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        确定
+                      </span>
+                    </button>
+                    <button
+                      class="t-button t-button--theme-default t-button--variant-base"
+                      type="button"
+                    >
+                      <span
+                        class="t-button__text"
+                      >
+                        取消
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-drawer__footer"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-base"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                     关闭抽屉 
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-row t-row--center t-row--top"
+      style="margin-left: 0px; margin-right: 0px;"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          新手引导
+        </span>
+      </button>
+      <div>
+        <div
+          class="t-drawer t-drawer--right t-drawer--without-mask"
+          tabindex="-1"
+        >
+          <div
+            class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
+            style="width: 60%;"
+          >
+            <div
+              class="t-drawer__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-drawer__header"
+            >
+              演示新手引导
+            </div>
+            <div
+              class="t-drawer__body"
+            >
+              <div
+                class="guide-container"
+              >
+                <div
+                  class="main-title-popup-dialog"
+                >
+                  <div
+                    class="title-major"
+                  >
+                    Guide 用户引导
+                  </div>
+                  <div
+                    class="title-sub"
+                  >
+                    按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+                  </div>
+                </div>
+                <div
+                  class="field label-field-popup-dialog"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="field"
+                >
+                  <div
+                    class="label"
+                  >
+                    Label
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-left t-is-default"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="请输入内容"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-row action action-popup-dialog t-row--start t-row--top"
+                  style="margin-left: 0px; margin-right: 0px;"
+                >
+                  <button
+                    class="t-button t-button--theme-primary t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      确定
+                    </span>
+                  </button>
+                  <button
+                    class="t-button t-button--theme-default t-button--variant-base"
+                    type="button"
+                  >
+                    <span
+                      class="t-button__text"
+                    >
+                      取消
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-drawer__footer"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-base"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                   关闭抽屉 
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`csr snapshot test > csr test src/icon/_example/Enhanced.jsx 1`] = `
 {
   "asFragment": [Function],