From 9b3fce2c32b5fe856ed54c6e2fcdbaad93874ca5 Mon Sep 17 00:00:00 2001
From: ZekunWu <1430755343@qq.com>
Date: Sun, 26 Feb 2023 18:38:10 +0800
Subject: [PATCH 01/14] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.less | 26 +++++++++++++++
 style/web/components/sticky-tool/_index.wxss | 14 ++++++++
 style/web/components/sticky-tool/_mixin.less | 31 +++++++++++++++++
 style/web/components/sticky-tool/_mixin.wxss |  0
 style/web/components/sticky-tool/_var.less   | 35 ++++++++++++++++++++
 5 files changed, 106 insertions(+)
 create mode 100644 style/web/components/sticky-tool/_index.less
 create mode 100644 style/web/components/sticky-tool/_index.wxss
 create mode 100644 style/web/components/sticky-tool/_mixin.less
 create mode 100644 style/web/components/sticky-tool/_mixin.wxss
 create mode 100644 style/web/components/sticky-tool/_var.less

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
new file mode 100644
index 0000000000..58cde40f72
--- /dev/null
+++ b/style/web/components/sticky-tool/_index.less
@@ -0,0 +1,26 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "./_mixin.less";
+
+.@{prefix}-sticky-tool {
+    position: fixed;
+    opacity: 1;
+    box-sizing: border-box;
+    background-color: @sticky-tool-background;
+    border: @sticky-tool-border;
+    box-shadow: @sticky-tool-shadow;
+
+    .sticky-item-basic();
+
+    &--square {
+        border-radius: @sticky-tool-border-radius-square;
+    }
+
+    &--round {
+        border-radius: @sticky-tool-border-radius-round;
+    }
+}
\ No newline at end of file
diff --git a/style/web/components/sticky-tool/_index.wxss b/style/web/components/sticky-tool/_index.wxss
new file mode 100644
index 0000000000..191b31df56
--- /dev/null
+++ b/style/web/components/sticky-tool/_index.wxss
@@ -0,0 +1,14 @@
+.t-sticky-tool {
+  position: fixed;
+  opacity: 1;
+  box-sizing: border-box;
+  background-color: var(--td-bg-color-container);
+  border: var(--td-component-border);
+  box-shadow: var(--td-shadow-3);
+}
+.t-sticky-tool--square {
+  border-radius: 6px;
+}
+.t-sticky-tool--round {
+  border-radius: 50%;
+}
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
new file mode 100644
index 0000000000..9422be6fef
--- /dev/null
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -0,0 +1,31 @@
+.sticky-item-basic() {
+    .@{prefix}-sticky-item {
+        margin: @sticky-item-margin;
+        opacity: 1;
+
+        &--normal {
+            width: @sticky-item-size-normal;
+            height: @sticky-item-size-normal;
+        }
+
+        &--compact {
+            width: @sticky-item-size-compact;
+            height: @sticky-item-size-compact;
+        }
+
+        &--square {
+            border-radius: @sticky-item-border-radius-square;
+        }
+
+        &--round {
+            border-radius: @sticky-item-border-radius-round;
+        }
+
+        .@{prefix}-sticky-item__label {
+            width: 100%;
+            height: @sticky-item-label-height;
+            line-height: @sticky-item-label-height;
+            text-align: center;
+        }
+    }
+}
\ No newline at end of file
diff --git a/style/web/components/sticky-tool/_mixin.wxss b/style/web/components/sticky-tool/_mixin.wxss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
new file mode 100644
index 0000000000..ebe54e0623
--- /dev/null
+++ b/style/web/components/sticky-tool/_var.less
@@ -0,0 +1,35 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button，
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius等
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+
+// 如：@button-line-bg-color-hover
+// 如：@button-line-height-s
+
+// sticky-tool组件整体样式
+@sticky-tool-background: @bg-color-container;
+@sticky-tool-border: @component-border;
+@sticky-tool-shadow:  @shadow-3;
+
+// sticky-tool shape=square
+@sticky-tool-border-radius-square: 6px;
+@sticky-item-border-radius-square: 3px;
+
+// sticky-tool shape=round
+@sticky-tool-border-radius-round: 50%;
+@sticky-item-border-radius-round: 50%;
+
+// sticky-item组件整体样式
+@sticky-item-margin: 4px;
+@sticky-item-label-height: 20px;
+
+// sticky-tool type=normal
+@sticky-item-size-normal: 56px;
+
+// sticky-tool type=compact
+@sticky-item-size-compact: 40px;
\ No newline at end of file

