feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
|
||||
import { Button } from '@/Components/ui/button';
|
||||
import {
|
||||
@@ -12,13 +13,30 @@ import {
|
||||
} from "@/Components/ui/table";
|
||||
import { format } from 'date-fns';
|
||||
import { toast } from 'sonner';
|
||||
import { Can } from '@/Components/Permission/Can';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
interface Role {
|
||||
id: number;
|
||||
name: string;
|
||||
display_name: string;
|
||||
users_count: number;
|
||||
permissions_count: number;
|
||||
created_at: string;
|
||||
users?: User[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -26,6 +44,8 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function RoleIndex({ roles }: Props) {
|
||||
const [selectedRole, setSelectedRole] = useState<Role | null>(null);
|
||||
|
||||
const handleDelete = (id: number, name: string) => {
|
||||
if (confirm(`確定要刪除角色「${name}」嗎？此操作無法復原。`)) {
|
||||
router.delete(route('roles.destroy', id), {
|
||||
@@ -34,17 +54,6 @@ export default function RoleIndex({ roles }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const translateRoleName = (name: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'super-admin': '超級管理員',
|
||||
'admin': '管理員',
|
||||
'warehouse-manager': '倉庫主管',
|
||||
'purchaser': '採購人員',
|
||||
'viewer': '檢視者',
|
||||
};
|
||||
return map[name] || name;
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
breadcrumbs={[
|
||||
@@ -65,12 +74,14 @@ export default function RoleIndex({ roles }: Props) {
|
||||
設定系統角色與功能存取權限
|
||||
</p>
|
||||
</div>
|
||||
<Link href={route('roles.create')}>
|
||||
<Button className="button-filled-primary">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新增角色
|
||||
</Button>
|
||||
</Link>
|
||||
<Can permission="roles.create">
|
||||
<Link href={route('roles.create')}>
|
||||
<Button className="button-filled-primary">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新增角色
|
||||
</Button>
|
||||
</Link>
|
||||
</Can>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
@@ -94,7 +105,7 @@ export default function RoleIndex({ roles }: Props) {
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
{translateRoleName(role.name)}
|
||||
{role.display_name}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-500 font-mono text-xs">
|
||||
@@ -106,10 +117,19 @@ export default function RoleIndex({ roles }: Props) {
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 text-gray-600">
|
||||
<Users className="h-3 w-3" />
|
||||
<button
|
||||
onClick={() => role.users_count > 0 && setSelectedRole(role)}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-1 w-full h-full py-2 rounded-md transition-colors",
|
||||
role.users_count > 0
|
||||
? "text-[#01ab83] hover:bg-[#01ab83]/10 font-bold"
|
||||
: "text-gray-400 cursor-default"
|
||||
)}
|
||||
title={role.users_count > 0 ? "點擊查看成員名單" : ""}
|
||||
>
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
{role.users_count}
|
||||
</div>
|
||||
</button>
|
||||
</TableCell>
|
||||
<TableCell className="text-left text-gray-500 text-sm">
|
||||
{format(new Date(role.created_at), 'yyyy/MM/dd')}
|
||||
@@ -117,26 +137,30 @@ export default function RoleIndex({ roles }: Props) {
|
||||
<TableCell className="text-center">
|
||||
{role.name !== 'super-admin' && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Link href={route('roles.edit', role.id)}>
|
||||
<Can permission="roles.edit">
|
||||
<Link href={route('roles.edit', role.id)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary"
|
||||
title="編輯"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Can>
|
||||
<Can permission="roles.delete">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary"
|
||||
title="編輯"
|
||||
className="button-outlined-error"
|
||||
title="刪除"
|
||||
disabled={role.users_count > 0}
|
||||
onClick={() => handleDelete(role.id, role.display_name)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-error"
|
||||
title="刪除"
|
||||
disabled={role.users_count > 0}
|
||||
onClick={() => handleDelete(role.id, translateRoleName(role.name))}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</Can>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
@@ -146,6 +170,54 @@ export default function RoleIndex({ roles }: Props) {
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 成員名單對話框 */}
|
||||
<Dialog open={!!selectedRole} onOpenChange={(open) => !open && setSelectedRole(null)}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-[#01ab83]" />
|
||||
{selectedRole?.display_name} - 成員名單
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
目前共有 {selectedRole?.users_count} 位使用者具備此角色權限
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[60vh] overflow-y-auto pr-2">
|
||||
{selectedRole?.users && selectedRole.users.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{selectedRole.users.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg border border-gray-100 bg-gray-50/50"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-8 rounded-full bg-white border border-gray-200 flex items-center justify-center text-xs font-bold text-gray-500 shadow-sm">
|
||||
{user.name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-900">{user.name}</p>
|
||||
<p className="text-xs text-gray-500 font-mono italic">@{user.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={route('users.edit', user.id)}
|
||||
className="text-xs text-[#01ab83] hover:underline font-medium"
|
||||
>
|
||||
查看帳號
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500 italic">
|
||||
暫無成員
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user