Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xiaoxia
|
e31cea40fd | ||
|
xiaoxia
|
48ab2a4329 | ||
|
xiaoxia
|
053291aa1c | ||
|
xiaoxia
|
c01062ab8a | ||
|
xiaoxia
|
5c6ce75237 | ||
|
xiaoxia
|
ea9b5c8ab3 | ||
|
xiaoxia
|
24efcdf038 | ||
|
xiaoxia
|
42db72a8a4 |
Regular → Executable
+88
-281
@@ -1,47 +1,39 @@
|
||||
/**
|
||||
* 配音库页面 — V21 设计系统
|
||||
*
|
||||
* Phase 3: 逻辑抽离为 Hooks
|
||||
* - useVoicesData: 三 Tab 数据查询 + 筛选
|
||||
* - useAudioPlayer: 播放控制
|
||||
* - useCloneOperations: 克隆音色删除/重试/详情
|
||||
* - useTtsSynthesize: AI 配音合成
|
||||
* - useVoiceUpload: 上传音频
|
||||
* 主组件仅保留 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
|
||||
*/
|
||||
import React, { useCallback, useState } from "react"
|
||||
import {
|
||||
SoundOutlined,
|
||||
PlusOutlined,
|
||||
RobotOutlined,
|
||||
UploadOutlined,
|
||||
AudioOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import { UploadOutlined, AudioOutlined, RobotOutlined } from "@ant-design/icons"
|
||||
import { Button } from "@/components/ui"
|
||||
import PageHead from "@/components/layout/PageHead"
|
||||
import { type AssetItem } from "@/api/assets"
|
||||
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 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 "./voices.css"
|
||||
|
||||
interface Toast {
|
||||
id: number
|
||||
message: string
|
||||
type: "success" | "error"
|
||||
}
|
||||
|
||||
let toastIdSeq = 0
|
||||
|
||||
const VoiceLibrary: React.FC = () => {
|
||||
@@ -138,17 +130,9 @@ const VoiceLibrary: React.FC = () => {
|
||||
handleUploadClose,
|
||||
} = useVoiceUpload({ showToast })
|
||||
|
||||
// ── 克隆音色播放切换 ──────────────────────────────────
|
||||
const handleClonePlayPause = useCallback(
|
||||
(voiceId: string, duration: number) => {
|
||||
handleTogglePlay(voiceId, duration)
|
||||
},
|
||||
[handleTogglePlay],
|
||||
)
|
||||
|
||||
// ── 切换 Tab 时停止播放 ───────────────────────────────
|
||||
const handleTabChange = useCallback(
|
||||
(tab: typeof activeTab) => {
|
||||
(tab: VoiceTabKey) => {
|
||||
setActiveTab(tab)
|
||||
stopPlayback()
|
||||
},
|
||||
@@ -200,254 +184,85 @@ const VoiceLibrary: React.FC = () => {
|
||||
actions={pageActions}
|
||||
/>
|
||||
|
||||
{/* ── 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>
|
||||
{/* ── Tab 切换栏 ────────────────────────────────── */}
|
||||
<VoiceTabBar
|
||||
activeTab={activeTab as VoiceTabKey}
|
||||
presetCount={presetCount}
|
||||
cloneCount={cloneCount}
|
||||
materialCount={materialCount}
|
||||
onTabChange={handleTabChange}
|
||||
/>
|
||||
|
||||
{/* ── 预置音色 ──────────────────────────────────── */}
|
||||
{activeTab === "preset" && (
|
||||
<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>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── 我的克隆 ──────────────────────────────────── */}
|
||||
{activeTab === "cloned" && (
|
||||
<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>
|
||||
<ClonedVoiceTab
|
||||
loading={cloneLoading}
|
||||
voices={clonedVoices}
|
||||
playingId={playingId}
|
||||
currentTime={currentTime}
|
||||
onPlay={handleTogglePlay}
|
||||
onPause={handlePause}
|
||||
onUse={handleCloneUse}
|
||||
onDelete={handleCloneDelete}
|
||||
onRetry={handleCloneRetry}
|
||||
onShowDetail={handleShowDetail}
|
||||
onOpenClone={() => setCloneModalOpen(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── 配音素材 ──────────────────────────────────── */}
|
||||
{activeTab === "material" && (
|
||||
<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)}
|
||||
<MaterialVoiceTab
|
||||
loading={materialLoading}
|
||||
materials={materials as AssetItem[]}
|
||||
onOpenUpload={() => setUploadOpen(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── 上传音频弹窗 ──────────────────────────────── */}
|
||||
<UploadVoiceModal
|
||||
open={uploadOpen}
|
||||
{/* ── 弹窗集合 ──────────────────────────────────── */}
|
||||
<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}
|
||||
uploadFile={uploadFile}
|
||||
uploadName={uploadName}
|
||||
uploadGender={uploadGender}
|
||||
uploadDesc={uploadDesc}
|
||||
uploadProgress={uploadProgress}
|
||||
onClose={handleUploadClose}
|
||||
onUploadClose={handleUploadClose}
|
||||
onFileSelect={handleFileSelect}
|
||||
onFileRemove={handleFileRemove}
|
||||
onNameChange={setUploadName}
|
||||
onGenderChange={setUploadGender}
|
||||
onDescChange={setUploadDesc}
|
||||
onUpload={handleUpload}
|
||||
/>
|
||||
|
||||
{/* ── AI 配音弹窗 ───────────────────────────────── */}
|
||||
<TtsModal
|
||||
open={ttsOpen}
|
||||
ttsOpen={ttsOpen}
|
||||
ttsText={ttsText}
|
||||
ttsVoiceId={ttsVoiceId}
|
||||
ttsSpeed={ttsSpeed}
|
||||
@@ -455,24 +270,16 @@ const VoiceLibrary: React.FC = () => {
|
||||
ttsAudioUrl={ttsAudioUrl}
|
||||
ttsError={ttsError}
|
||||
presetVoices={presetVoices}
|
||||
onClose={handleTtsClose}
|
||||
onTextChange={setTtsText}
|
||||
onVoiceChange={setTtsVoiceId}
|
||||
onSpeedChange={setTtsSpeed}
|
||||
onSynthesize={handleTtsSynthesize}
|
||||
onSave={handleTtsSave}
|
||||
onTtsClose={handleTtsClose}
|
||||
onTtsTextChange={setTtsText}
|
||||
onTtsVoiceChange={setTtsVoiceId}
|
||||
onTtsSpeedChange={setTtsSpeed}
|
||||
onTtsSynthesize={handleTtsSynthesize}
|
||||
onTtsSave={handleTtsSave}
|
||||
/>
|
||||
|
||||
{/* ── Toast 提示 ────────────────────────────────── */}
|
||||
{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>
|
||||
)}
|
||||
<VoiceToasts toasts={toasts} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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
|
||||
Reference in New Issue
Block a user