✨ feat: remove image upload limit and improve scrollbar styling
Remove the 5-image upload restriction in playground and enhance UI consistency Changes: - Remove 5-image limit constraint from ImageUrlInput component - Update hint text to remove "maximum 5 images" references - Add custom scrollbar styling for image list to match site-wide design - Apply consistent thin scrollbar (6px width) with Semi Design color variables - Maintain hover effects and rounded corners for better UX Breaking Changes: None Files modified: - web/src/components/playground/ImageUrlInput.js - web/src/index.css This change allows users to upload unlimited images in playground mode while maintaining visual consistency across the application's scrollable elements.
This commit is contained in:
@@ -61,7 +61,7 @@ const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnab
|
||||
type="primary"
|
||||
onClick={handleAddImageUrl}
|
||||
className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
|
||||
disabled={!imageEnabled || imageUrls.length >= 5 || disabled}
|
||||
disabled={!imageEnabled || disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,15 +72,15 @@ const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnab
|
||||
</Typography.Text>
|
||||
) : imageUrls.length === 0 ? (
|
||||
<Typography.Text className="text-xs text-gray-500 mb-2 block">
|
||||
{disabled ? '图片功能在自定义请求体模式下不可用' : '点击 + 按钮添加图片URL,支持最多5张图片'}
|
||||
{disabled ? '图片功能在自定义请求体模式下不可用' : '点击 + 按钮添加图片URL进行多模态对话'}
|
||||
</Typography.Text>
|
||||
) : (
|
||||
<Typography.Text className="text-xs text-gray-500 mb-2 block">
|
||||
已添加 {imageUrls.length}/5 张图片{disabled ? ' (自定义模式下不可用)' : ''}
|
||||
已添加 {imageUrls.length} 张图片{disabled ? ' (自定义模式下不可用)' : ''}
|
||||
</Typography.Text>
|
||||
)}
|
||||
|
||||
<div className={`space-y-2 max-h-32 overflow-y-auto ${!imageEnabled || disabled ? 'opacity-50' : ''}`}>
|
||||
<div className={`space-y-2 max-h-32 overflow-y-auto image-list-scroll ${!imageEnabled || disabled ? 'opacity-50' : ''}`}>
|
||||
{imageUrls.map((url, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
|
||||
@@ -236,6 +236,25 @@ code {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 图片列表滚动条样式 */
|
||||
.image-list-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.image-list-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--semi-color-tertiary-light-default);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.image-list-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--semi-color-tertiary);
|
||||
}
|
||||
|
||||
.image-list-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 隐藏请求体 JSON TextArea 的滚动条 */
|
||||
.custom-request-textarea .semi-input::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user