+ {/* 水印设置 */}
+ setModalOpen(false)}
+ />
+
+ );
+};
+
+export default AiImagePage;
diff --git a/studio/src/pages/ai-image/components/AnnotationCanvas.tsx b/studio/src/pages/ai-image/components/AnnotationCanvas.tsx
new file mode 100644
index 0000000..6c38e21
--- /dev/null
+++ b/studio/src/pages/ai-image/components/AnnotationCanvas.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useRef } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import type { AnnotationElement } from '@/types/annotation';
+import {
+ drawElement,
+ drawSelectionHandles,
+ hitTest,
+ type HandleType,
+} from '@/utils/annotation';
+
+const PREVIEW_MAX_WIDTH = 900;
+
+interface Interaction {
+ action: 'move' | 'rotate' | 'resize';
+ elemId: number;
+ moved: boolean;
+ grabDX?: number;
+ grabDY?: number;
+ startAngleRad?: number;
+ startRotation?: number;
+ startElem?: AnnotationElement;
+ startDist?: number;
+}
+
+interface AnnotationCanvasProps {
+ baseImage: HTMLImageElement | null;
+ elements: AnnotationElement[];
+ selectedId: number | null;
+ onSelect: (id: number | null) => void;
+ onChange: (next: AnnotationElement[]) => void;
+ /** 一次交互（拖拽/旋转/拉伸）开始时触发一次，父组件用于存撤销快照 */
+ onBeginInteraction: () => void;
+}
+
+const AnnotationCanvas = ({
+ baseImage,
+ elements,
+ selectedId,
+ onSelect,
+ onChange,
+ onBeginInteraction,
+}: AnnotationCanvasProps) => {
+ const canvasRef = useRef
+
+
+ {/* 上传 */}
+ 水印设置
+
+
+
+ 水印类型
+ setWmType(e.target.value as WatermarkKind)}
+ optionType="button"
+ >
+ 图片水印
+ 文字水印
+
+
+
+ {wmType === 'text' ? (
+
+ 水印文字
+ setWmText(e.target.value)}
+ style={{ width: 200 }}
+ />
+
+ ) : (
+
+ 水印图片
+ 
+ 默认水印图，贴图后为圆形
+
+ )}
+
+
+ 透明度 {wmOpacity}%
+
+
+
+
+
+
+ {/* 预览 */}
+
+
点击或拖拽图片到此处上传（支持多张）
+支持 JPG、PNG、WEBP 格式
+
+
+
+
+
+
+
+
+
+
+ {items.length === 0 ? (
+ 预览（处理后）
+
+ {items.map((item) => (
+
+
+ updateItemState(item.id, { pos })}
+ />
+
+ ))}
+
+ {item.fileName}
+
+
+
+ }
+ onClick={() => openEdit(item)}
+ >
+ AI 生图
+
+ }
+ onClick={() => exportItem(item)}
+ />
+ }
+ onClick={() => deleteItem(item.id)}
+ />
+
+ 添加水印后，可在预览图上按住水印拖动调整位置
+ + )} +
+
+
+ );
+};
+
+export default AnnotationCanvas;
diff --git a/studio/src/pages/ai-image/components/ElementPropsPanel.tsx b/studio/src/pages/ai-image/components/ElementPropsPanel.tsx
new file mode 100644
index 0000000..5a3d374
--- /dev/null
+++ b/studio/src/pages/ai-image/components/ElementPropsPanel.tsx
@@ -0,0 +1,166 @@
+import { ColorPicker, Empty, Input, InputNumber, Select, Slider, Switch } from 'antd';
+import type { AnnotationElement } from '@/types/annotation';
+import { FONT_FAMILIES } from '@/utils/annotation';
+
+interface ElementPropsPanelProps {
+ element: AnnotationElement | null;
+ onUpdate: (id: number, patch: Partial
+
+ );
+ }
+
+ const update = (patch: Partial点击画布上的文字或标尺进行编辑
+
+ {element.type === 'text' ? (
+ <>
+
+ );
+};
+
+export default ElementPropsPanel;
diff --git a/studio/src/pages/ai-image/components/ImageEditModal.tsx b/studio/src/pages/ai-image/components/ImageEditModal.tsx
new file mode 100644
index 0000000..b09b1a3
--- /dev/null
+++ b/studio/src/pages/ai-image/components/ImageEditModal.tsx
@@ -0,0 +1,479 @@
+import { useEffect, useRef, useState } from 'react';
+import { App, Button, Drawer, Empty, Input, Select, Spin, Tabs } from 'antd';
+import {
+ ClearOutlined,
+ ColumnHeightOutlined,
+ DeleteOutlined,
+ DownloadOutlined,
+ ExperimentOutlined,
+ FontSizeOutlined,
+ UndoOutlined,
+} from '@ant-design/icons';
+import type { AnnotationElement } from '@/types/annotation';
+import { createRulerElement, createTextElement, drawElement } from '@/utils/annotation';
+import { downloadCanvas } from '@/utils/image';
+import { editImage } from '@/services/image';
+import { apiErrorMessage } from '@/services/api';
+import AnnotationCanvas from './AnnotationCanvas';
+import ElementPropsPanel from './ElementPropsPanel';
+
+const MODEL_OPTIONS = [
+ { value: 'wanx2.1-imageedit', label: 'wanx2.1-imageedit｜通用编辑，加文字弱' },
+ { value: 'wan2.6-image', label: 'wan2.6-image｜全能图文，效果均衡' },
+ { value: 'qwen-image-edit', label: 'qwen-image-edit｜精准中英文字' },
+ { value: 'qwen-image-edit-plus', label: 'qwen-image-edit-plus｜精准文字·更快' },
+ {
+ value: 'qwen-image-edit-plus-2025-10-30',
+ label: 'qwen-image-edit-plus-2025-10-30｜精准文字·稳定',
+ },
+];
+
+type EditTab = 'text' | 'ruler';
+
+const PRESETS_KEY = 'ozon_annotation_presets_v1';
+
+interface PresetItem {
+ id: string;
+ type: EditTab;
+ name: string;
+ config: Record
+ 内容
+ update({ content: e.target.value })}
+ />
+
+
+ 字体
+
+
+ 字号
+ update({ fontSize: v ?? 18 })}
+ style={{ flex: 1 }}
+ />
+
+
+ 加粗
+ update({ bold: v })} />
+
+
+ 文字颜色
+ update({ color: c.toHexString() })}
+ />
+
+
+ 描边颜色
+ update({ strokeColor: c.toHexString() })}
+ />
+
+
+ 描边宽度
+ update({ strokeWidth: v ?? 0 })}
+ style={{ flex: 1 }}
+ />
+
+
+ ) : (
+ <>
+
+ 长度(px)
+ update({ length: v ?? 50 })}
+ style={{ flex: 1 }}
+ />
+
+
+ 线色
+ update({ lineColor: c.toHexString() })}
+ />
+
+
+ 线宽
+ update({ lineWidth: v ?? 2 })}
+ style={{ flex: 1 }}
+ />
+
+
+ T字大小
+ update({ tSize: v ?? 14 })}
+ style={{ flex: 1 }}
+ />
+
+
+ 标签文字
+ update({ label: e.target.value })} />
+
+
+ 标签颜色
+ update({ labelColor: c.toHexString() })}
+ />
+
+
+ 标签字号
+ update({ labelFontSize: v ?? 14 })}
+ style={{ flex: 1 }}
+ />
+
+
+ )}
+
+
+ 透明度
+ update({ opacity: v })}
+ style={{ flex: 1 }}
+ />
+
+
+ 旋转(°)
+ update({ rotation: (v ?? 0) % 360 })}
+ style={{ flex: 1 }}
+ />
+
+
+
+
+ {/* 左：底图切换 */}
+
+
+ {/* 底部：AI 指令 */}
+
+ setCurrentKey('original')}
+ />
+ {aiResults.map((r) => (
+ setCurrentKey(r.id)}
+ />
+ ))}
+ {aiResults.length === 0 && (
+
+
+ {/* 中：画布 */}
+ AI 生成结果会出现在这里，点击可切换为底图
+ )}
+
+ {baseImage ? (
+
+
+ {/* 右：标注编辑区 */}
+
+
+ )}
+
+ setEditTab(k as EditTab)}
+ size="small"
+ className="wb-tabs"
+ items={[
+ { key: 'text', label: '文字' },
+ { key: 'ruler', label: '标尺' },
+ ]}
+ />
+
+
+ {editTab === 'text' ? (
+ } onClick={addText} disabled={!baseImage}>
+ 添加文字
+
+ ) : (
+ }
+ onClick={addRuler}
+ disabled={!baseImage}
+ >
+ 添加标尺
+
+ )}
+ } onClick={deleteSelected} disabled={!hasSelection}>
+ 删除
+
+
+
+
+
+ {selectedElement && selectedElement.type === editTab ? (
+
+
+
+ )}
+ 点击画布上的元素，或点上方按钮添加
+
+
+
+
+ } onClick={undo} disabled={undoStack.length === 0}>
+ 撤销
+
+ }
+ onClick={clearAnnotations}
+ disabled={elements.length === 0}
+ >
+ 清空
+
+ }
+ onClick={exportImage}
+ disabled={!baseImage}
+ >
+ 导出 PNG
+
+
+
+
+
+ setAiPrompt(e.target.value)}
+ placeholder="AI 修改：换背景 / 去杂物 / 补光影 / 改风格…（生成后自动作为新底图，可继续叠加标注）"
+ rows={3}
+ className="wb-ai-input"
+ disabled={!baseImage}
+ onPressEnter={(e) => {
+ if (!e.shiftKey) {
+ e.preventDefault();
+ void runAi();
+ }
+ }}
+ />
+
+
+
+ }
+ loading={aiLoading}
+ onClick={() => void runAi()}
+ disabled={!baseImage}
+ block
+ >
+ AI 生成
+
+
+
+ 
+ {label}
+
+ );
+}
+
+export default ImageEditModal;
diff --git a/studio/src/pages/ai-image/components/WatermarkCanvas.tsx b/studio/src/pages/ai-image/components/WatermarkCanvas.tsx
new file mode 100644
index 0000000..479673d
--- /dev/null
+++ b/studio/src/pages/ai-image/components/WatermarkCanvas.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import type { ImageItem } from '@/types/image';
+import { clampPos, drawWatermarked, getWatermarkSize } from '@/utils/watermark';
+
+const PREVIEW_MAX_WIDTH = 360;
+
+interface WatermarkCanvasProps {
+ item: ImageItem;
+ watermarkImg: HTMLImageElement | null;
+ onPosChange: (pos: { x: number; y: number }) => void;
+}
+
+/**
+ * 单张图片的可拖拽水印预览画布。
+ * 水印坐标始终相对原图；预览按 PREVIEW_MAX_WIDTH 等比绘制。
+ */
+const WatermarkCanvas = ({ item, watermarkImg, onPosChange }: WatermarkCanvasProps) => {
+ const canvasRef = useRef