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

/**
 * 混剪配置面板 — Drawer 形式
 * 左侧图层列表 + 右侧单图层配置 + 迷你预览区
 */
import React from "react"
import { Drawer, Switch } from "antd"
import type { PipConfig } from "@/pages/editing-planner/types"
import LayerList from "./pip-config/LayerList"
import LayerConfig from "./pip-config/LayerConfig"
import { usePipLayers } from "@/pages/editing-planner/hooks/usePipLayers"

interface PipConfigPanelProps {
  open: boolean
  onClose: () => void
  config: PipConfig
  onChange: (config: PipConfig) => void
  totalDuration: number
}

const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
  open,
  onClose,
  config,
  onChange,
  totalDuration,
}) => {
  const {
    selectedId,
    setSelectedId,
    selectedLayer,
    handleAddLayer,
    handleDeleteLayer,
    updateLayer,
    handleEnableToggle,
    handleReset,
    handleGridClick,
    handleWidthChange,
    handleHeightChange,
  } = usePipLayers({ config, onChange })

  return (
    <Drawer
      title="🖼️ 混剪设置"
      placement="right"
      width={520}
      open={open}
      onClose={onClose}
      className="pip-config-panel-drawer"
    >
      {/* ═══ 顶部工具栏 ═══ */}
      <div className="pip-toolbar">
        <div className="pip-toolbar-left">
          <span style={{ fontSize: 13, color: "#666" }}>共 {config.layers.length} 个图层</span>
        </div>
        <div className="pip-enable-switch">
          <span>启用</span>
          <Switch size="small" checked={config.enabled} onChange={handleEnableToggle} />
        </div>
      </div>

      {/* ═══ 主体：图层列表 + 配置区 ═══ */}
      <div className="pip-body">
        <LayerList
          layers={config.layers}
          selectedId={selectedId}
          onSelect={setSelectedId}
          onAdd={handleAddLayer}
          onDelete={handleDeleteLayer}
        />
        <LayerConfig
          layer={selectedLayer}
          layers={config.layers}
          totalDuration={totalDuration}
          onUpdate={updateLayer}
          onGridClick={handleGridClick}
          onWidthChange={handleWidthChange}
          onHeightChange={handleHeightChange}
        />
      </div>

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

export default PipConfigPanel