Repository: Tencent/tdesign-mobile-vue
Pull request #641 (2023-04-26 03:58:00)

refactor(BackTop): new BackTop
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [x] 演示代码改进
- [x] 组件样式/交互改进
- [ ] CI/CD 改进
- [x] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- refactor(BackTop): new BackTop

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供


github-actions[bot]: <a href="https://preview-pr641-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4810712246) -->
<!-- AUTO_PREVIEW_HOOK -->
anlyyao: @nined9 需要rebase dev分支

Patch:
diff --git a/src/_common b/src/_common
index 4c0aca59..0025480d 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit 4c0aca59b5d1039e29046321cb16073f0d9e6ac7
+Subproject commit 0025480d2779bd6aadf5a11b255b3110c8fe71c1
diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md
index c9f50d31..795d7935 100644
--- a/src/back-top/back-top.md
+++ b/src/back-top/back-top.md
@@ -6,7 +6,7 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | Slot / Function | 'backtop' | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function / Boolean | true | 图标。TS 类型：`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
diff --git a/src/back-top/back-top.vue b/src/back-top/back-top.vue
index b3788f2c..d78878a3 100644
--- a/src/back-top/back-top.vue
+++ b/src/back-top/back-top.vue
@@ -1,13 +1,7 @@
 <template>
   <div :class="classes" @click="clickBackBtn">
     <t-node v-if="iconTNode" :content="iconTNode" />
-    <t-icon-back-top v-else />
-    <span
-      v-if="text"
-      :class="`${name}__text`"
-      :style="{ 'min-width': '12px', 'max-width': '24px', width: 'auto', display: 'inline-block' }"
-      >{{ text }}</span
-    >
+    <span v-if="text" :class="`${name}__text--${theme}`">{{ text }}</span>
   </div>
 </template>
 
@@ -24,7 +18,7 @@ const { prefix } = config;
 const name = `${prefix}-back-top`;
 export default defineComponent({
   name,
-  components: { TNode, TIconBackTop },
+  components: { TNode },
   props: BackTopProps,
   setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
@@ -35,24 +29,24 @@ export default defineComponent({
     const classes = computed(() => {
       return {
         [`${name}`]: true,
-        [`${prefix}-is-fixed`]: props.fixed,
+        [`${name}--fixed`]: props.fixed,
         [`${name}--${props.theme}`]: true,
       };
     });
 
     const internalInstance = getCurrentInstance();
+    const backTopIcon = h(TIconBackTop, { size: '22px' });
     const iconTNode = computed(() => {
       if (context.slots?.icon || typeof props.icon === 'function') {
         return renderTNode(internalInstance, 'icon');
       }
-      return false;
+      return props.icon ? backTopIcon : false;
     });
 
     const clickBackBtn = () => {
       window.document.documentElement.scrollTop += top.value;
       emitEvent('to-top');
     };
-
     return {
       name,
       classes,
diff --git a/src/back-top/demos/base.vue b/src/back-top/demos/base.vue
new file mode 100644
index 00000000..273f33d7
--- /dev/null
+++ b/src/back-top/demos/base.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="button-group">
+    <t-button
+      v-bind="{
+        block: true,
+        size: 'large',
+        theme: 'primary',
+        variant: 'outline',
+        content: '圆形返回顶部',
+      }"
+      @click="onClick('round', '顶部')"
+    />
+  </div>
+  <div :style="{ ...style }">
+    <t-back-top v-show="visible" :theme="theme" :text="text" :on-to-top="handleToTop" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits, h } from 'vue';
+import { CloseIcon } from 'tdesign-icons-vue-next';
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  style: {
+    type: Object,
+    default: () => {},
+  },
+});
+const emit = defineEmits(['close']);
+const theme = ref('round');
+const text = ref('顶部');
+
+const icon = () => h(CloseIcon);
+
+const onClick = (tem: string, txt: string) => {
+  text.value = txt;
+  theme.value = tem;
+  emit('close');
+  window.scrollTo(0, 1200);
+};
+function handleToTop() {
+  console.log('handleToTop');
+}
+</script>
+
+<style lang="less" scoped>
+.button-group {
+  padding: 8px 16px 16px;
+  .t-button {
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/src/back-top/demos/half-round.vue b/src/back-top/demos/half-round.vue
index 8ed98495..569134ea 100644
--- a/src/back-top/demos/half-round.vue
+++ b/src/back-top/demos/half-round.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="button-group">
-    <t-button block size="large" variant="outline" @click="onBtnClick1('half-round')">半圆白底</t-button>
-    <t-button block size="large" variant="outline" @click="onBtnClick1('half-round-dark')">半圆黑底</t-button>
+    <t-button
+      v-bind="{
+        block: true,
+        size: 'large',
+        theme: 'primary',
+        variant: 'outline',
+        content: '半圆形返回顶部',
+      }"
+      @click="onBtnClick1('half-round')"
+    />
   </div>
   <div :style="{ ...style }">
     <t-back-top v-show="visible" :theme="theme" text="返回顶部" />
diff --git a/src/back-top/demos/mobile.vue b/src/back-top/demos/mobile.vue
index d81f571d..33d4f52f 100644
--- a/src/back-top/demos/mobile.vue
+++ b/src/back-top/demos/mobile.vue
@@ -3,14 +3,14 @@
     <h1 class="title">BackTop 回到顶部</h1>
     <p class="summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p>
     <tdesign-demo-block title="01 类型" summary="圆型返回顶部">
-      <RoundDemo :visible="visible" :style="style" @close="handleClose" />
+      <BaseDemo :visible="visible" :style="style" @close="handleClose" />
     </tdesign-demo-block>
     <tdesign-demo-block summary="半圆型返回顶部">
       <HalfRoundDemo :visible="visible1" :style="style" @close="handleClose1" />
     </tdesign-demo-block>
     <tdesign-demo-block>
       <div class="group">
-        <t-skeleton v-for="i in 4" :key="i" :row-col="rowCols" class="item" />
+        <t-skeleton v-for="i in 6" :key="i" :row-col="rowCols" class="item" />
       </div>
     </tdesign-demo-block>
 
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import RoundDemo from './round.vue';
+import BaseDemo from './base.vue';
 import HalfRoundDemo from './half-round.vue';
 
 const visible = ref(false);
diff --git a/src/back-top/demos/round.vue b/src/back-top/demos/round.vue
deleted file mode 100644
index 1cffa4d6..00000000
--- a/src/back-top/demos/round.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="button-group">
-    <t-button block size="large" variant="outline" @click="onBtnClick('round', '顶部')">圆角白底</t-button>
-    <t-button block size="large" variant="outline" @click="onBtnClick('round-dark', '顶部')">圆角黑底</t-button>
-    <t-button block size="large" variant="outline" @click="onBtnClick('round', '')">圆白底纯图标</t-button>
-    <t-button block size="large" variant="outline" @click="onBtnClick('round-dark', '')">圆黑底纯图标</t-button>
-  </div>
-  <div :style="{ ...style }">
-    <t-back-top v-show="visible" :theme="theme" :text="text" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, defineProps, defineEmits } from 'vue';
-
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  style: {
-    type: Object,
-    default: () => {},
-  },
-});
-const emit = defineEmits(['close']);
-const theme = ref('round');
-const text = ref('顶部');
-
-const onBtnClick = (tem: string, txt: string) => {
-  text.value = txt;
-  theme.value = tem;
-  emit('close');
-  window.scrollTo(0, 1200);
-};
-</script>
-
-<style lang="less" scoped>
-.button-group {
-  padding: 8px 16px 16px;
-  .t-button {
-    margin-bottom: 10px;
-  }
-}
-</style>
diff --git a/src/back-top/props.ts b/src/back-top/props.ts
index 105e2769..8ab98882 100644
--- a/src/back-top/props.ts
+++ b/src/back-top/props.ts
@@ -15,8 +15,8 @@ export default {
   },
   /** 图标 */
   icon: {
-    type: Function as PropType<TdBackTopProps['icon']>,
-    default: 'backtop',
+    type: [Boolean, Function] as PropType<TdBackTopProps['icon']>,
+    default: true,
   },
   /** 定位滚动到指定对象 */
   target: {
diff --git a/src/back-top/style/index.js b/src/back-top/style/index.js
index 81872b59..7f80648b 100644
--- a/src/back-top/style/index.js
+++ b/src/back-top/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/back-top/_index.less';
+import '../../_common/style/mobile/components/back-top/v2/_index.less';
diff --git a/src/back-top/type.ts b/src/back-top/type.ts
index 75e809da..ddd41931 100644
--- a/src/back-top/type.ts
+++ b/src/back-top/type.ts
@@ -14,9 +14,9 @@ export interface TdBackTopProps {
   fixed?: boolean;
   /**
    * 图标
-   * @default 'backtop'
+   * @default true
    */
-  icon?: TNode;
+  icon?: boolean | TNode;
   /**
    * 定位滚动到指定对象
    */


Test patch:
diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index 27cece92..6da56210 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,18 +1,18 @@
 // Vitest Snapshot v1
 
-exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
+exports[`BackTop > BackTop baseVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
   
   <div
     class="button-group"
