refactor(editing-planner): 拆分 SubtitleStylePanel 为子组件（190→146行, -23%） (#1139)

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com> Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>
2026-07-29 17:30:42 +08:00
parent 6dc388a794
commit faeed6f014
5 changed files with 101 additions and 58 deletions
@@ -1,18 +1,16 @@
-/**
- * 字幕样式配置面板 — Drawer 形式
- * 字幕开关（手动 / ASR 自动识别）、字体大小、颜色、描边/阴影、位置、ASR 语言
- */
 import React from "react"
 import { Drawer, Slider, ColorPicker, Select } from "antd"
 import type { Color } from "antd/es/color-picker"
 import type { SubtitleStyleConfig } from "@/pages/editing-planner/types/subtitle"
 import {
-  POSITION_OPTIONS,
  FONT_OPTIONS,
  ANIMATION_OPTIONS,
  ASR_LANGUAGE_OPTIONS,
 } from "@/pages/editing-planner/constants/subtitleStyle"
 import SubtitlePreview from "./subtitle-style/SubtitlePreview"
+import { SubtitleModeSwitch } from "./subtitle-style/SubtitleModeSwitch"
+import { SubtitlePositionSelector } from "./subtitle-style/SubtitlePositionSelector"
+import { SubtitleEffectButtons } from "./subtitle-style/SubtitleEffectButtons"

 interface SubtitleStylePanelProps {
  open: boolean
@@ -40,7 +38,6 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
      onClose={onClose}
      className="subtitle-style-drawer"
    >
-      {/* ── 字幕开关 ── */}
      <div className="sub-field">
        <div className="sub-toggle-row">
          <span className="sub-label">启用字幕</span>
@@ -55,26 +52,11 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({

      {config.enabled && (
        <>
-          {/* ── 模式切换 ── */}
          <div className="sub-field">
            <label className="sub-label">字幕来源</label>
-            <div className="sub-mode-switch">
-              <button
-                className={`sub-mode-btn${config.mode === "manual" ? " active" : ""}`}
-                onClick={() => update({ mode: "manual" })}
-              >
-                ✏️ 手动输入
-              </button>
-              <button
-                className={`sub-mode-btn${config.mode === "asr" ? " active" : ""}`}
-                onClick={() => update({ mode: "asr" })}
-              >
-                🤖 ASR 识别
-              </button>
-            </div>
+            <SubtitleModeSwitch mode={config.mode} onModeChange={(mode) => update({ mode })} />
          </div>

-          {/* ── ASR 语言（仅 ASR 模式） ── */}
          {config.mode === "asr" && (
            <div className="sub-field">
              <label className="sub-label">识别语言</label>
@@ -88,7 +70,6 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
            </div>
          )}

-          {/* ── 字体大小 ── */}
          <div className="sub-field">
            <label className="sub-label">
              字体大小 <span className="sub-value">{config.fontSize}px</span>
@@ -101,7 +82,6 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
            />
          </div>

-          {/* ── 字体颜色 ── */}
          <div className="sub-field">
            <label className="sub-label">字体颜色</label>
            <div className="sub-color-row">
@@ -113,7 +93,6 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
            </div>
          </div>

-          {/* ── 字体 ── */}
          <div className="sub-field">
            <label className="sub-label">字体</label>
            <Select
@@ -125,46 +104,24 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
            />
          </div>

-          {/* ── 字幕位置 ── */}
          <div className="sub-field">
            <label className="sub-label">位置</label>
-            <div className="sub-position-group">
-              {POSITION_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  className={`sub-position-btn${config.position === opt.value ? " active" : ""}`}
-                  onClick={() =>
-                    update({
-                      position: opt.value as SubtitleStyleConfig["position"],
-                    })
-                  }
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
+            <SubtitlePositionSelector
+              position={config.position}
+              onPositionChange={(position) => update({ position })}
+            />
          </div>

-          {/* ── 描边 / 阴影 ── */}
          <div className="sub-field">
            <label className="sub-label">效果</label>
-            <div className="sub-effect-btns">
-              <button
-                className={`sub-effect-btn${config.stroke ? " active" : ""}`}
-                onClick={() => update({ stroke: !config.stroke })}
-              >
-                S 描边
-              </button>
-              <button
-                className={`sub-effect-btn${config.shadow ? " active" : ""}`}
-                onClick={() => update({ shadow: !config.shadow })}
-              >
-                ☁ 阴影
-              </button>
-            </div>
+            <SubtitleEffectButtons
+              stroke={config.stroke}
+              shadow={config.shadow}
+              onStrokeChange={(stroke) => update({ stroke })}
+              onShadowChange={(shadow) => update({ shadow })}
+            />
          </div>

-          {/* ── 动画 ── */}
          <div className="sub-field">
            <label className="sub-label">动画效果</label>
            <Select
@@ -179,7 +136,6 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
            />
          </div>

-          {/* ── 预览 ── */}
          <SubtitlePreview config={config} />
        </>
      )}
@@ -0,0 +1,32 @@
+import React from "react"
+
+interface SubtitleEffectButtonsProps {
+  stroke: boolean
+  shadow: boolean
+  onStrokeChange: (enabled: boolean) => void
+  onShadowChange: (enabled: boolean) => void
+}
+
+export const SubtitleEffectButtons: React.FC<SubtitleEffectButtonsProps> = ({
+  stroke,
+  shadow,
+  onStrokeChange,
+  onShadowChange,
+}) => {
+  return (
+    <div className="sub-effect-btns">
+      <button
+        className={`sub-effect-btn${stroke ? " active" : ""}`}
+        onClick={() => onStrokeChange(!stroke)}
+      >
+        S 描边
+      </button>
+      <button
+        className={`sub-effect-btn${shadow ? " active" : ""}`}
+        onClick={() => onShadowChange(!shadow)}
+      >
+        ☁ 阴影
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,25 @@
+import React from "react"
+
+interface SubtitleModeSwitchProps {
+  mode: "manual" | "asr"
+  onModeChange: (mode: "manual" | "asr") => void
+}
+
+export const SubtitleModeSwitch: React.FC<SubtitleModeSwitchProps> = ({ mode, onModeChange }) => {
+  return (
+    <div className="sub-mode-switch">
+      <button
+        className={`sub-mode-btn${mode === "manual" ? " active" : ""}`}
+        onClick={() => onModeChange("manual")}
+      >
+        ✏️ 手动输入
+      </button>
+      <button
+        className={`sub-mode-btn${mode === "asr" ? " active" : ""}`}
+        onClick={() => onModeChange("asr")}
+      >
+        🤖 ASR 识别
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,27 @@
+import React from "react"
+import type { SubtitleStyleConfig } from "@/pages/editing-planner/types/subtitle"
+import { POSITION_OPTIONS } from "@/pages/editing-planner/constants/subtitleStyle"
+
+interface SubtitlePositionSelectorProps {
+  position: SubtitleStyleConfig["position"]
+  onPositionChange: (position: SubtitleStyleConfig["position"]) => void
+}
+
+export const SubtitlePositionSelector: React.FC<SubtitlePositionSelectorProps> = ({
+  position,
+  onPositionChange,
+}) => {
+  return (
+    <div className="sub-position-group">
+      {POSITION_OPTIONS.map((opt) => (
+        <button
+          key={opt.value}
+          className={`sub-position-btn${position === opt.value ? " active" : ""}`}
+          onClick={() => onPositionChange(opt.value as SubtitleStyleConfig["position"])}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  )
+}
@@ -65,6 +65,9 @@ import "@/pages/editing-planner/components/filter/FilterPresetGrid"
 import "@/pages/editing-planner/components/filter/FilterManualAdjust"
 import "@/pages/editing-planner/components/intro-outro/IntroOutroBlock"
 import "@/pages/editing-planner/components/subtitle-style/SubtitlePreview"
+import "@/pages/editing-planner/components/subtitle-style/SubtitleModeSwitch"
+import "@/pages/editing-planner/components/subtitle-style/SubtitlePositionSelector"
+import "@/pages/editing-planner/components/subtitle-style/SubtitleEffectButtons"
 import "@/pages/editing-planner/components/tts/VoiceSelector"
 import "@/pages/editing-planner/components/tts/TtsSlider"
 import "@/pages/editing-planner/components/watermark/WatermarkTypeTabs"