init commit

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

qwen3-tts-frontend/src/components/users/UserTable.tsx

@@ -0,0 +1,87 @@
+import { Edit, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import type { User } from '@/types/auth'
+
+interface UserTableProps {
+  users: User[]
+  isLoading: boolean
+  onEdit: (user: User) => void
+  onDelete: (user: User) => void
+}
+
+export function UserTable({ users, isLoading, onEdit, onDelete }: UserTableProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="text-muted-foreground">加载中...</div>
+      </div>
+    )
+  }
+
+  if (users.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="text-muted-foreground">暂无用户</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead className="border-b">
+          <tr className="text-left">
+            <th className="px-4 py-3 font-medium">ID</th>
+            <th className="px-4 py-3 font-medium">用户名</th>
+            <th className="px-4 py-3 font-medium">邮箱</th>
+            <th className="px-4 py-3 font-medium">状态</th>
+            <th className="px-4 py-3 font-medium">角色</th>
+            <th className="px-4 py-3 font-medium">创建时间</th>
+            <th className="px-4 py-3 font-medium text-right">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.id} className="border-b hover:bg-muted/50">
+              <td className="px-4 py-3">{user.id}</td>
+              <td className="px-4 py-3">{user.username}</td>
+              <td className="px-4 py-3">{user.email}</td>
+              <td className="px-4 py-3">
+                <Badge variant={user.is_active ? 'default' : 'secondary'}>
+                  {user.is_active ? '活跃' : '停用'}
+                </Badge>
+              </td>
+              <td className="px-4 py-3">
+                <Badge variant={user.is_superuser ? 'destructive' : 'outline'}>
+                  {user.is_superuser ? '超级管理员' : '普通用户'}
+                </Badge>
+              </td>
+              <td className="px-4 py-3">
+                {new Date(user.created_at).toLocaleString('zh-CN')}
+              </td>
+              <td className="px-4 py-3">
+                <div className="flex justify-end gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onEdit(user)}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onDelete(user)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}