@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* 水印通用设置组件(位置 + 透明度)
|
||||
*/
|
||||
import React from "react"
|
||||
import type { WatermarkPosition } from "../../types"
|
||||
import { POSITION_OPTIONS } from "../../constants/watermark"
|
||||
|
||||
interface WatermarkCommonSectionProps {
|
||||
position: WatermarkPosition
|
||||
opacity: number
|
||||
onPositionChange: (pos: WatermarkPosition) => void
|
||||
onOpacityChange: (opacity: number) => void
|
||||
}
|
||||
|
||||
const WatermarkCommonSection: React.FC<WatermarkCommonSectionProps> = ({
|
||||
position,
|
||||
opacity,
|
||||
onPositionChange,
|
||||
onOpacityChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className="wp-section wp-common-section">
|
||||
<div className="wp-section-divider" />
|
||||
<div className="wp-common-title">通用设置</div>
|
||||
|
||||
<div className="wp-field">
|
||||
<label className="wp-field-label">水印位置</label>
|
||||
<select
|
||||
className="wp-select"
|
||||
value={position}
|
||||
onChange={(e) => onPositionChange(e.target.value as WatermarkPosition)}
|
||||
>
|
||||
{POSITION_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="wp-field">
|
||||
<label className="wp-field-label">不透明度</label>
|
||||
<div className="wp-slider-row">
|
||||
<input
|
||||
className="wp-slider"
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={opacity}
|
||||
onChange={(e) => onOpacityChange(Number(e.target.value))}
|
||||
/>
|
||||
<span className="wp-slider-value">{Math.round(opacity * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WatermarkCommonSection
|
||||
Reference in New Issue
Block a user