feat: 优化角色表格布局并增加Radix UI分页功能

src/CellularManagement.WebUI/src/pages/roles/RoleTable.tsx

@@ -27,37 +27,37 @@ export default function RoleTable({
   onSetPermissions,
 }: RoleTableProps) {
   return (
-    <div className="rounded-md border">
+    <div className="rounded-md border bg-background">
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>角色名</TableHead>
-            <TableHead>描述</TableHead>
-            <TableHead>创建时间</TableHead>
-            <TableHead>更新时间</TableHead>
-            <TableHead className="text-right">操作</TableHead>
+            <TableHead className="text-foreground">角色名</TableHead>
+            <TableHead className="text-foreground">描述</TableHead>
+            <TableHead className="text-foreground">创建时间</TableHead>
+            <TableHead className="text-foreground">更新时间</TableHead>
+            <TableHead className="text-right text-foreground">操作</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {loading ? (
             <TableRow>
-              <TableCell colSpan={5} className="text-center">
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
                 加载中...
               </TableCell>
             </TableRow>
           ) : roles.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={5} className="text-center">
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
                 暂无数据
               </TableCell>
             </TableRow>
           ) : (
             roles.map((role) => (
               <TableRow key={role.id}>
-                <TableCell>{role.name}</TableCell>
-                <TableCell>{role.description}</TableCell>
-                <TableCell>{formatToBeijingTime(role.createdAt)}</TableCell>
-                <TableCell>{formatToBeijingTime(role.updatedAt)}</TableCell>
+                <TableCell className="text-foreground">{role.name}</TableCell>
+                <TableCell className="text-foreground">{role.description}</TableCell>
+                <TableCell className="text-foreground">{formatToBeijingTime(role.createdAt)}</TableCell>
+                <TableCell className="text-foreground">{formatToBeijingTime(role.updatedAt)}</TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
                     {onEdit && (