From 194eab7296c68120751bf3c00259e4ff77e6dcc8 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 09:15:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor(TtsPanel):=20=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E9=9F=B3=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TtsPanel/components/VoiceSelector.tsx     | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 apps/web/src/pages/editing-planner/components/TtsPanel/components/VoiceSelector.tsx

diff --git a/apps/web/src/pages/editing-planner/components/TtsPanel/components/VoiceSelector.tsx b/apps/web/src/pages/editing-planner/components/TtsPanel/components/VoiceSelector.tsx
new file mode 100644
index 000000000..651c50d40
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/TtsPanel/components/VoiceSelector.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import type { TTSVoice } from "@/api/tts"
+import { VOICE_CATEGORY_MAP } from "../constants"
+
+export interface VoiceSelectorProps {
+  voices: TTSVoice[]
+  selectedVoiceId: string
+  loading: boolean
+  onSelect: (voiceId: string) => void
+}
+
+export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
+  voices,
+  selectedVoiceId,
+  loading,
+  onSelect,
+}) => {
+  const voiceCategories = Object.entries(VOICE_CATEGORY_MAP)
+
+  return (
+    <div className="tts-voice-section">
+      <div className="tts-voice-label">
+        选择音色
+        {loading && <span className="tts-voice-loading">加载中...</span>}
+      </div>
+      <div className="tts-voice-grid">
+        {voiceCategories.map(([cat, info]) => {
+          const voice = voices.find((v) => v.category === cat)
+          const isSelected = voice && selectedVoiceId === voice.id
+          return (
+            <button
+              key={cat}
+              className={`tts-voice-card${isSelected ? " active" : ""}`}
+              onClick={() => voice && onSelect(voice.id)}
+              disabled={!voice || loading}
+            >
+              <span className="tts-voice-card-icon">{info.icon}</span>
+              <span className="tts-voice-card-name">{voice?.name || info.label}</span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}