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

Consistent library UI

Browse Source
This commit is contained in:
Xin Wang
2026-02-12 19:23:30 +08:00
parent 20afc63a28
commit 3c7efce80b
4 changed files with 180 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/components/UI.tsx
View File

@@ -52,6 +52,19 @@ export const Input: React.FC<InputProps> = ({ className = '', ...props }) => {
); );
}; };
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
export const Select: React.FC<SelectProps> = ({ className = '', children, ...props }) => {
return (
<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 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
{...props}
>
{children}
</select>
);
};
// Card - Glassmorphism style, very subtle border // Card - Glassmorphism style, very subtle border
interface CardProps extends React.HTMLAttributes<HTMLDivElement> { interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode; children: React.ReactNode;
@@ -104,6 +117,59 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
} }
export const TableCell: React.FC<TableCellProps> = ({ children, className = '', ...props }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</td>; export const TableCell: React.FC<TableCellProps> = ({ children, className = '', ...props }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</td>;
interface LibraryPageShellProps {
title: string;
primaryAction: React.ReactNode;
filterBar: React.ReactNode;
children: React.ReactNode;
}
export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => {
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">{title}</h1>
{primaryAction}
</div>
<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">
{filterBar}
</div>
{children}
</div>
);
};
interface TableStatusRowProps {
colSpan: number;
text: string;
}
export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => {
return (
<TableRow>
<TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
{text}
</TableCell>
</TableRow>
);
};
interface LibraryActionCellProps {
previewAction?: React.ReactNode;
editAction: React.ReactNode;
deleteAction: React.ReactNode;
}
export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => {
return (
<TableCell className="text-right">
{previewAction}
{editAction}
{deleteAction}
</TableCell>
);
};
// Drawer (Side Sheet) // Drawer (Side Sheet)
interface DrawerProps { interface DrawerProps {
isOpen: boolean; isOpen: boolean;

84
web/pages/ASRLibrary.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Search, Filter, Plus, Trash2, Key, Server, Ear, Globe, Languages, Pencil, Mic, Square, Upload } from 'lucide-react'; import { Search, Filter, Plus, Trash2, Key, Server, Ear, Globe, Languages, Pencil, Mic, Square, Upload } from 'lucide-react';
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI'; import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
import { ASRModel } from '../types'; import { ASRModel } from '../types';
import { createASRModel, deleteASRModel, fetchASRModels, previewASRModel, updateASRModel } from '../services/backendApi'; import { createASRModel, deleteASRModel, fetchASRModels, previewASRModel, updateASRModel } from '../services/backendApi';
@@ -129,25 +129,25 @@ export const ASRLibraryPage: React.FC = () => {
}; };
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
if (!confirm('确认删除该语音识别模型吗？')) return; if (!confirm('确认删除该语音识别模型吗？该操作不可恢复。')) return;
await deleteASRModel(id); await deleteASRModel(id);
setModels((prev) => prev.filter((m) => m.id !== id)); setModels((prev) => prev.filter((m) => m.id !== id));
}; };
return ( return (
<div className="space-y-6 animate-in fade-in py-4 pb-10"> <LibraryPageShell
<div className="flex items-center justify-between"> title="语音识别"
<h1 className="text-2xl font-bold tracking-tight text-white">语音识别</h1> primaryAction={(
<Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]"> <Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
<Plus className="mr-2 h-4 w-4" /> 添加模型 <Plus className="mr-2 h-4 w-4" /> 添加模型
</Button> </Button>
</div> )}
filterBar={(
<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 col-span-1 md:col-span-2"> <div className="relative col-span-1 md:col-span-2">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="搜索模型名称/Model Name..." placeholder="搜索名称..."
className="pl-9 border-0 bg-white/5" className="pl-9 border-0 bg-white/5"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
@@ -155,17 +155,15 @@ export const ASRLibraryPage: React.FC = () => {
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Filter className="h-4 w-4 text-muted-foreground" /> <Filter className="h-4 w-4 text-muted-foreground" />
<select <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} value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value)} onChange={(e) => setVendorFilter(e.target.value)}
> >
<option value="OpenAI Compatible">OpenAI Compatible</option> <option value="OpenAI Compatible">OpenAI Compatible</option>
</select> </Select>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<select <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} value={langFilter}
onChange={(e) => setLangFilter(e.target.value)} onChange={(e) => setLangFilter(e.target.value)}
> >
@@ -173,9 +171,11 @@ export const ASRLibraryPage: React.FC = () => {
<option value="zh">中文 (Chinese)</option> <option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option> <option value="en">英文 (English)</option>
<option value="Multi-lingual">多语言 (Multi-lingual)</option> <option value="Multi-lingual">多语言 (Multi-lingual)</option>
</select> </Select>
</div> </div>
</div> </>
)}
>
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden"> <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
@@ -209,29 +209,27 @@ export const ASRLibraryPage: React.FC = () => {
<TableCell className="font-mono text-xs text-muted-foreground">{model.modelName || '-'}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground">{model.modelName || '-'}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground max-w-[220px] truncate">{model.baseUrl}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground max-w-[220px] truncate">{model.baseUrl}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell>
<TableCell className="text-right"> <LibraryActionCell
<Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)}> previewAction={(
<Ear className="h-4 w-4" /> <Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)} title="试听识别">
</Button> <Ear className="h-4 w-4" />
<Button variant="ghost" size="icon" onClick={() => setEditingModel(model)}> </Button>
<Pencil className="h-4 w-4" /> )}
</Button> editAction={(
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-red-400"> <Button variant="ghost" size="icon" onClick={() => setEditingModel(model)} title="编辑模型">
<Trash2 className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</Button> </Button>
</TableCell> )}
deleteAction={(
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-muted-foreground hover:text-destructive transition-colors" title="删除模型">
<Trash2 className="h-4 w-4" />
</Button>
)}
/>
</TableRow> </TableRow>
))} ))}
{!isLoading && filteredModels.length === 0 && ( {!isLoading && filteredModels.length === 0 && <TableStatusRow colSpan={7} text="暂无语音识别模型" />}
<TableRow> {isLoading && <TableStatusRow colSpan={7} text="加载中..." />}
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">暂无语音识别模型</TableCell>
</TableRow>
)}
{isLoading && (
<TableRow>
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">加载中...</TableCell>
</TableRow>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -254,7 +252,7 @@ export const ASRLibraryPage: React.FC = () => {
onClose={() => setPreviewingModel(null)} onClose={() => setPreviewingModel(null)}
model={previewingModel} model={previewingModel}
/> />
</div> </LibraryPageShell>
); );
}; };
@@ -360,25 +358,23 @@ const ASRModelModal: React.FC<{
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">接口类型</label> <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">接口类型</label>
<select <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={vendor} value={vendor}
onChange={(e) => setVendor(e.target.value)} onChange={(e) => setVendor(e.target.value)}
> >
<option value="OpenAI Compatible">OpenAI Compatible</option> <option value="OpenAI Compatible">OpenAI Compatible</option>
</select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block flex items-center"><Languages className="w-3 h-3 mr-1.5" />语言</label> <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block flex items-center"><Languages className="w-3 h-3 mr-1.5" />语言</label>
<select <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} value={language}
onChange={(e) => setLanguage(e.target.value)} onChange={(e) => setLanguage(e.target.value)}
> >
<option value="zh">中文 (Chinese)</option> <option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option> <option value="en">英文 (English)</option>
<option value="Multi-lingual">多语言 (Multi-lingual)</option> <option value="Multi-lingual">多语言 (Multi-lingual)</option>
</select> </Select>
</div> </div>
</div> </div>

