From 5cf12c2fbc337f7d4bbd02d6fc073ffc32ff62ba Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sun, 17 Mar 2024 15:59:36 +0800
Subject: [PATCH 1/4] fix(scrollbar): fix robot plugin scrollbar hide almost
 all scrollbar bug

---
 packages/plugins/robot/src/Main.vue  |  7 +------
 packages/settings/design/src/App.vue |  9 +++++++--
 packages/theme/common/base.less      | 20 ++++++++++++++++++++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/plugins/robot/src/Main.vue b/packages/plugins/robot/src/Main.vue
index 28fb15b060..f2dbc4b834 100644
--- a/packages/plugins/robot/src/Main.vue
+++ b/packages/plugins/robot/src/Main.vue
@@ -29,7 +29,7 @@
         </template>
       </tiny-dropdown>
     </header>
-    <article class="chat-window" id="chatgpt-window">
+    <article class="chat-window lowcode-scrollbar-hide" id="chatgpt-window">
       <tiny-layout>
         <tiny-row
           v-for="(item, index) in activeMessages"
@@ -390,8 +390,6 @@ export default {
 .chat-window {
   max-height: 400px;
   overflow: scroll;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE 10+ */
   .chat-avatar-wrap {
     width: 46px;
     .chat-avatar {
@@ -437,9 +435,6 @@ export default {
   color: var(--ti-lowcode-chat-model-ai-fail-text);
 }
 
-::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
 .chat-tips {
   text-align: right;
   font-size: 12px;
diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue
index 0fae641f25..6f70c0610e 100644
--- a/packages/settings/design/src/App.vue
+++ b/packages/settings/design/src/App.vue
@@ -140,12 +140,17 @@ body {
   --base-top-panel-height: 35px;
   --base-bottom-panel-height: 30px;
   --base-nav-panel-width: 40px;
-  scrollbar-color: rgba(0, 0, 0, 0.1) #fff;
-  scrollbar-width: thin;
   -webkit-font-smoothing: subpixel-antialiased;
   background: #f9f9f9;
 }
 
+@supports not selector(::webkit-scrollbar) {
+  body {
+    scrollbar-color: rgba(0, 0, 0, 0.1) #fff;
+    scrollbar-width: thin;
+  }
+}
+
 ol,
 ul {
   list-style: none;
diff --git a/packages/theme/common/base.less b/packages/theme/common/base.less
index 015271f905..57075620a0 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/common/base.less
@@ -72,3 +72,23 @@ td {
   -webkit-line-clamp: var(--ellipsis-line, 2);
   -webkit-box-orient: vertical;
 }
+
+// support for not webkit browser and won't override ::webkit-scrollbar-* selector
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #dbdbdb transparent;
+    }
+  }
+
+  .lowcode-scrollbar-hide {
+    scrollbar-width: none;
+  }
+}
+
+.lowcode-scrollbar-hide {
+  &::-webkit-scrollbar {
+    display: none;
+  }    
+}

From 10ebee71dec45f8974e5c3181d99f0ebe05e4147 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 28 Mar 2024 02:17:39 -0700
Subject: [PATCH 2/4] fix(scrollbar): change by review comment

---
 packages/theme/common/base.less     | 20 --------------------
 packages/theme/dark/scrollbar.less  | 23 +++++++++++++++++++++++
 packages/theme/light/scrollbar.less | 23 +++++++++++++++++++++++
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/theme/common/base.less b/packages/theme/common/base.less
index 57075620a0..015271f905 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/common/base.less
@@ -72,23 +72,3 @@ td {
   -webkit-line-clamp: var(--ellipsis-line, 2);
   -webkit-box-orient: vertical;
 }
-
-// support for not webkit browser and won't override ::webkit-scrollbar-* selector
-@supports not selector(::-webkit-scrollbar) {
-  body {
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: #dbdbdb transparent;
-    }
-  }
-
-  .lowcode-scrollbar-hide {
-    scrollbar-width: none;
-  }
-}
-
-.lowcode-scrollbar-hide {
-  &::-webkit-scrollbar {
-    display: none;
-  }    
-}
diff --git a/packages/theme/dark/scrollbar.less b/packages/theme/dark/scrollbar.less
index 5e56ec2b47..1ac1970803 100644
--- a/packages/theme/dark/scrollbar.less
+++ b/packages/theme/dark/scrollbar.less
@@ -28,3 +28,26 @@ body {
     }
   }
 }
+
+// support for not webkit browser and won't override ::webkit-scrollbar-* selector
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #dbdbdb transparent;
+    }
+  }
+}
+
+// hide scrollbar
+@supports not selector(::-webkit-scrollbar) {
+  .lowcode-scrollbar-hide {
+    scrollbar-width: none;
+  }
+}
+
+.lowcode-scrollbar-hide {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/packages/theme/light/scrollbar.less b/packages/theme/light/scrollbar.less
index d49cf2ecec..1c8245b2a1 100644
--- a/packages/theme/light/scrollbar.less
+++ b/packages/theme/light/scrollbar.less
@@ -30,3 +30,26 @@ body {
     }
   }
 }
