docs(back-top): update docs and demo

site/mobile/mobile.config.js

@@ -110,7 +110,7 @@ export default {
     {
       title: 'BackTop 返回顶部',
       name: 'back-top',
-      component: () => import('tdesign-mobile-react/back-top/_example/base.jsx'),
+      component: () => import('tdesign-mobile-react/back-top/_example/index.jsx'),
     },
     {
       title: 'Checkbox 多选框',

src/back-top/_example/half-round.jsx

@@ -0,0 +1,35 @@
+import React, { useState, useCallback } from 'react';
+import { BackTop, Button } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function HalfRound({ visible, onClose }) {
+  const [theme, setTheme] = useState({
+    theme: 'half-round',
+    text: '返回顶部',
+  });
+
+  // 切换主题
+  const onClick = useCallback(
+    (theme) => {
+      setTheme({ theme, text: '返回顶部' });
+      onClose();
+      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+    },
+    [onClose],
+  );
+
+  return (
+    <>
+      {visible ? <BackTop text={theme.text} theme={theme.theme} /> : null}
+
+      <div className="button-group">
+        <Button className="button" variant="outline" onClick={() => onClick('half-round')}>
+          半圆白底
+        </Button>
+        <Button className="button" variant="outline" onClick={() => onClick('half-round-dark')}>
+          半圆黑底
+        </Button>
+      </div>
+    </>
+  );
+}

src/back-top/_example/index.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Skeleton } from 'tdesign-mobile-react';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import './style/index.less';
+import RoundDemo from './round';
+import HalfRoundDemo from './half-round';
+
+export default function Base() {
+  const [visible, setVisible] = useState(false);
+  const [visible1, setVisible1] = useState(false);
+
+  const onClose = () => {
+    setVisible(true);
+    setVisible1(false);
+  };
+
+  const onClose1 = () => {
+    setVisible(false);
+    setVisible1(true);
+  };
+
+  const rowCols = [
+    {
+      width: '165.5px',
+      height: '165.5px',
+      borderRadius: '12px',
+    },
+    1,
+    {
+      width: '100px',
+    },
+  ];
+
+  return (
+    <div className="tdesign-mobile-react-demo">
+      <TDemoHeader
+        title="BackTop 返回顶部"
+        summary="当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部"
+      />
+      <TDemoBlock title="01 类型" summary="圆型返回顶部">
+        <RoundDemo visible={visible} onClose={onClose} />
+      </TDemoBlock>
+      <TDemoBlock summary="半圆型返回顶部">
+        <HalfRoundDemo visible={visible1} onClose={onClose1} />
+      </TDemoBlock>
+
+      <div className="group">
+        {Array.from(Array(4), (item, key) => (
+          <div className="item" key={key}>
+            <Skeleton theme="text" rowCol={rowCols} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/back-top/_example/round.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useCallback } from 'react';
+import { BackTop, Button } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Round({ visible, onClose }) {
+  const [theme, setTheme] = useState({
+    theme: 'round',
+    text: '顶部',
+  });
+
+  // 切换主题
+  const onClick = useCallback(
+    (theme, text) => {
+      setTheme({
+        theme,
+        text,
+      });
+      onClose();
+      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+    },
+    [onClose],
+  );
+
+  return (
+    <>
+      {visible ? <BackTop text={theme.text} theme={theme.theme} /> : null}
+      <div className="button-group">
+        <Button className="button" variant="outline" onClick={() => onClick('round', '顶部')}>
+          圆角白底
+        </Button>
+        <Button className="button" variant="outline" onClick={() => onClick('round-dark', '顶部')}>
+          圆角黑底
+        </Button>
+        <Button className="button" variant="outline" onClick={() => onClick('round', '')}>
+          圆白底纯图标
+        </Button>
+        <Button className="button" variant="outline" onClick={() => onClick('round-dark', '')}>
+          圆黑底纯图标
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -16,17 +16,14 @@
     margin-bottom: 15px;
   }
 
-  .content {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 16px;
-
-    .row {
-      display: flex;
-      justify-content: space-between;
-      .item {
-        width: 47%;
-      }
+  .group {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 16px 30px 16px;
+    .item {
+      width: 47%;
+      margin-bottom: 16px;
     }
   }
 }

src/back-top/back-top.md

@@ -1,15 +1,4 @@
----
-title: BackTop 返回顶部
-description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
-spline: base
-isComponent: true
-toc: false
----
-
-## 示例
-
-::: demo _example/base back-top
-:::
+:: BASE_DOC ::
 
 ## API