mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sky121113
2026-01-13 14:23:45 +08:00
parent f0e6c6e4d1
commit 6600cde3bc
4 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/Pages/Admin/Role/Index.tsx
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))}

20
resources/js/Pages/Admin/User/Index.tsx
View File

@@ -32,6 +32,7 @@ interface Pagination {
last_page: number;
per_page: number;
total: number;
from: number;
links: {
url: string | null;
label: string;
@@ -76,8 +77,8 @@ export default function UserIndex({ users }: 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">
<Users className="h-6 w-6 text-[#01ab83]" />
@@ -88,7 +89,7 @@ export default function UserIndex({ users }: Props) {
</p>
</div>
<Link href={route('users.create')}>
<Button className="bg-[#01ab83] hover:bg-[#019a76]">
<Button className="button-filled-primary">
<Plus className="h-4 w-4 mr-2" />
新增使用者
</Button>
@@ -99,6 +100,7 @@ export default function UserIndex({ users }: Props) {
<Table>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="w-[250px]">使用者</TableHead>
<TableHead>角色</TableHead>
<TableHead className="w-[200px]">加入時間</TableHead>
@@ -106,13 +108,13 @@ export default function UserIndex({ users }: Props) {
</TableRow>
</TableHeader>
<TableBody>
{users.data.map((user) => (
{users.data.map((user, index) => (
<TableRow key={user.id}>
<TableCell className="text-gray-500 font-medium text-center">
{users.from + index}
</TableCell>
<TableCell>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-[#01ab83]/10 flex items-center justify-center text-[#01ab83] font-bold">
{user.name.charAt(0).toUpperCase()}
</div>
<div>
<p className="font-medium text-gray-900">{user.name}</p>
<div className="flex items-center text-xs text-gray-500">
@@ -153,7 +155,7 @@ export default function UserIndex({ users }: 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" />
@@ -162,7 +164,7 @@ export default function UserIndex({ users }: Props) {
<Button
variant="outline"
size="sm"
className="button-outlined-error h-8 w-8 p-0"
className="button-outlined-error"
title="刪除"
onClick={() => handleDelete(user.id, user.name)}
>