wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vendor can show more

Browse Source
This commit is contained in:
Xin Wang
2026-02-12 19:29:24 +08:00
parent 3c7efce80b
commit 81ed89b84f
3 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/pages/VoiceLibrary.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from 'react';
import React, { useEffect, useMemo, useState, useRef } from 'react';
import { Search, Mic2, Play, Pause, Upload, Filter, Plus, Volume2, Pencil, Trash2 } from 'lucide-react';
import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
import { Voice } from '../types';
@@ -15,7 +15,7 @@ const buildOpenAICompatibleVoiceKey = (rawId: string, model: string): string =>
export const VoiceLibraryPage: React.FC = () => {
const [voices, setVoices] = useState<Voice[]>([]);
const [searchTerm, setSearchTerm] = useState('');
const [vendorFilter, setVendorFilter] = useState<'OpenAI Compatible'>('OpenAI Compatible');
const [vendorFilter, setVendorFilter] = useState<string>('all');
const [genderFilter, setGenderFilter] = useState<'all' | 'Male' | 'Female'>('all');
const [langFilter, setLangFilter] = useState<'all' | 'zh' | 'en'>('all');
@@ -42,9 +42,14 @@ export const VoiceLibraryPage: React.FC = () => {
loadVoices();
}, []);
const vendorOptions = useMemo(
() => Array.from(new Set(voices.map((v) => String(v.vendor || '').trim()).filter(Boolean))).sort(),
[voices]
);
const filteredVoices = voices.filter((voice) => {
const matchesSearch = voice.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesVendor = voice.vendor === vendorFilter;
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;
@@ -135,9 +140,12 @@ export const VoiceLibraryPage: React.FC = () => {
<Filter className="h-4 w-4 text-muted-foreground" />
<Select
value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value as any)}
onChange={(e) => setVendorFilter(e.target.value)}
>
<option value="OpenAI Compatible">OpenAI Compatible</option>
<option value="all">所有厂商</option>
{vendorOptions.map((vendor) => (
<option key={vendor} value={vendor}>{vendor}</option>
))}
</Select>
</div>
<div className="flex items-center space-x-2">