💄 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

@@ -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 ? (

View File

@@ -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',