92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
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;
|