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

@@ -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;

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;

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;
+  }
+}

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';

packages/theme/dark/scrollbar.less

@@ -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;
-    }
-  }
-}

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';

packages/theme/light/scrollbar.less

@@ -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;
-    }
-  }
-}