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:
@@ -148,8 +148,10 @@ function AgentTreeNodes({
|
||||
<li key={node.id}>
|
||||
<div
|
||||
className={cn(
|
||||
"group flex items-center gap-1 rounded-md pr-2",
|
||||
selectedId === node.id ? "bg-primary/5 ring-1 ring-primary/20" : "hover:bg-muted/60",
|
||||
"group flex items-center gap-1 rounded-md pr-2 transition-colors",
|
||||
selectedId === node.id
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: "hover:bg-muted/60 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{node.children && node.children.length > 0 ? (
|
||||
@@ -157,7 +159,12 @@ function AgentTreeNodes({
|
||||
type="button"
|
||||
aria-label="toggle children"
|
||||
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
|
||||
className={cn(
|
||||
@@ -174,11 +181,16 @@ function AgentTreeNodes({
|
||||
onClick={() => onSelect(node)}
|
||||
className={cn(
|
||||
"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="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>
|
||||
</div>
|
||||
{node.children && node.children.length > 0 && expandedIds.has(node.id) ? (
|
||||
@@ -603,13 +615,6 @@ export function AgentsConsole(): React.ReactElement {
|
||||
</Select>
|
||||
) : null}
|
||||
</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}
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(220px,280px)_1fr]">
|
||||
@@ -704,9 +709,7 @@ export function AgentsConsole(): React.ReactElement {
|
||||
<TabsList>
|
||||
{canViewRoles ? <TabsTrigger value="roles">{t("tabs.roles")}</TabsTrigger> : null}
|
||||
{canViewUsers ? <TabsTrigger value="users">{t("tabs.users")}</TabsTrigger> : null}
|
||||
{canManageDelegation ? (
|
||||
<TabsTrigger value="delegation">{t("tabs.delegation")}</TabsTrigger>
|
||||
) : null}
|
||||
|
||||
</TabsList>
|
||||
{canManageNode && !selected.is_root ? (
|
||||
<Button type="button" size="sm" variant="outline" onClick={openEditNode}>
|
||||
@@ -944,61 +947,7 @@ export function AgentsConsole(): React.ReactElement {
|
||||
</TabsContent>
|
||||
) : 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>
|
||||
)}
|
||||
</AdminPageCard>
|
||||
|
||||
Reference in New Issue
Block a user