mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a2c99e3a367740ea81226fe897ea92631dab47be
star-erp/resources/js/Pages/Admin/User/Create.tsx

197 lines
10 KiB
TypeScript
Raw Normal View History

feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Users, ArrowLeft, Check, Lock, Mail, User } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
import { RadioGroup, RadioGroupItem } from '@/Components/ui/radio-group';
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
import { FormEvent } from 'react';
interface Props {
feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
2026-01-13 17:00:58 +08:00
roles: Record<string, string>; // Name (ID) -> DisplayName map from pluck
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
}
export default function UserCreate({ roles }: Props) {
const { data, setData, post, processing, errors } = useForm({
name: '',
email: '',
username: '',
password: '',
password_confirmation: '',
roles: [] as string[], // Role names
});
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
post(route('users.store'));
};
return (
<AuthenticatedLayout
breadcrumbs={[
{ label: '系統管理', href: '#' },
{ label: '使用者管理', href: route('users.index') },
{ label: '新增使用者', href: route('users.create'), isPage: true },
]}
>
<Head title="新增使用者" />
feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
2026-01-13 17:00:58 +08:00
<div className="container mx-auto p-6 max-w-7xl">
<form onSubmit={handleSubmit} className="space-y-6">
{/* Header Area */}
<div>
<Link href={route('users.index')}>
<Button
variant="outline"
type="button"
className="gap-2 button-outlined-primary mb-2"
>
<ArrowLeft className="h-4 w-4" />
返回使用者管理
</Button>
</Link>
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Users className="h-6 w-6 text-[#01ab83]" />
新增使用者
</h1>
<p className="text-gray-500 mt-1">
建立新帳號並設定初始密碼與角色
</p>
</div>
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
<Button
type="submit"
feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
2026-01-13 17:00:58 +08:00
className="button-filled-primary"
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
disabled={processing}
>
<Check className="h-4 w-4 mr-2" />
建立帳號
</Button>
</div>
</div>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
<div className="space-y-6">
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
{/* Basic Info */}
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
<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="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>
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
<div className="space-y-2">
<Label htmlFor="name" className="flex items-center gap-2">
<User className="h-4 w-4" /> 姓名
</Label>
<Input
id="name"
value={data.name}
onChange={e => setData('name', e.target.value)}
placeholder="例如：王小明"
/>
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
</div>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
</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>
{/* Roles */}
<div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
<h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配 (單選)</h3>
<RadioGroup
value={data.roles[0] || ''}
onValueChange={(value) => setData('roles', [value])}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
{Object.entries(roles).map(([roleName, displayName]) => (
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
<Label
key={roleName}
htmlFor={`role-${roleName}`}
className={`flex items-center space-x-3 p-3 border rounded-lg transition-colors cursor-pointer ${data.roles.includes(roleName)
? 'border-primary-main bg-primary-lightest'
: 'border-gray-100 bg-gray-50/50 hover:bg-gray-100'
}`}
>
<RadioGroupItem
value={roleName}
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
id={`role-${roleName}`}
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
className="text-primary-main border-gray-300"
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
/>
<div className="grid gap-1 leading-none">
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
<span className="text-sm font-medium leading-none">
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
{displayName}
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
</span>
<span className="text-xs text-gray-500 font-mono">
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
{roleName}
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
</span>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
</div>
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
</Label>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
))}
修正：UI 優化與使用者角色分配改為單選
2026-01-16 12:05:45 +08:00
</RadioGroup>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
{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>
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
<div className="space-y-2">
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
<Label htmlFor="password" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 設定密碼
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
</Label>
<Input
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
id="password"
type="password"
value={data.password}
onChange={e => setData('password', e.target.value)}
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
/>
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
{errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
</div>
<div className="space-y-2">
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
<Label htmlFor="password_confirmation" className="flex items-center gap-2">
<Lock className="h-4 w-4" /> 確認密碼
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
</Label>
<Input
refactor: 優化使用者管理介面與角色顯示 - 移除 Header 中的角色名稱顯示 - 調整使用者表單欄位順序（使用者名稱、姓名並排） - 將角色分配區塊移至基本資料下方 - 修復 email 欄位 null 值警告 - 修復角色選擇無限迴圈錯誤 - 統一角色顯示格式（中文名稱在上，代號在下）
2026-01-14 09:52:56 +08:00
id="password_confirmation"
type="password"
value={data.password_confirmation}
onChange={e => setData('password_confirmation', e.target.value)}
feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範
2026-01-13 13:30:51 +08:00
/>
</div>
</div>
</div>
</div>
</form>
</div>
</AuthenticatedLayout>
);
}
Reference in New Issue Copy Permalink