-    data-v-924378ec=""
+    data-v-33e4f6e7=""
   >
     <button
       aria-disabled="false"
-      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-      data-v-924378ec=""
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      data-v-33e4f6e7=""
       role="button"
       type="button"
     >
@@ -20,15 +20,56 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
       <span
         class="t-button__content"
       >
-        
-        半圆白底
-        
+        圆形返回顶部
       </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 16 16"
+        width="1em"
+      >
+        <path
+          d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </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--default t-button--rectangle t-button--block"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
       data-v-924378ec=""
       role="button"
       type="button"
@@ -37,9 +78,7 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
       <span
         class="t-button__content"
       >
-        
-        半圆黑底
-        
+        半圆形返回顶部
       </span>
       <!---->
     </button>
@@ -48,7 +87,7 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
     data-v-924378ec=""
   >
     <div
-      class="t-back-top t-is-fixed t-back-top--half-round"
+      class="t-back-top t-back-top--fixed t-back-top--half-round"
       data-v-924378ec=""
       style="display: none;"
     >
@@ -56,6 +95,7 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
         class="t-icon t-icon-backtop"
         fill="none"
         height="1em"
+        style="font-size: 22px;"
         viewBox="0 0 16 16"
         width="1em"
       >
@@ -66,8 +106,7 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
         />
       </svg>
       <span
