Consistent library UI

Make init db args cleaen
2026-02-12 19:23:30 +08:00 · 2026-02-12 19:16:50 +08:00
5 changed files with 189 additions and 128 deletions
--- a/api/init_db.py
+++ b/api/init_db.py
@@ -421,7 +421,13 @@ if __name__ == "__main__":
    args = parser.parse_args()

    # 无参数时保持旧行为：重建 DB + 初始化默认数据
-    if not args.rebuild_db and not args.rebuild_vector_store and not args.skip_seed:
+    # 仅当完全未指定任何选项时才自动触发 rebuild-db。
+    if (
+        not args.rebuild_db
+        and not args.rebuild_vector_store
+        and not args.skip_seed
+        and not args.recreate_tool_db
+    ):
        args.rebuild_db = True

    ensure_db_dir()
@@ -430,6 +436,8 @@ if __name__ == "__main__":
        init_db()
    else:
        print("ℹ️ 跳过数据库结构变更（未指定 --rebuild-db）")
+        if not args.skip_seed or args.recreate_tool_db:
+            print("ℹ️ 当前将执行非破坏性流程（仅工具/默认数据初始化）")

    if args.recreate_tool_db:
        init_default_tools(recreate=True)
--- a/web/components/UI.tsx
+++ b/web/components/UI.tsx
@@ -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;
--- a/web/pages/ASRLibrary.tsx
+++ b/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>
-        </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>

--- a/web/pages/LLMLibrary.tsx
+++ b/web/pages/LLMLibrary.tsx
@@ -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">
--- a/web/pages/VoiceLibrary.tsx
+++ b/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>
-        </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>
Author	SHA1	Message	Date
Xin Wang	3c7efce80b	Consistent library UI	2026-02-12 19:23:30 +08:00
Xin Wang	20afc63a28	Make init db args cleaen	2026-02-12 19:16:50 +08:00