From b3deed6cacac65280c71ad17ebbff6f68fa58907 Mon Sep 17 00:00:00 2001
From: liweijie0812 <674416404@qq.com>
Date: Fri, 19 Apr 2024 11:14:16 +0800
Subject: [PATCH] refactor(count-down): sfc to tsx (#1317)

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 64 +++++++++----------
 src/count-down/__test__/index.test.jsx        |  2 +-
 src/count-down/count-down.en-US.md            | 60 +++++++++++++----
 src/count-down/count-down.md                  | 58 +++++++++++++----
 src/count-down/count-down.tsx                 | 53 +++++++++++++++
 src/count-down/count-down.vue                 | 42 ------------
 src/count-down/index.ts                       |  2 +-
 src/count-down/type.ts                        |  2 +-
 8 files changed, 183 insertions(+), 100 deletions(-)
 create mode 100644 src/count-down/count-down.tsx
 delete mode 100644 src/count-down/count-down.vue

diff --git a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
index 2269084d3..f69413b5e 100644
--- a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
@@ -50,7 +50,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -113,7 +113,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -164,7 +164,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -215,7 +215,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -416,7 +416,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -479,7 +479,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -530,7 +530,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -581,7 +581,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -769,7 +769,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -811,7 +811,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -853,7 +853,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -916,7 +916,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -970,7 +970,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1024,7 +1024,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1075,7 +1075,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1117,7 +1117,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1159,7 +1159,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1210,7 +1210,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1252,7 +1252,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1294,7 +1294,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1504,7 +1504,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1546,7 +1546,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1588,7 +1588,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1651,7 +1651,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1705,7 +1705,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1759,7 +1759,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1810,7 +1810,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1852,7 +1852,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1894,7 +1894,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1945,7 +1945,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1987,7 +1987,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -2029,7 +2029,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
diff --git a/src/count-down/__test__/index.test.jsx b/src/count-down/__test__/index.test.jsx
index 8f3b04c26..fd1590238 100644
--- a/src/count-down/__test__/index.test.jsx
+++ b/src/count-down/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import CountDown from '../count-down.vue';
+import CountDown from '../count-down';
 
 const sleep = (duration) =>
   new Promise((resolve) =>
diff --git a/src/count-down/count-down.en-US.md b/src/count-down/count-down.en-US.md
index e0c122e01..b11f67602 100644
--- a/src/count-down/count-down.en-US.md
+++ b/src/count-down/count-down.en-US.md
@@ -1,7 +1,43 @@
-:: BASE_DOC ::
+:: BASE_DOC ::
+
+## API
+
+### CountDown Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+autoStart | Boolean | true | \- | N
+content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | HH:mm:ss | \- | N
+millisecond | Boolean | false | \- | N
+size | String | 'small' | options：small/medium/large | N
+splitWithUnit | Boolean | false | \- | N
+theme | String | 'default' | options：default/round/square | N
+time | Number | - | required | Y
+onChange | Function |  | Typescript：`(time: TimeData) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
+onFinish | Function |  | Typescript：`() => void`<br/> | N
+
+### CountDown Events
+
+name | params | description
+-- | -- | --
+change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
 
 ## API
 
+
 ### CountDown Props
 
 name | type | default | description | required
@@ -10,9 +46,9 @@ autoStart | Boolean | true | \- | N
 content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 format | String | HH:mm:ss | \- | N
 millisecond | Boolean | false | \- | N
-size | String | 'small' | options：small/medium/large | N
+size | String | 'medium' | options: small/medium/large | N
 splitWithUnit | Boolean | false | \- | N
-theme | String | 'default' | options：default/round/square | N
+theme | String | 'default' | options: default/round/square | N
 time | Number | - | required | Y
 onChange | Function |  | Typescript：`(time: TimeData) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
 onFinish | Function |  | Typescript：`() => void`<br/> | N
@@ -24,13 +60,13 @@ name | params | description
 change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | \-
 
+### CSS 变量
 
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-countdown-bg-color | @error-color-6 | - 
---td-countdown-default-color | @font-gray-1 | - 
---td-countdown-round-border-radius | @radius-circle | - 
---td-countdown-round-color | @font-white-1 | - 
---td-countdown-square-border-radius | @radius-small | - 
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | -
\ No newline at end of file
diff --git a/src/count-down/count-down.md b/src/count-down/count-down.md
index a87b2a3fa..67be0c5c0 100644
--- a/src/count-down/count-down.md
+++ b/src/count-down/count-down.md
@@ -1,9 +1,45 @@
-:: BASE_DOC ::
+:: BASE_DOC ::
+
+## API
+### CountDown Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+autoStart | Boolean | true | 是否自动开始倒计时 | N
+content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
+millisecond | Boolean | false | 是否开启毫秒级渲染 | N
+size | String | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
+splitWithUnit | Boolean | false | 使用时间单位分割 | N
+theme | String | 'default' | 倒计时风格。可选项：default/round/square | N
+time | Number | - | 必需。倒计时时长，单位毫秒 | Y
+onChange | Function |  | TS 类型：`(time: TimeData) => void`<br/>时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
+onFinish | Function |  | TS 类型：`() => void`<br/>倒计时结束时触发 | N
+
+### CountDown Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | 倒计时结束时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
 
 ## API
+
+
 ### CountDown Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 autoStart | Boolean | true | 是否自动开始倒计时 | N
 content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -23,13 +59,13 @@ onFinish | Function |  | TS 类型：`() => void`<br/>倒计时结束时触发 |
 change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | 倒计时结束时触发
 
-
 ### CSS 变量
-组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-countdown-bg-color | @error-color-6 | - 
---td-countdown-default-color | @font-gray-1 | - 
---td-countdown-round-border-radius | @radius-circle | - 
---td-countdown-round-color | @font-white-1 | - 
---td-countdown-square-border-radius | @radius-small | - 
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | -
\ No newline at end of file
diff --git a/src/count-down/count-down.tsx b/src/count-down/count-down.tsx
new file mode 100644
index 000000000..14b719c78
--- /dev/null
+++ b/src/count-down/count-down.tsx
@@ -0,0 +1,53 @@
+import { computed, defineComponent } from 'vue';
+import config from '../config';
+import CountDownProps from './props';
+import { useCountDown } from '../shared/useCountDown';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-count-down`;
+
+export default defineComponent({
+  name,
+  props: CountDownProps,
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+    const countDownClass = usePrefixClass('count-down');
+    const countDownClasses = computed(() => [
+      countDownClass.value,
+      `${countDownClass.value}--${props.theme}`,
+      `${countDownClass.value}--${props.size}`,
+    ]);
+
+    const { showTimes } = useCountDown(props);
+    return () => {
+      const renderContent = () => {
+        const content = renderTNodeJSX('content');
+
+        if (props.content !== 'default' && content) {
+          return content;
+        }
+
+        return showTimes.map((item) => {
+          return (
+            <>
+              <span class={`${countDownClass.value}__item`}>{item.value}</span>
+              {item.mark && (
+                <span
+                  class={[
+                    `${countDownClass.value}__split`,
+                    `${countDownClass.value}__split--${props.splitWithUnit ? 'text' : 'dot'}`,
+                  ]}
+                >
+                  {item.mark}
+                </span>
+              )}
+            </>
+          );
+        });
+      };
+      return <div class={countDownClasses.value}>{renderContent()}</div>;
+    };
+  },
+});
diff --git a/src/count-down/count-down.vue b/src/count-down/count-down.vue
deleted file mode 100644
index 28449ae48..000000000
--- a/src/count-down/count-down.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div :class="[`${name}`, `${name}--${theme}`, `${name}--${size}`]">
-    <t-node v-if="content !== 'default' && countDownContent" :content="countDownContent"></t-node>
-    <template v-else>
-      <template v-for="item in showTimes" :key="item.mark">
-        <span :class="`${name}__item`">{{ item.value }}</span>
-        <span v-if="item.mark" :class="[`${name}__split`, `${name}__split--${splitWithUnit ? 'text' : 'dot'}`]">{{
-          item.mark
-        }}</span>
-      </template>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, getCurrentInstance } from 'vue';
-import config from '../config';
-import props from './props';
-import { useCountDown } from '../shared/useCountDown';
-import { renderTNode, TNode } from '../shared';
-
-const { prefix } = config;
-const name = `${prefix}-count-down`;
-
-export default defineComponent({
-  name,
-  components: { TNode },
-  props,
-  setup(props) {
-    const { time, showTimes } = useCountDown(props);
-    const internalInstance = getCurrentInstance();
-    const countDownContent = computed(() => renderTNode(internalInstance, 'content'));
-
-    return {
-      name,
-      time,
-      showTimes,
-      countDownContent,
-    };
-  },
-});
-</script>
diff --git a/src/count-down/index.ts b/src/count-down/index.ts
index 054576815..6552eca0f 100644
--- a/src/count-down/index.ts
+++ b/src/count-down/index.ts
@@ -1,4 +1,4 @@
-import _CountDown from './count-down.vue';
+import _CountDown from './count-down';
 import { withInstall, WithInstallType } from '../shared';
 import { TdCountDownProps } from './type';
 
diff --git a/src/count-down/type.ts b/src/count-down/type.ts
index c82bac491..e15ba1d20 100644
--- a/src/count-down/type.ts
+++ b/src/count-down/type.ts
@@ -29,7 +29,7 @@ export interface TdCountDownProps {
   millisecond?: boolean;
   /**
    * 倒计时尺寸
-   * @default 'small'
+   * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
   /**