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

refactor: 優化使用者管理介面與角色顯示
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 54s
Details
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source 
- 移除 Header 中的角色名稱顯示
- 調整使用者表單欄位順序（使用者名稱、姓名並排）
- 將角色分配區塊移至基本資料下方
- 修復 email 欄位 null 值警告
- 修復角色選擇無限迴圈錯誤
- 統一角色顯示格式（中文名稱在上，代號在下）
This commit is contained in:
sky121113
2026-01-14 09:52:56 +08:00
parent 8e364bc2f7
commit 7dfe46ff9a
5 changed files with 196 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/Admin/UserController.php
View File

@@ -19,7 +19,7 @@ class UserController extends Controller
{ {
$perPage = $request->input('per_page', 10); $perPage = $request->input('per_page', 10);
$users = User::with('roles') $users = User::with(['roles:id,name,display_name'])
->orderBy('id') ->orderBy('id')
->paginate($perPage) ->paginate($perPage)
->withQueryString(); ->withQueryString();

5
resources/js/Layouts/AuthenticatedLayout.tsx
View File

@@ -352,11 +352,6 @@ export default function AuthenticatedLayout({
</span> </span>
<span className="text-xs text-slate-500"> <span className="text-xs text-slate-500">
{user.username || 'Administrator'} {user.username || 'Administrator'}
{user.roles && user.roles.length > 0 && (
<span className="block text-[10px] text-primary-main">
[{user.roles.join(', ')}]
</span>
)}
</span> </span>
</div> </div>
<div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 group-hover:bg-primary-lightest group-hover:text-primary-main transition-all"> <div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 group-hover:bg-primary-lightest group-hover:text-primary-main transition-all">

168
resources/js/Pages/Admin/User/Create.tsx
View File

@@ -81,11 +81,24 @@ export default function UserCreate({ roles }: Props) {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="space-y-6">
{/* Basic Info */} {/* Basic Info */}
<div className="md:col-span-2 space-y-6"> <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6"> <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="username" className="flex items-center gap-2">
<User className="h-4 w-4" /> 使用者名稱 (登入用)
</Label>
<Input
id="username"
value={data.username}
onChange={e => setData('username', e.target.value)}
placeholder="請輸入登入帳號"
/>
{errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
</div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name" className="flex items-center gap-2"> <Label htmlFor="name" className="flex items-center gap-2">
@@ -99,93 +112,80 @@ export default function UserCreate({ roles }: Props) {
/> />
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>} {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
</div> </div>
<div className="space-y-2">
<Label htmlFor="email" className="flex items-center gap-2">
<Mail className="h-4 w-4" /> 電子郵件 (選填)
</Label>
<Input
id="email"
type="email"
value={data.email}
onChange={e => setData('email', e.target.value)}
placeholder="user@example.com (可省略)"
/>
{errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="username" className="flex items-center gap-2">
<User className="h-4 w-4" /> 使用者名稱 (登入用)
</Label>
<Input
id="username"
value={data.username}
onChange={e => setData('username', e.target.value)}
placeholder="請輸入登入帳號"
/>
{errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
</div>
</div> </div>
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6"> <div className="space-y-2">
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">安全設定</h3> <Label htmlFor="email" className="flex items-center gap-2">
<Mail className="h-4 w-4" /> 電子郵件 (選填)
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> </Label>
<div className="space-y-2"> <Input
<Label htmlFor="password" className="flex items-center gap-2"> id="email"
<Lock className="h-4 w-4" /> 設定密碼 type="email"
</Label> value={data.email}
<Input onChange={e => setData('email', e.target.value)}
id="password" placeholder="user@example.com (可省略)"
type="password" />
value={data.password} {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
onChange={e => setData('password', e.target.value)}
/>
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 確認密碼
</Label>
<Input
id="password_confirmation"
type="password"
value={data.password_confirmation}
onChange={e => setData('password_confirmation', e.target.value)}
/>
</div>
</div>
</div> </div>
</div> </div>
{/* Roles */} {/* Roles */}
<div className="md:col-span-1"> <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full"> <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="space-y-4"> {Object.entries(roles).map(([roleName, displayName]) => (
{Object.entries(roles).map(([roleName, displayName]) => ( <div key={roleName} className="flex items-center space-x-3 p-3 border border-gray-100 bg-gray-50/50 hover:bg-gray-100 rounded-lg transition-colors">
<div key={roleName} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"> <Checkbox
<Checkbox id={`role-${roleName}`}
id={`role-${roleName}`} checked={data.roles.includes(roleName)}
checked={data.roles.includes(roleName)} onCheckedChange={() => toggleRole(roleName)}
onCheckedChange={() => toggleRole(roleName)} />
/> <div className="grid gap-1 leading-none">
<div className="grid gap-1.5 leading-none"> <label
<label htmlFor={`role-${roleName}`}
htmlFor={`role-${roleName}`} className="text-sm font-medium leading-none cursor-pointer"
className="text-sm font-medium leading-none cursor-pointer" onClick={() => toggleRole(roleName)}
> >
{displayName} {displayName}
</label> </label>
<p className="text-xs text-gray-500 font-mono"> <p className="text-xs text-gray-500 font-mono">
{roleName} {roleName}
</p> </p>
</div>
</div> </div>
))} </div>
{errors.roles && <p className="text-sm text-red-500">{errors.roles}</p>} ))}
</div>
{errors.roles && <p className="text-sm text-red-500 mt-2">{errors.roles}</p>}
</div>
{/* Password */}
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">安全設定</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="password" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 設定密碼
</Label>
<Input
id="password"
type="password"
value={data.password}
onChange={e => setData('password', e.target.value)}
/>
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 確認密碼
</Label>
<Input
id="password_confirmation"
type="password"
value={data.password_confirmation}
onChange={e => setData('password_confirmation', e.target.value)}
/>
</div> </div>
</div> </div>
</div> </div>

183
resources/js/Pages/Admin/User/Edit.tsx
View File

@@ -29,7 +29,7 @@ interface Props {
export default function UserEdit({ user, roles, currentRoles }: Props) { export default function UserEdit({ user, roles, currentRoles }: Props) {
const { data, setData, put, processing, errors } = useForm({ const { data, setData, put, processing, errors } = useForm({
name: user.name, name: user.name,
email: user.email, email: user.email || '',
username: user.username || '', username: user.username || '',
password: '', password: '',
password_confirmation: '', password_confirmation: '',
@@ -96,11 +96,24 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="space-y-6">
{/* Basic Info */} {/* Basic Info */}
<div className="md:col-span-2 space-y-6"> <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6"> <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="username" className="flex items-center gap-2">
<User className="h-4 w-4" /> 使用者名稱 (登入用)
</Label>
<Input
id="username"
value={data.username}
onChange={e => setData('username', e.target.value)}
placeholder="請輸入登入帳號"
/>
{errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
</div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name" className="flex items-center gap-2"> <Label htmlFor="name" className="flex items-center gap-2">
@@ -114,100 +127,86 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
/> />
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>} {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
</div> </div>
<div className="space-y-2">
<Label htmlFor="email" className="flex items-center gap-2">
<Mail className="h-4 w-4" /> 電子郵件 (選填)
</Label>
<Input
id="email"
type="email"
value={data.email}
onChange={e => setData('email', e.target.value)}
placeholder="user@example.com (可省略)"
/>
{errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="username" className="flex items-center gap-2">
<User className="h-4 w-4" /> 使用者名稱 (登入用)
</Label>
<Input
id="username"
value={data.username}
onChange={e => setData('username', e.target.value)}
placeholder="請輸入登入帳號"
/>
{errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
</div>
</div> </div>
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6"> <div className="space-y-2">
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">重設密碼</h3> <Label htmlFor="email" className="flex items-center gap-2">
<div className="bg-amber-50 text-amber-800 p-3 rounded-lg text-sm flex items-start gap-2 mb-4"> <Mail className="h-4 w-4" /> 電子郵件 (選填)
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" /> </Label>
若不修改密碼，請留空以下欄位。 <Input
</div> id="email"
type="email"
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> value={data.email}
<div className="space-y-2"> onChange={e => setData('email', e.target.value)}
<Label htmlFor="password" className="flex items-center gap-2"> placeholder="user@example.com (可省略)"
<Lock className="h-4 w-4" /> 新密碼 />
</Label> {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
<Input
id="password"
type="password"
value={data.password}
onChange={e => setData('password', e.target.value)}
placeholder="••••••••"
/>
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 確認新密碼
</Label>
<Input
id="password_confirmation"
type="password"
value={data.password_confirmation}
onChange={e => setData('password_confirmation', e.target.value)}
placeholder="••••••••"
/>
</div>
</div>
</div> </div>
</div> </div>
{/* Roles */} {/* Roles */}
<div className="md:col-span-1"> <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full"> <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="space-y-4"> {roles.map((role) => (
{roles.map((role) => ( <div key={role.id} className="flex items-center space-x-3 p-3 border border-gray-100 bg-gray-50/50 hover:bg-gray-100 rounded-lg transition-colors">
<div key={role.id} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"> <Checkbox
<Checkbox id={`role-${role.id}`}
id={`role-${role.id}`} checked={data.roles.includes(role.name)}
checked={data.roles.includes(role.name)} onCheckedChange={() => toggleRole(role.name)}
onCheckedChange={() => toggleRole(role.name)} />
// Prevent changing super-admin if user is editing themselves? Or just backend protection. <div className="grid gap-1 leading-none">
/> <label
<div className="grid gap-1.5 leading-none"> htmlFor={`role-${role.id}`}
<label className="text-sm font-medium leading-none cursor-pointer"
htmlFor={`role-${role.id}`} onClick={() => toggleRole(role.name)}
className="text-sm font-medium leading-none cursor-pointer" >
> {role.display_name}
{role.display_name} </label>
</label> <p className="text-xs text-gray-500 font-mono">
<p className="text-xs text-gray-500 font-mono"> {role.name}
{role.name} </p>
</p>
</div>
</div> </div>
))} </div>
{errors.roles && <p className="text-sm text-red-500">{errors.roles}</p>} ))}
</div>
{errors.roles && <p className="text-sm text-red-500 mt-2">{errors.roles}</p>}
</div>
{/* Password Reset */}
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">重設密碼</h3>
<div className="bg-amber-50 text-amber-800 p-3 rounded-lg text-sm flex items-start gap-2 mb-4">
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
若不修改密碼，請留空以下欄位。
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="password" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 新密碼
</Label>
<Input
id="password"
type="password"
value={data.password}
onChange={e => setData('password', e.target.value)}
placeholder="••••••••"
/>
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 確認新密碼
</Label>
<Input
id="password_confirmation"
type="password"
value={data.password_confirmation}
onChange={e => setData('password_confirmation', e.target.value)}
placeholder="••••••••"
/>
</div> </div>
</div> </div>
</div> </div>

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

@@ -21,6 +21,7 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
interface Role { interface Role {
id: number; id: number;
name: string; name: string;
display_name: string;
} }
interface User { interface User {
@@ -70,16 +71,7 @@ export default function UserIndex({ users, filters }: Props) {
); );
}; };
const translateRoleName = (name: string) => {
const map: Record<string, string> = {
'super-admin': '超級管理員',
'admin': '管理員',
'warehouse-manager': '倉庫主管',
'purchaser': '採購人員',
'viewer': '檢視者',
};
return map[name] || name;
}
return ( return (
<AuthenticatedLayout <AuthenticatedLayout
@@ -140,21 +132,31 @@ export default function UserIndex({ users, filters }: Props) {
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-2">
{user.roles.length > 0 ? ( {user.roles.length > 0 ? (
user.roles.map(role => ( user.roles.map(role => (
<span <div
key={role.id} key={role.id}
className={cn( className={cn(
"inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border", "inline-flex flex-col px-3 py-1.5 rounded-md border",
role.name === 'super-admin' role.name === 'super-admin'
? "bg-purple-50 text-purple-700 border-purple-200" ? "bg-purple-50 border-purple-200"
: "bg-gray-100 text-gray-700 border-gray-200" : "bg-gray-50 border-gray-200"
)} )}
> >
{role.name === 'super-admin' && <Shield className="h-3 w-3 mr-1" />} <div className="flex items-center gap-1">
{translateRoleName(role.name)} {role.name === 'super-admin' && <Shield className="h-3 w-3 text-purple-600" />}
</span> <span className={cn(
"text-sm font-medium",
role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
)}>
{role.display_name}
</span>
</div>
<span className="text-[10px] text-gray-500 font-mono">
{role.name}
</span>
</div>
)) ))
) : ( ) : (
<span className="text-gray-400 text-sm italic">未分配角色</span> <span className="text-gray-400 text-sm italic">未分配角色</span>