🎨 refactor(playground): Refactor the structure of the playground and implement responsive design adaptation

2025-05-30 19:24:17 +08:00
parent faa7abcc7f
commit c5ed0753a6
14 changed files with 1867 additions and 812 deletions
--- a/web/src/components/playground/ImageUrlInput.js
+++ b/web/src/components/playground/ImageUrlInput.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  Input,
+  Typography,
+  Button,
+} from '@douyinfe/semi-ui';
+import { IconFile } from '@douyinfe/semi-icons';
+import {
+  FileText,
+  Plus,
+  X,
+} from 'lucide-react';
+
+const ImageUrlInput = ({ imageUrls, onImageUrlsChange }) => {
+  const handleAddImageUrl = () => {
+    const newUrls = [...imageUrls, ''];
+    onImageUrlsChange(newUrls);
+  };
+
+  const handleUpdateImageUrl = (index, value) => {
+    const newUrls = [...imageUrls];
+    newUrls[index] = value;
+    onImageUrlsChange(newUrls);
+  };
+
+  const handleRemoveImageUrl = (index) => {
+    const newUrls = imageUrls.filter((_, i) => i !== index);
+    onImageUrlsChange(newUrls);
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <FileText size={16} className="text-gray-500" />
+          <Typography.Text strong className="text-sm">
+            图片地址
+          </Typography.Text>
+          <Typography.Text className="text-xs text-gray-400">
+            (多模态对话)
+          </Typography.Text>
+        </div>
+        <Button
+          icon={<Plus size={14} />}
+          size="small"
+          theme="solid"
+          type="primary"
+          onClick={handleAddImageUrl}
+          className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+          disabled={imageUrls.length >= 5}
+        />
+      </div>
+
+      {imageUrls.length === 0 ? (
+        <Typography.Text className="text-xs text-gray-500 mb-2 block">
+          点击 + 按钮添加图片URL，支持最多5张图片
+        </Typography.Text>
+      ) : (
+        <Typography.Text className="text-xs text-gray-500 mb-2 block">
+          已添加 {imageUrls.length}/5 张图片
+        </Typography.Text>
+      )}
+
+      <div className="space-y-2 max-h-32 overflow-y-auto">
+        {imageUrls.map((url, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <div className="flex-1">
+              <Input
+                placeholder={`https://example.com/image${index + 1}.jpg`}
+                value={url}
+                onChange={(value) => handleUpdateImageUrl(index, value)}
+                className="!rounded-lg"
+                size="small"
+                prefix={<IconFile size='small' />}
+              />
+            </div>
+            <Button
+              icon={<X size={12} />}
+              size="small"
+              theme="borderless"
+              type="danger"
+              onClick={() => handleRemoveImageUrl(index)}
+              className="!rounded-full !w-6 !h-6 !p-0 !min-w-0 !text-red-500 hover:!bg-red-50 flex-shrink-0"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImageUrlInput;