From cc554b25fd69aece2f42dee2850e0d2aa59c2cac Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 28 Jul 2026 14:26:31 +0800
Subject: [PATCH] refactor: extract
 SubtitleModeSwitch/PositionSelector/EffectButtons from SubtitleStylePanel

Extract button group components from the subtitle style panel.
Main file reduces from 190 to 149 lines (-22%).

- SubtitleModeSwitch: manual/ASR mode toggle
- SubtitlePositionSelector: 9-position button grid
- SubtitleEffectButtons: stroke/shadow toggles
---
 .../components/SubtitleStylePanel.tsx         | 72 ++++---------------
 .../subtitle-style/SubtitleEffectButtons.tsx  | 32 +++++++++
 .../subtitle-style/SubtitleModeSwitch.tsx     | 25 +++++++
 .../SubtitlePositionSelector.tsx              | 27 +++++++
 4 files changed, 98 insertions(+), 58 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleEffectButtons.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleModeSwitch.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/subtitle-style/SubtitlePositionSelector.tsx

diff --git a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
old mode 100644
new mode 100755
index 017566089..18511651d
--- a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
+++ b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx
@@ -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} />
         </>
       )}
diff --git a/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleEffectButtons.tsx b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleEffectButtons.tsx
new file mode 100755
index 000000000..d12d94991
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleEffectButtons.tsx
@@ -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>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleModeSwitch.tsx b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleModeSwitch.tsx
new file mode 100755
index 000000000..a1c5a9bd4
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitleModeSwitch.tsx
@@ -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>
+  )
+}
diff --git a/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitlePositionSelector.tsx b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitlePositionSelector.tsx
new file mode 100755
index 000000000..38a07c11b
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/subtitle-style/SubtitlePositionSelector.tsx
@@ -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>
+  )
+}