YoungestSongMo
d95d155ab5
- CHANGELOG: 新增 0.0.16 版本条目（模型输入栏重构/统一页面调度/依赖联动） - TODO: 标记账户信息页为已完成，拆分未完成页面项 - ARCHITECTURE: 新增 PageDispatcher 叠加层说明 + OPEN_PAGE 事件 - 代码去重：runFieldChecks(validators) + createImageBeforeUpload(uploadValidation) - ESLint: DependentFormItem 中 Form.useWatch 移到组件顶层（修复 rules-of-hooks） - ESLint: message.success / async handleSubmit 加 void（修复 no-floating-promises） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
// ============================================================
|
||
// ImageListInput — imageList → Dragger（多张图片拖拽上传）
|
||
// 用于图生图模型的多图输入场景
|
||
// ============================================================
|
||
|
||
import { Upload } from 'antd';
|
||
import { InboxOutlined } from '@ant-design/icons';
|
||
import type { UploadFile } from 'antd/es/upload';
|
||
import type { WidgetProps } from './types';
|
||
import { createImageBeforeUpload } from './uploadValidation';
|
||
|
||
const { Dragger } = Upload;
|
||
|
||
export function ImageListInput({ value, onChange, disabled, config }: WidgetProps) {
|
||
const fileList = (value as UploadFile[]) || [];
|
||
const maxSizeMb = (config.maxFileSizeMb as number) || 10;
|
||
const maxCount = (config.maxFiles as number) || 10;
|
||
const filters = config.fileFilter as string[] | undefined;
|
||
|
||
return (
|
||
<Dragger
|
||
multiple
|
||
listType="picture"
|
||
accept={
|
||
filters
|
||
? filters.map((ext) => `image/${ext}`).join(',')
|
||
: 'image/png,image/jpg,image/jpeg,image/webp'
|
||
}
|
||
fileList={fileList}
|
||
onChange={({ fileList: newList }) => onChange?.(newList)}
|
||
disabled={disabled}
|
||
beforeUpload={createImageBeforeUpload(maxSizeMb)}
|
||
maxCount={maxCount}
|
||
>
|
||
<p className="ant-upload-drag-icon">
|
||
<InboxOutlined />
|
||
</p>
|
||
<p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
|
||
<p className="ant-upload-hint">
|
||
支持 {filters?.join(' / ').toUpperCase() || 'PNG / JPG / WebP'}
|
||
，单张不超过 {maxSizeMb}MB
|
||
</p>
|
||
</Dragger>
|
||
);
|
||
}
|