From 1fd22329a8280a1ab03411cad33455a8d5adbc2d Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 28 Jul 2026 14:19:37 +0800
Subject: [PATCH] refactor: split GreenScreenPanel into green-screen
 sub-components

Extract color presets, custom color picker, parameter sliders, and
preview into separate components. Main file reduces from 200 to 94 lines (-53%).

- GreenScreenPresets: 5 color preset buttons
- GreenScreenCustomColor: color picker + hex input + swatch
- GreenScreenSliders: similarity / blend / spill sliders (with SliderRow)
- GreenScreenPreview: visual effect preview
---
 .../components/GreenScreenPanel.tsx           | 151 +++---------------
 .../green-screen/GreenScreenCustomColor.tsx   |  37 +++++
 .../green-screen/GreenScreenPresets.tsx       |  36 +++++
 .../green-screen/GreenScreenPreview.tsx       |  28 ++++
 .../green-screen/GreenScreenSliders.tsx       |  68 ++++++++
 5 files changed, 190 insertions(+), 130 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/green-screen/GreenScreenCustomColor.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPresets.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPreview.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/green-screen/GreenScreenSliders.tsx

diff --git a/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx b/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx
old mode 100644
new mode 100755
index ffab70927..25caa2d83
--- a/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx
@@ -1,15 +1,11 @@
-/**
- * 绿幕抠像配置面板
- * 5 种颜色预设 + 自定义颜色 + 相似度/边缘平滑/溢色抑制
- */
 import React, { useCallback } from "react"
 import { Drawer, Switch } from "antd"
 import type { ChromaKeyConfig, ChromaKeyColorPreset } from "../types"
