@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* 文字水印配置组件
|
||||
*/
|
||||
import React from "react"
|
||||
|
||||
interface TextWatermarkSectionProps {
|
||||
text: string | undefined
|
||||
fontSize: number | undefined
|
||||
color: string | undefined
|
||||
onTextChange: (text: string) => void
|
||||
onFontSizeChange: (size: number) => void
|
||||
onColorChange: (color: string) => void
|
||||
}
|
||||
|
||||
const TextWatermarkSection: React.FC<TextWatermarkSectionProps> = ({
|
||||
text,
|
||||
fontSize,
|
||||
color,
|
||||
onTextChange,
|
||||
onFontSizeChange,
|
||||
onColorChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className="wp-section">
|
||||
<div className="wp-field">
|
||||
<label className="wp-field-label">水印文字</label>
|
||||
<textarea
|
||||
className="wp-textarea"
|
||||
placeholder="输入水印文字内容"
|
||||
rows={3}
|
||||
value={text ?? ""}
|
||||
onChange={(e) => onTextChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="wp-field">
|
||||
<label className="wp-field-label">字号</label>
|
||||
<div className="wp-slider-row">
|
||||
<input
|
||||
className="wp-slider"
|
||||
type="range"
|
||||
min={12}
|
||||
max={72}
|
||||
value={fontSize ?? 24}
|
||||
onChange={(e) => onFontSizeChange(Number(e.target.value))}
|
||||
/>
|
||||
<span className="wp-slider-value">{fontSize ?? 24}px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="wp-field">
|
||||
<label className="wp-field-label">文字颜色</label>
|
||||
<div className="wp-color-row">
|
||||
<input
|
||||
className="wp-color-input"
|
||||
type="color"
|
||||
value={color ?? "#ffffff"}
|
||||
onChange={(e) => onColorChange(e.target.value)}
|
||||
/>
|
||||
<span className="wp-color-value">{color ?? "#ffffff"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextWatermarkSection
|
||||
Reference in New Issue
Block a user