-        class="t-back-top__text"
-        style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
+        class="t-back-top__text--half-round"
       >
         返回顶部
       </span>
@@ -120,29 +159,12 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
       
       <div
         class="button-group"
-        data-v-915cc230=""
+        data-v-33e4f6e7=""
       >
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          data-v-915cc230=""
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            圆角白底
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          data-v-915cc230=""
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          data-v-33e4f6e7=""
           role="button"
           type="button"
         >
@@ -150,59 +172,24 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           <span
             class="t-button__content"
           >
-            
-            圆角黑底
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          data-v-915cc230=""
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            圆白底纯图标
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          data-v-915cc230=""
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            圆黑底纯图标
-            
+            圆形返回顶部
           </span>
           <!---->
         </button>
       </div>
       <div
-        data-v-915cc230=""
+        data-v-33e4f6e7=""
       >
         <div
-          class="t-back-top t-is-fixed t-back-top--round"
-          data-v-915cc230=""
+          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 16 16"
             width="1em"
           >
@@ -213,8 +200,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             />
           </svg>
           <span
-            class="t-back-top__text"
-            style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
+            class="t-back-top__text--round"
           >
             顶部
           </span>
@@ -249,7 +235,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-924378ec=""
           role="button"
           type="button"
@@ -258,26 +244,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           <span
             class="t-button__content"
           >
-            
-            半圆白底
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          data-v-924378ec=""
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            半圆黑底
-            
+            半圆形返回顶部
           </span>
           <!---->
         </button>
@@ -286,7 +253,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         data-v-924378ec=""
       >
         <div
-          class="t-back-top t-is-fixed t-back-top--half-round"
+          class="t-back-top t-back-top--fixed t-back-top--half-round"
           data-v-924378ec=""
           style="display: none;"
         >
@@ -294,6 +261,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             class="t-icon t-icon-backtop"
             fill="none"
             height="1em"
+            style="font-size: 22px;"
             viewBox="0 0 16 16"
             width="1em"
           >
