Files
UHD_Media_Tool/apps/web/app/routes/console/agent.tsx
T
rootandClaude Opus 5.5 f5234cbcb9 fix(agent): 会话列表分栏跟随当前会话并进 URL,保留滚动位置
- 打开巡检会话(含巡检的子会话)时左栏自动切到「自动巡检」并选中当前项;
  手动切换分栏写进 ?tab=,刷新、窄屏「全部会话」返回都保持
- 列表页 / 会话页之间保留搜索、筛选和各分栏的滚动位置;当前会话看不见时滚进可见区
- 跳到子会话时展开父会话
- 演示模式的分栏筛选与服务端一致:子会话随父会话

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
2026-10-06 18:00:14 +08:00

61 lines
2.6 KiB
TypeScript

import { FlaskConical } from "lucide-react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { agentMockEnabled, useCreateAgentRun } from "~/api/agent.ts";
import { agentRunHref, pageListMemory, usePageListGroup } from "~/components/agent/agent-nav.ts";
import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
import { quickGoalsFor } from "~/components/agent/quick-goals.ts";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";
// 智能体入口页(AGUI-3):左栏会话列表(等你处理置顶),右边新对话输入框 + 3 个快捷目标。
export default function AgentPage() {
const create = useCreateAgentRun();
const navigate = useNavigate();
const mock = agentMockEnabled();
const [group, setGroup] = usePageListGroup();
return (
<>
<PageHeader title="智能体" />
{mock ? (
<div className="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-warning/40 bg-warning/10 px-4 py-3 text-caption text-warning">
<FlaskConical className="h-4 w-4 shrink-0" />
<span className="min-w-0 flex-1">演示模式:会话是本地假数据,不连接后端,不执行任何操作。</span>
<Button variant="outline" size="sm" onClick={() => window.location.assign("/console/agent?mock=0")}>
退出演示
</Button>
</div>
) : null}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start">
<div className="pg-slab order-2 rounded-xl p-3 lg:order-1 lg:h-[calc(100dvh-12rem)] lg:overflow-hidden">
<AgentSessionList
hrefFor={(id) => agentRunHref(id, mock)}
group={group}
onGroupChange={setGroup}
memory={pageListMemory}
className="h-full"
/>
</div>
<div className="pg-slab order-1 mx-auto w-full max-w-[88ch] rounded-xl p-4 lg:order-2">
<GoalComposer
pending={create.isPending}
suggestions={quickGoalsFor("/console/agent")}
onSubmit={(goal, opts) =>
create.mutate(
{ goal, ...opts },
{
onSuccess: (run) => navigate(agentRunHref(run.id, mock)),
onError: (e) => toast.error(errorMessage(e)),
},
)
}
/>
</div>
</div>
</>
);
}