فهرست منبع

✨ 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.
Apple\Apple 11 ماه پیش
والد
کامیت
05396dae39
2فایلهای تغییر یافته به همراه23 افزوده شده و 4 حذف شده
  1. 4 4
      web/src/components/playground/ImageUrlInput.js
  2. 19 0
      web/src/index.css

+ 4 - 4
web/src/components/playground/ImageUrlInput.js

@@ -61,7 +61,7 @@ const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnab
             type="primary"
             type="primary"
             onClick={handleAddImageUrl}
             onClick={handleAddImageUrl}
             className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
             className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
-            disabled={!imageEnabled || imageUrls.length >= 5 || disabled}
+            disabled={!imageEnabled || disabled}
           />
           />
         </div>
         </div>
       </div>
       </div>
@@ -72,15 +72,15 @@ const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnab
         </Typography.Text>
         </Typography.Text>
       ) : imageUrls.length === 0 ? (
       ) : imageUrls.length === 0 ? (
         <Typography.Text className="text-xs text-gray-500 mb-2 block">
         <Typography.Text className="text-xs text-gray-500 mb-2 block">
-          {disabled ? '图片功能在自定义请求体模式下不可用' : '点击 + 按钮添加图片URL,支持最多5张图片'}
+          {disabled ? '图片功能在自定义请求体模式下不可用' : '点击 + 按钮添加图片URL进行多模态对话'}
         </Typography.Text>
         </Typography.Text>
       ) : (
       ) : (
         <Typography.Text className="text-xs text-gray-500 mb-2 block">
         <Typography.Text className="text-xs text-gray-500 mb-2 block">
-          已添加 {imageUrls.length}/5 张图片{disabled ? ' (自定义模式下不可用)' : ''}
+          已添加 {imageUrls.length} 张图片{disabled ? ' (自定义模式下不可用)' : ''}
         </Typography.Text>
         </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) => (
         {imageUrls.map((url, index) => (
           <div key={index} className="flex items-center gap-2">
           <div key={index} className="flex items-center gap-2">
             <div className="flex-1">
             <div className="flex-1">

+ 19 - 0
web/src/index.css

@@ -236,6 +236,25 @@ code {
   scrollbar-width: none;
   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 的滚动条 */
 /* 隐藏请求体 JSON TextArea 的滚动条 */
 .custom-request-textarea .semi-input::-webkit-scrollbar {
 .custom-request-textarea .semi-input::-webkit-scrollbar {
   display: none;
   display: none;