From 2131ee94bc34a5145f2ae8244985e4bfe28645d3 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Tue, 22 Oct 2024 10:11:48 +0800
Subject: [PATCH 1/2] feat(count-down): use raf not setInterval

---
 .../hooks/useCountDown/useCountDown.ts        | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/count-down/hooks/useCountDown/useCountDown.ts b/src/count-down/hooks/useCountDown/useCountDown.ts
index 18548777..78206b5c 100644
--- a/src/count-down/hooks/useCountDown/useCountDown.ts
+++ b/src/count-down/hooks/useCountDown/useCountDown.ts
@@ -26,20 +26,22 @@ export const useCountDown = (params: UseCountdownParams) => {
     timeText: '',
     status: EnumCountDownStatus.inActive,
   });
-  const interval = millisecond ? 30 : 1000;
   const ctxRef = useRef({ timerId: 0, remainTime: time });
 
   const clearCountDown = () => {
     const currentTimerId = ctxRef.current.timerId;
     if (currentTimerId) {
-      currentTimerId && clearInterval(currentTimerId);
+      window.cancelAnimationFrame(currentTimerId);
       ctxRef.current.timerId = 0;
       setCountDownData((state) => ({ ...state, status: EnumCountDownStatus.inActive }));
     }
   };
+  let previousFrameTimestamp = 0;
 
-  const tick = (reset = false) => {
-    let nextRemainTime = reset ? time : ctxRef.current.remainTime - interval;
+  const tick = (timestamp, reset = false) => {
+    const delta = timestamp - (previousFrameTimestamp || timestamp);
+
+    let nextRemainTime = reset ? time : ctxRef.current.remainTime - delta;
     ctxRef.current.remainTime = nextRemainTime;
 
     let nextStatus = EnumCountDownStatus.active;
@@ -48,31 +50,35 @@ export const useCountDown = (params: UseCountdownParams) => {
       clearCountDown();
       nextStatus = EnumCountDownStatus.finished;
       onFinish?.();
+      window.cancelAnimationFrame(ctxRef.current.timerId);
+    } else {
+      (ctxRef.current as any).timerId = window.requestAnimationFrame(tick);
     }
 
     const countDownData = {
       ...transformTime(nextRemainTime, format),
       status: nextStatus,
     };
+
     onChange?.(countDownData.timeData);
     setCountDownData(countDownData);
+
+    previousFrameTimestamp = timestamp;
   };
 
-  const startCountDown = () => {
+  const startCountDown = (reset = false) => {
     clearCountDown();
-    (ctxRef.current as any).timerId = setInterval(() => tick(), interval);
+    (ctxRef.current as any).timerId = window.requestAnimationFrame((timestamp) => tick(timestamp, reset));
   };
 
   useEffect(() => {
-    tick(true);
-    startCountDown();
+    startCountDown(true);
     return clearCountDown;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [time, millisecond, interval, format]);
+  }, [time, millisecond, format]);
 
   const start = () => {
     if (status === EnumCountDownStatus.active) return;
-    tick();
     startCountDown();
   };
 
@@ -83,9 +89,9 @@ export const useCountDown = (params: UseCountdownParams) => {
 
   const reset = () => {
     clearCountDown();
-    tick(true);
+
     if (autoStart) {
-      startCountDown();
+      startCountDown(true);
     } else {
       setCountDownData((state) => ({ ...state, status: EnumCountDownStatus.inActive }));
     }

From e80fc701fd7dac797e324b12878c7579e5e05dc9 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Tue, 22 Oct 2024 10:17:30 +0800
Subject: [PATCH 2/2] chore: update snap-shot

---
 test/snap/__snapshots__/csr.test.jsx.snap | 1406 +--------------------
 1 file changed, 42 insertions(+), 1364 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 625b72d4..a4cafff8 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -7988,38 +7988,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -8031,38 +8000,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -8074,38 +8012,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--square t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -8117,38 +8024,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -8160,38 +8036,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -8203,38 +8048,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/base.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--medium custom"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -8283,38 +8097,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8326,38 +8109,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8369,38 +8121,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--square t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8412,38 +8133,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8455,38 +8145,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8498,38 +8157,7 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--medium custom"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
       </div>
     </div>
@@ -8563,106 +8191,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--small"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--large"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8674,116 +8209,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--small"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                000
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--default t-count-down--large"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8795,106 +8227,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--square t-count-down--small"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--square t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--square t-count-down--large"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -8906,106 +8245,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--small"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--large"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
         <div
           class="demo-count-down"
@@ -9017,106 +8263,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/index.tsx 1`] = `
           </text>
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--small"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--medium"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
           <div
             class="demo-count-down-content"
-          >
-            <div
-              class="t-count-down t-count-down--round t-count-down--large"
-            >
-              <span
-                class="t-count-down__item"
-              >
-                01
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                36
-              </span>
-              <span
-                class="t-count-down__split t-count-down__split--dot"
-              >
-                :
-              </span>
-              <span
-                class="t-count-down__item"
-              >
-                00
-              </span>
-              
-            </div>
-          </div>
+          />
         </div>
       </div>
     </div>
@@ -9136,106 +8289,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/size.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--small"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--large"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -9247,116 +8307,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/size.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--small"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          000
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--default t-count-down--large"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -9368,106 +8325,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/size.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--square t-count-down--small"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--square t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--square t-count-down--large"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -9479,106 +8343,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/size.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--small"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--large"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
   <div
     class="demo-count-down"
@@ -9590,106 +8361,13 @@ exports[`csr snapshot test > csr test src/count-down/_example/size.tsx 1`] = `
     </text>
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--small"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--medium"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
     <div
       class="demo-count-down-content"
-    >
-      <div
-        class="t-count-down t-count-down--round t-count-down--large"
-      >
-        <span
-          class="t-count-down__item"
-        >
-          01
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          36
-        </span>
-        <span
-          class="t-count-down__split t-count-down__split--dot"
-        >
-          :
-        </span>
-        <span
-          class="t-count-down__item"
-        >
-          00
-        </span>
-        
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;