style: prettier format publicRoutes.tsx

- Extract ProtectedRoute + HomeRoute to separate files
- Extract public routes (auth + home) to publicRoutes.tsx
- Extract protected /app routes to appRoutes.tsx
- Main index reduced from 289 to 19 lines (-93%)
- Keep router export and import path unchanged

apps/web/src/pages/voices/VoiceLibrary.tsx

@@ -1,39 +1,47 @@
 /**
  * 配音库页面 — V21 设计系统
  *
- * 主组件仅保留 Hook 组装与整体布局
- * 数据查询 → hooks/useVoicesData
- * 播放控制 → hooks/useAudioPlayer
- * 克隆操作 → hooks/useCloneOperations
- * TTS 合成 → hooks/useTtsSynthesize
- * 上传音频 → hooks/useVoiceUpload
- * Tab 切换 → components/VoiceTabBar
- * 预置音色 → components/PresetVoiceTab
- * 克隆音色 → components/ClonedVoiceTab
- * 配音素材 → components/MaterialVoiceTab
- * 弹窗集合 → components/VoiceModals
- * Toast 提示 → components/VoiceToasts
+ * Phase 3: 逻辑抽离为 Hooks
+ * - useVoicesData: 三 Tab 数据查询 + 筛选
+ * - useAudioPlayer: 播放控制
+ * - useCloneOperations: 克隆音色删除/重试/详情
+ * - useTtsSynthesize: AI 配音合成
+ * - useVoiceUpload: 上传音频
  */
 import React, { useCallback, useState } from "react"
-import { UploadOutlined, AudioOutlined, RobotOutlined } from "@ant-design/icons"
+import {
+  SoundOutlined,
+  PlusOutlined,
+  RobotOutlined,
+  UploadOutlined,
+  AudioOutlined,
+  UserOutlined,
+} from "@ant-design/icons"
 import { Button } from "@/components/ui"
 import PageHead from "@/components/layout/PageHead"
 import { type AssetItem } from "@/api/assets"
-import VoiceTabBar from "./components/VoiceTabBar"
-import type { VoiceTabKey } from "./components/VoiceTabBar"
-import PresetVoiceTab from "./components/PresetVoiceTab"
-import ClonedVoiceTab from "./components/ClonedVoiceTab"
-import MaterialVoiceTab from "./components/MaterialVoiceTab"
-import VoiceModals from "./components/VoiceModals"
-import VoiceToasts from "./components/VoiceToasts"
-import type { Toast } from "./components/VoiceToasts"
-import { useVoicesData } from "./hooks/useVoicesData"
-import { useAudioPlayer } from "./hooks/useAudioPlayer"
-import { useCloneOperations } from "./hooks/useCloneOperations"
-import { useTtsSynthesize } from "./hooks/useTtsSynthesize"
-import { useVoiceUpload } from "./hooks/useVoiceUpload"
+import { genderLabel, languageLabel } from "@/pages/voices/utils/format"
+import CloneModal from "@/components/voice/CloneModal"
+import VoiceCard from "@/pages/voices/components/VoiceCard"
+import CloneVoiceCard from "@/pages/voices/components/CloneVoiceCard"
+import CloneDetailModal from "@/pages/voices/components/CloneDetailModal"
+import CloneCardSkeleton from "@/pages/voices/components/CloneCardSkeleton"
+import UploadVoiceModal from "@/pages/voices/components/UploadVoiceModal"
+import TtsModal from "@/pages/voices/components/TtsModal"
+import VoiceFilterBar from "@/pages/voices/components/VoiceFilterBar"
+import { useVoicesData } from "@/pages/voices/hooks/useVoicesData"
+import { useAudioPlayer } from "@/pages/voices/hooks/useAudioPlayer"
+import { useCloneOperations } from "@/pages/voices/hooks/useCloneOperations"
+import { useTtsSynthesize } from "@/pages/voices/hooks/useTtsSynthesize"
+import { useVoiceUpload } from "@/pages/voices/hooks/useVoiceUpload"
 import "./voices.css"
 
