所有编辑工具使用统一的 Selector 模式，确保一致的用户体验。
接口定义
每个 Selector 有自己独立的 props 接口，没有统一的 SelectorProps。以下是几个实际示例：
// UpscaleSelector props
interface UpscaleSelectorProps {
threadId: string;
image: Image;
onClose: () => void;
}
// EraserSelector props
interface EraserSelectorProps {
threadId: string;
image: Image;
getMaskImage: (imageWidth: number, imageHeight: number) => Promise<string | null>;
onClose: () => void;
onPaintSizeChange: (size: number) => void;
onBackward: () => void;
canBackward: boolean;
}
组件结构
每个 Selector 组件拥有自己的 props 接口和内部逻辑，但通常遵循类似的模式：
export function FilterSelector({ threadId, image, onClose }: FilterSelectorProps) {
// 1. 本地状态
const [selectedFilter, setSelectedFilter] = useState<Filter | null>(null);
const [isProcessing, setIsProcessing] = useState(false);
// 2. 确认处理
const handleConfirm = async () => {
setIsProcessing(true);
// 调用 API
await applyFilter({ imageId: image.id, filterId: selectedFilter.id });
onClose();
};
// 3. 渲染 UI
return (
<div>
{/* 选择界面 */}
</div>
);
}
Selector 列表
| Selector | 文件 | 功能 |
|---|
FilterSelector | common/generator/filter-selector.tsx | 滤镜选择和应用 |
ChooseFilterSelector | common/generator/choose-filter-selector.tsx | 滤镜预选 |
UpscaleSelector | common/generator/upscale-selector.tsx | 图片放大 |
EraserSelector | common/generator/eraser-selector.tsx | AI 擦除 |
InpaintSelector | common/generator/inpaint-selector.tsx | 局部重绘 |
InpaintFromUserSelector | common/generator/inpaint-from-user-selector.tsx | 用户指定局部重绘 |
ExpandSelector | common/generator/expand-selector.tsx | 图片扩展 |
ReplaceBgSelector | common/generator/replacebg-selector.tsx | 背景替换 |
VideoSelector | common/generator/video-selector.tsx | 视频生成配置 |
MusicSelector | common/generator/music-selector.tsx | 歌曲生成配置 |
InstrumentalSelector | common/generator/instrumental-selector.tsx | 器乐生成配置 |
AddVocalsSelector | common/generator/add-vocals-selector.tsx | 添加人声配置 |
AddInstrumentalSelector | common/generator/add-instrumental-selector.tsx | 添加器乐配置 |
GenerateImageSelector | common/generator/generate-image-selector.tsx | 图片生成配置 |
导出功能不是 Selector，而是位于 tool/export.tsx。
平台特定变体
部分 Selector 有 PC 和移动端的独立实现：
| 功能 | PC 版 | 移动端版 |
|---|
| 调整 | PCAdjustSelector | MobileAdjustSelector |
| 裁剪 | PCCropSelector | MobileCropSelector |
最佳实践
- 所有用户确认操作必须埋点
- 处理中状态要有 loading 反馈
- 每个 Selector 定义自己的 props 接口，不使用统一接口
