style(BackTop): using css token

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

@@ -9,7 +9,7 @@ name | type | default | description | required
 custom-style `v0.25.0` | String | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
 fixed | Boolean | true | \- | N
-icon | String / Slot | 'backtop' | \- | N
+icon | String / Boolean / Object / Slot | - | \- | N
 text | String | '' | \- | N
 theme | String | round | options：round/half-round/round-dark/half-round-dark | N
 

src/back-top/README.md

@@ -32,7 +32,7 @@ isComponent: true
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | String / Slot | 'backtop' | 图标 | N
+icon | String / Boolean / Object / Slot | - | 图标。值为 `'slot'` 表示使用插槽。不传表示使用默认图标 `'backtop'` | N
 text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
 

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

@@ -9,3 +9,13 @@ exports[`BackTop BackTop base demo works fine 1`] = `
   />
 </base>
 `;
+
+exports[`BackTop BackTop half-round demo works fine 1`] = `
+<half-round>
+  <t-back-top
+    text="返回顶部"
+    theme="half-round-dark"
+    bind:to-top="onToTop"
+  />
+</half-round>
+`;

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

@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['base'];
+const mapper = ['base', 'half-round'];
 
 describe('BackTop', () => {
   mapper.forEach((demoName) => {

src/back-top/_example/back-top.json

@@ -3,6 +3,7 @@
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
     "t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
-    "base": "./base"
+    "base": "./base",
+    "half-round": "./half-round"
   }
 }

src/back-top/_example/back-top.less

@@ -1,18 +1,14 @@
 page {
   background: #fff;
 
-  .skeleton-text {
-    border-radius: 16rpx;
-  }
-
   .skeleton-item {
-    padding-bottom: 24rpx;
+    padding-bottom: 48rpx;
   }
 
   .container-flex {
     display: flex;
     justify-content: space-between;
-    margin-top: 32rpx;
+    margin-top: 48rpx;
     flex-wrap: wrap;
   }
 }

src/back-top/_example/back-top.ts

@@ -1,15 +1,9 @@
 Page({
   data: {
+    round: false,
+    halfRound: false,
     showBackTop: false,
-    rowCols: [
-      { width: '332rpx', height: '342rpx' },
-      { width: '332rpx', height: '32rpx' },
-      { width: '214rpx', height: '32rpx' },
-      [
-        { width: '186rpx', height: '32rpx' },
-        { width: '64rpx', height: '32rpx', marginLeft: '82rpx' },
-      ],
-    ],
+    rowCol: [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }],
   },
 
   windowHeight: null,
@@ -24,7 +18,22 @@ Page({
     }
   },
 
-  onBtnClick() {
+  onBtnClick(e: any) {
+    const source = e.currentTarget.dataset.source as string;
+    if (source === 'round') {
+      this.setData({
+        round: true,
+        halfRound: false,
+      });
+    }
+
+    if (source === 'half-round') {
+      this.setData({
+        halfRound: true,
+        round: false,
+      });
+    }
+
     wx.pageScrollTo({ duration: 300, scrollTop: 1000 });
   },
 });

src/back-top/_example/back-top.wxml

@@ -2,19 +2,29 @@
   <view class="demo-title">BackTop 返回顶部</view>
   <view class="demo-desc"> 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。</view>
 
-  <t-demo title="01 类型" desc="基础返回顶部" padding>
-    <t-button size="large" block bindtap="onBtnClick"> 圆白底 </t-button>
+  <t-demo title="组件类型" desc="圆形返回顶部" padding>
+    <t-button theme="primary" size="large" block variant="outline" data-source="round" bindtap="onBtnClick">
+      圆形返回顶部
+    </t-button>
+  </t-demo>
+  <t-demo desc="半圆形返回顶部" padding>
+    <t-button theme="primary" size="large" block variant="outline" data-source="half-round" bindtap="onBtnClick">
+      半圆形返回顶部
+    </t-button>
+  </t-demo>
+  <t-demo padding>
     <view class="container-flex">
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
-      <t-skeleton rowCol="{{rowCols}}" class="skeleton-item" t-class-col="skeleton-text" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
+      <t-skeleton rowCol="{{rowCol}}" class="skeleton-item" loading></t-skeleton>
     </view>
-
-    <base wx:if="{{showBackTop}}" />
   </t-demo>
+
+  <base wx:if="{{round && showBackTop}}" />
+  <half-round wx:if="{{halfRound && showBackTop}}" />
 </view>

src/back-top/_example/half-round/index.js

@@ -0,0 +1,11 @@
+Component({
+  data: {
+    backTopTheme: 'half-round-dark',
+    backTopText: '返回顶部',
+  },
+  methods: {
+    onToTop(e) {
+      console.log('backToTop', e);
+    },
+  },
+});

src/back-top/_example/half-round/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-back-top": "tdesign-miniprogram/back-top/back-top"
+  }
+}

src/back-top/_example/half-round/index.wxml

@@ -0,0 +1 @@
+<t-back-top theme="{{backTopTheme}}" text="{{backTopText}}" bind:to-top="onToTop"></t-back-top>

src/back-top/back-top.less

@@ -1,10 +1,25 @@
-// @import (css) '../common/index.wxss';
 @import '../common/style/index.less';
 
-@backtop: ~"@{prefix}-back-top";
+@backtop: ~'@{prefix}-back-top';
 @back-top-text-font-size: @font-size;
