Add web

web/pages/VoiceLibrary.tsx

@@ -0,0 +1,471 @@
+
+import React, { useState, useRef } from 'react';
+import { Search, Mic2, Play, Pause, Upload, X, Filter, Plus, Volume2, Sparkles, Wand2, ChevronDown } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
+import { mockVoices } from '../services/mockData';
+import { Voice } from '../types';
+
+export const VoiceLibraryPage: React.FC = () => {
+  const [voices, setVoices] = useState<Voice[]>(mockVoices);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [vendorFilter, setVendorFilter] = useState<'all' | 'Ali' | 'Volcano' | 'Minimax' | '硅基流动'>('all');
+  const [genderFilter, setGenderFilter] = useState<'all' | 'Male' | 'Female'>('all');
+  const [langFilter, setLangFilter] = useState<'all' | 'zh' | 'en'>('all');
+  
+  const [playingVoiceId, setPlayingVoiceId] = useState<string | null>(null);
+  const [isCloneModalOpen, setIsCloneModalOpen] = useState(false);
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+  const filteredVoices = voices.filter(voice => {
+    const matchesSearch = voice.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesVendor = vendorFilter === 'all' || voice.vendor === vendorFilter;
+    const matchesGender = genderFilter === 'all' || voice.gender === genderFilter;
+    const matchesLang = langFilter === 'all' || voice.language === langFilter;
+    return matchesSearch && matchesVendor && matchesGender && matchesLang;
+  });
+
+  const handlePlayToggle = (id: string) => {
+    if (playingVoiceId === id) {
+      setPlayingVoiceId(null);
+    } else {
+      setPlayingVoiceId(id);
+      setTimeout(() => {
+          setPlayingVoiceId((current) => current === id ? null : current);
+      }, 3000);
+    }
+  };
+
+  const handleAddSuccess = (newVoice: Voice) => {
+      setVoices([newVoice, ...voices]);
+      setIsAddModalOpen(false);
+      setIsCloneModalOpen(false);
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">声音库</h1>
+        <div className="flex space-x-3">
+            <Button variant="primary" onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
+                <Plus className="mr-2 h-4 w-4" /> 添加声音
+            </Button>
+            <Button variant="primary" onClick={() => setIsCloneModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
+                <Mic2 className="mr-2 h-4 w-4" /> 克隆声音
+            </Button>
+        </div>
+      </div>
+
+      {/* Filter Bar */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索声音名称..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={vendorFilter}
+                onChange={(e) => setVendorFilter(e.target.value as any)}
+            >
+                <option value="all">所有厂商</option>
+                <option value="硅基流动">硅基流动 (SiliconFlow)</option>
+                <option value="Ali">阿里 (Ali)</option>
+                <option value="Volcano">火山 (Volcano)</option>
+                <option value="Minimax">Minimax</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={genderFilter}
+                onChange={(e) => setGenderFilter(e.target.value as any)}
+            >
+                <option value="all">所有性别</option>
+                <option value="Male">男 (Male)</option>
+                <option value="Female">女 (Female)</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+             <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={langFilter}
+                onChange={(e) => setLangFilter(e.target.value as any)}
+            >
+                <option value="all">所有语言</option>
+                <option value="zh">中文 (Chinese)</option>
+                <option value="en">英文 (English)</option>
+            </select>
+         </div>
+      </div>
+
+      <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>声音名称</TableHead>
+              <TableHead>厂商</TableHead>
+              <TableHead>性别</TableHead>
+              <TableHead>语言</TableHead>
+              <TableHead className="text-right">试听</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredVoices.map(voice => (
+              <TableRow key={voice.id}>
+                <TableCell className="font-medium">
+                    <div className="flex flex-col">
+                        <span className="flex items-center text-white">
+                            {voice.vendor === '硅基流动' && <Sparkles className="w-3 h-3 text-primary mr-1.5" />}
+                            {voice.name}
+                        </span>
+                        {voice.description && <span className="text-xs text-muted-foreground">{voice.description}</span>}
+                    </div>
+                </TableCell>
+                <TableCell>
+                    <Badge variant={voice.vendor === '硅基流动' ? 'default' : 'outline'}>{voice.vendor}</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{voice.gender === 'Male' ? '男' : '女'}</TableCell>
+                <TableCell className="text-muted-foreground">{voice.language === 'zh' ? '中文' : 'English'}</TableCell>
+                <TableCell className="text-right">
+                    <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        onClick={() => handlePlayToggle(voice.id)}
+                        className={playingVoiceId === voice.id ? "text-primary animate-pulse" : ""}
+                    >
+                        {playingVoiceId === voice.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                    </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+             {filteredVoices.length === 0 && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-6 text-muted-foreground">暂无声音数据</TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+
+      <AddVoiceModal 
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        onSuccess={handleAddSuccess}
+      />
+
+      <CloneVoiceModal 
+        isOpen={isCloneModalOpen} 
+        onClose={() => setIsCloneModalOpen(false)} 
+        onSuccess={handleAddSuccess} 
+      />
+    </div>
+  );
+};
+
+// --- Unified Add Voice Modal ---
+const AddVoiceModal: React.FC<{
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: (voice: Voice) => void;
+}> = ({ isOpen, onClose, onSuccess }) => {
+    const [vendor, setVendor] = useState<'硅基流动' | 'Ali' | 'Volcano' | 'Minimax'>('硅基流动');
+    const [name, setName] = useState('');
+    
+    const [sfModel, setSfModel] = useState('fishaudio/fish-speech-1.5');
+    const [sfVoiceId, setSfVoiceId] = useState('fishaudio:amy');
+    const [sfSpeed, setSfSpeed] = useState(1);
+    const [sfGain, setSfGain] = useState(0);
+
+    const [model, setModel] = useState('');
+    const [voiceKey, setVoiceKey] = useState('');
+    const [gender, setGender] = useState('Female');
+    const [language, setLanguage] = useState('zh');
+    const [description, setDescription] = useState('');
+    
+    const [testInput, setTestInput] = useState('你好，正在测试语音合成效果。');
+    const [isAuditioning, setIsAuditioning] = useState(false);
+
+    const handleAudition = () => {
+        if (!testInput.trim()) return;
+        setIsAuditioning(true);
+        setTimeout(() => setIsAuditioning(false), 2000);
+    };
+
+    const handleSubmit = () => {
+        if (!name) { alert("请填写声音显示名称"); return; }
+        
+        let newVoice: Voice = {
+            id: `${vendor === '硅基流动' ? 'sf' : 'gen'}-${Date.now()}`,
+            name: name,
+            vendor: vendor,
+            gender: gender,
+            language: language,
+            description: description || (vendor === '硅基流动' ? `Model: ${sfModel}` : `Model: ${model}`)
+        };
+
+        onSuccess(newVoice);
+        setName('');
+        setVendor('硅基流动');
+        setDescription('');
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} 
+            onClose={onClose} 
+            title="添加声音"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={handleSubmit} className="bg-primary hover:bg-primary/90">确认添加</Button>
+                </>
+            }
+        >
+            <div className="space-y-4 max-h-[75vh] overflow-y-auto px-1 custom-scrollbar">
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">厂商 (Vendor)</label>
+                    <div className="relative">
+                        <select 
+                            className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground appearance-none cursor-pointer [&>option]:bg-card"
+                            value={vendor}
+                            onChange={(e) => setVendor(e.target.value as any)}
+                        >
+                            <option value="硅基流动">硅基流动 (SiliconFlow)</option>
+                            <option value="Ali">阿里 (Ali)</option>
+                            <option value="Volcano">火山 (Volcano)</option>
+                            <option value="Minimax">Minimax</option>
+                        </select>
+                        <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+                    </div>
+                </div>
+
+                <div className="h-px bg-white/5"></div>
+
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">声音名称</label>
+                    <Input value={name} onChange={e => setName(e.target.value)} placeholder="例如: 客服小美" />
+                </div>
+
+                {vendor === '硅基流动' ? (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型 (Model)</label>
+                                <select 
+                                    className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                                    value={sfModel}
+                                    onChange={e => setSfModel(e.target.value)}
+                                >
+                                    <option value="fishaudio/fish-speech-1.5">fishaudio/fish-speech-1.5</option>
+                                    <option value="fishaudio/fish-speech-1.4">fishaudio/fish-speech-1.4</option>
+                                    <option value="ByteDance/SA-Speech">ByteDance/SA-Speech</option>
+                                </select>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">声音 ID (Voice)</label>
+                                <Input value={sfVoiceId} onChange={e => setSfVoiceId(e.target.value)} placeholder="fishaudio:amy" />
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语速 (Speed)</label>
+                                <div className="flex items-center space-x-2">
+                                    <input type="range" min="0.5" max="2" step="0.1" value={sfSpeed} onChange={e => setSfSpeed(parseFloat(e.target.value))} className="flex-1 accent-primary" />
+                                    <span className="text-[10px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">{sfSpeed}x</span>
+                                </div>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">增益 (Gain)</label>
+                                <div className="flex items-center space-x-2">
+                                    <input type="range" min="-10" max="10" step="1" value={sfGain} onChange={e => setSfGain(parseInt(e.target.value))} className="flex-1 accent-primary" />
+                                    <span className="text-[10px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">{sfGain}dB</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型标识</label>
+                                <Input value={model} onChange={e => setModel(e.target.value)} placeholder="API Model Key" />
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">发音人标识</label>
+                                <Input value={voiceKey} onChange={e => setVoiceKey(e.target.value)} placeholder="Voice Key" />
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">性别</label>
+                        <select 
+                            className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                            value={gender}
+                            onChange={e => setGender(e.target.value)}
+                        >
+                            <option value="Female">女 (Female)</option>
+                            <option value="Male">男 (Male)</option>
+                        </select>
+                    </div>
+                    <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语言</label>
+                        <select 
+                            className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                            value={language}
+                            onChange={e => setLanguage(e.target.value)}
+                        >
+                            <option value="zh">中文 (Chinese)</option>
+                            <option value="en">英文 (English)</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">备注</label>
+                    <textarea 
+                        className="flex min-h-[60px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="记录该声音的特点..."
+                    />
+                </div>
+
+                <div className="p-4 rounded-xl border border-primary/20 bg-primary/5 space-y-3">
+                    <div className="flex items-center justify-between">
+                        <h4 className="text-[10px] font-black text-primary flex items-center tracking-widest uppercase">
+                            <Volume2 className="w-3.5 h-3.5 mr-1.5" /> 参数试听 (Preview)
+                        </h4>
+                        {vendor === '硅基流动' && <Badge variant="outline" className="text-[8px] border-primary/20 text-primary/70">SiliconFlow Audio API</Badge>}
+                    </div>
+                    <div className="flex gap-2">
+                        <Input 
+                            value={testInput} 
+                            onChange={e => setTestInput(e.target.value)}
+                            placeholder="输入测试文本..."
+                            className="text-xs bg-black/20"
+                        />
+                        <Button 
+                            variant="primary" 
+                            size="sm" 
+                            onClick={handleAudition} 
+                            disabled={isAuditioning}
+                            className="shrink-0 h-9"
+                        >
+                            {isAuditioning ? <Pause className="h-3.5 w-3.5 animate-pulse" /> : <Play className="h-3.5 w-3.5" />}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+const CloneVoiceModal: React.FC<{ 
+    isOpen: boolean; 
+    onClose: () => void; 
+    onSuccess: (voice: Voice) => void 
+}> = ({ isOpen, onClose, onSuccess }) => {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [file, setFile] = useState<File | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files[0]) {
+            setFile(e.target.files[0]);
+        }
+    };
+
+    const handleSubmit = () => {
+        if (!name || !file) {
+            alert("请填写名称并上传音频文件");
+            return;
+        }
+        
+        const newVoice: Voice = {
+            id: `v-${Date.now()}`,
+            name: name,
+            vendor: 'Volcano', 
+            gender: 'Female', 
+            language: 'zh',
+            description: description || 'User cloned voice'
+        };
+
+        onSuccess(newVoice);
+        setName('');
+        setDescription('');
+        setFile(null);
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} 
+            onClose={onClose} 
+            title="克隆声音"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={handleSubmit}>开始克隆</Button>
+                </>
+            }
+        >
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">语音名称</label>
+                    <Input 
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        placeholder="给新声音起个名字"
+                    />
+                </div>
+                
+                <div className="space-y-2">
+                     <label className="text-sm font-medium text-white">上传音频文件 (参考音频)</label>
+                     <div 
+                        className="flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed border-white/10 bg-white/5 hover:bg-white/10 transition-colors cursor-pointer"
+                        onClick={() => inputRef.current?.click()}
+                     >
+                        <input 
+                            ref={inputRef}
+                            type="file"
+                            accept="audio/*"
+                            className="hidden"
+                            onChange={handleFileChange}
+                        />
+                        {file ? (
+                             <div className="flex items-center space-x-2 text-primary">
+                                <Mic2 className="h-6 w-6" />
+                                <span className="text-sm font-medium">{file.name}</span>
+                             </div>
+                        ) : (
+                            <>
+                                <Upload className="h-8 w-8 mb-2 text-muted-foreground" />
+                                <p className="text-sm text-muted-foreground">点击上传 WAV/MP3 文件</p>
+                            </>
+                        )}
+                     </div>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">语音描述</label>
+                    <textarea 
+                        className="flex min-h-[80px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="描述声音特点（如：年轻、沉稳...）"
+                    />
+                </div>
+            </div>
+        </Dialog>
+    );
+};