-import {
-  DEFAULT_CHROMA_KEY_CONFIG,
-  CHROMA_KEY_PRESET_LABELS,
-  CHROMA_KEY_PRESET_COLORS,
-} from "../types"
+import { DEFAULT_CHROMA_KEY_CONFIG, CHROMA_KEY_PRESET_COLORS } from "../types"
+import { GreenScreenPresets } from "./green-screen/GreenScreenPresets"
+import { GreenScreenCustomColor } from "./green-screen/GreenScreenCustomColor"
+import { GreenScreenSliders } from "./green-screen/GreenScreenSliders"
+import { GreenScreenPreview } from "./green-screen/GreenScreenPreview"
 
 interface GreenScreenPanelProps {
   open: boolean
@@ -18,9 +14,6 @@ interface GreenScreenPanelProps {
   onChange: (config: ChromaKeyConfig) => void
 }
 
-/** 预设列表 */
-const PRESET_LIST: ChromaKeyColorPreset[] = ["green", "blue", "red", "pure_green", "soft_green"]
-
 const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, config, onChange }) => {
   const update = useCallback(
     (partial: Partial<ChromaKeyConfig>) => {
@@ -33,7 +26,6 @@ const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, conf
     onChange({ ...DEFAULT_CHROMA_KEY_CONFIG, enabled: config.enabled })
   }, [config.enabled, onChange])
 
-  /** 选择颜色预设时同步更新 color 字段 */
   const handlePresetSelect = useCallback(
     (preset: ChromaKeyColorPreset) => {
       update({
@@ -44,10 +36,9 @@ const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, conf
     [update],
   )
 
-  /** 自定义颜色变化时清除预设标记 */
   const handleColorChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      update({ color: e.target.value })
+    (color: string) => {
+      update({ color })
     },
     [update],
   )
@@ -61,7 +52,6 @@ const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, conf
       onClose={onClose}
       className="green-screen-panel-drawer"
     >
-      {/* 顶部开关 */}
       <div className="green-header">
         <span className="green-header-label">启用绿幕抠像</span>
         <Switch
@@ -71,123 +61,24 @@ const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, conf
         />
       </div>
 
-      {/* 颜色预设 */}
-      <div className="green-section">
-        <div className="green-section-title">颜色预设</div>
-        <div className="green-presets">
-          {PRESET_LIST.map((p) => (
-            <button
-              key={p}
-              className={`green-preset-btn${config.color_preset === p ? " active" : ""}`}
-              onClick={() => handlePresetSelect(p)}
-            >
-              <span
-                className="green-preset-dot"
-                style={{ background: CHROMA_KEY_PRESET_COLORS[p] }}
-              />
-              <span className="green-preset-label">{CHROMA_KEY_PRESET_LABELS[p]}</span>
-            </button>
-          ))}
-        </div>
-      </div>
+      <GreenScreenPresets
+        selectedPreset={config.color_preset}
+        onPresetSelect={handlePresetSelect}
+      />
 
-      {/* 自定义颜色 */}
-      <div className="green-section">
-        <div className="green-section-title">自定义颜色</div>
-        <div className="green-color-row">
-          <input
-            type="color"
-            className="green-color-picker"
-            value={config.color}
-            onChange={handleColorChange}
-          />
-          <input
-            type="text"
-            className="green-color-hex"
-            value={config.color}
-            onChange={handleColorChange}
-            placeholder="#00FF00"
-          />
-          <div className="green-color-swatch" style={{ background: config.color }} />
-        </div>
-      </div>
+      <GreenScreenCustomColor color={config.color} onColorChange={handleColorChange} />
 
-      {/* 参数调节 */}
-      <div className="green-section">
-        <div className="green-section-title">参数调节</div>
+      <GreenScreenSliders
+        similarity={config.similarity}
+        blend={config.blend}
+        spill={config.spill}
+        onSimilarityChange={(v) => update({ similarity: v })}
+        onBlendChange={(v) => update({ blend: v })}
+        onSpillChange={(v) => update({ spill: v })}
+      />
 
-        {/* 相似度 */}
-        <div className="green-slider-row">
-          <div className="green-slider-header">
-            <span className="green-slider-label">相似度</span>
-            <span className="green-slider-value">{config.similarity}%</span>
-          </div>
-          <input
-            type="range"
-            className="green-slider"
-            min={0}
-            max={100}
-            value={config.similarity}
-            onChange={(e) => update({ similarity: Number(e.target.value) })}
-          />
-          <div className="green-slider-desc">越大容忍的色差范围越广</div>
-        </div>
+      <GreenScreenPreview color={config.color} blend={config.blend} />
 
-        {/* 边缘平滑 */}
-        <div className="green-slider-row">
-          <div className="green-slider-header">
-            <span className="green-slider-label">边缘平滑</span>
-            <span className="green-slider-value">{config.blend}%</span>
-          </div>
-          <input
-            type="range"
-            className="green-slider"
-            min={0}
-            max={100}
-            value={config.blend}
-            onChange={(e) => update({ blend: Number(e.target.value) })}
-          />
-          <div className="green-slider-desc">越大边缘越柔和自然</div>
-        </div>
-
-        {/* 溢色抑制 */}
-        <div className="green-slider-row">
-          <div className="green-slider-header">
-            <span className="green-slider-label">溢色抑制</span>
-            <span className="green-slider-value">{config.spill}%</span>
-          </div>
-          <input
-            type="range"
-            className="green-slider"
-            min={0}
-            max={100}
-            value={config.spill}
-            onChange={(e) => update({ spill: Number(e.target.value) })}
-          />
-          <div className="green-slider-desc">去除边缘颜色溢出</div>
-        </div>
-      </div>
-
-      {/* 预览 */}
-      <div className="green-section">
-        <div className="green-section-title">效果预览</div>
-        <div className="green-preview-box">
-          <div className="green-preview-bg" style={{ background: config.color, opacity: 0.3 }} />
-          <div className="green-preview-subject">
-            <div className="green-preview-circle" />
-            <div className="green-preview-text">主体</div>
-          </div>
-          <div
-            className="green-preview-edge"
-            style={{
-              borderColor: config.color,
-              filter: `blur(${config.blend / 10}px)`,
-            }}
-          />
-        </div>
-      </div>
-
-      {/* 底部重置 */}
       <div className="green-footer">
         <button className="green-reset-btn" onClick={handleReset}>
           重置参数
diff --git a/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenCustomColor.tsx b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenCustomColor.tsx
new file mode 100755
index 000000000..286ca8139
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenCustomColor.tsx
@@ -0,0 +1,37 @@
+import React from "react"
+
+interface GreenScreenCustomColorProps {
+  color: string
+  onColorChange: (color: string) => void
+}
+
+export const GreenScreenCustomColor: React.FC<GreenScreenCustomColorProps> = ({
+  color,
+  onColorChange,
+}) => {
+  const handleColorInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onColorChange(e.target.value)
+  }
+
+  return (
+    <div className="green-section">
+      <div className="green-section-title">自定义颜色</div>
+      <div className="green-color-row">
+        <input
+          type="color"
+          className="green-color-picker"
+          value={color}
+          onChange={handleColorInput}
+        />
+        <input
+          type="text"
+          className="green-color-hex"
+          value={color}
+          onChange={handleColorInput}
+          placeholder="#00FF00"
+        />
+        <div className="green-color-swatch" style={{ background: color }} />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPresets.tsx b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPresets.tsx
new file mode 100755
index 000000000..ca0696aee
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPresets.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import type { ChromaKeyColorPreset } from "../../types"
+import { CHROMA_KEY_PRESET_LABELS, CHROMA_KEY_PRESET_COLORS } from "../../types"
+
+interface GreenScreenPresetsProps {
+  selectedPreset: ChromaKeyColorPreset | null
+  onPresetSelect: (preset: ChromaKeyColorPreset) => void
+}
+
+const PRESET_LIST: ChromaKeyColorPreset[] = ["green", "blue", "red", "pure_green", "soft_green"]
+
+export const GreenScreenPresets: React.FC<GreenScreenPresetsProps> = ({
+  selectedPreset,
+  onPresetSelect,
+}) => {
+  return (
+    <div className="green-section">
+      <div className="green-section-title">颜色预设</div>
+      <div className="green-presets">
+        {PRESET_LIST.map((p) => (
+          <button
+            key={p}
+            className={`green-preset-btn${selectedPreset === p ? " active" : ""}`}
+            onClick={() => onPresetSelect(p)}
+          >
+            <span
+              className="green-preset-dot"
+              style={{ background: CHROMA_KEY_PRESET_COLORS[p] }}
+            />
+            <span className="green-preset-label">{CHROMA_KEY_PRESET_LABELS[p]}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPreview.tsx b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPreview.tsx
new file mode 100755
index 000000000..05d0c72f6
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPreview.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+interface GreenScreenPreviewProps {
+  color: string
+  blend: number
+}
+
+export const GreenScreenPreview: React.FC<GreenScreenPreviewProps> = ({ color, blend }) => {
+  return (
+    <div className="green-section">
+      <div className="green-section-title">效果预览</div>
+      <div className="green-preview-box">
+        <div className="green-preview-bg" style={{ background: color, opacity: 0.3 }} />
+        <div className="green-preview-subject">
+          <div className="green-preview-circle" />
+          <div className="green-preview-text">主体</div>
+        </div>
+        <div
+          className="green-preview-edge"
+          style={{
+            borderColor: color,
+            filter: `blur(${blend / 10}px)`,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenSliders.tsx b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenSliders.tsx
new file mode 100755
index 000000000..044776f2a
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/green-screen/GreenScreenSliders.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+
+interface SliderConfig {
+  label: string
+  value: number
+  description: string
+  onChange: (value: number) => void
+}
+
+interface GreenScreenSlidersProps {
+  similarity: number
+  blend: number
+  spill: number
+  onSimilarityChange: (value: number) => void
+  onBlendChange: (value: number) => void
+  onSpillChange: (value: number) => void
+}
+
+const SliderRow: React.FC<SliderConfig> = ({ label, value, description, onChange }) => (
+  <div className="green-slider-row">
+    <div className="green-slider-header">
+      <span className="green-slider-label">{label}</span>
+      <span className="green-slider-value">{value}%</span>
+    </div>
+    <input
+      type="range"
+      className="green-slider"
+      min={0}
+      max={100}
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+    />
+    <div className="green-slider-desc">{description}</div>
+  </div>
+)
+
+export const GreenScreenSliders: React.FC<GreenScreenSlidersProps> = ({
+  similarity,
+  blend,
+  spill,
+  onSimilarityChange,
+  onBlendChange,
+  onSpillChange,
+}) => {
+  return (
+    <div className="green-section">
+      <div className="green-section-title">参数调节</div>
+      <SliderRow
+        label="相似度"
+        value={similarity}
+        description="越大容忍的色差范围越广"
+        onChange={onSimilarityChange}
+      />
+      <SliderRow
+        label="边缘平滑"
+        value={blend}
+        description="越大边缘越柔和自然"
+        onChange={onBlendChange}
+      />
+      <SliderRow
+        label="溢色抑制"
+        value={spill}
+        description="去除边缘颜色溢出"
+        onChange={onSpillChange}
+      />
+    </div>
+  )
+}
-- 
2.54.0