-@back-top-icon-font-size: 32rpx;
-@back-top-default-color: #666;
+@back-top-text-line-height: 24rpx;
+@back-top-icon-font-size: 44rpx;
+@back-top-round-width: 96rpx;
+@back-top-half-round-width: 120rpx;
+@back-top-half-round-height: 80rpx;
+@back-top-fixed-right: @spacer;
+@back-top-fixed-bottom: @spacer-2;
+
+@back-top-round-color: var(--td-back-top-round-color, @font-gray-1); // 'round'主题内容颜色
+@back-top-round-bg-color: var(--td-back-top-round-bg-color, @white-color-1); // 'round'主题背景颜色
+@back-top-round-border-color: var(--td-back-top-round-border-color, @gray-color-4); // 'round'主题边框颜色
+@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); // 'round'主题圆角大小
+@back-top-round-dark-color: var(--td-back-top-round-dark-color, @font-white-1); // 'round-dark'主题内容颜色
+@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-14); // 'round-dark'主题背景颜色
+@back-top-half-round-border-radius: var(
+  --td-back-top-half-round-border-radius,
+  @radius-round
+); // 'round-dark'主题圆角大小
 
 .@{backtop} {
   display: flex;
@@ -14,90 +29,61 @@
   background-color: transparent;
   overflow: hidden;
   box-sizing: border-box;
-  transition: height .2s;
+  transition: height 0.2s;
   height: auto;
 
-  &.@{prefix}-is-fixed {
+  &--fixed {
     position: fixed;
-    right: 32rpx;
-    bottom: 133rpx;
+    right: @back-top-fixed-right;
+    bottom: @back-top-fixed-bottom;
   }
 
-  &.@{prefix}-is-round,
-  &.@{prefix}-is-round-dark {
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 50%;
-
-    .@{backtop}__icon {
-      margin: 0;
-      // border: none;
-      border-radius: 0;
-      background-color: transparent;
-    }
-
-    .@{backtop}__text {
-      padding: 0;
-      margin-top: 0;
-    }
+  &--round,
+  &--round-dark {
+    width: @back-top-round-width;
+    height: @back-top-round-width;
+    border-radius: @back-top-round-border-radius;
   }
 
-  &.@{prefix}-is-round,
-  &.@{prefix}-is-half-round {
-    background-color: rgb(255, 255, 255);
-    color: #333;
-    border: 1rpx solid;
-    border-color: #ddd;
-
-    .@{backtop}__icon,
-    .@{backtop}__text {
-      color: #333;
-    }
+  &--round,
+  &--half-round {
+    color: @back-top-round-color;
+    border: 1rpx solid @back-top-round-border-color;
+    background-color: @back-top-round-bg-color;
   }
 
-  &.@{prefix}-is-round-dark,
-  &.@{prefix}-is-half-round-dark {
-    background-color: #000;
-    color: #fff;
-
-    .@{backtop}__icon,
-    .@{backtop}__text {
-      color: #fff;
-    }
+  &--round-dark,
+  &--half-round-dark {
+    color: @back-top-round-dark-color;
+    background-color: @back-top-round-dark-bg-color;
   }
 
-  &.@{prefix}-is-half-round,
-  &.@{prefix}-is-half-round-dark {
-    width: 120rpx;
-    height: 80rpx;
-    border-radius: 120rpx 0 0 120rpx;
+  &--half-round,
+  &--half-round-dark {
+    width: @back-top-half-round-width;
+    height: @back-top-half-round-height;
+    border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius;
     flex-direction: row;
     right: 0;
 
-    .@{backtop}__icon {
-      margin: 0;
-      border-radius: 0;
-      background-color: transparent;
+    > .@{backtop}__text {
+      width: 2em;
     }
 
-    .@{backtop}__text {
-      padding: 0;
-      margin-left: 8rpx;
-      width: 2em;
+    > .@{backtop}__icon:not(:empty) + .@{backtop}__text {
+      margin-left: (@spacer / 2);
     }
   }
 
   &__text {
     font-size: @back-top-text-font-size;
-    color: @back-top-default-color;
-    line-height: 24rpx;
+    line-height: @back-top-text-line-height;
   }
 
   &__icon {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: @back-top-default-color;
     font-size: @back-top-icon-font-size;
   }
 }

src/back-top/back-top.ts

@@ -7,29 +7,56 @@ const name = `${prefix}-back-top`;
 
 @wxComponent()
 export default class BackTop extends SuperComponent {
-  /**
-   * Component properties
-   */
   externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
 
+  options = {
+    multipleSlots: true,
+  };
+
   properties = props;
 
-  /**
-   * Component initial data
-   */
   data = {
     prefix,
     classPrefix: name,
   };
 
-  /**
-   * Component methods
-   */
-  toTop() {
-    this.triggerEvent('to-top');
-    wx.pageScrollTo({
-      scrollTop: 0,
-      duration: 300,
-    });
-  }
+  observers = {
+    icon(icon) {
+      this.setIcon(icon);
+    },
+  };
+
+  lifetimes = {
+    ready() {
+      this.setIcon(this.properties.icon);
+    },
+  };
+
+  methods = {
+    setIcon(icon) {
+      if (!icon) {
+        this.setData({ iconName: '', iconData: {} });
+      } else if (typeof icon === 'string') {
+        this.setData({
+          iconName: icon,
+          iconData: {},
+        });
+      } else if (typeof icon === 'object') {
+        this.setData({
+          iconName: '',
+          iconData: icon,
+        });
+      } else {
+        this.setData({ iconName: 'backtop', iconData: {} });
+      }
+    },
+
+    toTop() {
+      this.triggerEvent('to-top');
+      wx.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      });
+    },
+  };
 }