@@ -1,126 +0,0 @@
|
||||
/**
|
||||
* 水印配置 Hook
|
||||
* 管理水印类型切换、各项配置变更
|
||||
*/
|
||||
import { useState, useCallback } from "react"
|
||||
import type { WatermarkConfig, WatermarkType, WatermarkPosition, ScrollDirection } from "../types"
|
||||
import { DEFAULT_WATERMARK } from "../types"
|
||||
|
||||
interface UseWatermarkConfigOptions {
|
||||
config: WatermarkConfig
|
||||
onChange: (config: WatermarkConfig) => void
|
||||
}
|
||||
|
||||
export const useWatermarkConfig = ({ config, onChange }: UseWatermarkConfigOptions) => {
|
||||
/* ── 图片上传预览 URL(本地预览用) ── */
|
||||
const [localImageUrl, setLocalImageUrl] = useState<string>("")
|
||||
|
||||
/* ── 切换水印类型 ── */
|
||||
const handleTypeChange = useCallback(
|
||||
(type: WatermarkType) => {
|
||||
setLocalImageUrl("")
|
||||
onChange({ ...DEFAULT_WATERMARK, type })
|
||||
},
|
||||
[onChange],
|
||||
)
|
||||
|
||||
/* ── 通用设置变更 ── */
|
||||
const handlePositionChange = useCallback(
|
||||
(position: WatermarkPosition) => {
|
||||
onChange({ ...config, position })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleOpacityChange = useCallback(
|
||||
(opacity: number) => {
|
||||
onChange({ ...config, opacity })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 图片水印设置 ── */
|
||||
const handleImageUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
setLocalImageUrl(url)
|
||||
onChange({ ...config, image_url: url })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleImageWidthChange = useCallback(
|
||||
(width: number) => {
|
||||
onChange({ ...config, width })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleImageHeightChange = useCallback(
|
||||
(height: number) => {
|
||||
onChange({ ...config, height })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 文字水印设置 ── */
|
||||
const handleTextChange = useCallback(
|
||||
(text: string) => {
|
||||
onChange({ ...config, text })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleFontSizeChange = useCallback(
|
||||
(font_size: number) => {
|
||||
onChange({ ...config, font_size })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleColorChange = useCallback(
|
||||
(color: string) => {
|
||||
onChange({ ...config, color })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 滚动水印设置 ── */
|
||||
const handleScrollDirectionChange = useCallback(
|
||||
(scroll_direction: ScrollDirection) => {
|
||||
onChange({ ...config, scroll_direction })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
const handleScrollSpeedChange = useCallback(
|
||||
(scroll_speed: number) => {
|
||||
onChange({ ...config, scroll_speed })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 重置 ── */
|
||||
const handleReset = useCallback(() => {
|
||||
setLocalImageUrl("")
|
||||
onChange({ ...DEFAULT_WATERMARK })
|
||||
}, [onChange])
|
||||
|
||||
return {
|
||||
localImageUrl,
|
||||
activeTab: config.type,
|
||||
handleTypeChange,
|
||||
handlePositionChange,
|
||||
handleOpacityChange,
|
||||
handleImageUrlChange,
|
||||
handleImageWidthChange,
|
||||
handleImageHeightChange,
|
||||
handleTextChange,
|
||||
handleFontSizeChange,
|
||||
handleColorChange,
|
||||
handleScrollDirectionChange,
|
||||
handleScrollSpeedChange,
|
||||
handleReset,
|
||||
}
|
||||
}
|
||||
|
||||
export default useWatermarkConfig
|
||||
Reference in New Issue
Block a user