diff --git a/apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.tsx b/apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.tsx new file mode 100644 index 000000000..1470162e8 --- /dev/null +++ b/apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.tsx @@ -0,0 +1,197 @@ +import React from "react" +import type { StickerItem, TextStickerPreset } from "../../types" +import { TEXT_STICKER_PRESET_LABELS } from "../../types" +import { TEXT_PRESET_STYLES } from "../constants" + +export interface StickerPropsEditorProps { + sticker: StickerItem + totalDuration: number + onChange: (id: string, partial: Partial) => void +} + +export const StickerPropsEditor: React.FC = ({ + sticker, + totalDuration, + onChange, +}) => { + const update = (partial: Partial) => { + onChange(sticker.id, partial) + } + + return ( +
+
属性调整
+ + {/* 位置 X */} +
+ 位置 X + update({ x: Number(e.target.value) })} + /> + {sticker.x}% +
+ + {/* 位置 Y */} +
+ 位置 Y + update({ y: Number(e.target.value) })} + /> + {sticker.y}% +
+ + {/* 尺寸 */} +
+ 大小 + + update({ + width: Number(e.target.value), + height: Number(e.target.value), + }) + } + /> + {sticker.width}% +
+ + {/* 旋转 */} +
+ 旋转 + update({ rotation: Number(e.target.value) })} + /> + {sticker.rotation}° +
+ + {/* 透明度 */} +
+ 透明度 + update({ opacity: Number(e.target.value) })} + /> + {sticker.opacity}% +
+ + {/* 时间 */} +
+ 开始 + update({ start_time: Number(e.target.value) })} + /> + 时长 + update({ duration: Number(e.target.value) })} + /> +
+ + {/* 文字贴纸特有属性 */} + {sticker.type === "text" && ( + <> +
+ 花字 + +
+
+ 字号 + update({ font_size: Number(e.target.value) })} + /> + {sticker.font_size}px +
+
+ 颜色 + update({ text_color: e.target.value })} + /> +
+ + )} + + {/* 预览 */} +
+
+ {sticker.type === "emoji" && sticker.content} + {sticker.type === "text" && sticker.content} + {sticker.type === "image" && ( + sticker + )} +
+
+
+ ) +}