From 3ef309c87837b25813f4e00b5eeca75d53e94318 Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Mon, 27 Feb 2023 20:33:04 +0800
Subject: [PATCH 02/14] =?UTF-8?q?feat:=20=E5=B0=9D=E8=AF=95=E7=99=BE?=
 =?UTF-8?q?=E5=88=86=E6=AF=94=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.less | 10 ++++++-
 style/web/components/sticky-tool/_mixin.less | 29 ++++++++++++++++----
 style/web/components/sticky-tool/_var.less   | 10 ++++---
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index 58cde40f72..04d5a1907f 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -13,8 +13,16 @@
     background-color: @sticky-tool-background;
     border: @sticky-tool-border;
     box-shadow: @sticky-tool-shadow;
-
+    
     .sticky-item-basic();
+    
+    &--normal {
+        width: @sticky-tool-size-normal;
+    }
+
+    &--compact {
+        width: @sticky-tool-size-compact;
+    }
 
     &--square {
         border-radius: @sticky-tool-border-radius-square;
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index 9422be6fef..6576c93bcf 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -1,16 +1,22 @@
 .sticky-item-basic() {
     .@{prefix}-sticky-item {
-        margin: @sticky-item-margin;
         opacity: 1;
+        position: relative;
+        display: flex;
+        flex-direction: column;
 
         &--normal {
             width: @sticky-item-size-normal;
-            height: @sticky-item-size-normal;
+            height: 0;
+            padding-bottom: @sticky-item-size-normal;
+            margin-left: @sticky-item-margin-normal;
         }
 
         &--compact {
             width: @sticky-item-size-compact;
-            height: @sticky-item-size-compact;
+            height: 0;
+            padding-bottom: @sticky-item-size-compact;
+            margin-left: @sticky-item-margin-compact;
         }
 
         &--square {
@@ -21,10 +27,23 @@
             border-radius: @sticky-item-border-radius-round;
         }
 
+        .@{prefix}-sticky-item__icon {
+            width: 100%;
+            height: 0;
+            padding-bottom: 60.72%;
+
+            .t-icon {
+                width: 42.86%;
+                height: 24px;
+            }
+        }
         .@{prefix}-sticky-item__label {
             width: 100%;
-            height: @sticky-item-label-height;
-            line-height: @sticky-item-label-height;
+            height: 0;
+            padding-bottom: 35.71%;
+            margin-bottom: 3.57%;
+            // height: @sticky-item-label-height;
+            // line-height: @sticky-item-label-height;
             text-align: center;
         }
     }
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index ebe54e0623..187373687a 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -15,6 +15,8 @@
 @sticky-tool-background: @bg-color-container;
 @sticky-tool-border: @component-border;
 @sticky-tool-shadow:  @shadow-3;
+@sticky-tool-size-normal: 64px;
+@sticky-tool-size-compact: 48px;
 
 // sticky-tool shape=square
 @sticky-tool-border-radius-square: 6px;
@@ -25,11 +27,11 @@
 @sticky-item-border-radius-round: 50%;
 
 // sticky-item组件整体样式
-@sticky-item-margin: 4px;
 @sticky-item-label-height: 20px;
 
 // sticky-tool type=normal
-@sticky-item-size-normal: 56px;
-
+@sticky-item-size-normal: 87.5%;
+@sticky-item-margin-normal: 6.25%;
 // sticky-tool type=compact
-@sticky-item-size-compact: 40px;
\ No newline at end of file
+@sticky-item-size-compact: 83.33%;
+@sticky-item-margin-compact: 8.33%;

From 5c913f16ee8745e7024d4e5181643ad3c8dd1097 Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Tue, 28 Feb 2023 20:32:16 +0800
Subject: [PATCH 03/14] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.less |  4 +-
 style/web/components/sticky-tool/_mixin.less | 40 ++++++++------------
 style/web/components/sticky-tool/_var.less   | 14 ++++---
 3 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index 04d5a1907f..0f0c8be921 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -17,11 +17,11 @@
     .sticky-item-basic();
     
     &--normal {
-        width: @sticky-tool-size-normal;
+        // width: @sticky-tool-size-normal;
     }
 
     &--compact {
-        width: @sticky-tool-size-compact;
+        // width: @sticky-tool-size-compact;
     }
 
     &--square {
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index 6576c93bcf..e8090506f4 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -2,21 +2,26 @@
     .@{prefix}-sticky-item {
         opacity: 1;
         position: relative;
-        display: flex;
-        flex-direction: column;
-
+        margin: @sticky-item-margin;
+        
         &--normal {
             width: @sticky-item-size-normal;
-            height: 0;
-            padding-bottom: @sticky-item-size-normal;
-            margin-left: @sticky-item-margin-normal;
+            height: @sticky-item-size-normal;
+            .t-icon {
+                width: @sticky-item-icon-size-normal;
+                height: @sticky-item-icon-size-normal;
+                margin: @sticky-item-icon-margin-normal;
+            }
         }
 
         &--compact {
             width: @sticky-item-size-compact;
-            height: 0;
-            padding-bottom: @sticky-item-size-compact;
-            margin-left: @sticky-item-margin-compact;
+            height: @sticky-item-size-compact;
+            .t-icon {
+                width: @sticky-item-icon-size-compact;
+                height: @sticky-item-icon-size-compact;
+                margin: @sticky-item-icon-margin-compact;
+            }
         }
 
         &--square {
@@ -27,23 +32,10 @@
             border-radius: @sticky-item-border-radius-round;
         }
 
-        .@{prefix}-sticky-item__icon {
-            width: 100%;
-            height: 0;
-            padding-bottom: 60.72%;
-
-            .t-icon {
-                width: 42.86%;
-                height: 24px;
-            }
-        }
         .@{prefix}-sticky-item__label {
             width: 100%;
-            height: 0;
-            padding-bottom: 35.71%;
-            margin-bottom: 3.57%;
-            // height: @sticky-item-label-height;
-            // line-height: @sticky-item-label-height;
+            height: @sticky-item-label-height;
+            margin-top: @sticky-item-label-margin-top;
             text-align: center;
         }
     }
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index 187373687a..665fa3ce71 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -27,11 +27,15 @@
 @sticky-item-border-radius-round: 50%;
 
 // sticky-item组件整体样式
+@sticky-item-margin: 4px;
 @sticky-item-label-height: 20px;
-
+@sticky-item-label-height: 35.71%;
+@sticky-item-label-margin-top: 3.57%;
 // sticky-tool type=normal
-@sticky-item-size-normal: 87.5%;
-@sticky-item-margin-normal: 6.25%;
+@sticky-item-size-normal: 56px;
+@sticky-item-icon-size-normal: 42.86%;
+@sticky-item-icon-margin-normal: 14.29% 28.57% 0 28.57%;
 // sticky-tool type=compact
-@sticky-item-size-compact: 83.33%;
-@sticky-item-margin-compact: 8.33%;
+@sticky-item-size-compact: 40px;
+@sticky-item-icon-size-compact: 60%;
+@sticky-item-icon-margin-compact: 20%;

From 4ae7a69f91c9545e530a49800dc11da8e66960bb Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Wed, 1 Mar 2023 20:33:16 +0800
Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.less | 15 ++++++---------
 style/web/components/sticky-tool/_mixin.less | 11 ++++++++++-
 style/web/components/sticky-tool/_var.less   |  6 +++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index 0f0c8be921..997f2677c0 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -15,20 +15,17 @@
     box-shadow: @sticky-tool-shadow;
     
     .sticky-item-basic();
-    
-    &--normal {
-        // width: @sticky-tool-size-normal;
-    }
-
-    &--compact {
-        // width: @sticky-tool-size-compact;
-    }
 
     &--square {
         border-radius: @sticky-tool-border-radius-square;
     }
 
     &--round {
-        border-radius: @sticky-tool-border-radius-round;
+        &--normal {
+            border-radius: @sticky-tool-border-radius-round-normal;
+        }
+        &--compact {
+            border-radius: @sticky-tool-border-radius-round-compact;
+        }
     }
 }
\ No newline at end of file
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index e8090506f4..4967abd164 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -3,10 +3,18 @@
         opacity: 1;
         position: relative;
         margin: @sticky-item-margin;
-        
+        text-align: center;
+        font-size: @sticky-item-font-size;
+
+        &:hover {
+            cursor: pointer;
+            background-color: @sticky-item-bgcolor-hover;
+        }
+
         &--normal {
             width: @sticky-item-size-normal;
             height: @sticky-item-size-normal;
+
             .t-icon {
                 width: @sticky-item-icon-size-normal;
                 height: @sticky-item-icon-size-normal;
@@ -17,6 +25,7 @@
         &--compact {
             width: @sticky-item-size-compact;
             height: @sticky-item-size-compact;
+
             .t-icon {
                 width: @sticky-item-icon-size-compact;
                 height: @sticky-item-icon-size-compact;
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index 665fa3ce71..886ff55abe 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -23,14 +23,17 @@
 @sticky-item-border-radius-square: 3px;
 
 // sticky-tool shape=round
-@sticky-tool-border-radius-round: 50%;
+@sticky-tool-border-radius-round-normal: 32px;
+@sticky-tool-border-radius-round-compact: 24px;
 @sticky-item-border-radius-round: 50%;
 
 // sticky-item组件整体样式
 @sticky-item-margin: 4px;
+@sticky-item-bgcolor-hover: @bg-color-container-hover;
 @sticky-item-label-height: 20px;
 @sticky-item-label-height: 35.71%;
 @sticky-item-label-margin-top: 3.57%;
+@sticky-item-font-size: 12px;
 // sticky-tool type=normal
 @sticky-item-size-normal: 56px;
 @sticky-item-icon-size-normal: 42.86%;
@@ -39,3 +42,4 @@
 @sticky-item-size-compact: 40px;
 @sticky-item-icon-size-compact: 60%;
 @sticky-item-icon-margin-compact: 20%;
+

From ccf7a5f92e89002a85ad1e56d6f5c0f7d03189ef Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Mon, 6 Mar 2023 16:33:13 +0800
Subject: [PATCH 05/14] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4wxss=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.wxss | 14 --------------
 style/web/components/sticky-tool/_mixin.wxss |  0
 2 files changed, 14 deletions(-)
 delete mode 100644 style/web/components/sticky-tool/_index.wxss
 delete mode 100644 style/web/components/sticky-tool/_mixin.wxss

diff --git a/style/web/components/sticky-tool/_index.wxss b/style/web/components/sticky-tool/_index.wxss
deleted file mode 100644
index 191b31df56..0000000000
--- a/style/web/components/sticky-tool/_index.wxss
+++ /dev/null
@@ -1,14 +0,0 @@
-.t-sticky-tool {
-  position: fixed;
-  opacity: 1;
-  box-sizing: border-box;
-  background-color: var(--td-bg-color-container);
-  border: var(--td-component-border);
-  box-shadow: var(--td-shadow-3);
-}
-.t-sticky-tool--square {
-  border-radius: 6px;
-}
-.t-sticky-tool--round {
-  border-radius: 50%;
-}
diff --git a/style/web/components/sticky-tool/_mixin.wxss b/style/web/components/sticky-tool/_mixin.wxss
deleted file mode 100644
index e69de29bb2..0000000000

From d4f3fe061b83ec778f03e8907afa267f1abfd40b Mon Sep 17 00:00:00 2001
From: zekunwu <1430755343@qq.com>
Date: Mon, 13 Mar 2023 17:35:22 +0800
Subject: [PATCH 06/14] fix: lint

---
 style/web/components/sticky-tool/_index.less | 39 ++++----
 style/web/components/sticky-tool/_mixin.less | 98 ++++++++++----------
 style/web/components/sticky-tool/_var.less   |  1 -
 3 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index 997f2677c0..8c4582051f 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -7,25 +7,26 @@
 @import "./_mixin.less";
 
 .@{prefix}-sticky-tool {
-    position: fixed;
-    opacity: 1;
-    box-sizing: border-box;
-    background-color: @sticky-tool-background;
-    border: @sticky-tool-border;
-    box-shadow: @sticky-tool-shadow;
-    
-    .sticky-item-basic();
-
-    &--square {
-        border-radius: @sticky-tool-border-radius-square;
+  position: fixed;
+  opacity: 1;
+  box-sizing: border-box;
+  background-color: @sticky-tool-background;
+  border: @sticky-tool-border;
+  box-shadow: @sticky-tool-shadow;
+
+  .sticky-item-basic();
+
+  &--square {
+    border-radius: @sticky-tool-border-radius-square;
+  }
+
+  &--round {
+    &--normal {
+      border-radius: @sticky-tool-border-radius-round-normal;
     }
 
-    &--round {
-        &--normal {
-            border-radius: @sticky-tool-border-radius-round-normal;
-        }
-        &--compact {
-            border-radius: @sticky-tool-border-radius-round-compact;
-        }
+    &--compact {
+      border-radius: @sticky-tool-border-radius-round-compact;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index 4967abd164..799b98a6f5 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -1,51 +1,51 @@
 .sticky-item-basic() {
-    .@{prefix}-sticky-item {
-        opacity: 1;
-        position: relative;
-        margin: @sticky-item-margin;
-        text-align: center;
-        font-size: @sticky-item-font-size;
-
-        &:hover {
-            cursor: pointer;
-            background-color: @sticky-item-bgcolor-hover;
-        }
-
-        &--normal {
-            width: @sticky-item-size-normal;
-            height: @sticky-item-size-normal;
-
-            .t-icon {
-                width: @sticky-item-icon-size-normal;
-                height: @sticky-item-icon-size-normal;
-                margin: @sticky-item-icon-margin-normal;
-            }
-        }
-
-        &--compact {
-            width: @sticky-item-size-compact;
-            height: @sticky-item-size-compact;
-
-            .t-icon {
-                width: @sticky-item-icon-size-compact;
-                height: @sticky-item-icon-size-compact;
-                margin: @sticky-item-icon-margin-compact;
-            }
-        }
-
-        &--square {
-            border-radius: @sticky-item-border-radius-square;
-        }
-
-        &--round {
-            border-radius: @sticky-item-border-radius-round;
-        }
-
-        .@{prefix}-sticky-item__label {
-            width: 100%;
-            height: @sticky-item-label-height;
-            margin-top: @sticky-item-label-margin-top;
-            text-align: center;
-        }
+  .@{prefix}-sticky-item {
+    opacity: 1;
+    position: relative;
+    margin: @sticky-item-margin;
+    text-align: center;
+    font-size: @sticky-item-font-size;
+
+    &:hover {
+      cursor: pointer;
+      background-color: @sticky-item-bgcolor-hover;
     }
-}
\ No newline at end of file
+
+    &--normal {
+      width: @sticky-item-size-normal;
+      height: @sticky-item-size-normal;
+
+      .t-icon {
+        width: @sticky-item-icon-size-normal;
+        height: @sticky-item-icon-size-normal;
+        margin: @sticky-item-icon-margin-normal;
+      }
+    }
+
+    &--compact {
+      width: @sticky-item-size-compact;
+      height: @sticky-item-size-compact;
+
+      .t-icon {
+        width: @sticky-item-icon-size-compact;
+        height: @sticky-item-icon-size-compact;
+        margin: @sticky-item-icon-margin-compact;
+      }
+    }
+
+    &--square {
+      border-radius: @sticky-item-border-radius-square;
+    }
+
+    &--round {
+      border-radius: @sticky-item-border-radius-round;
+    }
+
+    .@{prefix}-sticky-item__label {
+      width: 100%;
+      height: @sticky-item-label-height;
+      margin-top: @sticky-item-label-margin-top;
+      text-align: center;
+    }
+  }
+}
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index 886ff55abe..3e357a4239 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -42,4 +42,3 @@
 @sticky-item-size-compact: 40px;
 @sticky-item-icon-size-compact: 60%;
 @sticky-item-icon-margin-compact: 20%;
-

From 767d4556ebcd8dd06f25b15d56914fa3e5a989b6 Mon Sep 17 00:00:00 2001
From: zekunwu <1430755343@qq.com>
Date: Mon, 13 Mar 2023 19:52:42 +0800
Subject: [PATCH 07/14] =?UTF-8?q?fix:=20=E6=94=B9=E7=94=A8=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_var.less | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index 3e357a4239..83112bbd06 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -15,30 +15,27 @@
 @sticky-tool-background: @bg-color-container;
 @sticky-tool-border: @component-border;
 @sticky-tool-shadow:  @shadow-3;
-@sticky-tool-size-normal: 64px;
-@sticky-tool-size-compact: 48px;
 
 // sticky-tool shape=square
-@sticky-tool-border-radius-square: 6px;
-@sticky-item-border-radius-square: 3px;
+@sticky-tool-border-radius-square: @border-radius-medium;
+@sticky-item-border-radius-square: @border-radius-default;
 
 // sticky-tool shape=round
-@sticky-tool-border-radius-round-normal: 32px;
-@sticky-tool-border-radius-round-compact: 24px;
+@sticky-tool-border-radius-round-normal: @size-10;
+@sticky-tool-border-radius-round-compact: @size-8;
 @sticky-item-border-radius-round: 50%;
 
 // sticky-item组件整体样式
-@sticky-item-margin: 4px;
+@sticky-item-margin: @size-2;
 @sticky-item-bgcolor-hover: @bg-color-container-hover;
-@sticky-item-label-height: 20px;
 @sticky-item-label-height: 35.71%;
 @sticky-item-label-margin-top: 3.57%;
-@sticky-item-font-size: 12px;
+@sticky-item-font-size: @font-size-s;
 // sticky-tool type=normal
-@sticky-item-size-normal: 56px;
+@sticky-item-size-normal: @size-14;
 @sticky-item-icon-size-normal: 42.86%;
 @sticky-item-icon-margin-normal: 14.29% 28.57% 0 28.57%;
 // sticky-tool type=compact
-@sticky-item-size-compact: 40px;
+@sticky-item-size-compact: @size-12;
 @sticky-item-icon-size-compact: 60%;
 @sticky-item-icon-margin-compact: 20%;

From 7e21bc30a2ffd817d4cfb0e0fb4f8a0c1cdea7a2 Mon Sep 17 00:00:00 2001
From: zekunwu <1430755343@qq.com>
Date: Wed, 15 Mar 2023 09:53:04 +0800
Subject: [PATCH 08/14] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_index.less |  8 +------
 style/web/components/sticky-tool/_mixin.less |  9 ++++----
 style/web/components/sticky-tool/_var.less   | 22 +++++++++-----------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index 8c4582051f..c983d4f934 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -21,12 +21,6 @@
   }
 
   &--round {
-    &--normal {
-      border-radius: @sticky-tool-border-radius-round-normal;
-    }
-
-    &--compact {
-      border-radius: @sticky-tool-border-radius-round-compact;
-    }
+    border-radius: @sticky-tool-border-radius-round;
   }
 }
diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index 799b98a6f5..be7bf59420 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -16,8 +16,8 @@
       height: @sticky-item-size-normal;
 
       .t-icon {
-        width: @sticky-item-icon-size-normal;
-        height: @sticky-item-icon-size-normal;
+        width: @sticky-item-icon-size;
+        height: @sticky-item-icon-size;
         margin: @sticky-item-icon-margin-normal;
       }
     }
@@ -27,8 +27,8 @@
       height: @sticky-item-size-compact;
 
       .t-icon {
-        width: @sticky-item-icon-size-compact;
-        height: @sticky-item-icon-size-compact;
+        width: @sticky-item-icon-size;
+        height: @sticky-item-icon-size;
         margin: @sticky-item-icon-margin-compact;
       }
     }
@@ -44,6 +44,7 @@
     .@{prefix}-sticky-item__label {
       width: 100%;
       height: @sticky-item-label-height;
+      line-height: @sticky-item-label-height;
       margin-top: @sticky-item-label-margin-top;
       text-align: center;
     }
diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less
index 83112bbd06..2d859b501f 100644
--- a/style/web/components/sticky-tool/_var.less
+++ b/style/web/components/sticky-tool/_var.less
@@ -21,21 +21,19 @@
 @sticky-item-border-radius-square: @border-radius-default;
 
 // sticky-tool shape=round
-@sticky-tool-border-radius-round-normal: @size-10;
-@sticky-tool-border-radius-round-compact: @size-8;
-@sticky-item-border-radius-round: 50%;
+@sticky-tool-border-radius-round: @border-radius-round;
+@sticky-item-border-radius-round: @border-radius-circle;
 
 // sticky-item组件整体样式
-@sticky-item-margin: @size-2;
+@sticky-item-margin: @comp-margin-xs;
 @sticky-item-bgcolor-hover: @bg-color-container-hover;
-@sticky-item-label-height: 35.71%;
-@sticky-item-label-margin-top: 3.57%;
+@sticky-item-label-height: @comp-size-xxs;
+@sticky-item-label-margin-top: @comp-margin-xxs;
 @sticky-item-font-size: @font-size-s;
+@sticky-item-icon-size: @icon-l;
 // sticky-tool type=normal
-@sticky-item-size-normal: @size-14;
-@sticky-item-icon-size-normal: 42.86%;
-@sticky-item-icon-margin-normal: 14.29% 28.57% 0 28.57%;
+@sticky-item-size-normal: @comp-size-xxxl;
+@sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l;
 // sticky-tool type=compact
-@sticky-item-size-compact: @size-12;
-@sticky-item-icon-size-compact: 60%;
-@sticky-item-icon-margin-compact: 20%;
+@sticky-item-size-compact: @comp-size-xl;
+@sticky-item-icon-margin-compact: @comp-margin-s;

From e52f2824a9865ac29f0b65a83a842461cc2ab85d Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Fri, 24 Mar 2023 19:26:12 +0800
Subject: [PATCH 09/14] =?UTF-8?q?feat:=20=E6=9A=82=E5=AD=98=E5=B0=9D?=
 =?UTF-8?q?=E8=AF=95=E8=81=94=E5=8A=A8backtop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/web/api/sticky-tool.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 docs/web/api/sticky-tool.md

diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md
new file mode 100644
index 0000000000..0d1dfd4f93
--- /dev/null
+++ b/docs/web/api/sticky-tool.md
@@ -0,0 +1,20 @@
+---
+title: StickyTool 侧边栏
+description: 气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+### 基础侧边栏（默认距离页面右侧24px，距离backtop组件顶部16px，没有backtop组件则距离页面底部80px）
+
+{{ base }}
+
+#### 紧凑侧边栏
+
+{{ compact }}
+
+#### 组件形状
+提供圆形和方形两种不同形状。
+
+{{ shape }}

From e486e56b5a07cac12e61dce6f098bde308d16019 Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Tue, 28 Mar 2023 11:25:31 +0800
Subject: [PATCH 10/14] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96sticky?=
 =?UTF-8?q?-tool=20demo=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/web/api/sticky-tool.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md
index 0d1dfd4f93..93e304f650 100644
--- a/docs/web/api/sticky-tool.md
+++ b/docs/web/api/sticky-tool.md
@@ -6,7 +6,7 @@ usage: { title: '', description: '' }
 spline: navigation
 ---
 
-### 基础侧边栏（默认距离页面右侧24px，距离backtop组件顶部16px，没有backtop组件则距离页面底部80px）
+### 基础侧边栏
 
 {{ base }}
 

From 8b0ee9808df55cd571d848f1323be6e28a12b839 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 28 Mar 2023 11:33:06 +0800
Subject: [PATCH 11/14] chore: update description

---
 docs/web/api/sticky-tool.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md
index 93e304f650..a8f75a6aa5 100644
--- a/docs/web/api/sticky-tool.md
+++ b/docs/web/api/sticky-tool.md
@@ -1,6 +1,6 @@
 ---
 title: StickyTool 侧边栏
-description: 气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。
+description: 侧边栏组件用于常驻页面侧边的信息、操作展示。
 isComponent: true
 usage: { title: '', description: '' }
 spline: navigation

From 24c139c44d71adaa7274c396101860a6c9779348 Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Mon, 3 Apr 2023 11:37:01 +0800
Subject: [PATCH 12/14] fix: lint:fix

---
 style/web/components/sticky-tool/_index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index c290034cbe..c68c80b655 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -13,7 +13,7 @@
   background-color: @sticky-tool-background;
   border: @sticky-tool-border;
   box-shadow: @sticky-tool-shadow;
-   
+  
   &-popup-content {
     box-shadow: @sticky-tool-popup-shadow;
     font-size: @sticky-tool-popup-font-size;

From a2e82673693a9745d4b12fa0605e2f339560128b Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Mon, 3 Apr 2023 11:40:34 +0800
Subject: [PATCH 13/14] fix: lint:fix

---
 style/web/components/sticky-tool/_index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less
index c68c80b655..8f52b3badc 100644
--- a/style/web/components/sticky-tool/_index.less
+++ b/style/web/components/sticky-tool/_index.less
@@ -13,7 +13,7 @@
   background-color: @sticky-tool-background;
   border: @sticky-tool-border;
   box-shadow: @sticky-tool-shadow;
-  
+
   &-popup-content {
     box-shadow: @sticky-tool-popup-shadow;
     font-size: @sticky-tool-popup-font-size;

From fc16900f179345078e5d29187cb89756030479b1 Mon Sep 17 00:00:00 2001
From: yiranwu <yiranwu@tencent.com>
Date: Mon, 3 Apr 2023 11:49:34 +0800
Subject: [PATCH 14/14] =?UTF-8?q?fix:=20=E9=A2=9C=E8=89=B2=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style/web/components/sticky-tool/_mixin.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less
index fa0b6abeb2..0c36ffc9c7 100644
--- a/style/web/components/sticky-tool/_mixin.less
+++ b/style/web/components/sticky-tool/_mixin.less
@@ -32,6 +32,7 @@
         width: @sticky-item-icon-size;
         height: @sticky-item-icon-size;
         margin: @sticky-item-icon-margin-compact;
+        color: @sticky-item-icon-color;
       }
     }