+
+// support for not webkit browser and won't override ::webkit-scrollbar-* selector
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #dbdbdb transparent;
+    }
+  }
+}
+
+// hide scrollbar
+@supports not selector(::-webkit-scrollbar) {
+  .lowcode-scrollbar-hide {
+    scrollbar-width: none;
+  }
+}
+
+.lowcode-scrollbar-hide {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

From 2113d925107594c57fed8a80e277b8905f37a729 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 28 Mar 2024 20:39:04 -0700
Subject: [PATCH 3/4] fix(theme-scrollbar): change by review comment

---
 packages/theme/common/base.less     | 55 +++++++++++++++++++++++++++++
 packages/theme/dark/index.less      |  1 -
 packages/theme/dark/scrollbar.less  | 53 ---------------------------
 packages/theme/light/index.less     |  1 -
 packages/theme/light/scrollbar.less | 55 -----------------------------
 5 files changed, 55 insertions(+), 110 deletions(-)
 delete mode 100644 packages/theme/dark/scrollbar.less
 delete mode 100644 packages/theme/light/scrollbar.less

diff --git a/packages/theme/common/base.less b/packages/theme/common/base.less
index 015271f905..7afc978227 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/common/base.less
@@ -72,3 +72,58 @@ td {
   -webkit-line-clamp: var(--ellipsis-line, 2);
   -webkit-box-orient: vertical;
 }
+
+body {
+  *,
+  .lowcode-scrollbar,
+  .lowcode-scrollbar-thin {
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece,
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #dbdbdb;
+
+      &:hover {
+        background-color: #c2c2c2;
+      }
+    }
+  }
+  .lowcode-scrollbar {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+  }
+  .lowcode-scrollbar-thin {
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+  }
+}
+
+// support for not webkit browser and won't override ::webkit-scrollbar-* selector
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #dbdbdb transparent;
+    }
+  }
+}
+
+// hide scrollbar
+@supports not selector(::-webkit-scrollbar) {
+  .lowcode-scrollbar-hide {
+    scrollbar-width: none;
+  }
+}
+
+.lowcode-scrollbar-hide {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index 3ee1f92a40..e43a405a7a 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -1,7 +1,6 @@
 @import '../common/base.less';
 @import '../common/global.less';
 @import './base.less';
-@import './scrollbar.less';
 // 主题配置优先于公共配置
 @import './variable.less';
 @import './block.less';
diff --git a/packages/theme/dark/scrollbar.less b/packages/theme/dark/scrollbar.less
deleted file mode 100644
index 1ac1970803..0000000000
--- a/packages/theme/dark/scrollbar.less
+++ /dev/null
@@ -1,53 +0,0 @@
-// 1.scrollbar 伪类中，css变量是隔离的，无法向上找到，所以需要在亮色和暗色分别定义一遍
-// 2. tinyvue 也有定义 scrollbar 样式，所以无法定义在 body 下全局生效
-body {
-  *,
-  .lowcode-scrollbar,
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-track-piece,
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #dbdbdb;
-
-      &:hover {
-        background-color: #c2c2c2;
-      }
-    }
-  }
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-  }
-}
-
-// support for not webkit browser and won't override ::webkit-scrollbar-* selector
-@supports not selector(::-webkit-scrollbar) {
-  body {
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: #dbdbdb transparent;
-    }
-  }
-}
-
-// hide scrollbar
-@supports not selector(::-webkit-scrollbar) {
-  .lowcode-scrollbar-hide {
-    scrollbar-width: none;
-  }
-}
-
-.lowcode-scrollbar-hide {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 759f817f0b..eef6cef06d 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,7 +1,6 @@
 @import '../common/base.less';
 @import '../common/global.less';
 @import './base.less';
-@import './scrollbar.less';
 // 主题配置优先于公共配置
 @import './variable.less';
 @import './tutorial.less';
diff --git a/packages/theme/light/scrollbar.less b/packages/theme/light/scrollbar.less
deleted file mode 100644
index 1c8245b2a1..0000000000
--- a/packages/theme/light/scrollbar.less
+++ /dev/null
@@ -1,55 +0,0 @@
-// 1. scrollbar 伪类中，css变量是隔离的，无法向上找到，所以需要在亮色和暗色分别定义一遍
-// 2. tinyvue 也有定义 scrollbar 样式，所以无法定义在 body 下全局生效
-body {
-  *,
-  .lowcode-scrollbar,
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-track-piece,
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #dbdbdb;
-
-      &:hover {
-        background-color: #c2c2c2;
-      }
-    }
-  }
-  .lowcode-scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-  }
-}
-
-// support for not webkit browser and won't override ::webkit-scrollbar-* selector
-@supports not selector(::-webkit-scrollbar) {
-  body {
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: #dbdbdb transparent;
-    }
-  }
-}
-
-// hide scrollbar
-@supports not selector(::-webkit-scrollbar) {
-  .lowcode-scrollbar-hide {
-    scrollbar-width: none;
-  }
-}
-
-.lowcode-scrollbar-hide {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

From f3e3a2d715a11bfde20a518b0645f27d4a8d527e Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 28 Mar 2024 20:55:57 -0700
Subject: [PATCH 4/4] fix(theme-base): apply default scrollbar style to body *
 children

---
 packages/theme/common/base.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/theme/common/base.less b/packages/theme/common/base.less
index 7afc978227..569df99fb7 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/common/base.less
@@ -91,6 +91,7 @@ body {
       }
     }
   }
+  *,
   .lowcode-scrollbar {
     &::-webkit-scrollbar {
       width: 8px;