From 0029c6c0e0d80e42e1bdc0e7d6dadf157a95270c Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Mon, 7 Nov 2022 23:26:07 +0800
Subject: [PATCH 1/2] docs(back-top): update docs and demo

---
 site/mobile/mobile.config.js         |   2 +-
 src/back-top/_example/base.jsx       | 119 ---------------------------
 src/back-top/_example/half-round.jsx |  35 ++++++++
 src/back-top/_example/index.jsx      |  68 +++++++++++++++
 src/back-top/_example/round.jsx      |  43 ++++++++++
 src/back-top/back-top.md             |  13 +--
 6 files changed, 148 insertions(+), 132 deletions(-)
 delete mode 100644 src/back-top/_example/base.jsx
 create mode 100644 src/back-top/_example/half-round.jsx
 create mode 100644 src/back-top/_example/index.jsx
 create mode 100644 src/back-top/_example/round.jsx

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index 83746d91..be5fb94a 100644
--- a/site/mobile/mobile.config.js
+++ b/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 多选框',
diff --git a/src/back-top/_example/base.jsx b/src/back-top/_example/base.jsx
deleted file mode 100644
index 75e80819..00000000
--- a/src/back-top/_example/base.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { BackTop, Button, Skeleton } from 'tdesign-mobile-react';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import './style/index.less';
-
-export default function Base() {
-  const [theme, setTheme] = useState({
-    theme: 'round',
-    showText: false,
-  });
-
-  const roundTypes = [
-    {
-      theme: 'round',
-      text: '圆白底',
-      showText: true,
-    },
-    {
-      theme: 'round-dark',
-      text: '圆黑底',
-      showText: true,
-    },
-    {
-      theme: 'round',
-      text: '圆白底纯图标',
-      showText: false,
-    },
-    {
-      theme: 'round-dark',
-      text: '圆黑底纯图标',
-      showText: false,
-    },
-  ];
-
-  const halfRoundTypes = [
-    {
-      theme: 'half-round',
-      text: '半圆白底',
-      showText: true,
-    },
-    {
-      theme: 'half-round-dark',
-      text: '半圆黑底',
-      showText: true,
-    },
-  ];
-
-  // 切换主题
-  const onClick = useCallback((config) => {
-    setTheme({
-      theme: config.theme,
-      showText: config.showText,
-    });
-    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-  }, []);
-
-  const rowCols = [
-    {
-      height: '171px',
-      borderRadius: '16px',
-    },
-    1,
-    {
-      width: '80%',
-    },
-    [
-      {
-        width: '60%',
-      },
-      {
-        width: '20%',
-      },
-    ],
-  ];
-
-  return (
-    <div className="tdesign-mobile-react-demo">
-      <BackTop
-        // eslint-disable-next-line no-nested-ternary
-        text={['half-round', 'half-round-dark'].includes(theme.theme) ? '返回顶部' : theme.showText ? '顶部' : ''}
-        // @ts-ignore
-        theme={theme.theme}
-        // target={() => document.getElementById('anchor')} // 滑动到目标点
-      />
-      <TDemoHeader title="BackTop 返回顶部" summary="用于当页面过长往下滑动时，帮助用户快速回到页面顶部" />
-      <TDemoBlock title="01 类型" summary="圆型返回顶部">
-        <div className="button-group">
-          {roundTypes.map((v) => (
-            <Button className="button" variant="outline" key={v.text} onClick={() => onClick(v)}>
-              {v.text}
-            </Button>
-          ))}
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="半圆型返回顶部">
-        <div className="button-group">
-          {halfRoundTypes.map((v) => (
-            <Button className="button" variant="outline" key={v.text} onClick={() => onClick(v)}>
-              {v.text}
-            </Button>
-          ))}
-        </div>
-      </TDemoBlock>
-
-      <div className="content">
-        {Array.from(Array(4), (item, index) => (
-          <div className="row" key={index}>
-            {Array.from(Array(2), (v, key) => (
-              <div className="item" key={key}>
-                <Skeleton theme="text" rowCol={rowCols} />
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/back-top/_example/half-round.jsx b/src/back-top/_example/half-round.jsx
new file mode 100644
index 00000000..817f0486
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/back-top/_example/index.jsx b/src/back-top/_example/index.jsx
new file mode 100644
index 00000000..c959415d
--- /dev/null
+++ b/src/back-top/_example/index.jsx
@@ -0,0 +1,68 @@
+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 = [
+    {
+      height: '171px',
+      borderRadius: '16px',
+    },
+    1,
+    {
+      width: '80%',
+    },
+    [
+      {
+        width: '60%',
+      },
+      {
+        width: '20%',
+      },
+    ],
+  ];
+
+  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="content">
+        {Array.from(Array(4), (item, index) => (
+          <div className="row" key={index}>
+            {Array.from(Array(2), (v, key) => (
+              <div className="item" key={key}>
+                <Skeleton theme="text" rowCol={rowCols} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/back-top/_example/round.jsx b/src/back-top/_example/round.jsx
new file mode 100644
index 00000000..da33787d
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md
index d9b4ca5f..59c1f362 100644
--- a/src/back-top/back-top.md
+++ b/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
 

From f894e63f10455dbb338ca1aef7589881483a55d5 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Tue, 8 Nov 2022 23:07:39 +0800
Subject: [PATCH 2/2] fix(back-top): fix cr

---
 src/back-top/_example/index.jsx        | 27 ++++++++------------------
 src/back-top/_example/style/index.less | 19 ++++++++----------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/back-top/_example/index.jsx b/src/back-top/_example/index.jsx
index c959415d..7e0748a1 100644
--- a/src/back-top/_example/index.jsx
+++ b/src/back-top/_example/index.jsx
@@ -22,21 +22,14 @@ export default function Base() {
 
   const rowCols = [
     {
-      height: '171px',
-      borderRadius: '16px',
+      width: '165.5px',
+      height: '165.5px',
+      borderRadius: '12px',
     },
     1,
     {
-      width: '80%',
+      width: '100px',
     },
-    [
-      {
-        width: '60%',
-      },
-      {
-        width: '20%',
-      },
-    ],
   ];
 
   return (
@@ -52,14 +45,10 @@ export default function Base() {
         <HalfRoundDemo visible={visible1} onClose={onClose1} />
       </TDemoBlock>
 
-      <div className="content">
-        {Array.from(Array(4), (item, index) => (
-          <div className="row" key={index}>
-            {Array.from(Array(2), (v, key) => (
-              <div className="item" key={key}>
-                <Skeleton theme="text" rowCol={rowCols} />
-              </div>
-            ))}
+      <div className="group">
+        {Array.from(Array(4), (item, key) => (
+          <div className="item" key={key}>
+            <Skeleton theme="text" rowCol={rowCols} />
           </div>
         ))}
       </div>
diff --git a/src/back-top/_example/style/index.less b/src/back-top/_example/style/index.less
index 72e8d7b4..32c6c490 100644
--- a/src/back-top/_example/style/index.less
+++ b/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;
     }
   }
 }