rootandClaude Opus 5.5
c9b4ceb301
- 顶栏搜索移进右侧玻璃胶囊;输入框改淡玻璃(边线 0.46 → 0.16,悬停加深,聚焦 / 出错保留光晕) - 新增 SegmentedControl(滑动 seg-thumb),替换站点、下载、订阅、文件、智能体列表及对话框里的实心选中块;Tabs 改为同一枚滑块 - 开关型按钮统一 outline + aria-pressed 选中外观;页头 / 工具栏次操作描边、图标钮描边圆;文件排序改 Select;下载总速度加标签 - 分页一页放得下时只留总数、空列表不渲染、按容器宽度收起按钮 - 运行状态存储区重排;智能体列表页与会话页共用外壳路由,标题与左栏不再重挂载 - 站点卡片「⋯」不再单独换行;设置导航、状态计数、多选条件改玻璃选中态 Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import { FlaskConical } from "lucide-react";
|
|
import { Outlet, useParams } from "react-router";
|
|
import { agentMockEnabled } from "~/api/agent.ts";
|
|
import { agentRunHref, pageListMemory, usePageListGroup, useRunGroup } from "~/components/agent/agent-nav.ts";
|
|
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
|
|
import { PageHeader } from "~/components/console/page-header.tsx";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import { cn } from "~/lib/utils.ts";
|
|
|
|
/**
|
|
* 智能体页的外壳(AGUI-3):列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
|
|
* 右栏是子路由(新对话输入框 / 某个会话)。切换会话、回到列表都不重挂载左栏,也不重播入场动画,
|
|
* 标题与两栏的位置不跳。
|
|
*/
|
|
export default function AgentLayout() {
|
|
const { runId } = useParams();
|
|
const mock = agentMockEnabled();
|
|
const runGroupOf = useRunGroup(runId);
|
|
// 列表页没有 tab 就是「对话」;会话页的左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
|
|
const [group, setGroup] = usePageListGroup(runId ? runGroupOf : undefined);
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="智能体" className="mb-4 md:mb-6" />
|
|
{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
|
|
data-agent-page
|
|
// 智能体页没有右下角悬浮按钮,收回主内容区为它留的底部空白,两栏正好占满一屏
|
|
className="-mb-16 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
|
|
>
|
|
{/* 窄屏:列表页把会话列表排在输入框下面;会话页不显示列表(顶部有「全部会话」返回) */}
|
|
<aside
|
|
className={cn(
|
|
"pg-slab order-2 rounded-2xl p-3 lg:order-1 lg:block lg:h-[calc(100dvh-11.25rem)] lg:overflow-hidden",
|
|
runId && "hidden",
|
|
)}
|
|
>
|
|
<AgentSessionList
|
|
activeId={runId}
|
|
hrefFor={(id) => agentRunHref(id, mock)}
|
|
group={group}
|
|
onGroupChange={setGroup}
|
|
memory={pageListMemory}
|
|
className="h-full"
|
|
/>
|
|
</aside>
|
|
<div className="order-1 min-w-0 lg:order-2">
|
|
<Outlet context={{ group } satisfies AgentOutletContext} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export type AgentOutletContext = { group: ReturnType<typeof usePageListGroup>[0] };
|