Consistent library UI

web/pages/VoiceLibrary.tsx

@@ -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>
+          </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">
@@ -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)}>
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" onClick={() => handleDelete(voice.id)} className="text-red-400">
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </TableCell>
+                <LibraryActionCell
+                  editAction={(
+                    <Button variant="ghost" size="icon" onClick={() => setEditingVoice(voice)} title="编辑声音">
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                  )}
+                  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>
+                  )}
+                />
               </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>