refactor(agents-console): enhance UI styling and remove unused delegation content

Updated the styling of agent tree nodes for improved visual feedback on selection and hover states. Removed deprecated delegation management UI components to streamline the agents console. This refactor enhances user experience and maintains a cleaner codebase.
This commit is contained in:
2026-06-03 11:33:03 +08:00
parent bbb6f28459
commit 59b0684ea1

View File

@@ -148,8 +148,10 @@ function AgentTreeNodes({
<li key={node.id}> <li key={node.id}>
<div <div
className={cn( className={cn(
"group flex items-center gap-1 rounded-md pr-2", "group flex items-center gap-1 rounded-md pr-2 transition-colors",
selectedId === node.id ? "bg-primary/5 ring-1 ring-primary/20" : "hover:bg-muted/60", selectedId === node.id
? "bg-primary text-primary-foreground shadow-sm"
: "hover:bg-muted/60 text-muted-foreground",
)} )}
> >
{node.children && node.children.length > 0 ? ( {node.children && node.children.length > 0 ? (
@@ -157,7 +159,12 @@ function AgentTreeNodes({
type="button" type="button"
aria-label="toggle children" aria-label="toggle children"
onClick={() => onToggleExpand(node.id)} onClick={() => onToggleExpand(node.id)}
className="ml-1 rounded-sm p-0.5 text-muted-foreground hover:bg-muted" className={cn(
"ml-1 rounded-sm p-0.5 transition-colors",
selectedId === node.id
? "text-primary-foreground/80 hover:bg-primary-foreground/20 hover:text-primary-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
)}
> >
<ChevronRight <ChevronRight
className={cn( className={cn(
@@ -174,11 +181,16 @@ function AgentTreeNodes({
onClick={() => onSelect(node)} onClick={() => onSelect(node)}
className={cn( className={cn(
"flex min-w-0 flex-1 items-center gap-1 rounded-md py-1.5 text-left text-sm", "flex min-w-0 flex-1 items-center gap-1 rounded-md py-1.5 text-left text-sm",
selectedId === node.id && "font-medium text-foreground", selectedId === node.id ? "font-medium" : "text-foreground",
)} )}
> >
<span className="truncate">{node.name}</span> <span className="truncate">{node.name}</span>
<span className="ml-auto font-mono text-[11px] text-muted-foreground">{node.code}</span> <span className={cn(
"ml-auto font-mono text-[11px]",
selectedId === node.id ? "text-primary-foreground/70" : "text-muted-foreground"
)}>
{node.code}
</span>
</button> </button>
</div> </div>
{node.children && node.children.length > 0 && expandedIds.has(node.id) ? ( {node.children && node.children.length > 0 && expandedIds.has(node.id) ? (
@@ -603,13 +615,6 @@ export function AgentsConsole(): React.ReactElement {
</Select> </Select>
) : null} ) : null}
</div> </div>
<div className="rounded-xl border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
{t("modelGuide", {
defaultValue:
"代理层负责数据范围Scope与授权上限Ceiling账号权限请通过角色分配。",
})}
</div>
{err ? <p className="text-sm text-destructive">{err}</p> : null} {err ? <p className="text-sm text-destructive">{err}</p> : null}
<div className="grid gap-4 lg:grid-cols-[minmax(220px,280px)_1fr]"> <div className="grid gap-4 lg:grid-cols-[minmax(220px,280px)_1fr]">
@@ -704,9 +709,7 @@ export function AgentsConsole(): React.ReactElement {
<TabsList> <TabsList>
{canViewRoles ? <TabsTrigger value="roles">{t("tabs.roles")}</TabsTrigger> : null} {canViewRoles ? <TabsTrigger value="roles">{t("tabs.roles")}</TabsTrigger> : null}
{canViewUsers ? <TabsTrigger value="users">{t("tabs.users")}</TabsTrigger> : null} {canViewUsers ? <TabsTrigger value="users">{t("tabs.users")}</TabsTrigger> : null}
{canManageDelegation ? (
<TabsTrigger value="delegation">{t("tabs.delegation")}</TabsTrigger>
) : null}
</TabsList> </TabsList>
{canManageNode && !selected.is_root ? ( {canManageNode && !selected.is_root ? (
<Button type="button" size="sm" variant="outline" onClick={openEditNode}> <Button type="button" size="sm" variant="outline" onClick={openEditNode}>
@@ -944,61 +947,7 @@ export function AgentsConsole(): React.ReactElement {
</TabsContent> </TabsContent>
) : null} ) : null}
{canManageDelegation ? (
<TabsContent value="delegation">
<p className="mb-3 text-sm text-muted-foreground">{t("delegation.hint")}</p>
{delegationGrants.length === 0 ? (
<p className="text-sm text-muted-foreground">{t("delegation.empty")}</p>
) : (
<div className="rounded-xl border">
<Table>
<TableHeader>
<TableRow>
<TableHead>{t("delegation.permission")}</TableHead>
<TableHead className="w-[140px]">{t("delegation.canDelegate")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{delegationGrants.map((grant) => (
<TableRow key={grant.menu_action_id}>
<TableCell>
<div className="font-medium">{grant.name}</div>
<div className="font-mono text-xs text-muted-foreground">
{grant.permission_code}
</div>
</TableCell>
<TableCell>
<Checkbox
checked={grant.can_delegate}
onCheckedChange={(checked) => {
setDelegationGrants((prev) =>
prev.map((row) =>
row.menu_action_id === grant.menu_action_id
? { ...row, can_delegate: checked === true }
: row,
),
);
}}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
<div className="mt-4 flex justify-end">
<Button
type="button"
size="sm"
disabled={delegationSaving || delegationGrants.length === 0}
onClick={() => void saveDelegation()}
>
{t("delegation.save")}
</Button>
</div>
</TabsContent>
) : null}
</Tabs> </Tabs>
)} )}
</AdminPageCard> </AdminPageCard>