+interface Toast {
+  id: number
+  message: string
+  type: "success" | "error"
+}
+
 let toastIdSeq = 0
 
 const VoiceLibrary: React.FC = () => {
@@ -130,9 +138,17 @@ const VoiceLibrary: React.FC = () => {
     handleUploadClose,
   } = useVoiceUpload({ showToast })
 
+  // ── 克隆音色播放切换 ──────────────────────────────────
+  const handleClonePlayPause = useCallback(
+    (voiceId: string, duration: number) => {
+      handleTogglePlay(voiceId, duration)
+    },
+    [handleTogglePlay],
+  )
+
   // ── 切换 Tab 时停止播放 ───────────────────────────────
   const handleTabChange = useCallback(
-    (tab: VoiceTabKey) => {
+    (tab: typeof activeTab) => {
       setActiveTab(tab)
       stopPlayback()
     },
@@ -184,85 +200,254 @@ const VoiceLibrary: React.FC = () => {
         actions={pageActions}
       />
 
-      {/* ── Tab 切换栏 ────────────────────────────────── */}
-      <VoiceTabBar
-        activeTab={activeTab as VoiceTabKey}
-        presetCount={presetCount}
-        cloneCount={cloneCount}
-        materialCount={materialCount}
-        onTabChange={handleTabChange}
-      />
+      {/* ── Tabs ──────────────────────────────────────── */}
+      <div className="xx-voices-tabs">
+        <button
+          className={`xx-voices-tab${activeTab === "preset" ? " active" : ""}`}
+          onClick={() => handleTabChange("preset")}
+        >
+          <AudioOutlined />
+          预置音色
+          <span className="xx-voices-tab-count">{presetCount}</span>
+        </button>
+        <button
+          className={`xx-voices-tab${activeTab === "cloned" ? " active" : ""}`}
+          onClick={() => handleTabChange("cloned")}
+        >
+          <UserOutlined />
+          我的克隆
+          <span className="xx-voices-tab-count">{cloneCount}</span>
+        </button>
+        <button
+          className={`xx-voices-tab${activeTab === "material" ? " active" : ""}`}
+          onClick={() => handleTabChange("material")}
+        >
+          <SoundOutlined />
+          配音素材
+          <span className="xx-voices-tab-count">{materialCount}</span>
+        </button>
+      </div>
 
       {/* ── 预置音色 ──────────────────────────────────── */}
       {activeTab === "preset" && (
-        <PresetVoiceTab
-          searchText={searchText}
-          filterGender={filterGender}
-          filterLang={filterLang}
-          onSearchChange={setSearchText}
-          onGenderChange={setFilterGender}
-          onLangChange={setFilterLang}
-          loading={presetLoading}
-          voices={filteredPreset}
-          playingId={playingId}
-          currentTime={currentTime}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onSeek={handleSeek}
-          onClearFilters={handleClearFilters}
-        />
+        <div className="xx-voices-tab-content">
+          <VoiceFilterBar
+            searchText={searchText}
+            filterGender={filterGender}
+            filterLang={filterLang}
+            onSearchChange={setSearchText}
+            onGenderChange={setFilterGender}
+            onLangChange={setFilterLang}
+          />
+
+          {presetLoading && (
+            <div className="xx-voices-empty">
+              <div className="xx-voices-empty-icon">
+                <SoundOutlined />
+              </div>
+              <p>加载预置音色中...</p>
+            </div>
+          )}
+
+          {!presetLoading && filteredPreset.length > 0 && (
+            <div className="xx-voice-grid">
+              {filteredPreset.map((voice) => (
+                <VoiceCard
+                  key={voice.id}
+                  id={voice.id}
+                  name={voice.name}
+                  subtitle={`${genderLabel(voice.gender)} · ${languageLabel(voice.language)} · ${voice.description}`}
+                  tags={voice.tags}
+                  duration={voice.duration}
+                  gender={voice.gender}
+                  isPlaying={playingId === voice.id}
+                  isSelected={false}
+                  currentTime={playingId === voice.id ? currentTime : 0}
+                  starred={voice.starred}
+                  onPlay={() => handlePlay(voice.id, voice.duration)}
+                  onPause={handlePause}
+                  onSeek={(time) => handleSeek(voice.id, time, voice.duration)}
+                  onToggleStar={() => {}}
+                />
+              ))}
+            </div>
+          )}
+
+          {!presetLoading && filteredPreset.length === 0 && (
+            <div className="xx-voices-empty">
+              <div className="xx-voices-empty-icon">
+                <SoundOutlined />
+              </div>
+              <p>未找到匹配的音色</p>
+              <Button buttonType="ghost" buttonSize="sm" onClick={handleClearFilters}>
+                清除筛选条件
+              </Button>
+            </div>
+          )}
+        </div>
       )}
 
       {/* ── 我的克隆 ──────────────────────────────────── */}
       {activeTab === "cloned" && (
-        <ClonedVoiceTab
-          loading={cloneLoading}
-          voices={clonedVoices}
-          playingId={playingId}
-          currentTime={currentTime}
-          onPlay={handleTogglePlay}
-          onPause={handlePause}
-          onUse={handleCloneUse}
-          onDelete={handleCloneDelete}
-          onRetry={handleCloneRetry}
-          onShowDetail={handleShowDetail}
-          onOpenClone={() => setCloneModalOpen(true)}
-        />
+        <div className="xx-voices-tab-content">
+          {/* 骨架屏加载 */}
+          {cloneLoading && (
+            <div className="xx-voice-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <CloneCardSkeleton key={i} />
+              ))}
+            </div>
+          )}
+
+          {/* 卡片列表 */}
+          {!cloneLoading && clonedVoices.length > 0 && (
+            <div className="xx-voice-grid">
+              {clonedVoices.map((voice) => (
+                <CloneVoiceCard
+                  key={voice.id}
+                  voice={voice}
+                  isPlaying={playingId === voice.id}
+                  currentTime={playingId === voice.id ? currentTime : 0}
+                  onPlay={() => handleClonePlayPause(voice.id, voice.duration)}
+                  onPause={handlePause}
+                  onUse={() => handleCloneUse(voice)}
+                  onDelete={() => handleCloneDelete(voice)}
+                  onRetry={() => handleCloneRetry(voice)}
+                  onShowDetail={() => handleShowDetail(voice)}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* 空状态 */}
+          {!cloneLoading && clonedVoices.length === 0 && (
+            <div className="xx-voices-empty">
+              <div className="xx-voices-empty-icon">
+                <UserOutlined />
+              </div>
+              <h3>暂无克隆音色</h3>
+              <p>上传音频素材即可克隆专属音色</p>
+              <Button buttonType="primary" buttonSize="md" onClick={() => setCloneModalOpen(true)}>
+                <PlusOutlined /> 去克隆音色
+              </Button>
+            </div>
+          )}
+
+          {/* 处理中提示 */}
+          {!cloneLoading && clonedVoices.some((v) => v.status === "processing") && (
+            <div className="xx-clone-processing-hint">
+              <RobotOutlined />
+              <span>部分音色正在克隆处理中，完成后将自动出现在列表中。</span>
+            </div>
+          )}
+        </div>
       )}
 
       {/* ── 配音素材 ──────────────────────────────────── */}
       {activeTab === "material" && (
-        <MaterialVoiceTab
-          loading={materialLoading}
-          materials={materials as AssetItem[]}
-          onOpenUpload={() => setUploadOpen(true)}
+        <div className="xx-voices-tab-content">
+          {/* 骨架屏加载 */}
+          {materialLoading && (
+            <div className="xx-voice-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="vmat-card vmat-card--skeleton">
+                  <div className="vmat-thumb" />
+                  <div className="vmat-info">
+                    <div className="vmat-skeleton-line vmat-skeleton-title" />
+                    <div className="vmat-skeleton-line" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 卡片列表 */}
+          {!materialLoading && materials.length > 0 && (
+            <div className="xx-voice-grid">
+              {materials.map((asset: AssetItem) => {
+                const duration = (asset.metadata?.duration as number) || 0
+                const minutes = Math.floor(duration / 60)
+                const seconds = Math.floor(duration % 60)
+                return (
+                  <div key={asset.id} className="vmat-card">
+                    <div className="vmat-thumb">
+                      <AudioOutlined className="vmat-thumb-icon" />
+                      <span className="vmat-duration">
+                        {minutes}:{seconds.toString().padStart(2, "0")}
+                      </span>
+                    </div>
+                    <div className="vmat-info">
+                      <div className="vmat-name" title={asset.name}>
+                        {asset.name}
+                      </div>
+                      <div className="vmat-meta">
+                        <span>
+                          {asset.file_size
+                            ? `${(asset.file_size / 1024 / 1024).toFixed(1)} MB`
+                            : "--"}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* 空状态 */}
+          {!materialLoading && materials.length === 0 && (
+            <div className="xx-voices-empty">
+              <div className="xx-voices-empty-icon">
+                <SoundOutlined />
+              </div>
+              <h3>暂无配音素材</h3>
+              <p>上传您的音频素材，用于视频配音</p>
+              <Button buttonType="primary" buttonSize="md" onClick={() => setUploadOpen(true)}>
+                <UploadOutlined /> 上传音频
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── 克隆音色弹窗 ──────────────────────────────── */}
+      <CloneModal
+        open={cloneModalOpen}
+        onClose={() => setCloneModalOpen(false)}
+        onSuccess={handleCloneSuccess}
+      />
+
+      {/* ── 详情弹窗 ──────────────────────────────────── */}
+      {detailVoice && (
+        <CloneDetailModal
+          voice={detailVoice}
+          onClose={handleCloseDetail}
+          onDelete={() => handleCloneDelete(detailVoice)}
+          onRetry={() => handleCloneRetry(detailVoice)}
+          onUse={() => handleCloneUse(detailVoice)}
         />
       )}
 
-      {/* ── 弹窗集合 ──────────────────────────────────── */}
-      <VoiceModals
-        cloneModalOpen={cloneModalOpen}
-        onCloneClose={() => setCloneModalOpen(false)}
-        onCloneSuccess={handleCloneSuccess}
-        detailVoice={detailVoice}
-        onDetailClose={handleCloseDetail}
-        onDetailDelete={() => detailVoice && handleCloneDelete(detailVoice)}
-        onDetailRetry={() => detailVoice && handleCloneRetry(detailVoice)}
-        onDetailUse={() => detailVoice && handleCloneUse(detailVoice)}
-        uploadOpen={uploadOpen}
+      {/* ── 上传音频弹窗 ──────────────────────────────── */}
+      <UploadVoiceModal
+        open={uploadOpen}
         uploadFile={uploadFile}
         uploadName={uploadName}
         uploadGender={uploadGender}
         uploadDesc={uploadDesc}
         uploadProgress={uploadProgress}
-        onUploadClose={handleUploadClose}
+        onClose={handleUploadClose}
         onFileSelect={handleFileSelect}
         onFileRemove={handleFileRemove}
         onNameChange={setUploadName}
         onGenderChange={setUploadGender}
         onDescChange={setUploadDesc}
         onUpload={handleUpload}
-        ttsOpen={ttsOpen}
+      />
+
+      {/* ── AI 配音弹窗 ───────────────────────────────── */}
+      <TtsModal
+        open={ttsOpen}
         ttsText={ttsText}
         ttsVoiceId={ttsVoiceId}
         ttsSpeed={ttsSpeed}
@@ -270,16 +455,24 @@ const VoiceLibrary: React.FC = () => {
         ttsAudioUrl={ttsAudioUrl}
         ttsError={ttsError}
         presetVoices={presetVoices}
-        onTtsClose={handleTtsClose}
-        onTtsTextChange={setTtsText}
-        onTtsVoiceChange={setTtsVoiceId}
-        onTtsSpeedChange={setTtsSpeed}
-        onTtsSynthesize={handleTtsSynthesize}
-        onTtsSave={handleTtsSave}
+        onClose={handleTtsClose}
+        onTextChange={setTtsText}
+        onVoiceChange={setTtsVoiceId}
+        onSpeedChange={setTtsSpeed}
+        onSynthesize={handleTtsSynthesize}
+        onSave={handleTtsSave}
       />
 
       {/* ── Toast 提示 ────────────────────────────────── */}
-      <VoiceToasts toasts={toasts} />
+      {toasts.length > 0 && (
+        <div className="vc-toast-container">
+          {toasts.map((t) => (
+            <div key={t.id} className={`vc-toast vc-toast--${t.type}`}>
+              {t.type === "success" ? "✅" : "❌"} {t.message}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

apps/web/src/pages/voices/components/ClonedVoiceTab.tsx

@@ -1,94 +0,0 @@
-/**
- * VoiceLibrary 我的克隆 Tab 内容
- */
-import React from "react"
-import { UserOutlined, PlusOutlined, RobotOutlined } from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import CloneVoiceCard from "./CloneVoiceCard"
-import CloneCardSkeleton from "./CloneCardSkeleton"
-import type { ClonedVoiceDisplay } from "../types"
-
-export interface ClonedVoiceTabProps {
-  loading: boolean
-  voices: ClonedVoiceDisplay[]
-  playingId: string | null
-  currentTime: number
-  onPlay: (voiceId: string, duration: number) => void
-  onPause: () => void
-  onUse: (voice: ClonedVoiceDisplay) => void
-  onDelete: (voice: ClonedVoiceDisplay) => void
-  onRetry: (voice: ClonedVoiceDisplay) => void
-  onShowDetail: (voice: ClonedVoiceDisplay) => void
-  onOpenClone: () => void
-}
-
-export const ClonedVoiceTab: React.FC<ClonedVoiceTabProps> = ({
-  loading,
-  voices,
-  playingId,
-  currentTime,
-  onPlay,
-  onPause,
-  onUse,
-  onDelete,
-  onRetry,
-  onShowDetail,
-  onOpenClone,
-}) => {
-  return (
-    <div className="xx-voices-tab-content">
-      {/* 骨架屏加载 */}
-      {loading && (
-        <div className="xx-voice-grid">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <CloneCardSkeleton key={i} />
-          ))}
-        </div>
-      )}
-
-      {/* 卡片列表 */}
-      {!loading && voices.length > 0 && (
-        <div className="xx-voice-grid">
-          {voices.map((voice) => (
-            <CloneVoiceCard
-              key={voice.id}
-              voice={voice}
-              isPlaying={playingId === voice.id}
-              currentTime={playingId === voice.id ? currentTime : 0}
-              onPlay={() => onPlay(voice.id, voice.duration)}
-              onPause={onPause}
-              onUse={() => onUse(voice)}
-              onDelete={() => onDelete(voice)}
-              onRetry={() => onRetry(voice)}
-              onShowDetail={() => onShowDetail(voice)}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* 空状态 */}
-      {!loading && voices.length === 0 && (
-        <div className="xx-voices-empty">
-          <div className="xx-voices-empty-icon">
-            <UserOutlined />
-          </div>
-          <h3>暂无克隆音色</h3>
-          <p>上传音频素材即可克隆专属音色</p>
-          <Button buttonType="primary" buttonSize="md" onClick={onOpenClone}>
-            <PlusOutlined /> 去克隆音色
-          </Button>
-        </div>
-      )}
-
-      {/* 处理中提示 */}
-      {!loading && voices.some((v) => v.status === "processing") && (
-        <div className="xx-clone-processing-hint">
-          <RobotOutlined />
-          <span>部分音色正在克隆处理中，完成后将自动出现在列表中。</span>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ClonedVoiceTab

apps/web/src/pages/voices/components/MaterialVoiceTab.tsx

@@ -1,85 +0,0 @@
-/**
- * VoiceLibrary 配音素材 Tab 内容
- */
-import React from "react"
-import { SoundOutlined, UploadOutlined, AudioOutlined } from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import type { AssetItem } from "@/api/assets"
-
-export interface MaterialVoiceTabProps {
-  loading: boolean
-  materials: AssetItem[]
-  onOpenUpload: () => void
-}
-
-export const MaterialVoiceTab: React.FC<MaterialVoiceTabProps> = ({
-  loading,
-  materials,
-  onOpenUpload,
-}) => {
-  return (
-    <div className="xx-voices-tab-content">
-      {/* 骨架屏加载 */}
-      {loading && (
-        <div className="xx-voice-grid">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="vmat-card vmat-card--skeleton">
-              <div className="vmat-thumb" />
-              <div className="vmat-info">
-                <div className="vmat-skeleton-line vmat-skeleton-title" />
-                <div className="vmat-skeleton-line" />
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* 卡片列表 */}
-      {!loading && materials.length > 0 && (
-        <div className="xx-voice-grid">
-          {materials.map((asset: AssetItem) => {
-            const duration = (asset.metadata?.duration as number) || 0
-            const minutes = Math.floor(duration / 60)
-            const seconds = Math.floor(duration % 60)
-            return (
-              <div key={asset.id} className="vmat-card">
-                <div className="vmat-thumb">
-                  <AudioOutlined className="vmat-thumb-icon" />
-                  <span className="vmat-duration">
-                    {minutes}:{seconds.toString().padStart(2, "0")}
-                  </span>
-                </div>
-                <div className="vmat-info">
-                  <div className="vmat-name" title={asset.name}>
-                    {asset.name}
-                  </div>
-                  <div className="vmat-meta">
-                    <span>
-                      {asset.file_size ? `${(asset.file_size / 1024 / 1024).toFixed(1)} MB` : "--"}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {/* 空状态 */}
-      {!loading && materials.length === 0 && (
-        <div className="xx-voices-empty">
-          <div className="xx-voices-empty-icon">
-            <SoundOutlined />
-          </div>
-          <h3>暂无配音素材</h3>
-          <p>上传您的音频素材，用于视频配音</p>
-          <Button buttonType="primary" buttonSize="md" onClick={onOpenUpload}>
-            <UploadOutlined /> 上传音频
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default MaterialVoiceTab

apps/web/src/pages/voices/components/PresetVoiceTab.tsx

@@ -1,104 +0,0 @@
-/**
- * VoiceLibrary 预置音色 Tab 内容
- */
-import React from "react"
-import { SoundOutlined } from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import VoiceFilterBar from "./VoiceFilterBar"
-import VoiceCard from "./VoiceCard"
-import { genderLabel, languageLabel } from "../utils/format"
-import type { PresetVoiceDisplay } from "../types"
-
-export interface PresetVoiceTabProps {
-  searchText: string
-  filterGender: string
-  filterLang: string
-  onSearchChange: (text: string) => void
-  onGenderChange: (gender: string) => void
-  onLangChange: (lang: string) => void
-  loading: boolean
-  voices: PresetVoiceDisplay[]
-  playingId: string | null
-  currentTime: number
-  onPlay: (id: string, duration: number) => void
-  onPause: () => void
-  onSeek: (id: string, time: number, duration: number) => void
-  onClearFilters: () => void
-}
-
-export const PresetVoiceTab: React.FC<PresetVoiceTabProps> = ({
-  searchText,
-  filterGender,
-  filterLang,
-  onSearchChange,
-  onGenderChange,
-  onLangChange,
-  loading,
-  voices,
-  playingId,
-  currentTime,
-  onPlay,
-  onPause,
-  onSeek,
-  onClearFilters,
-}) => {
-  return (
-    <div className="xx-voices-tab-content">
-      <VoiceFilterBar
-        searchText={searchText}
-        filterGender={filterGender}
-        filterLang={filterLang}
-        onSearchChange={onSearchChange}
-        onGenderChange={onGenderChange}
-        onLangChange={onLangChange}
-      />
-
-      {loading && (
-        <div className="xx-voices-empty">
-          <div className="xx-voices-empty-icon">
-            <SoundOutlined />
-          </div>
-          <p>加载预置音色中...</p>
-        </div>
-      )}
-
-      {!loading && voices.length > 0 && (
-        <div className="xx-voice-grid">
-          {voices.map((voice) => (
-            <VoiceCard
-              key={voice.id}
-              id={voice.id}
-              name={voice.name}
-              subtitle={`${genderLabel(voice.gender)} · ${languageLabel(voice.language)} · ${voice.description}`}
-              tags={voice.tags}
-              duration={voice.duration}
-              gender={voice.gender}
-              isPlaying={playingId === voice.id}
-              isSelected={false}
-              currentTime={playingId === voice.id ? currentTime : 0}
-              starred={voice.starred}
-              onPlay={() => onPlay(voice.id, voice.duration)}
-              onPause={onPause}
-              onSeek={(time) => onSeek(voice.id, time, voice.duration)}
-              onToggleStar={() => {}}
-            />
-          ))}
-        </div>
-      )}
-
-      {!loading && voices.length === 0 && (
-        <div className="xx-voices-empty">
-          <div className="xx-voices-empty-icon">
-            <SoundOutlined />
-          </div>
-          <p>未找到匹配的音色</p>
-          <Button buttonType="ghost" buttonSize="sm" onClick={onClearFilters}>
-            清除筛选条件
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default PresetVoiceTab

apps/web/src/pages/voices/components/VoiceModals.tsx

@@ -1,149 +0,0 @@
-/**
- * VoiceLibrary 弹窗集合
- */
-import React from "react"
-import type { ClonedVoiceDisplay, PresetVoiceDisplay, VoiceGender } from "../types"
-import type { VoiceClone } from "@/api/voice-clone"
-import type { TtsStatus } from "./TtsModal"
-import CloneModal from "@/components/voice/CloneModal"
-import CloneDetailModal from "./CloneDetailModal"
-import UploadVoiceModal from "./UploadVoiceModal"
-import TtsModal from "./TtsModal"
-
-export interface VoiceModalsProps {
-  /* 克隆音色弹窗 */
-  cloneModalOpen: boolean
-  onCloneClose: () => void
-  onCloneSuccess: (voice: VoiceClone) => void
-
-  /* 克隆详情弹窗 */
-  detailVoice: ClonedVoiceDisplay | null
-  onDetailClose: () => void
-  onDetailDelete: () => void
-  onDetailRetry: () => void
-  onDetailUse: () => void
-
-  /* 上传音频弹窗 */
-  uploadOpen: boolean
-  uploadFile: File | null
-  uploadName: string
-  uploadGender: VoiceGender
-  uploadDesc: string
-  uploadProgress: number | null
-  onUploadClose: () => void
-  onFileSelect: (file: File) => void
-  onFileRemove: () => void
-  onNameChange: (name: string) => void
-  onGenderChange: (gender: VoiceGender) => void
-  onDescChange: (desc: string) => void
-  onUpload: () => void
-
-  /* TTS 弹窗 */
-  ttsOpen: boolean
-  ttsText: string
-  ttsVoiceId: string
-  ttsSpeed: number
-  ttsStatus: TtsStatus
-  ttsAudioUrl: string | null
-  ttsError: string | null
-  presetVoices: PresetVoiceDisplay[]
-  onTtsClose: () => void
-  onTtsTextChange: (text: string) => void
-  onTtsVoiceChange: (id: string) => void
-  onTtsSpeedChange: (speed: number) => void
-  onTtsSynthesize: () => void
-  onTtsSave: () => void
-}
-
-export const VoiceModals: React.FC<VoiceModalsProps> = ({
-  cloneModalOpen,
-  onCloneClose,
-  onCloneSuccess,
-  detailVoice,
-  onDetailClose,
-  onDetailDelete,
-  onDetailRetry,
-  onDetailUse,
-  uploadOpen,
-  uploadFile,
-  uploadName,
-  uploadGender,
-  uploadDesc,
-  uploadProgress,
-  onUploadClose,
-  onFileSelect,
-  onFileRemove,
-  onNameChange,
-  onGenderChange,
-  onDescChange,
-  onUpload,
-  ttsOpen,
-  ttsText,
-  ttsVoiceId,
-  ttsSpeed,
-  ttsStatus,
-  ttsAudioUrl,
-  ttsError,
-  presetVoices,
-  onTtsClose,
-  onTtsTextChange,
-  onTtsVoiceChange,
-  onTtsSpeedChange,
-  onTtsSynthesize,
-  onTtsSave,
-}) => {
-  return (
-    <>
-      {/* 克隆音色弹窗 */}
-      <CloneModal open={cloneModalOpen} onClose={onCloneClose} onSuccess={onCloneSuccess} />
-
-      {/* 详情弹窗 */}
-      {detailVoice && (
-        <CloneDetailModal
-          voice={detailVoice}
-          onClose={onDetailClose}
-          onDelete={onDetailDelete}
-          onRetry={onDetailRetry}
-          onUse={onDetailUse}
-        />
-      )}
-
-      {/* 上传音频弹窗 */}
-      <UploadVoiceModal
-        open={uploadOpen}
-        uploadFile={uploadFile}
-        uploadName={uploadName}
-        uploadGender={uploadGender}
-        uploadDesc={uploadDesc}
-        uploadProgress={uploadProgress}
-        onClose={onUploadClose}
-        onFileSelect={onFileSelect}
-        onFileRemove={onFileRemove}
-        onNameChange={onNameChange}
-        onGenderChange={onGenderChange}
-        onDescChange={onDescChange}
-        onUpload={onUpload}
-      />
-
-      {/* AI 配音弹窗 */}
-      <TtsModal
-        open={ttsOpen}
-        ttsText={ttsText}
-        ttsVoiceId={ttsVoiceId}
-        ttsSpeed={ttsSpeed}
-        ttsStatus={ttsStatus}
-        ttsAudioUrl={ttsAudioUrl}
-        ttsError={ttsError}
-        presetVoices={presetVoices}
-        onClose={onTtsClose}
-        onTextChange={onTtsTextChange}
-        onVoiceChange={onTtsVoiceChange}
-        onSpeedChange={onTtsSpeedChange}
-        onSynthesize={onTtsSynthesize}
-        onSave={onTtsSave}
-      />
-    </>
-  )
-}
-
-export default VoiceModals

apps/web/src/pages/voices/components/VoiceTabBar.tsx

@@ -1,54 +0,0 @@
-/**
- * VoiceLibrary Tab 切换栏
- */
-import React from "react"
-import { AudioOutlined, UserOutlined, SoundOutlined } from "@ant-design/icons"
-
-export type VoiceTabKey = "preset" | "cloned" | "material"
-
-export interface VoiceTabBarProps {
-  activeTab: VoiceTabKey
-  presetCount: number
-  cloneCount: number
-  materialCount: number
-  onTabChange: (tab: VoiceTabKey) => void
-}
-
-export const VoiceTabBar: React.FC<VoiceTabBarProps> = ({
-  activeTab,
-  presetCount,
-  cloneCount,
-  materialCount,
-  onTabChange,
-}) => {
-  return (
-    <div className="xx-voices-tabs">
-      <button
-        className={`xx-voices-tab${activeTab === "preset" ? " active" : ""}`}
-        onClick={() => onTabChange("preset")}
-      >
-        <AudioOutlined />
-        预置音色
-        <span className="xx-voices-tab-count">{presetCount}</span>
-      </button>
-      <button
-        className={`xx-voices-tab${activeTab === "cloned" ? " active" : ""}`}
-        onClick={() => onTabChange("cloned")}
-      >
-        <UserOutlined />
-        我的克隆
-        <span className="xx-voices-tab-count">{cloneCount}</span>
-      </button>
-      <button
-        className={`xx-voices-tab${activeTab === "material" ? " active" : ""}`}
-        onClick={() => onTabChange("material")}
-      >
-        <SoundOutlined />
-        配音素材
-        <span className="xx-voices-tab-count">{materialCount}</span>
-      </button>
-    </div>
-  )
-}
-
-export default VoiceTabBar

apps/web/src/pages/voices/components/VoiceToasts.tsx

@@ -1,29 +0,0 @@
-/**
- * VoiceLibrary Toast 提示
- */
-import React from "react"
-
-export interface Toast {
-  id: number
-  message: string
-  type: "success" | "error"
-}
-
-export interface VoiceToastsProps {
-  toasts: Toast[]
-}
-
-export const VoiceToasts: React.FC<VoiceToastsProps> = ({ toasts }) => {
-  if (toasts.length === 0) return null
-  return (
-    <div className="vc-toast-container">
-      {toasts.map((t) => (
-        <div key={t.id} className={`vc-toast vc-toast--${t.type}`}>
-          {t.type === "success" ? "✅" : "❌"} {t.message}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default VoiceToasts

apps/web/src/router/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { Navigate } from "react-router-dom"
+import { useAuthStore } from "@/store/authStore"
+
+/** 受保护的路由组件 */
+// eslint-disable-next-line react-refresh/only-export-components
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
+
+  if (!isAuthenticated || !hasAccessToken) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}

apps/web/src/router/appRoutes.tsx

@@ -0,0 +1,225 @@
+import { Navigate, type RouteObject } from "react-router-dom"
+import MainLayout from "@/components/layout/MainLayout"
+import { ProtectedRoute } from "./ProtectedRoute"
+
+/**
+ * 受保护的 /app 子路由
+ * 所有页面使用 lazy 懒加载
+ */
+const appChildren: RouteObject[] = [
+  {
+    index: true,
+    element: <Navigate to="/app/dashboard" replace />,
+  },
+  {
+    path: "dashboard",
+    lazy: () =>
+      import("@/pages/dashboard/Dashboard").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "assets",
+    lazy: () =>
+      import("@/pages/assets/AssetLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "titles",
+    lazy: () =>
+      import("@/pages/titles/TitleLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voices",
+    lazy: () =>
+      import("@/pages/voices/VoiceLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "templates",
+    lazy: () =>
+      import("@/pages/templates/TemplateLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "generate",
+    lazy: () =>
+      import("@/pages/generate/GeneratePage").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "history",
+    lazy: () =>
+      import("@/pages/history/TaskHistory").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "products",
+    lazy: () =>
+      import("@/pages/products/ProductLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "products/:id",
+    lazy: () =>
+      import("@/pages/products/ProductDetail").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "tasks",
+    lazy: () =>
+      import("@/pages/tasks/TaskCenter").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "editing-planner",
+    lazy: () =>
+      import("@/pages/editing-planner/EditingPlanner").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "my-templates",
+    lazy: () =>
+      import("@/pages/my-templates/MyTemplates").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voice-clone",
+    lazy: () =>
+      import("@/pages/voice-clone/VoiceClone").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voice-materials",
+    lazy: () =>
+      import("@/pages/voice-materials/VoiceMaterialLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "my-voices",
+    lazy: () =>
+      import("@/pages/my-voices/MyVoices").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "accounts",
+    lazy: () =>
+      import("@/pages/accounts/Accounts").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationUpload").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication/results",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationResults").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication/:id",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationDetail").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription",
+    lazy: () =>
+      import("@/pages/subscription/Plans").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription/upgrade",
+    lazy: () =>
+      import("@/pages/subscription/UpgradeSubscription").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription/billing",
+    lazy: () =>
+      import("@/pages/subscription/Billing").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "profile",
+    lazy: () =>
+      import("@/pages/profile/Settings").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "admin",
+    children: [
+      {
+        index: true,
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "users",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "analytics",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "monitor",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "logs",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+    ],
+  },
+]
+
+export const appRoutes: RouteObject = {
+  path: "/app",
+  element: (
+    <ProtectedRoute>
+      <MainLayout />
+    </ProtectedRoute>
+  ),
+  children: appChildren,
+}

apps/web/src/router/index.tsx

@@ -3,283 +3,13 @@
  * 扁平化路由：去掉 Project 层级，所有资源直接归属用户
  */
 import { createBrowserRouter, Navigate } from "react-router-dom"
-import React from "react"
-import MainLayout from "@/components/layout/MainLayout"
-import Login from "@/pages/auth/Login"
-import Register from "@/pages/auth/Register"
-import ForgotPassword from "@/pages/auth/ForgotPassword"
-import ResetPassword from "@/pages/auth/ResetPassword"
-import WechatCallback from "@/pages/auth/WechatCallback"
-import HomePage from "@/pages/home/HomePage"
-import { useAuthStore } from "@/store/authStore"
-
-/** 受保护的路由组件 */
-// eslint-disable-next-line react-refresh/only-export-components
-const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
-  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
-
-  if (!isAuthenticated || !hasAccessToken) {
-    return <Navigate to="/login" replace />
-  }
-
-  return <>{children}</>
-}
-
-/** 首页路由组件：已登录跳 dashboard，未登录显示落地页 */
-// eslint-disable-next-line react-refresh/only-export-components
-const HomeRoute: React.FC = () => {
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
-  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
-
-  if (isAuthenticated && hasAccessToken) {
-    return <Navigate to="/app/dashboard" replace />
-  }
-
-  return <HomePage />
-}
+import { publicRoutes } from "./publicRoutes"
+import { appRoutes } from "./appRoutes"
 
 /** 路由配置 */
 export const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <HomeRoute />,
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/register",
-    element: <Register />,
-  },
-  {
-    path: "/forgot-password",
-    element: <ForgotPassword />,
-  },
-  {
-    path: "/reset-password",
-    element: <ResetPassword />,
-  },
-  {
-    path: "/auth/wechat/callback",
-    element: <WechatCallback />,
-  },
-  {
-    path: "/app",
-    element: (
-      <ProtectedRoute>
-        <MainLayout />
-      </ProtectedRoute>
-    ),
-    children: [
-      {
-        index: true,
-        element: <Navigate to="/app/dashboard" replace />,
-      },
-      {
-        path: "dashboard",
-        lazy: () =>
-          import("@/pages/dashboard/Dashboard").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "assets",
-        lazy: () =>
-          import("@/pages/assets/AssetLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "titles",
-        lazy: () =>
-          import("@/pages/titles/TitleLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voices",
-        lazy: () =>
-          import("@/pages/voices/VoiceLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "templates",
-        lazy: () =>
-          import("@/pages/templates/TemplateLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "generate",
-        lazy: () =>
-          import("@/pages/generate/GeneratePage").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "history",
-        lazy: () =>
-          import("@/pages/history/TaskHistory").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "products",
-        lazy: () =>
-          import("@/pages/products/ProductLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "products/:id",
-        lazy: () =>
-          import("@/pages/products/ProductDetail").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "tasks",
-        lazy: () =>
-          import("@/pages/tasks/TaskCenter").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "editing-planner",
-        lazy: () =>
-          import("@/pages/editing-planner/EditingPlanner").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "my-templates",
-        lazy: () =>
-          import("@/pages/my-templates/MyTemplates").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voice-clone",
-        lazy: () =>
-          import("@/pages/voice-clone/VoiceClone").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voice-materials",
-        lazy: () =>
-          import("@/pages/voice-materials/VoiceMaterialLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "my-voices",
-        lazy: () =>
-          import("@/pages/my-voices/MyVoices").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "accounts",
-        lazy: () =>
-          import("@/pages/accounts/Accounts").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationUpload").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication/results",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationResults").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication/:id",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationDetail").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription",
-        lazy: () =>
-          import("@/pages/subscription/Plans").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription/upgrade",
-        lazy: () =>
-          import("@/pages/subscription/UpgradeSubscription").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription/billing",
-        lazy: () =>
-          import("@/pages/subscription/Billing").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "profile",
-        lazy: () =>
-          import("@/pages/profile/Settings").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "admin",
-        children: [
-          {
-            index: true,
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "users",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "analytics",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "monitor",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "logs",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-        ],
-      },
-    ],
-  },
+  ...publicRoutes,
+  appRoutes,
   {
     path: "*",
     element: <Navigate to="/" replace />,

apps/web/src/router/publicRoutes.tsx

@@ -0,0 +1,48 @@
+import { Navigate, type RouteObject } from "react-router-dom"
+import HomePage from "@/pages/home/HomePage"
+import Login from "@/pages/auth/Login"
+import Register from "@/pages/auth/Register"
+import ForgotPassword from "@/pages/auth/ForgotPassword"
+import ResetPassword from "@/pages/auth/ResetPassword"
+import WechatCallback from "@/pages/auth/WechatCallback"
+import { useAuthStore } from "@/store/authStore"
+
+/** 首页路由组件：已登录跳 dashboard，未登录显示落地页 */
+// eslint-disable-next-line react-refresh/only-export-components
+const HomeRoute: React.FC = () => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
+
+  if (isAuthenticated && hasAccessToken) {
+    return <Navigate to="/app/dashboard" replace />
+  }
+
+  return <HomePage />
+}
+
+export const publicRoutes: RouteObject[] = [
+  {
+    path: "/",
+    element: <HomeRoute />,
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/register",
+    element: <Register />,
+  },
+  {
+    path: "/forgot-password",
+    element: <ForgotPassword />,
+  },
+  {
+    path: "/reset-password",
+    element: <ResetPassword />,
+  },
+  {
+    path: "/auth/wechat/callback",
+    element: <WechatCallback />,
+  },
+]