From 9fb9dfb905a56d13c088540e8fa1268f901fde10 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 1 Jun 2025 17:31:13 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(ui):=20hide=20scrollbars?=
 =?UTF-8?q?=20across=20chat=20interface=20and=20request=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide y-axis scrollbars to provide a cleaner UI experience while maintaining
scroll functionality through mouse wheel and keyboard navigation.

Changes include:
- Hide scrollbars in CustomRequestEditor TextArea component
- Hide scrollbars in chat container and all related chat components
- Hide scrollbars in thinking content areas
- Add cross-browser compatibility for scrollbar hiding
- Maintain scroll functionality while improving visual aesthetics

Components affected:
- CustomRequestEditor.js: Added custom-request-textarea class
- index.css: Updated scrollbar styles for chat, thinking, and editor areas

The interface now provides a more streamlined appearance consistent with
modern UI design patterns while preserving all interactive capabilities.
---
 web/src/components/playground/ChatArea.js     |  2 +-
 .../playground/CustomRequestEditor.js         |  9 +--
 web/src/index.css                             | 75 ++++++++++++-------
 web/src/pages/Playground/index.js             |  4 +-
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/web/src/components/playground/ChatArea.js b/web/src/components/playground/ChatArea.js
index 6b42040d..e4d73297 100644
--- a/web/src/components/playground/ChatArea.js
+++ b/web/src/components/playground/ChatArea.js
@@ -39,7 +39,7 @@ const ChatArea = ({
   return (
     <Card
       className="!rounded-2xl h-full"
-      bodyStyle={{ padding: 0, height: 'calc(100vh - 101px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
+      bodyStyle={{ padding: 0, height: 'calc(100vh - 108px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
     >
       {/* 聊天头部 */}
       {styleState.isMobile ? (
diff --git a/web/src/components/playground/CustomRequestEditor.js b/web/src/components/playground/CustomRequestEditor.js
index 504ba261..9b11b4f4 100644
--- a/web/src/components/playground/CustomRequestEditor.js
+++ b/web/src/components/playground/CustomRequestEditor.js
@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Card,
   TextArea,
   Typography,
   Button,
   Switch,
   Banner,
-  Tag,
 } from '@douyinfe/semi-ui';
 import {
   Code,
@@ -104,11 +102,6 @@ const CustomRequestEditor = ({
           <Typography.Text strong className="text-sm">
             自定义请求体模式
           </Typography.Text>
-          {customRequestMode && (
-            <Tag color="green" size="small" shape='circle'>
-              已启用
-            </Tag>
-          )}
         </div>
         <Switch
           checked={customRequestMode}
@@ -171,7 +164,7 @@ const CustomRequestEditor = ({
               onChange={handleValueChange}
               placeholder='{"model": "gpt-4o", "messages": [...], ...}'
               autosize={{ minRows: 8, maxRows: 20 }}
-              className={`!rounded-lg font-mono text-sm ${!isValid ? '!border-red-500' : ''}`}
+              className={`custom-request-textarea !rounded-lg font-mono text-sm ${!isValid ? '!border-red-500' : ''}`}
               style={{
                 fontFamily: 'Consolas, Monaco, "Courier New", monospace',
                 lineHeight: '1.5',
diff --git a/web/src/index.css b/web/src/index.css
index eb5c0705..f8b8e011 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -183,25 +183,37 @@ code {
   overflow-x: hidden !important;
 }
 
+/* 隐藏所有聊天相关区域的滚动条 */
+.semi-chat::-webkit-scrollbar,
+.semi-chat-chatBox::-webkit-scrollbar,
+.semi-chat-chatBox-wrap::-webkit-scrollbar,
+.semi-chat-chatBox-content::-webkit-scrollbar,
+.semi-chat-content::-webkit-scrollbar,
+.semi-chat-list::-webkit-scrollbar {
+  display: none;
+}
+
+.semi-chat,
+.semi-chat-chatBox,
+.semi-chat-chatBox-wrap,
+.semi-chat-chatBox-content,
+.semi-chat-content,
+.semi-chat-list {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 .semi-chat-container {
   overflow-x: hidden !important;
 }
 
 .semi-chat-container::-webkit-scrollbar {
-  width: 4px;
+  display: none;
 }
 
-.semi-chat-container::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-}
-
-.semi-chat-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.semi-chat-container::-webkit-scrollbar-track {
-  background: transparent;
+.semi-chat-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 /* 隐藏模型设置区域的滚动条 */
@@ -216,26 +228,31 @@ code {
 
 /* 思考内容区域滚动条样式 */
 .thinking-content-scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.thinking-content-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-
-.thinking-content-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.thinking-content-scroll::-webkit-scrollbar-track {
-  background: transparent;
+  display: none;
 }
 
 .thinking-content-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 隐藏请求体 JSON TextArea 的滚动条 */
+.custom-request-textarea .semi-input::-webkit-scrollbar {
+  display: none;
+}
+
+.custom-request-textarea .semi-input {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.custom-request-textarea textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.custom-request-textarea textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 /* 调试面板标签样式 */
diff --git a/web/src/pages/Playground/index.js b/web/src/pages/Playground/index.js
index 518727f5..a76291ed 100644
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -363,7 +363,7 @@ const Playground = () => {
               flexShrink: 0,
               minWidth: styleState.isMobile ? '100%' : 320,
               maxWidth: styleState.isMobile ? '100%' : 320,
-              height: styleState.isMobile ? 'auto' : 'calc(100vh - 100px)',
+              height: styleState.isMobile ? 'auto' : 'calc(100vh - 106px)',
               overflow: 'auto',
               position: styleState.isMobile ? 'fixed' : 'relative',
               zIndex: styleState.isMobile ? 1000 : 1,
@@ -400,7 +400,7 @@ const Playground = () => {
         )}
 
         <Layout.Content className="relative flex-1 overflow-hidden">
-          <div className="sm:px-4 overflow-hidden flex flex-col lg:flex-row gap-2 sm:gap-4 h-[calc(100vh-100px)]">
+          <div className="sm:px-4 overflow-hidden flex flex-col lg:flex-row gap-2 sm:gap-4 h-[calc(100vh-106px)]">
             <div className="flex-1 flex flex-col">
               <ChatArea
                 chatRef={chatRef}