From 2b8f3bd1bfcede279fc043334090f7e1d294ebe5 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Mon, 29 Aug 2022 11:30:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(back-top):=20=E4=BF=AE=E5=A4=8D=20svg?=
 =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E8=A2=AB=E8=A6=86=E7=9B=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/back-top/src/BackTop.tsx            |  7 ++++++-
 packages/ui/back-top/src/styles/back-top.scss   |  5 -----
 packages/ui/back-top/stories/basic.stories.tsx  | 17 ++++++-----------
 .../ui/back-top/stories/compose.stories.tsx     | 17 ++++++-----------
 packages/ui/back-top/stories/custom.stories.tsx | 17 ++++++-----------
 .../ui/back-top/stories/settings.stories.tsx    | 17 ++++++-----------
 6 files changed, 30 insertions(+), 50 deletions(-)

diff --git a/packages/ui/back-top/src/BackTop.tsx b/packages/ui/back-top/src/BackTop.tsx
index 21dc789a5..e973d068e 100644
--- a/packages/ui/back-top/src/BackTop.tsx
+++ b/packages/ui/back-top/src/BackTop.tsx
@@ -91,7 +91,12 @@ export const BackTop = forwardRef<HTMLDivElement | null, BackTopProps>(
       <div ref={ref} role={role} className={cls} onClick={handleClick} {...rest}>
         {children || (
           <div className={contentCls}>
-            <ArrowUpOutlined />
+            <ArrowUpOutlined
+              style={{
+                width: 'var(--hi-v4-height-5, 20px)',
+                height: 'var(--hi-v4-height-5, 20px)',
+              }}
+            />
           </div>
         )}
       </div>
diff --git a/packages/ui/back-top/src/styles/back-top.scss b/packages/ui/back-top/src/styles/back-top.scss
index 6073de85f..ccf324c39 100644
--- a/packages/ui/back-top/src/styles/back-top.scss
+++ b/packages/ui/back-top/src/styles/back-top.scss
@@ -45,10 +45,5 @@ $prefix: "#{$component-prefix}-back-top" !default;
     }
 
     @include render-status();
-
-    > svg {
-      width: use-height-size(5);
-      height: use-height-size(5);
-    }
   }
 }
diff --git a/packages/ui/back-top/stories/basic.stories.tsx b/packages/ui/back-top/stories/basic.stories.tsx
index dc6496c52..01358870b 100644
--- a/packages/ui/back-top/stories/basic.stories.tsx
+++ b/packages/ui/back-top/stories/basic.stories.tsx
@@ -13,22 +13,17 @@ export const Basic = () => {
         <div style={{ position: 'relative', height: 400 }}>
           <BackTop
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_target') as HTMLElement}
+            container={() => document.getElementById('back-top_target')}
           />
           <div
             id="back-top_target"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/packages/ui/back-top/stories/compose.stories.tsx b/packages/ui/back-top/stories/compose.stories.tsx
index 2ac000131..2d25cf13f 100644
--- a/packages/ui/back-top/stories/compose.stories.tsx
+++ b/packages/ui/back-top/stories/compose.stories.tsx
@@ -58,22 +58,17 @@ export const Compose = () => {
           <BackTop
             shape="circle"
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_compose') as HTMLElement}
+            container={() => document.getElementById('back-top_compose')}
           />
           <div
             id="back-top_compose"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/packages/ui/back-top/stories/custom.stories.tsx b/packages/ui/back-top/stories/custom.stories.tsx
index 90a428e3c..850e00831 100644
--- a/packages/ui/back-top/stories/custom.stories.tsx
+++ b/packages/ui/back-top/stories/custom.stories.tsx
@@ -17,7 +17,7 @@ export const Custom = () => {
           <Tooltip title="回到顶部" placement="left">
             <BackTop
               style={{ position: 'absolute', right: 50, bottom: 112 }}
-              container={() => document.getElementById('back-top_custom') as HTMLElement}
+              container={() => document.getElementById('back-top_custom')}
             >
               <div
                 style={{
@@ -39,16 +39,11 @@ export const Custom = () => {
             id="back-top_custom"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/packages/ui/back-top/stories/settings.stories.tsx b/packages/ui/back-top/stories/settings.stories.tsx
index 53f6b8756..7e1fd0500 100644
--- a/packages/ui/back-top/stories/settings.stories.tsx
+++ b/packages/ui/back-top/stories/settings.stories.tsx
@@ -48,22 +48,17 @@ export const Settings = () => {
             duration={duration}
             visibleHeight={visibleHeight}
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_setting') as HTMLElement}
+            container={() => document.getElementById('back-top_setting')}
           />
           <div
             id="back-top_setting"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>

From e1c0e4e2ccdd811914c38c364a8d509755b6f9b0 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Mon, 29 Aug 2022 14:36:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(back-top):=20=E5=B0=86=E5=86=85?=
 =?UTF-8?q?=E8=81=94=E6=A0=B7=E5=BC=8F=E6=94=B9=E4=B8=BA=E6=9B=B4=E7=B2=BE?=
 =?UTF-8?q?=E7=A1=AE=E7=9A=84=E7=B1=BB=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/back-top/src/BackTop.tsx          | 7 +------
 packages/ui/back-top/src/styles/back-top.scss | 5 +++++
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ui/back-top/src/BackTop.tsx b/packages/ui/back-top/src/BackTop.tsx
index e973d068e..21dc789a5 100644
--- a/packages/ui/back-top/src/BackTop.tsx
+++ b/packages/ui/back-top/src/BackTop.tsx
@@ -91,12 +91,7 @@ export const BackTop = forwardRef<HTMLDivElement | null, BackTopProps>(
       <div ref={ref} role={role} className={cls} onClick={handleClick} {...rest}>
         {children || (
           <div className={contentCls}>
-            <ArrowUpOutlined
-              style={{
-                width: 'var(--hi-v4-height-5, 20px)',
-                height: 'var(--hi-v4-height-5, 20px)',
-              }}
-            />
+            <ArrowUpOutlined />
           </div>
         )}
       </div>
diff --git a/packages/ui/back-top/src/styles/back-top.scss b/packages/ui/back-top/src/styles/back-top.scss
index ccf324c39..3ffba8f83 100644
--- a/packages/ui/back-top/src/styles/back-top.scss
+++ b/packages/ui/back-top/src/styles/back-top.scss
@@ -45,5 +45,10 @@ $prefix: "#{$component-prefix}-back-top" !default;
     }
 
     @include render-status();
+
+    > svg[class^=hi-v4-icon] {
+      width: use-height-size(5);
+      height: use-height-size(5);
+    }
   }
 }