refactor(PipConfigPanel): 目录化主组件

2026-07-30 09:10:16 +08:00
parent f92bfcfec6
commit f46cf18ae1
1 changed files with 106 additions and 0 deletions
@@ -0,0 +1,106 @@
+/**
+ * 混剪配置面板 — Drawer 形式
+ * 左侧图层列表 + 右侧单图层配置 + 迷你预览区
+ */
+import React from "react"
+import { Drawer, Switch } from "antd"
+import type { PipConfig } from "../types"
+
+import { usePipConfigPanel } from "./hooks/usePipConfigPanel"
+import { LayerList } from "./components/LayerList"
+import { PipPreview } from "./components/PipPreview"
+import { LayerConfig } from "./components/LayerConfig"
+
+export 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,
+  } = usePipConfigPanel({ 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">
+          <button className="pip-add-btn" onClick={handleAddLayer}>
+            + 添加图层
+          </button>
+        </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}
+          onDelete={handleDeleteLayer}
+        />
+
+        {/* 右侧配置区 */}
+        {!selectedLayer ? (
+          <div className="pip-config-area">
+            <div className="pip-config-empty">选择或添加图层以配置</div>
+          </div>
+        ) : (
+          <>
+            <PipPreview layers={config.layers} selectedId={selectedId} />
+            <LayerConfig
+              layer={selectedLayer}
+              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
+export type { PipConfigPanelProps }