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>
+  )
+}