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
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
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>;
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)
interface DrawerProps {
isOpen: boolean;

72
web/pages/ASRLibrary.tsx
View File

@@ -1,6 +1,6 @@
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 { 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 { createASRModel, deleteASRModel, fetchASRModels, previewASRModel, updateASRModel } from '../services/backendApi';
@@ -129,25 +129,25 @@ export const ASRLibraryPage: React.FC = () => {
};
const handleDelete = async (id: string) => {
if (!confirm('确认删除该语音识别模型吗？')) return;
if (!confirm('确认删除该语音识别模型吗？该操作不可恢复。')) return;
await deleteASRModel(id);
setModels((prev) => prev.filter((m) => m.id !== id));
};
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>
<LibraryPageShell
title="语音识别"
primaryAction={(
<Button onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
<Plus className="mr-2 h-4 w-4" /> 添加模型
</Button>
</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 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" />
<Input
placeholder="搜索模型名称/Model Name..."
placeholder="搜索名称..."
className="pl-9 border-0 bg-white/5"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -155,17 +155,15 @@ export const ASRLibraryPage: React.FC = () => {
</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"
<Select
value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value)}
>
<option value="OpenAI Compatible">OpenAI Compatible</option>
</select>
</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"
<Select
value={langFilter}
onChange={(e) => setLangFilter(e.target.value)}
>
@@ -173,9 +171,11 @@ export const ASRLibraryPage: React.FC = () => {
<option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option>
<option value="Multi-lingual">多语言 (Multi-lingual)</option>
</select>
</div>
</Select>
</div>
</>
)}
>
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
<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 max-w-[220px] truncate">{model.baseUrl}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">{maskApiKey(model.apiKey)}</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)}>
<LibraryActionCell
previewAction={(
<Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)} title="试听识别">
<Ear className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" onClick={() => setEditingModel(model)}>
)}
editAction={(
<Button variant="ghost" size="icon" onClick={() => setEditingModel(model)} title="编辑模型">
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-red-400">
)}
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>
</TableCell>
)}
/>
</TableRow>
))}
{!isLoading && filteredModels.length === 0 && (
<TableRow>
<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>
)}
{!isLoading && filteredModels.length === 0 && <TableStatusRow colSpan={7} text="暂无语音识别模型" />}
{isLoading && <TableStatusRow colSpan={7} text="加载中..." />}
</tbody>
</table>
</div>
@@ -254,7 +252,7 @@ export const ASRLibraryPage: React.FC = () => {
onClose={() => setPreviewingModel(null)}
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="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"
<Select
value={vendor}
onChange={(e) => setVendor(e.target.value)}
>
<option value="OpenAI Compatible">OpenAI Compatible</option>
</select>
</Select>
</div>
<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>
<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"
<Select
value={language}
onChange={(e) => setLanguage(e.target.value)}
>
<option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option>
<option value="Multi-lingual">多语言 (Multi-lingual)</option>
</select>
</Select>
</div>
</div>

66
web/pages/LLMLibrary.tsx
View File

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

73
web/pages/VoiceLibrary.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState, useRef } from '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 { createVoice, deleteVoice, fetchVoices, previewVoice, updateVoice } from '../services/backendApi';
@@ -102,15 +102,15 @@ export const VoiceLibraryPage: React.FC = () => {
};
const handleDelete = async (id: string) => {
if (!confirm('确认删除这个声音吗？')) return;
if (!confirm('确认删除该声音吗？该操作不可恢复。')) return;
await deleteVoice(id);
setVoices((prev) => prev.filter((voice) => voice.id !== id));
};
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>
<LibraryPageShell
title="声音资源"
primaryAction={(
<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" /> 添加声音
@@ -119,13 +119,13 @@ export const VoiceLibraryPage: React.FC = () => {
<Mic2 className="mr-2 h-4 w-4" /> 克隆声音
</Button>
</div>
</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 className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="搜索声音名称..."
placeholder="搜索名称..."
className="pl-9 border-0 bg-white/5"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -133,37 +133,36 @@ export const VoiceLibraryPage: React.FC = () => {
</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"
<Select
value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value as any)}
>
<option value="OpenAI Compatible">OpenAI Compatible</option>
</select>
</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"
<Select
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>
</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"
<Select
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>
</Select>
</div>
</>
)}
>
<div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
<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" />}
</Button>
</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="icon" onClick={() => setEditingVoice(voice)}>
<LibraryActionCell
editAction={(
<Button variant="ghost" size="icon" onClick={() => setEditingVoice(voice)} title="编辑声音">
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" onClick={() => handleDelete(voice.id)} className="text-red-400">
)}
deleteAction={(
<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>
</TableCell>
)}
/>
</TableRow>
))}
{!isLoading && filteredVoices.length === 0 && (
<TableRow>
<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>
)}
{!isLoading && filteredVoices.length === 0 && <TableStatusRow colSpan={6} text="暂无声音数据" />}
{isLoading && <TableStatusRow colSpan={6} text="加载中..." />}
</tbody>
</table>
</div>
@@ -236,7 +231,7 @@ export const VoiceLibraryPage: React.FC = () => {
/>
<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="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"
<Select
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option value="Female">女 (Female)</option>
<option value="Male">男 (Male)</option>
</select>
</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"
<Select
value={language}
onChange={(e) => setLanguage(e.target.value)}
>
<option value="zh">中文 (Chinese)</option>
<option value="en">英文 (English)</option>
</select>
</Select>
</div>
</div>