diff --git a/packages/arcodesign/components/image-preview/__test__/index.spec.js b/packages/arcodesign/components/image-preview/__test__/index.spec.js
index 021f412a..55faf295 100644
--- a/packages/arcodesign/components/image-preview/__test__/index.spec.js
+++ b/packages/arcodesign/components/image-preview/__test__/index.spec.js
@@ -118,7 +118,7 @@ describe('ImagePreview', () => {
         expect(onImageDoubleClick.mock.calls).toHaveLength(1);
     });
 
-    it('should support thumb bounds', () => {
+    it('should support thumb bounds', async () => {
         const props = {
             staticLabel: true,
             images: [
@@ -152,6 +152,24 @@ describe('ImagePreview', () => {
         });
         pureDelay(1000);
         expect(document.querySelectorAll('.image-preview-fake-rect')).toHaveLength(0);
+        loadImage(document.querySelector(`.${imagePrefix}`), {
+            top: 0,
+            bottom: 700,
+            left: 0,
+            right: 375,
+            width: 375,
+            height: 700,
+        });
+        expect(document.querySelector(`.${prefix}`)).not.toBeNull();
+        fireEvent.click(document.querySelector('.image-container img'));
+        pureDelay(300);
+        expect(document.querySelector('.closing-animation')).not.toBeNull();
+        await waitFor(
+            () => {
+                expect(document.querySelector(`.${prefix}`)).toBeNull();
+            },
+            { timeout: 1000 },
+        );
     });
 
     it('should support touch event correctly', () => {
@@ -197,14 +215,18 @@ describe('ImagePreview', () => {
 
     it('should support `ImagePreview.open`', async () => {
         const onClose = jest.fn();
-        window.instance = ImagePreview.open({ staticLabel: true, onClose, images: demoImages });
-        // TODO: ReactDOM.render 不生效，待升级 react 18 版本对应的rtl
-        // pureDelay(1100);
-        // expect(document.querySelectorAll(`.${imagePrefix}`)).toHaveLength(2);
+        window.instance = ImagePreview.open({
+            staticLabel: true,
+            onClose,
+            images: demoImages,
+            openIndex: 0,
+        });
+        pureDelay(1100);
+        expect(document.querySelectorAll(`.${imagePrefix}`)).toHaveLength(2);
         expect(typeof window.instance.close).toBe('function');
         expect(typeof window.instance.update).toBe('function');
         window.instance.close();
-        // pureDelay(1100);
-        // expect(onClose.mock.calls).toHaveLength(1);
+        pureDelay(1100);
+        expect(onClose.mock.calls).toHaveLength(1);
     });
 });
diff --git a/packages/arcodesign/components/pagination/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/pagination/__test__/__snapshots__/index.spec.js.snap
index 79e7e954..4ab56fa5 100644
--- a/packages/arcodesign/components/pagination/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/pagination/__test__/__snapshots__/index.spec.js.snap
@@ -17,8 +17,9 @@ exports[`pagination demo test pagination demo: icon.md renders correctly 1`] = `
           <svg
             fill="none"
             height="14"
-            viewBox="0 0 8 14"
-            width="8"
+            style="overflow: visible;"
+            viewBox="3 0 2 14"
+            width="2"
           >
             <path
               clip-rule="evenodd"
@@ -62,8 +63,9 @@ exports[`pagination demo test pagination demo: icon.md renders correctly 1`] = `
           <svg
             fill="none"
             height="14"
-            viewBox="0 0 8 14"
-            width="8"
+            style="overflow: visible;"
+            viewBox="3 0 2 14"
+            width="2"
           >
             <path
               clip-rule="evenodd"
@@ -96,8 +98,9 @@ exports[`pagination demo test pagination demo: icon2.md renders correctly 1`] =
           <svg
             fill="none"
             height="14"
-            viewBox="0 0 8 14"
-            width="8"
+            style="overflow: visible;"
+            viewBox="3 0 2 14"
+            width="2"
           >
             <path
               clip-rule="evenodd"
@@ -131,8 +134,9 @@ exports[`pagination demo test pagination demo: icon2.md renders correctly 1`] =
           <svg
             fill="none"
             height="14"
-            viewBox="0 0 8 14"
-            width="8"
+            style="overflow: visible;"
+            viewBox="3 0 2 14"
+            width="2"
           >
             <path
               clip-rule="evenodd"
diff --git a/packages/arcodesign/components/search-bar/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/search-bar/__test__/__snapshots__/index.spec.js.snap
index f4f0b849..600cb8f4 100644
--- a/packages/arcodesign/components/search-bar/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/search-bar/__test__/__snapshots__/index.spec.js.snap
@@ -33,7 +33,7 @@ exports[`search-bar demo test search-bar demo: action-btn.md renders correctly 1
       />
     </div>
     <span
-      style="margin-left: 16px; color: rgb(22, 93, 255); font-size: 15px;"
+      class="demo-search-btn"
     >
       Search
     </span>
@@ -163,13 +163,12 @@ exports[`search-bar demo test search-bar demo: custom-pend.md renders correctly
     role="search"
   >
     <div
-      style="display: flex; align-items: center; font-size: 14px; margin-right: 10px;"
+      class="demo-search-pend-wrapper"
     >
       City 
       <svg
-        class="arco-icon arco-icon-arrow-down "
+        class="arco-icon arco-icon-arrow-down demo-search-pend-icon"
         height="1em"
-        style="margin-left: 5px; font-size: 10px;"
         viewBox="0 0 1024 1024"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
@@ -207,8 +206,7 @@ exports[`search-bar demo test search-bar demo: custom-pend.md renders correctly
       />
     </div>
     <div
-      class="arco-avatar-wrapper ultra-small circle arco-avatar-wrapper-shape-circle"
-      style="margin-left: 13px;"
+      class="arco-avatar-wrapper demo-search-pend-avatar ultra-small circle arco-avatar-wrapper-shape-circle"
     >
       <div
         class="arco-avatar arco-avatar-size-ultra-small ultra-small arco-avatar-shape-circle circle arco-avatar-default-overlap default-overlap"
diff --git a/packages/arcodesign/components/slider/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/slider/__test__/__snapshots__/index.spec.js.snap
index 2afd9344..68349350 100644
--- a/packages/arcodesign/components/slider/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/slider/__test__/__snapshots__/index.spec.js.snap
@@ -205,6 +205,86 @@ exports[`slider demo test slider demo: custom-icon.md renders correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`slider demo test slider demo: custom-popover.md renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="10"
+    class="arco-slider  is-horizontal show-tooltip"
+    role="slider"
+    style="padding-top: 60px;"
+  >
+    <div
+      class="arco-slider-wrapper"
+    >
+      <div
+        class="arco-slider-marks"
+      />
+      <div
+        class="arco-slider-line"
+        style="height: 2px;"
+      >
+        <div
+          class="arco-slider-line is-activated is-transferable"
+          style="height: 2px; left: 0px; width: 0px;"
+        >
+          <div
+            class="arco-slider-thumb-wrapper is-start"
+          >
+            <div
+              class="arco-slider-thumb"
+            />
+          </div>
+          <div
+            class="arco-slider-thumb-wrapper is-end"
+          >
+            <div
+              class="arco-popover black-theme follow-mode"
+            >
+              <div
+                class="popover-child-inner"
+              >
+                <div
+                  class="arco-slider-thumb"
+                />
+              </div>
+              <div
+                class="arco-popover-inner popover-inner all-border-box follow-mode black-theme"
+                style="min-width: 10px; max-width: 90vw; transform-origin: 0 0;"
+              >
+                <div
+                  class="popover-bg"
+                >
+                  <div
+                    class="popover-arrow topRight"
+                    style="width: 9px; height: 9px;"
+                  >
+                    <div
+                      class="popover-arrow-content"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="popover-content topRight"
+                >
+                  <div
+                    class="content-text"
+                  >
+                    value: 60
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`slider demo test slider demo: custom-size.md renders correctly 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap
index 28db9d3e..fd2dd82e 100644
--- a/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/steps/__test__/__snapshots__/index.spec.js.snap
@@ -2,281 +2,279 @@
 
 exports[`steps demo test steps demo: custom-align.md renders correctly 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="arco-steps all-border-box steps-custom-align horizontal pc"
+  >
     <div
-      class="arco-steps all-border-box steps-custom-align horizontal pc"
+      class="arco-steps-item arco-steps-item-align-start finish horizontal number"
     >
       <div
-        class="arco-steps-item arco-steps-item-align-start finish horizontal number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-start finish-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon finish-bg-color-with-config"
+      >
+        <svg
+          class="arco-icon arco-icon-check-bold "
+          height="1em"
+          viewBox="0 -0.97 10.07 10.07"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            data-name="图层 2"
+          >
+            <path
+              d="M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z"
+              data-name="图层 1"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+        </svg>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-start"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-start finish-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon finish-bg-color-with-config"
+          class="arco-steps-item-title finish-title-color-with-config"
         >
-          <svg
-            class="arco-icon arco-icon-check-bold "
-            height="1em"
-            viewBox="0 -0.97 10.07 10.07"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              data-name="图层 2"
-            >
-              <path
-                d="M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z"
-                data-name="图层 1"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </g>
-          </svg>
+          Start
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-start"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title finish-title-color-with-config"
-          >
-            Start
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-start process horizontal number"
+    >
       <div
-        class="arco-steps-item arco-steps-item-align-start process horizontal number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-start process-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon process-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-start"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-start process-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon process-bg-color-with-config"
+          class="arco-steps-item-title process-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            2
-          </span>
+          Step 2
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-start"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title process-title-color-with-config"
-          >
-            Step 2
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-start wait horizontal number"
+    >
+      <div
+        class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon wait-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          3
+        </span>
+      </div>
       <div
-        class="arco-steps-item arco-steps-item-align-start wait horizontal number"
+        class="arco-steps-item-content arco-steps-item-content-align-start"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon wait-bg-color-with-config"
+          class="arco-steps-item-title wait-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            3
-          </span>
+          Step 3
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-start"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title wait-title-color-with-config"
-          >
-            Step 3
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-start wait horizontal number"
+    >
       <div
-        class="arco-steps-item arco-steps-item-align-start wait horizontal number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon wait-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          4
+        </span>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-start"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-start wait-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon wait-bg-color-with-config"
+          class="arco-steps-item-title wait-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            4
-          </span>
+          Finish
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-start"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title wait-title-color-with-config"
-          >
-            Finish
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="divide"
+  />
+  <div
+    class="arco-steps all-border-box  vertical pc"
+  >
     <div
-      class="divide"
-    />
-    <div
-      class="arco-steps all-border-box  vertical pc"
+      class="arco-steps-item arco-steps-item-align-center finish vertical number"
     >
       <div
-        class="arco-steps-item arco-steps-item-align-center finish vertical number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-center finish-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon finish-bg-color-with-config"
+      >
+        <svg
+          class="arco-icon arco-icon-check-bold "
+          height="1em"
+          viewBox="0 -0.97 10.07 10.07"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            data-name="图层 2"
+          >
+            <path
+              d="M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z"
+              data-name="图层 1"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+        </svg>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-center"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-finish arco-steps-item-tail-align-center finish-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon finish-bg-color-with-config"
+          class="arco-steps-item-title finish-title-color-with-config"
         >
-          <svg
-            class="arco-icon arco-icon-check-bold "
-            height="1em"
-            viewBox="0 -0.97 10.07 10.07"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              data-name="图层 2"
-            >
-              <path
-                d="M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z"
-                data-name="图层 1"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </g>
-          </svg>
+          Start
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-center"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title finish-title-color-with-config"
-          >
-            Start
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-center process vertical number"
+    >
       <div
-        class="arco-steps-item arco-steps-item-align-center process vertical number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-center process-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon process-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-center"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-process arco-steps-item-tail-align-center process-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon process-bg-color-with-config"
+          class="arco-steps-item-title process-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            2
-          </span>
+          Step 2
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-center"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title process-title-color-with-config"
-          >
-            Step 2
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-center wait vertical number"
+    >
+      <div
+        class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
+      />
       <div
-        class="arco-steps-item arco-steps-item-align-center wait vertical number"
+        class="arco-steps-item-icon wait-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          3
+        </span>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-center"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon wait-bg-color-with-config"
+          class="arco-steps-item-title wait-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            3
-          </span>
+          Step 3
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-center"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title wait-title-color-with-config"
-          >
-            Step 3
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
+    </div>
+    <div
+      class="arco-steps-item arco-steps-item-align-center wait vertical number"
+    >
       <div
-        class="arco-steps-item arco-steps-item-align-center wait vertical number"
+        class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
+      />
+      <div
+        class="arco-steps-item-icon wait-bg-color-with-config"
+      >
+        <span
+          class="arco-steps-item-icon-num"
+        >
+          4
+        </span>
+      </div>
+      <div
+        class="arco-steps-item-content arco-steps-item-content-align-center"
       >
         <div
-          class="arco-steps-item-tail arco-steps-item-tail-status-wait arco-steps-item-tail-align-center wait-tail-color-with-config"
-        />
-        <div
-          class="arco-steps-item-icon wait-bg-color-with-config"
+          class="arco-steps-item-title wait-title-color-with-config"
         >
-          <span
-            class="arco-steps-item-icon-num"
-          >
-            4
-          </span>
+          Finish
         </div>
         <div
-          class="arco-steps-item-content arco-steps-item-content-align-center"
+          class="arco-steps-item-description"
         >
-          <div
-            class="arco-steps-item-title wait-title-color-with-config"
-          >
-            Finish
-          </div>
-          <div
-            class="arco-steps-item-description"
-          >
-            Details
-          </div>
+          Details
         </div>
       </div>
     </div>