From 6c92ffefec40e5a0822f2b488b7d36d28cc82c6e Mon Sep 17 00:00:00 2001
From: chilingling <26962197+chilingling@users.noreply.github.com>
Date: Sat, 6 Apr 2024 23:16:48 -0700
Subject: [PATCH] fix(scrollbar): fix robot plugin scrollbar hide almost all
 scrollbar bug (#340)

* fix(scrollbar): fix robot plugin scrollbar hide almost all scrollbar bug

* fix(scrollbar): change by review comment

* fix(theme-scrollbar): change by review comment

* fix(theme-base): apply default scrollbar style to body * children
---
 packages/plugins/robot/src/Main.vue  |  7 +---
 packages/settings/design/src/App.vue |  9 ++++-
 packages/theme/common/base.less      | 56 ++++++++++++++++++++++++++++
 packages/theme/dark/index.less       |  1 -
 packages/theme/dark/scrollbar.less   | 30 ---------------
 packages/theme/light/index.less      |  1 -
 packages/theme/light/scrollbar.less  | 32 ----------------
 7 files changed, 64 insertions(+), 72 deletions(-)
 delete mode 100644 packages/theme/dark/scrollbar.less
 delete mode 100644 packages/theme/light/scrollbar.less

diff --git a/packages/plugins/robot/src/Main.vue b/packages/plugins/robot/src/Main.vue
index 28fb15b..f2dbc4b 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 0fae641..6f70c06 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 015271f..569df99 100644
--- a/packages/theme/common/base.less
+++ b/packages/theme/common/base.less
@@ -72,3 +72,59 @@ 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 3ee1f92..e43a405 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 5e56ec2..0000000
--- a/packages/theme/dark/scrollbar.less
+++ /dev/null
@@ -1,30 +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;
-    }
-  }
-}
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 759f817..eef6cef 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 d49cf2e..0000000
--- a/packages/theme/light/scrollbar.less
+++ /dev/null
@@ -1,32 +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;
-    }
-  }
-}