xiaoxia-saas/apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx

/**
 * 片头片尾配置面板 — Drawer 形式
 * 两个区块：片头（Intro）/ 片尾（Outro）
 * 每个区块支持：类型选择（无/视频/图片）、素材 URL、时长、过渡动画
 */
import React, { useCallback } from "react"
import { Drawer } from "antd"
import type { IntroOutroConfig, IntroOutroItem, IntroOutroKind, TransitionType } from "../types"
import { DEFAULT_INTRO_OUTRO } from "../types"
import { TRANSITION_OPTIONS } from "@/api/editPlans"

/* ──────────── 常量 ──────────── */

const KIND_OPTIONS: { value: IntroOutroKind; label: string; icon: string }[] = [
  { value: "none", label: "无", icon: "🚫" },
  { value: "video", label: "视频", icon: "🎬" },
  { value: "image", label: "图片", icon: "🖼️" },
]

/* ──────────── Props ──────────── */
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}
      open={open}
      onClose={onClose}
      className="intro-outro-panel-drawer"
    >
      {/* ═══ 片头区块 ═══ */}
      <div className="iop-block">
        <div className="iop-block-header">
          <span className="iop-block-icon">🎞️</span>
          <span className="iop-block-title">片头</span>
        </div>

        {/* 类型选择 */}
        <div className="iop-kind-row">
          {KIND_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              className={`iop-kind-btn${config.intro.kind === opt.value ? " active" : ""}`}
              onClick={() => handleIntroKindChange(opt.value)}
            >
              <span className="iop-kind-icon">{opt.icon}</span>
              <span className="iop-kind-label">{opt.label}</span>
            </button>
          ))}
        </div>

        {/* 视频/图片配置 */}
        {config.intro.kind !== "none" && (
          <>
            <div className="iop-field">
              <label className="iop-field-label">
                {config.intro.kind === "video" ? "视频" : "图片"} URL
              </label>
              <input
                className="iop-input"
                type="text"
                placeholder={
                  config.intro.kind === "video"
                    ? "https://example.com/intro.mp4"
                    : "https://example.com/intro.png"
                }
                value={config.intro.url ?? ""}
                onChange={(e) => handleIntroChange({ url: e.target.value })}
              />
            </div>

            <div className="iop-field">
              <label className="iop-field-label">显示时长</label>
              <div className="iop-slider-row">
                <input
                  className="iop-slider"
                  type="range"
                  min={1}
                  max={15}
                  step={0.5}
                  value={config.intro.duration}
                  onChange={(e) => handleIntroChange({ duration: Number(e.target.value) })}
                />
                <span className="iop-slider-value">{config.intro.duration}s</span>
              </div>
            </div>

            <div className="iop-field">
              <label className="iop-field-label">进入过渡动画</label>
              <select
                className="iop-select"
                value={config.intro.transition ?? "none"}
                onChange={(e) =>
                  handleIntroChange({
                    transition: e.target.value as TransitionType,
                  })
                }
              >
                {TRANSITION_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </div>

            {config.intro.transition && config.intro.transition !== "none" && (
              <div className="iop-field">
                <label className="iop-field-label">过渡时长</label>
                <div className="iop-slider-row">
                  <input
                    className="iop-slider"
                    type="range"
                    min={0.3}
                    max={2.0}
                    step={0.1}
                    value={config.intro.transition_duration ?? 0.5}
                    onChange={(e) =>
                      handleIntroChange({
                        transition_duration: Number(e.target.value),
                      })
                    }
                  />
                  <span className="iop-slider-value">
                    {(config.intro.transition_duration ?? 0.5).toFixed(1)}s
                  </span>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* ═══ 片尾区块 ═══ */}
      <div className="iop-block">
        <div className="iop-block-header">
          <span className="iop-block-icon">🏁</span>
          <span className="iop-block-title">片尾</span>
        </div>

        {/* 类型选择 */}
        <div className="iop-kind-row">
          {KIND_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              className={`iop-kind-btn${config.outro.kind === opt.value ? " active" : ""}`}
              onClick={() => handleOutroKindChange(opt.value)}
            >
              <span className="iop-kind-icon">{opt.icon}</span>
              <span className="iop-kind-label">{opt.label}</span>
            </button>
          ))}
        </div>

        {/* 视频/图片配置 */}
        {config.outro.kind !== "none" && (
          <>
            <div className="iop-field">
              <label className="iop-field-label">
                {config.outro.kind === "video" ? "视频" : "图片"} URL
              </label>
              <input
                className="iop-input"
                type="text"
                placeholder={
                  config.outro.kind === "video"
                    ? "https://example.com/outro.mp4"
                    : "https://example.com/outro.png"
                }
                value={config.outro.url ?? ""}
                onChange={(e) => handleOutroChange({ url: e.target.value })}
              />
            </div>

            <div className="iop-field">
              <label className="iop-field-label">显示时长</label>
              <div className="iop-slider-row">
                <input
                  className="iop-slider"
                  type="range"
                  min={1}
                  max={15}
                  step={0.5}
                  value={config.outro.duration}
                  onChange={(e) => handleOutroChange({ duration: Number(e.target.value) })}
                />
                <span className="iop-slider-value">{config.outro.duration}s</span>
              </div>
            </div>

            <div className="iop-field">
              <label className="iop-field-label">退出过渡动画</label>
              <select
                className="iop-select"
                value={config.outro.transition ?? "none"}
                onChange={(e) =>
                  handleOutroChange({
                    transition: e.target.value as TransitionType,
                  })
                }
              >
                {TRANSITION_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </div>

            {config.outro.transition && config.outro.transition !== "none" && (
              <div className="iop-field">
                <label className="iop-field-label">过渡时长</label>
                <div className="iop-slider-row">
                  <input
                    className="iop-slider"
                    type="range"
                    min={0.3}
                    max={2.0}
                    step={0.1}
                    value={config.outro.transition_duration ?? 0.5}
                    onChange={(e) =>
                      handleOutroChange({
                        transition_duration: Number(e.target.value),
                      })
                    }
                  />
                  <span className="iop-slider-value">
                    {(config.outro.transition_duration ?? 0.5).toFixed(1)}s
                  </span>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* ── 底部操作 ── */}
      <div className="iop-footer">
        <button className="iop-reset-btn" onClick={handleReset}>
          重置
        </button>
      </div>
    </Drawer>
  )
}

export default IntroOutroPanel