76
web/pages/LLMLibrary.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer, Pencil, Play } from 'lucide-react'; import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer, Pencil, Play } from 'lucide-react';
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI'; import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
import { LLMModel } from '../types'; import { LLMModel } from '../types';
import { createLLMModel, deleteLLMModel, fetchLLMModels, previewLLMModel, updateLLMModel } from '../services/backendApi'; import { createLLMModel, deleteLLMModel, fetchLLMModels, previewLLMModel, updateLLMModel } from '../services/backendApi';
@@ -59,25 +59,25 @@ export const LLMLibraryPage: React.FC = () => {
}; };
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
if (!confirm('确认删除该模型配置吗？')) return; if (!confirm('确认删除该模型吗？该操作不可恢复。')) return;
await deleteLLMModel(id); await deleteLLMModel(id);
setModels((prev) => prev.filter((item) => item.id !== id)); setModels((prev) => prev.filter((item) => item.id !== id));
}; };
return ( return (
<div className="space-y-6 animate-in fade-in py-4 pb-10"> <LibraryPageShell
<div className="flex items-center justify-between"> title="模型接入"
<h1 className="text-2xl font-bold tracking-tight text-white">模型接入</h1> primaryAction={(
<Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]"> <Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
<Plus className="mr-2 h-4 w-4" /> 添加模型 <Plus className="mr-2 h-4 w-4" /> 添加模型
</Button> </Button>
</div> )}
filterBar={(
<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 col-span-1 md:col-span-2"> <div className="relative col-span-1 md:col-span-2">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="搜索模型名称/Model Name..." placeholder="搜索名称..."
className="pl-9 border-0 bg-white/5" className="pl-9 border-0 bg-white/5"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
@@ -85,17 +85,15 @@ export const LLMLibraryPage: React.FC = () => {
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Filter className="h-4 w-4 text-muted-foreground" /> <Filter className="h-4 w-4 text-muted-foreground" />
<select <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} value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value)} onChange={(e) => setVendorFilter(e.target.value)}
> >
<option value="OpenAI Compatible">OpenAI Compatible</option> <option value="OpenAI Compatible">OpenAI Compatible</option>
</select> </Select>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<select <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={typeFilter} value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value)} onChange={(e) => setTypeFilter(e.target.value)}
> >
@@ -103,9 +101,11 @@ export const LLMLibraryPage: React.FC = () => {
<option value="text">文本 (Text)</option> <option value="text">文本 (Text)</option>
<option value="embedding">嵌入 (Embedding)</option> <option value="embedding">嵌入 (Embedding)</option>
<option value="rerank">重排 (Rerank)</option> <option value="rerank">重排 (Rerank)</option>
</select> </Select>
</div> </div>
</div> </>
)}
>
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden"> <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
@@ -138,8 +138,9 @@ export const LLMLibraryPage: React.FC = () => {
<TableCell className="font-mono text-xs text-muted-foreground">{model.modelName || '-'}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground">{model.modelName || '-'}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground max-w-[240px] truncate">{model.baseUrl}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground max-w-[240px] truncate">{model.baseUrl}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell> <TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell>
<TableCell className="text-right"> <LibraryActionCell
<Button previewAction={(
<Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setPreviewingModel(model)} onClick={() => setPreviewingModel(model)}
@@ -148,25 +149,22 @@ export const LLMLibraryPage: React.FC = () => {
> >
<Play className="h-4 w-4" /> <Play className="h-4 w-4" />
</Button> </Button>
<Button variant="ghost" size="icon" onClick={() => setEditingModel(model)}> )}
<Pencil className="h-4 w-4" /> editAction={(
</Button> <Button variant="ghost" size="icon" onClick={() => setEditingModel(model)} title="编辑模型">
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-muted-foreground hover:text-destructive transition-colors"> <Pencil className="h-4 w-4" />
<Trash2 className="h-4 w-4" /> </Button>
</Button> )}
</TableCell> deleteAction={(
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-muted-foreground hover:text-destructive transition-colors" title="删除模型">
<Trash2 className="h-4 w-4" />
</Button>
)}
/>
</TableRow> </TableRow>
))} ))}
{!isLoading && filteredModels.length === 0 && ( {!isLoading && filteredModels.length === 0 && <TableStatusRow colSpan={7} text="暂无模型数据" />}
<TableRow> {isLoading && <TableStatusRow colSpan={7} text="加载中..." />}
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">暂无模型数据</TableCell>
</TableRow>
)}
{isLoading && (
<TableRow>
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">加载中...</TableCell>
</TableRow>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -185,7 +183,7 @@ export const LLMLibraryPage: React.FC = () => {
onClose={() => setPreviewingModel(null)} onClose={() => setPreviewingModel(null)}
model={previewingModel} model={previewingModel}
/> />
</div> </LibraryPageShell>
); );
}; };
@@ -273,13 +271,13 @@ const LLMModelModal: React.FC<{
<div className="space-y-4 max-h-[75vh] overflow-y-auto px-1 custom-scrollbar"> <div className="space-y-4 max-h-[75vh] overflow-y-auto px-1 custom-scrollbar">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">厂商 (Vendor)</label> <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">厂商 (Vendor)</label>
<select <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" className="h-10 border border-white/10 appearance-none cursor-pointer"
value={vendor} value={vendor}
onChange={(e) => setVendor(e.target.value)} onChange={(e) => setVendor(e.target.value)}
> >
<option value="OpenAI Compatible">OpenAI Compatible</option> <option value="OpenAI Compatible">OpenAI Compatible</option>
</select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">

81
web/pages/VoiceLibrary.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { Search, Mic2, Play, Pause, Upload, Filter, Plus, Volume2, Pencil, Trash2 } from 'lucide-react'; import { Search, Mic2, Play, Pause, Upload, Filter, Plus, Volume2, Pencil, Trash2 } from 'lucide-react';
import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI'; import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
import { Voice } from '../types'; import { Voice } from '../types';
import { createVoice, deleteVoice, fetchVoices, previewVoice, updateVoice } from '../services/backendApi'; import { createVoice, deleteVoice, fetchVoices, previewVoice, updateVoice } from '../services/backendApi';
@@ -102,15 +102,15 @@ export const VoiceLibraryPage: React.FC = () => {
}; };
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
if (!confirm('确认删除这个声音吗？')) return; if (!confirm('确认删除该声音吗？该操作不可恢复。')) return;
await deleteVoice(id); await deleteVoice(id);
setVoices((prev) => prev.filter((voice) => voice.id !== id)); setVoices((prev) => prev.filter((voice) => voice.id !== id));
}; };
return ( return (
<div className="space-y-6 animate-in fade-in py-4 pb-10"> <LibraryPageShell
<div className="flex items-center justify-between"> title="声音资源"
<h1 className="text-2xl font-bold tracking-tight text-white">声音资源</h1> primaryAction={(
<div className="flex space-x-3"> <div className="flex space-x-3">
<Button variant="primary" onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]"> <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" /> 添加声音 <Plus className="mr-2 h-4 w-4" /> 添加声音
@@ -119,13 +119,13 @@ export const VoiceLibraryPage: React.FC = () => {
<Mic2 className="mr-2 h-4 w-4" /> 克隆声音 <Mic2 className="mr-2 h-4 w-4" /> 克隆声音
</Button> </Button>
</div> </div>
</div> )}
filterBar={(
<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"> <div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="搜索声音名称..." placeholder="搜索名称..."
className="pl-9 border-0 bg-white/5" className="pl-9 border-0 bg-white/5"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
@@ -133,37 +133,36 @@ export const VoiceLibraryPage: React.FC = () => {
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Filter className="h-4 w-4 text-muted-foreground" /> <Filter className="h-4 w-4 text-muted-foreground" />
<select <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} value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value as any)} onChange={(e) => setVendorFilter(e.target.value as any)}
> >
<option value="OpenAI Compatible">OpenAI Compatible</option> <option value="OpenAI Compatible">OpenAI Compatible</option>
</select> </Select>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<select <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} value={genderFilter}
onChange={(e) => setGenderFilter(e.target.value as any)} onChange={(e) => setGenderFilter(e.target.value as any)}
> >
<option value="all">所有性别</option> <option value="all">所有性别</option>
<option value="Male">男 (Male)</option> <option value="Male">男 (Male)</option>
<option value="Female">女 (Female)</option> <option value="Female">女 (Female)</option>
</select> </Select>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<select <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} value={langFilter}
onChange={(e) => setLangFilter(e.target.value as any)} onChange={(e) => setLangFilter(e.target.value as any)}
> >
<option value="all">所有语言</option> <option value="all">所有语言</option>
<option value="zh">中文 (Chinese)</option> <option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option> <option value="en">英文 (English)</option>
</select> </Select>
</div> </div>
</div> </>
)}
>
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden"> <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
@@ -202,26 +201,22 @@ export const VoiceLibraryPage: React.FC = () => {
{playingVoiceId === voice.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />} {playingVoiceId === voice.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
</Button> </Button>
</TableCell> </TableCell>
<TableCell className="text-right"> <LibraryActionCell
<Button variant="ghost" size="icon" onClick={() => setEditingVoice(voice)}> editAction={(
<Pencil className="h-4 w-4" /> <Button variant="ghost" size="icon" onClick={() => setEditingVoice(voice)} title="编辑声音">
</Button> <Pencil className="h-4 w-4" />
<Button variant="ghost" size="icon" onClick={() => handleDelete(voice.id)} className="text-red-400"> </Button>
<Trash2 className="h-4 w-4" /> )}
</Button> deleteAction={(
</TableCell> <Button variant="ghost" size="icon" onClick={() => handleDelete(voice.id)} className="text-muted-foreground hover:text-destructive transition-colors" title="删除声音">
<Trash2 className="h-4 w-4" />
</Button>
)}
/>
</TableRow> </TableRow>
))} ))}
{!isLoading && filteredVoices.length === 0 && ( {!isLoading && filteredVoices.length === 0 && <TableStatusRow colSpan={6} text="暂无声音数据" />}
<TableRow> {isLoading && <TableStatusRow colSpan={6} text="加载中..." />}
<TableCell colSpan={6} className="text-center py-6 text-muted-foreground">暂无声音数据</TableCell>
</TableRow>
)}
{isLoading && (
<TableRow>
<TableCell colSpan={6} className="text-center py-6 text-muted-foreground">加载中...</TableCell>
</TableRow>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -236,7 +231,7 @@ export const VoiceLibraryPage: React.FC = () => {
/> />
<CloneVoiceModal isOpen={isCloneModalOpen} onClose={() => setIsCloneModalOpen(false)} onSuccess={handleAddSuccess} /> <CloneVoiceModal isOpen={isCloneModalOpen} onClose={() => setIsCloneModalOpen(false)} onSuccess={handleAddSuccess} />
</div> </LibraryPageShell>
); );
}; };
@@ -433,25 +428,23 @@ const AddVoiceModal: React.FC<{
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">性别</label> <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">性别</label>
<select <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} value={gender}
onChange={(e) => setGender(e.target.value)} onChange={(e) => setGender(e.target.value)}
> >
<option value="Female">女 (Female)</option> <option value="Female">女 (Female)</option>
<option value="Male">男 (Male)</option> <option value="Male">男 (Male)</option>
</select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语言</label> <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语言</label>
<select <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} value={language}
onChange={(e) => setLanguage(e.target.value)} onChange={(e) => setLanguage(e.target.value)}
> >
<option value="zh">中文 (Chinese)</option> <option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option> <option value="en">英文 (English)</option>
</select> </Select>
</div> </div>
</div> </div>