💄 style(ui): hide scrollbars across chat interface and request editor

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.
This commit is contained in:
Apple\Apple
2025-06-01 17:31:13 +08:00
parent aa49d2a360
commit 9fb9dfb905
4 changed files with 50 additions and 40 deletions

View File

@@ -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;
}
/* 调试面板标签样式 */