TalexDreamSoul/teatea-pension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make settings controls editable

Browse Source
This commit is contained in:
admin
2026-07-02 08:25:07 -07:00
parent 67fcb8fabd
commit 89a59956ac
5 changed files with 196 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
modules/settings/components/RoleManagementClient.tsx
View File

@@ -101,40 +101,41 @@ function PermissionTree({
return (
<div className="rounded-md border bg-card" key={group.category}>
<label className="flex items-center justify-between gap-3 border-b px-3 py-3 text-sm">
<div className="flex items-center justify-between gap-3 border-b px-3 py-3 text-sm">
<span className="flex min-w-0 items-center gap-3">
<Checkbox
aria-label={`切换 ${group.category} 权限`}
checked={isAllSelected}
label={
<span className="min-w-0">
<span className="block font-medium">{group.category}</span>
<span className="block text-xs text-muted-foreground">
已选 {selectedCount} / {group.permissions.length}
</span>
</span>
}
onCheckedChange={(checked) => toggleCategory(group.permissions, checked)}
/>
<span>
<span className="block font-medium">{group.category}</span>
<span className="block text-xs text-muted-foreground">
已选 {selectedCount} / {group.permissions.length}
</span>
</span>
</span>
<Badge variant={selectedCount > 0 ? "success" : "secondary"}>{selectedCount}</Badge>
</label>
</div>
<div className="grid gap-2 bg-secondary/15 p-3 md:grid-cols-2">
{group.permissions.map((permission) => (
<label
<div
className="flex min-h-16 items-start gap-3 rounded-md border bg-background p-3 text-sm transition-colors hover:bg-secondary/50"
key={permission.id}
>
<Checkbox
aria-label={`切换 ${permission.label}`}
checked={selectedSet.has(permission.id)}
className="mt-1"
label={
<span className="min-w-0">
<span className="block font-medium">{permission.label}</span>
<span className="block break-all text-xs text-muted-foreground">{permission.id}</span>
<span className="mt-1 block text-xs text-muted-foreground">{permission.description}</span>
</span>
}
onCheckedChange={(checked) => togglePermission(permission.id, checked)}
/>
<span className="min-w-0">
<span className="block font-medium">{permission.label}</span>
<span className="block break-all text-xs text-muted-foreground">{permission.id}</span>
<span className="mt-1 block text-xs text-muted-foreground">{permission.description}</span>
</span>
</label>
</div>
))}
</div>
</div>
@@ -211,9 +212,9 @@ export function RoleManagementClient({ permissions }: RoleManagementClientProps)
>
<form className="grid gap-4" onSubmit={handleSubmit}>
<div className="grid gap-3 md:grid-cols-3">
<Input name="label" placeholder="角色名称" required />
<Input name="key" placeholder="角色标识，可留空" />
<Input name="description" placeholder="角色说明" />
<Input label="角色名称" name="label" placeholder="角色名称" required />
<Input label="角色标识" name="key" placeholder="可留空" />
<Input label="角色说明" name="description" placeholder="角色说明" />
</div>
<PermissionTree
onChange={setSelectedPermissions}
@@ -352,31 +353,19 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
>
<form className="grid gap-4" onSubmit={handleSubmit}>
<div className="grid gap-3 md:grid-cols-2">
<label className="grid gap-2 text-sm">
<span className="font-medium">角色名称</span>
<Input defaultValue={role.label} name="label" required />
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium">角色标识</span>
<Input defaultValue={role.key} name="key" required />
</label>
<Input defaultValue={role.label} label="角色名称" name="label" required />
<Input defaultValue={role.key} label="角色标识" name="key" required />
</div>
<label className="grid gap-2 text-sm">
<span className="font-medium">角色说明</span>
<Input defaultValue={role.description} name="description" />
</label>
<label className="grid gap-2 text-sm">
<span className="font-medium">状态</span>
<Select
aria-label="角色状态"
defaultValue={String(role.isEnabled)}
name="isEnabled"
options={[
{ value: "true", label: "启用" },
{ value: "false", label: "停用" },
]}
/>
</label>
<Input defaultValue={role.description} label="角色说明" name="description" />
<Select
defaultValue={String(role.isEnabled)}
label="状态"
name="isEnabled"
options={[
{ value: "true", label: "启用" },
{ value: "false", label: "停用" },
]}
/>
<PermissionTree
onChange={setSelectedPermissions}
permissions={permissions}