refactor(back-top): sfc to tsx

src/back-top/__test__/__snapshots__/demo.test.jsx.snap

@@ -24,52 +24,10 @@ exports[`BackTop > BackTop baseVue demo works fine 1`] = `
       </span>
       <!---->
     </button>
-  </div>
-  <div
-    data-v-33e4f6e7=""
-  >
-    <div
-      class="t-back-top t-back-top--fixed t-back-top--round"
-      data-v-33e4f6e7=""
-      style="display: none;"
-    >
-      <svg
-        class="t-icon t-icon-backtop"
-        fill="none"
-        height="1em"
-        style="font-size: 22px;"
-        viewBox="0 0 24 24"
-        width="1em"
-      >
-        <path
-          d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
-          fill="currentColor"
-        />
-      </svg>
-      <span
-        class="t-back-top__text--round"
-      >
-        顶部
-      </span>
-    </div>
-  </div>
-
-</div>
-`;
-
-exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-
-  <div
-    class="button-group"
-    data-v-924378ec=""
-  >
     <button
       aria-disabled="false"
       class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      data-v-924378ec=""
+      data-v-33e4f6e7=""
       role="button"
       type="button"
     >
@@ -83,11 +41,11 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
     </button>
   </div>
   <div
-    data-v-924378ec=""
+    data-v-33e4f6e7=""
   >
     <div
-      class="t-back-top t-back-top--fixed t-back-top--half-round"
-      data-v-924378ec=""
+      class="t-back-top t-back-top--fixed t-back-top--round"
+      data-v-33e4f6e7=""
       style="display: none;"
     >
       <svg
@@ -104,9 +62,9 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
         />
       </svg>
       <span
-        class="t-back-top__text--half-round"
+        class="t-back-top__text--round"
       >
-        返回顶部
+        顶部
       </span>
     </div>
   </div>
@@ -141,13 +99,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        形状
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        圆型返回顶部
-      </p>
+      <!--v-if-->
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
@@ -173,66 +127,10 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
-      </div>
-      <div
-        data-v-33e4f6e7=""
-      >
-        <div
-          class="t-back-top t-back-top--fixed t-back-top--round"
-          data-v-33e4f6e7=""
-          style="display: none;"
-        >
-          <svg
-            class="t-icon t-icon-backtop"
-            fill="none"
-            height="1em"
-            style="font-size: 22px;"
-            viewBox="0 0 24 24"
-            width="1em"
-          >
-            <path
-              d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
-              fill="currentColor"
-            />
-          </svg>
-          <span
-            class="t-back-top__text--round"
-          >
-            顶部
-          </span>
-        </div>
-      </div>
-
-
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-806aae90=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        半圆型返回顶部
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-
-
-      <div
-        class="button-group"
-        data-v-924378ec=""
-      >
         <button
           aria-disabled="false"
           class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          data-v-924378ec=""
+          data-v-33e4f6e7=""
           role="button"
           type="button"
         >
@@ -246,11 +144,11 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         </button>
       </div>
       <div
-        data-v-924378ec=""
+        data-v-33e4f6e7=""
       >
         <div
-          class="t-back-top t-back-top--fixed t-back-top--half-round"
-          data-v-924378ec=""
+          class="t-back-top t-back-top--fixed t-back-top--round"
+          data-v-33e4f6e7=""
           style="display: none;"
         >
           <svg
@@ -267,9 +165,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             />
           </svg>
           <span
-            class="t-back-top__text--half-round"
+            class="t-back-top__text--round"
           >
-            返回顶部
+            顶部
           </span>
         </div>
       </div>
@@ -308,17 +206,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"
@@ -352,17 +239,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"
@@ -396,17 +272,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"
@@ -440,17 +305,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"
@@ -484,17 +338,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"
@@ -528,17 +371,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
               <!---->
             </div>
 
-          </div>
-          <div
-            class="t-skeleton__row"
-          >
-
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            >
-              <!---->
-            </div>
-
           </div>
           <div
             class="t-skeleton__row"

src/back-top/__test__/demo.test.jsx

@@ -4,12 +4,10 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/back-top/demos/base.vue';
-import halfRoundVue from '@/back-top/demos/half-round.vue';
 import mobileVue from '@/back-top/demos/mobile.vue';
 
 const mapper = {
   baseVue,
-  halfRoundVue,
   mobileVue,
 };
 

src/back-top/__test__/index.test.jsx

@@ -2,7 +2,7 @@ import { ref } from 'vue';
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { BacktopIcon as TIconBackTop, AppIcon as TIconApp } from 'tdesign-icons-vue-next';
-import BackTop from '../back-top.vue';
+import BackTop from '../back-top';
 
 describe('BackTop', () => {
   describe('props', () => {

src/back-top/back-top.en-US.md

@@ -1,15 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### BackTop Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+container | Function | - | Typescript：`() => HTMLElement` | N
 fixed | Boolean | true | \- | N
-icon | Slot / Function / Boolean | true | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 target | Function | - | Typescript：`() => HTMLElement` | N
 text | String | '' | \- | N
-theme | String | round | options：round/half-round/round-dark/half-round-dark | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | \- | N
 onToTop | Function |  | Typescript：`() => void`<br/> | N
 
 ### BackTop Events
@@ -18,8 +21,8 @@ name | params | description
 -- | -- | --
 to-top | \- | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -30,4 +33,4 @@ Name | Default Value | Description
 --td-back-top-round-border-radius | @radius-circle | - 
 --td-back-top-round-color | @font-gray-1 | - 
 --td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | - 
+--td-back-top-round-dark-color | @font-white-1 | -

src/back-top/back-top.md

@@ -1,15 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### BackTop Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+container | Function | - | 滚动的容器。TS 类型：`() => HTMLElement` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | Slot / Function / Boolean | true | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Boolean / Slot / Function | true | 图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 target | Function | - | 定位滚动到指定对象。TS 类型：`() => HTMLElement` | N
 text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | 滚动高度达到此参数值才出现 | N
 onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
 
 ### BackTop Events
@@ -18,8 +21,8 @@ onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
 -- | -- | --
 to-top | \- | 点击触发
 
+### CSS Variables
 
-### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -30,4 +33,4 @@ to-top | \- | 点击触发
 --td-back-top-round-border-radius | @radius-circle | - 
 --td-back-top-round-color | @font-gray-1 | - 
 --td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | - 
+--td-back-top-round-dark-color | @font-white-1 | -