feat: 菜单优化

src/pages/system/Users.tsx

@@ -8,9 +8,11 @@ import { Badge } from '@/components/ui/badge'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
 
 import { getUserList, createUser, updateUser, deleteUser } from '@/api/system/user'
-import type { SystemUser } from '@/api/system'
+import { getRoleList } from '@/api/system/role'
+import type { SystemUser, SystemRole } from '@/api/system'
 
 export default function UserManage() {
   const [users, setUsers] = useState<SystemUser[]>([])
@@ -18,10 +20,13 @@ export default function UserManage() {
   const [loading, setLoading] = useState(false)
   const [search, setSearch] = useState({ account: '', name: '' })
   
+  // All Roles for assignment
+  const [allRoles, setAllRoles] = useState<SystemRole[]>([])
+
   // Dialog State
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingUser, setEditingUser] = useState<SystemUser | null>(null)
-  const [formData, setFormData] = useState({ account: '', name: '', phone: '', clientId: '' })
+  const [formData, setFormData] = useState({ account: '', name: '', phone: '', clientId: '', roleIds: [] as string[] })
 
   const fetchUsers = async () => {
     setLoading(true)
@@ -36,7 +41,15 @@ export default function UserManage() {
     }
   }
 
-  useEffect(() => { fetchUsers() }, [])
+  const fetchRoles = async () => {
+    const res = await getRoleList({ current: 1, pageSize: 100 })
+    if (res.data) setAllRoles(res.data.list)
+  }
+
+  useEffect(() => { 
+    fetchUsers()
+    fetchRoles()
+  }, [])
 
   const handleSearch = () => fetchUsers()
 
@@ -47,13 +60,16 @@ export default function UserManage() {
 
   const openCreateDialog = () => {
     setEditingUser(null)
-    setFormData({ account: '', name: '', phone: '', clientId: '' })
+    setFormData({ account: '', name: '', phone: '', clientId: '', roleIds: [] })
     setDialogOpen(true)
   }
 
   const openEditDialog = (user: SystemUser) => {
     setEditingUser(user)
-    setFormData({ account: user.account, name: user.name, phone: user.phone || '', clientId: user.clientId || '' })
+    setFormData({ 
+      account: user.account, name: user.name, phone: user.phone || '', clientId: user.clientId || '',
+      roleIds: user.roles?.map(r => r.id) || []
+    })
     setDialogOpen(true)
   }
 
@@ -74,11 +90,19 @@ export default function UserManage() {
     }
   }
 
+  const toggleRole = (roleId: string, checked: boolean) => {
+    if (checked) {
+      setFormData(prev => ({ ...prev, roleIds: [...prev.roleIds, roleId] }))
+    } else {
+      setFormData(prev => ({ ...prev, roleIds: prev.roleIds.filter(id => id !== roleId) }))
+    }
+  }
+
   return (
     <div className="space-y-6 animate-fadeIn">
       <div>
         <h1 className="text-2xl font-bold tracking-tight">用户管理</h1>
-        <p className="text-muted-foreground mt-1">管理系统和各个客户端(Plant, Radio等)的用户访问权限。</p>
+        <p className="text-muted-foreground mt-1">管理系统和各个客户端(Plant, Radio等)的用户访问权限及角色绑定。</p>
       </div>
 
       <Card className="border-border/60 shadow-soft">
@@ -159,7 +183,7 @@ export default function UserManage() {
                     <TableCell>
                       <div className="flex gap-1 flex-wrap">
                         {user.roles?.map(r => (
-                          <Badge key={r.id} variant="default" className="text-[10px] h-5 font-normal">
+                          <Badge key={r.id} variant="default" className="text-[10px] h-5 font-normal bg-emerald-500 hover:bg-emerald-600 text-white">
                             {r.name}
                           </Badge>
                         )) || <span className="text-muted-foreground text-xs">无角色</span>}
@@ -179,7 +203,7 @@ export default function UserManage() {
                         <DropdownMenuContent align="end">
                           <DropdownMenuLabel>操作</DropdownMenuLabel>
                           <DropdownMenuItem onClick={() => openEditDialog(user)}>
-                            <Edit className="mr-2 h-4 w-4 text-blue-500" /> 编辑信息
+                            <Edit className="mr-2 h-4 w-4 text-blue-500" /> 编辑 & 赋权
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <DropdownMenuItem onClick={() => handleDelete(user.id)} className="text-red-500 focus:text-red-500 focus:bg-red-50 dark:focus:bg-red-950">
@@ -194,7 +218,6 @@ export default function UserManage() {
             </TableBody>
           </Table>
           
-          {/* Simple Pagination Footer */}
           <div className="flex items-center justify-between px-6 py-4 border-t border-border/40 text-sm text-muted-foreground">
             <div>共 {total} 条记录</div>
             <div className="flex items-center gap-2">
@@ -211,7 +234,7 @@ export default function UserManage() {
           <DialogHeader>
             <DialogTitle>{editingUser ? '编辑用户' : '新增用户'}</DialogTitle>
             <DialogDescription>
-              {editingUser ? '修改用户信息和客户端绑定。' : '在系统中创建一个新用户账号。'}
+              {editingUser ? '修改用户信息并分配角色。' : '在系统中创建一个新用户账号并分配角色。'}
             </DialogDescription>
           </DialogHeader>
           <div className="grid gap-4 py-4">
@@ -229,7 +252,29 @@ export default function UserManage() {
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
               <Label htmlFor="clientId" className="text-right">客户端</Label>
-              <Input id="clientId" placeholder="如: plant, radio 或留空" value={formData.clientId} onChange={e => setFormData({ ...formData, clientId: e.target.value })} className="col-span-3" />
+              <Input id="clientId" placeholder="如: plant, radio" value={formData.clientId} onChange={e => setFormData({ ...formData, clientId: e.target.value })} className="col-span-3" />
+            </div>
+            
+            {/* Roles Assignment */}
+            <div className="grid grid-cols-4 items-start gap-4 mt-2">
+              <Label className="text-right pt-2">分配角色</Label>
+              <div className="col-span-3 grid grid-cols-2 gap-3 p-3 bg-muted/30 rounded-lg border border-border/50">
+                {allRoles.map(role => (
+                  <div key={role.id} className="flex items-center space-x-2">
+                    <Checkbox 
+                      id={`role-${role.id}`} 
+                      checked={formData.roleIds.includes(role.id)} 
+                      onCheckedChange={(checked) => toggleRole(role.id, checked as boolean)} 
+                    />
+                    <label
+                      htmlFor={`role-${role.id}`}
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                    >
+                      {role.name}
+                    </label>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
           <DialogFooter>