@@ -304,8 +272,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             />
           </svg>
           <span
-            class="t-back-top__text"
-            style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
+            class="t-back-top__text--half-round"
           >
             返回顶部
           </span>
@@ -473,6 +440,78 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           </div>
           
         </div>
+        <div
+          class="t-skeleton item"
+          data-v-806aae90=""
+        >
+          
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
+            
+          </div>
+          
+        </div>
+        <div
+          class="t-skeleton item"
+          data-v-806aae90=""
+        >
+          
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
+            
+          </div>
+          
+        </div>
         
       </div>
       
@@ -484,114 +523,3 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
   />
 </div>
 `;
-
-exports[`BackTop > BackTop roundVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="button-group"
-    data-v-915cc230=""
-  >
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-      data-v-915cc230=""
-      role="button"
-      type="button"
-    >
-      <!---->
-      <span
-        class="t-button__content"
-      >
-        
-        圆角白底
-        
-      </span>
-      <!---->
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-      data-v-915cc230=""
-      role="button"
-      type="button"
-    >
-      <!---->
-      <span
-        class="t-button__content"
-      >
-        
-        圆角黑底
-        
-      </span>
-      <!---->
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-      data-v-915cc230=""
-      role="button"
-      type="button"
-    >
-      <!---->
-      <span
-        class="t-button__content"
-      >
-        
-        圆白底纯图标
-        
-      </span>
-      <!---->
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-      data-v-915cc230=""
-      role="button"
-      type="button"
-    >
-      <!---->
-      <span
-        class="t-button__content"
-      >
-        
-        圆黑底纯图标
-        
-      </span>
-      <!---->
-    </button>
-  </div>
-  <div
-    data-v-915cc230=""
-  >
-    <div
-      class="t-back-top t-is-fixed t-back-top--round"
-      data-v-915cc230=""
-      style="display: none;"
-    >
-      <svg
-        class="t-icon t-icon-backtop"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-back-top__text"
-        style="min-width: 12px; max-width: 24px; width: auto; display: inline-block;"
-      >
-        顶部
-      </span>
-    </div>
-  </div>
-  
-</div>
-`;
diff --git a/src/back-top/__test__/demo.test.jsx b/src/back-top/__test__/demo.test.jsx
index 8feaaede..0ced46e4 100644
--- a/src/back-top/__test__/demo.test.jsx
+++ b/src/back-top/__test__/demo.test.jsx
@@ -3,14 +3,14 @@
  */
 
 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';
-import roundVue from '@/back-top/demos/round.vue';
 
 const mapper = {
+  baseVue,
   halfRoundVue,
   mobileVue,
-  roundVue,
 };
 
 describe('BackTop', () => {
diff --git a/src/back-top/__test__/index.test.jsx b/src/back-top/__test__/index.test.jsx
index c1d0357e..6b01bb88 100644
--- a/src/back-top/__test__/index.test.jsx
+++ b/src/back-top/__test__/index.test.jsx
@@ -7,11 +7,11 @@ describe('BackTop', () => {
   describe('props', () => {
     it(': fixed', async () => {
       const wrapper = mount(BackTop);
-      expect(wrapper.find('.t-is-fixed').exists()).toEqual(true);
+      expect(wrapper.find('.t-back-top--fixed').exists()).toEqual(true);
       await wrapper.setProps({
         fixed: false,
       });
-      expect(wrapper.find('.t-is-fixed').exists()).toEqual(false);
+      expect(wrapper.find('.t-back-top--fixed').exists()).toEqual(false);
     });
 
     it(': onToTop', () => {
@@ -25,11 +25,11 @@ describe('BackTop', () => {
 
     it(': text', async () => {
       const wrapper = mount(BackTop);
-      expect(wrapper.find('.t-back-top__text').exists()).toEqual(false);
+      expect(wrapper.find('.t-back-top__text--round').exists()).toEqual(false);
       await wrapper.setProps({
         text: '返回',
       });
-      expect(wrapper.find('.t-back-top__text').text()).toEqual('返回');
+      expect(wrapper.find('.t-back-top__text--round').text()).toEqual('返回');
     });
 
     it(': theme', async () => {