@@ -1,101 +0,0 @@
|
||||
/**
|
||||
* 片头片尾配置面板 — Drawer 形式
|
||||
* 两个区块:片头(Intro)/ 片尾(Outro)
|
||||
* 每个区块支持:类型选择(无/视频/图片)、素材 URL、时长、过渡动画
|
||||
*/
|
||||
import React, { useCallback } from "react"
|
||||
import { Drawer } from "antd"
|
||||
import type {
|
||||
IntroOutroConfig,
|
||||
IntroOutroItem,
|
||||
IntroOutroKind,
|
||||
} from "@/pages/editing-planner/types"
|
||||
import { DEFAULT_INTRO_OUTRO } from "@/pages/editing-planner/types"
|
||||
import IntroOutroBlock from "./intro-outro/IntroOutroBlock"
|
||||
|
||||
interface IntroOutroPanelProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
config: IntroOutroConfig
|
||||
onChange: (config: IntroOutroConfig) => void
|
||||
}
|
||||
|
||||
const IntroOutroPanel: React.FC<IntroOutroPanelProps> = ({ open, onClose, config, onChange }) => {
|
||||
/* ── 更新片头 ── */
|
||||
const handleIntroChange = useCallback(
|
||||
(partial: Partial<IntroOutroItem>) => {
|
||||
onChange({ ...config, intro: { ...config.intro, ...partial } })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 更新片尾 ── */
|
||||
const handleOutroChange = useCallback(
|
||||
(partial: Partial<IntroOutroItem>) => {
|
||||
onChange({ ...config, outro: { ...config.outro, ...partial } })
|
||||
},
|
||||
[config, onChange],
|
||||
)
|
||||
|
||||
/* ── 切换片头类型 ── */
|
||||
const handleIntroKindChange = useCallback(
|
||||
(kind: IntroOutroKind) => {
|
||||
handleIntroChange({ kind, url: kind === "none" ? undefined : "" })
|
||||
},
|
||||
[handleIntroChange],
|
||||
)
|
||||
|
||||
/* ── 切换片尾类型 ── */
|
||||
const handleOutroKindChange = useCallback(
|
||||
(kind: IntroOutroKind) => {
|
||||
handleOutroChange({ kind, url: kind === "none" ? undefined : "" })
|
||||
},
|
||||
[handleOutroChange],
|
||||
)
|
||||
|
||||
/* ── 重置 ── */
|
||||
const handleReset = useCallback(() => {
|
||||
onChange({ ...DEFAULT_INTRO_OUTRO })
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title="🎬 片头片尾设置"
|
||||
placement="right"
|
||||
width={420}
|
||||
styles={{ wrapper: { maxWidth: "100vw" } }}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
className="intro-outro-panel-drawer"
|
||||
>
|
||||
{/* ═══ 片头区块 ═══ */}
|
||||
<IntroOutroBlock
|
||||
title="片头"
|
||||
icon="🎞️"
|
||||
item={config.intro}
|
||||
transitionLabel="进入过渡动画"
|
||||
onKindChange={handleIntroKindChange}
|
||||
onChange={handleIntroChange}
|
||||
/>
|
||||
|
||||
{/* ═══ 片尾区块 ═══ */}
|
||||
<IntroOutroBlock
|
||||
title="片尾"
|
||||
icon="🏁"
|
||||
item={config.outro}
|
||||
transitionLabel="退出过渡动画"
|
||||
onKindChange={handleOutroKindChange}
|
||||
onChange={handleOutroChange}
|
||||
/>
|
||||
|
||||
{/* ── 底部操作 ── */}
|
||||
<div className="iop-footer">
|
||||
<button className="iop-reset-btn" onClick={handleReset}>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export default IntroOutroPanel
|
||||
Reference in New Issue
Block a user