Consistent library UI

web/pages/ASRLibrary.tsx

@@ -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>
+          </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">
@@ -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)}>
-                    <Ear className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" onClick={() => setEditingModel(model)}>
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" onClick={() => handleDelete(model.id)} className="text-red-400">
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </TableCell>
+                <LibraryActionCell
+                  previewAction={(
+                    <Button variant="ghost" size="icon" onClick={() => setPreviewingModel(model)} title="试听识别">
+                      <Ear className="h-4 w-4" />
+                    </Button>
+                  )}
+                  editAction={(
+                    <Button variant="ghost" size="icon" onClick={() => setEditingModel(model)} title="编辑模型">
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                  )}
+                  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>
             ))}
-            {!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>