style: 統一全系統按鈕樣式、新增表格序號欄位、移除裝飾性圖示並同步頁面邊距

This commit is contained in:
2026-01-13 14:23:45 +08:00
parent f0e6c6e4d1
commit 6600cde3bc
4 changed files with 30 additions and 27 deletions

View File

@@ -54,8 +54,8 @@ export default function RoleIndex({ roles }: Props) {
>
<Head title="角色管理" />
<div className="p-8 max-w-7xl mx-auto space-y-6">
<div className="flex items-center justify-between">
<div className="container mx-auto p-6 max-w-7xl">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Shield className="h-6 w-6 text-[#01ab83]" />
@@ -66,7 +66,7 @@ export default function RoleIndex({ roles }: Props) {
</p>
</div>
<Link href={route('roles.create')}>
<Button className="bg-[#01ab83] hover:bg-[#019a76]">
<Button className="button-filled-primary">
<Plus className="h-4 w-4 mr-2" />
</Button>
@@ -77,7 +77,8 @@ export default function RoleIndex({ roles }: Props) {
<Table>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[200px]"></TableHead>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="text-center"></TableHead>
<TableHead className="text-center">使</TableHead>
@@ -86,13 +87,13 @@ export default function RoleIndex({ roles }: Props) {
</TableRow>
</TableHeader>
<TableBody>
{roles.map((role) => (
{roles.map((role, index) => (
<TableRow key={role.id}>
<TableCell className="text-gray-500 font-medium text-center">
{index + 1}
</TableCell>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<div className="p-2 bg-gray-100 rounded-lg">
<Shield className="h-4 w-4 text-gray-500" />
</div>
{translateRoleName(role.name)}
</div>
</TableCell>
@@ -120,7 +121,7 @@ export default function RoleIndex({ roles }: Props) {
<Button
variant="outline"
size="sm"
className="button-outlined-primary h-8 w-8 p-0"
className="button-outlined-primary"
title="編輯"
>
<Pencil className="h-4 w-4" />
@@ -129,7 +130,7 @@ export default function RoleIndex({ roles }: Props) {
<Button
variant="outline"
size="sm"
className="button-outlined-error h-8 w-8 p-0"
className="button-outlined-error"
title="刪除"
disabled={role.users_count > 0}
onClick={() => handleDelete(role.id, translateRoleName(role.name))}