Explorar o código

✨ 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 hai 9 meses
pai
achega
7783fe802a
Modificáronse 2 ficheiros con 23 adicións e 4 borrados
  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;