From a9c70effaea36d707f3486e6712030b7c557a19b Mon Sep 17 00:00:00 2001
From: Eric Wang <wangx184@chinatelecom.cn>
Date: Wed, 5 Aug 2026 15:05:16 +0800
Subject: [PATCH] refactor(frontend): unify list and create pages with compact
 topbar layout

Move resource list and guide page titles into the shared topbar, introduce ListPageLayout for tighter spacing, and align knowledge edit with the prompt editor chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/app/globals.css                  |  20 +
 .../assistant-editor/editor-controls.tsx      |  10 +-
 .../components/layout/list-page-layout.tsx    |  80 +++
 .../src/components/pages/AssistantPage.tsx    | 164 +++--
 .../pages/ComponentsKnowledgePage.tsx         | 650 ++++++++----------
 .../components/pages/ComponentsModelsPage.tsx |  25 +-
 .../components/pages/ComponentsToolsPage.tsx  |  26 +-
 frontend/src/components/pages/HistoryPage.tsx |  19 +-
 frontend/src/components/ui/list-toolbar.tsx   |   2 +-
 9 files changed, 529 insertions(+), 467 deletions(-)
 create mode 100644 frontend/src/components/layout/list-page-layout.tsx

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index a95698d..1be79c7 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -241,6 +241,26 @@
     padding: 0;
   }
 
+  /* Resource list pages use a tighter content band below the shared topbar. */
+  .app-content:has([data-app-content="list"]) {
+    padding-top: 1rem;
+    padding-bottom: 1.5rem;
+  }
+
+  @media (min-width: 640px) {
+    .app-content:has([data-app-content="list"]) {
+      padding-top: 1.25rem;
+      padding-bottom: 2rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .app-content:has([data-app-content="list"]) {
+      padding-top: 1.5rem;
+      padding-bottom: 2.5rem;
+    }
+  }
+
   .scrollbar-subtle {
     scrollbar-width: thin;
     scrollbar-color: color-mix(
diff --git a/frontend/src/components/assistant-editor/editor-controls.tsx b/frontend/src/components/assistant-editor/editor-controls.tsx
index 5d645d6..563e2ce 100644
--- a/frontend/src/components/assistant-editor/editor-controls.tsx
+++ b/frontend/src/components/assistant-editor/editor-controls.tsx
@@ -50,14 +50,20 @@ import type {
 
 import type { RuntimeMode } from "./types";
 
-export function EditorBackButton({ onClick }: { onClick: () => void }) {
+export function EditorBackButton({
+  onClick,
+  ariaLabel = "返回助手列表",
+}: {
+  onClick: () => void;
+  ariaLabel?: string;
+}) {
   return (
     <Button
       variant="ghost"
       size="icon"
       className="shrink-0 text-muted-foreground hover:text-foreground"
       onClick={onClick}
-      aria-label="返回助手列表"
+      aria-label={ariaLabel}
     >
       <ChevronLeft size={20} />
     </Button>
diff --git a/frontend/src/components/layout/list-page-layout.tsx b/frontend/src/components/layout/list-page-layout.tsx
new file mode 100644
index 0000000..8d2afbb
--- /dev/null
+++ b/frontend/src/components/layout/list-page-layout.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { PageTopbar, TopbarPortal } from "./topbar-portal";
+
+export function ListPageLayout({
+  title,
+  description,
+  action,
+  children,
+  className,
+}: {
+  title: string;
+  description?: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  const hasHeader = Boolean(description || action);
+
+  return (
+    <>
+      <TopbarPortal>
+        <PageTopbar title={title} />
+      </TopbarPortal>
+
+      <div
+        data-app-content="list"
+        className={cn(
+          "mx-auto flex w-full max-w-[1440px] flex-col gap-4",
+          className,
+        )}
+      >
+        {hasHeader && (
+          <div
+            className={cn(
+              "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4",
+              description && action
+                ? "sm:justify-between"
+                : action
+                  ? "sm:justify-end"
+                  : "",
+            )}
+          >
+            {description && (
+              <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+                {description}
+              </p>
+            )}
+            {action}
+          </div>
+        )}
+
+        {children}
+      </div>
+    </>
+  );
+}
+
+export function ListPageSection({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-2xl border border-hairline bg-card p-5 shadow-sm",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
diff --git a/frontend/src/components/pages/AssistantPage.tsx b/frontend/src/components/pages/AssistantPage.tsx
index 94e2de8..33ad705 100644
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
@@ -33,10 +33,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { DataList } from "@/components/ui/data-list";
 import {
-  PageTopbar,
-  TopbarPortal,
-} from "@/components/layout/topbar-portal";
-import { PageHeader } from "@/components/ui/page-header";
+  ListPageLayout,
+  ListPageSection,
+} from "@/components/layout/list-page-layout";
 import { FilterPills } from "@/components/ui/filter-pills";
 import { SearchInput } from "@/components/ui/search-input";
 import { ListToolbar } from "@/components/ui/list-toolbar";
@@ -538,9 +537,10 @@ export function AssistantPage(props: AssistantPageProps) {
   }
 
   // 删除助手
-  async function handleDelete(id: string) {
+  async function handleDelete(assistant: AssistantListItem) {
+    if (!window.confirm(`确认删除助手“${assistant.name}”？`)) return;
     try {
-      await assistantsApi.remove(id);
+      await assistantsApi.remove(assistant.id);
       await loadAssistants();
     } catch (error) {
       setListError(error instanceof Error ? error.message : "删除失败");
@@ -997,23 +997,17 @@ export function AssistantPage(props: AssistantPageProps) {
 
   if (view === "list") {
     return (
-      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
-        <PageHeader
-          title="助手列表"
-          description="管理已有的视频助手，支持提示词、工作流、Dify 和 FastGPT 类型。"
-          action={
-            <Button
-              size="lg"
-              className="w-full gap-2 sm:w-auto"
-              onClick={startCreate}
-            >
-              <Plus size={16} />
-              创建助手
-            </Button>
-          }
-        />
-
-          <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+      <ListPageLayout
+        title="助手列表"
+        description="管理已有的视频助手，支持提示词、工作流、Dify 和 FastGPT 类型。"
+        action={
+          <Button className="w-full shrink-0 gap-2 sm:w-auto" onClick={startCreate}>
+            <Plus size={16} />
+            创建助手
+          </Button>
+        }
+      >
+        <ListPageSection>
             <ListToolbar
               filters={
                 <FilterPills
@@ -1039,6 +1033,7 @@ export function AssistantPage(props: AssistantPageProps) {
               loadingText="正在加载助手列表…"
               error={listError}
               onRetry={() => void loadAssistants()}
+              onRowClick={handleEdit}
               empty={{
                 title: listItems.length === 0 ? "暂无助手" : "未找到匹配的助手",
                 description:
@@ -1116,12 +1111,19 @@ export function AssistantPage(props: AssistantPageProps) {
                   align: "right",
                   cellClassName: "flex justify-end gap-2",
                   cell: (assistant) => (
-                    <>
+                    <div
+                      className="flex justify-end gap-2"
+                      onClick={(event) => event.stopPropagation()}
+                      onPointerDown={(event) => event.stopPropagation()}
+                    >
                       <Button
                         variant="outline"
                         size="sm"
                         className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
-                        onClick={() => handleEdit(assistant)}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          handleEdit(assistant);
+                        }}
                       >
                         <Pencil size={14} />
                         编辑
@@ -1134,6 +1136,7 @@ export function AssistantPage(props: AssistantPageProps) {
                             size="icon-sm"
                             className="border-hairline-strong text-muted-foreground hover:text-foreground"
                             aria-label={`${assistant.name} 更多操作`}
+                            onClick={(event) => event.stopPropagation()}
                           >
                             <MoreHorizontal size={15} />
                           </Button>
@@ -1154,7 +1157,10 @@ export function AssistantPage(props: AssistantPageProps) {
                             className="rounded-lg"
                             onSelect={(event) => {
                               event.preventDefault();
-                              void handleDelete(assistant.id);
+                              window.setTimeout(
+                                () => void handleDelete(assistant),
+                                0,
+                              );
                             }}
                           >
                             <Trash2 size={14} />
@@ -1162,59 +1168,52 @@ export function AssistantPage(props: AssistantPageProps) {
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
-                    </>
+                    </div>
                   ),
                 },
               ]}
             />
-          </section>
-      </div>
+        </ListPageSection>
+      </ListPageLayout>
     );
   }
 
   if (view === "choose") {
     return (
-      <>
-        <TopbarPortal>
-          <PageTopbar
-            title="创建助手"
-            action={
-              <Button
-                variant="outline"
-                className="gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
-                onClick={() => router.push("/assistants")}
-              >
-                <ChevronLeft size={16} />
-                返回列表
-              </Button>
-            }
-          />
-        </TopbarPortal>
+      <ListPageLayout
+        title="创建助手"
+        className="max-w-[1180px]"
+        description="先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。"
+        action={
+          <Button
+            variant="outline"
+            className="w-full shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground sm:w-auto"
+            onClick={() => router.push("/assistants")}
+          >
+            <ChevronLeft size={16} />
+            返回列表
+          </Button>
+        }
+      >
+        <ListPageSection>
+          <label className="block">
+            <div className="mb-2 text-sm font-medium text-foreground">
+              助手名称
+            </div>
+            <Input
+              value={draftName}
+              autoFocus
+              onChange={(event) => setDraftName(event.target.value)}
+              placeholder="请输入助手名称"
+              className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+            />
+          </label>
+        </ListPageSection>
 
-        <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
-          <p className="max-w-2xl text-[15px] leading-7 text-muted-foreground">
-            先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。
-          </p>
+        <section className="flex flex-col gap-3">
+          <div className="text-sm font-medium text-foreground">构建方式</div>
 
-          <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-            <label className="block">
-              <div className="mb-2 text-sm font-medium text-foreground">
-                助手名称
-              </div>
-              <Input
-                value={draftName}
-                autoFocus
-                onChange={(event) => setDraftName(event.target.value)}
-                placeholder="请输入助手名称"
-                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
-              />
-            </label>
-          </section>
-
-          <section className="flex flex-col gap-4">
-            <div className="text-sm font-medium text-foreground">构建方式</div>
-
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
               {assistantTypeOptions.map((option) => {
                 const selected = draftType === option.type;
 
@@ -1264,21 +1263,19 @@ export function AssistantPage(props: AssistantPageProps) {
             </div>
           </section>
 
-          <div className="flex items-center justify-end gap-3">
-            {createError && (
-              <span className="text-xs text-destructive">{createError}</span>
-            )}
-            <Button
-              variant="outline"
-              size="lg"
-              className="border-hairline-strong text-muted-foreground hover:text-foreground"
-              disabled={creating}
-              onClick={() => router.push("/assistants")}
-            >
-              取消
-            </Button>
+        <div className="flex items-center justify-end gap-3">
+          {createError && (
+            <span className="text-xs text-destructive">{createError}</span>
+          )}
+          <Button
+            variant="outline"
+            className="border-hairline-strong text-muted-foreground hover:text-foreground"
+            disabled={creating}
+            onClick={() => router.push("/assistants")}
+          >
+            取消
+          </Button>
           <Button
-            size="lg"
             className="gap-2"
             disabled={!draftName.trim() || !draftType || creating}
             onClick={() => void confirmType()}
@@ -1290,9 +1287,8 @@ export function AssistantPage(props: AssistantPageProps) {
             )}
             创建助手
           </Button>
-          </div>
         </div>
-      </>
+      </ListPageLayout>
     );
   }
 
diff --git a/frontend/src/components/pages/ComponentsKnowledgePage.tsx b/frontend/src/components/pages/ComponentsKnowledgePage.tsx
index 07f17d8..efd0078 100644
--- a/frontend/src/components/pages/ComponentsKnowledgePage.tsx
+++ b/frontend/src/components/pages/ComponentsKnowledgePage.tsx
@@ -22,7 +22,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DataList } from "@/components/ui/data-list";
 import {
   Dialog,
@@ -40,7 +39,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { ListToolbar } from "@/components/ui/list-toolbar";
-import { PageHeader } from "@/components/ui/page-header";
+import {
+  AssistantIdentity,
+  EditorBackButton,
+  EditableTitle,
+} from "@/components/assistant-editor/editor-controls";
+import { SectionCard } from "@/components/editor/section-card";
+import {
+  ListPageLayout,
+  ListPageSection,
+} from "@/components/layout/list-page-layout";
+import { TopbarPortal } from "@/components/layout/topbar-portal";
 import { SearchInput } from "@/components/ui/search-input";
 import {
   Select,
@@ -196,23 +205,20 @@ function KnowledgeListView() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
-      <PageHeader
-        title="知识库"
-        description="管理可检索的文件与文字资料。"
-        action={
-          <Button
-            size="lg"
-            className="w-full gap-2 sm:w-auto"
-            onClick={() => router.push("/components/knowledge/new")}
-          >
-            <Plus size={16} />
-            添加知识库
-          </Button>
-        }
-      />
-
-      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+    <ListPageLayout
+      title="知识库"
+      description="管理可检索的文件与文字资料。"
+      action={
+        <Button
+          className="w-full shrink-0 gap-2 sm:w-auto"
+          onClick={() => router.push("/components/knowledge/new")}
+        >
+          <Plus size={16} />
+          添加知识库
+        </Button>
+      }
+    >
+      <ListPageSection>
         <ListToolbar
           className="lg:justify-end"
           search={
@@ -375,8 +381,8 @@ function KnowledgeListView() {
             },
           ]}
         />
-      </section>
-    </div>
+      </ListPageSection>
+    </ListPageLayout>
   );
 }
 
@@ -425,26 +431,21 @@ function KnowledgeCreateView() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
-      <div className="flex items-start justify-between gap-6">
-        <div>
-          <h1 className="font-display display-lg text-ink">添加知识库</h1>
-          <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
-            填写名称、说明并选择 Embedding 模型。确认后将立即创建并进入编辑页。
-          </p>
-        </div>
-
+    <ListPageLayout
+      title="添加知识库"
+      className="max-w-[1180px]"
+      description="填写名称、说明并选择 Embedding 模型。确认后将立即创建并进入编辑页。"
+      action={
         <Button
           variant="outline"
-          size="lg"
-          className="shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
+          className="w-full shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground sm:w-auto"
           onClick={() => router.push("/components/knowledge")}
         >
           <ChevronLeft size={16} />
           返回列表
         </Button>
-      </div>
-
+      }
+    >
       {loading ? (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <Loader2 size={16} className="animate-spin" />
@@ -452,57 +453,65 @@ function KnowledgeCreateView() {
         </div>
       ) : (
         <>
-          <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-            <div className="space-y-5">
-              <label className="block">
-                <div className="mb-2 text-sm font-medium text-foreground">
-                  知识库名称
-                </div>
-                <Input
-                  value={name}
-                  autoFocus
-                  onChange={(event) => setName(event.target.value)}
-                  placeholder="请输入知识库名称"
-                  className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
-                />
-              </label>
-
-              <label className="block">
-                <div className="mb-2 text-sm font-medium text-foreground">
-                  描述
-                </div>
-                <Textarea
-                  value={description}
-                  onChange={(event) => setDescription(event.target.value)}
-                  placeholder="用途说明（可选）"
-                  rows={4}
-                  className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
-                />
-              </label>
-
-              <div>
-                <div className="mb-2 text-sm font-medium text-foreground">
-                  Embedding 模型
-                </div>
-                <Select value={embeddingId} onValueChange={setEmbeddingId}>
-                  <SelectTrigger className="w-full border-hairline-strong bg-background">
-                    <SelectValue placeholder="选择 Embedding 模型" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {models.map((model) => (
-                      <SelectItem key={model.id} value={model.id}>
-                        {model.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {models.length === 0 && (
-                  <p className="mt-2 text-xs text-muted-foreground">
-                    请先在「模型资源」中添加并启用 Embedding 模型。
-                  </p>
-                )}
+          <ListPageSection>
+            <label className="block">
+              <div className="mb-2 text-sm font-medium text-foreground">
+                知识库名称
               </div>
+              <Input
+                value={name}
+                autoFocus
+                onChange={(event) => setName(event.target.value)}
+                placeholder="请输入知识库名称"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </label>
+          </ListPageSection>
+
+          <section className="flex flex-col gap-3">
+            <div className="text-sm font-medium text-foreground">
+              Embedding 配置
             </div>
+
+            <ListPageSection>
+              <div className="space-y-5">
+                <label className="block">
+                  <div className="mb-2 text-sm font-medium text-foreground">
+                    描述
+                  </div>
+                  <Textarea
+                    value={description}
+                    onChange={(event) => setDescription(event.target.value)}
+                    placeholder="用途说明（可选）"
+                    rows={4}
+                    className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+                  />
+                </label>
+
+                <div>
+                  <div className="mb-2 text-sm font-medium text-foreground">
+                    Embedding 模型
+                  </div>
+                  <Select value={embeddingId} onValueChange={setEmbeddingId}>
+                    <SelectTrigger className="w-full border-hairline-strong bg-background">
+                      <SelectValue placeholder="选择 Embedding 模型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {models.map((model) => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {model.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {models.length === 0 && (
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      请先在「模型资源」中添加并启用 Embedding 模型。
+                    </p>
+                  )}
+                </div>
+              </div>
+            </ListPageSection>
           </section>
 
           <div className="flex items-center justify-end gap-3">
@@ -511,7 +520,6 @@ function KnowledgeCreateView() {
             )}
             <Button
               variant="outline"
-              size="lg"
               className="border-hairline-strong text-muted-foreground hover:text-foreground"
               disabled={creating}
               onClick={() => router.push("/components/knowledge")}
@@ -519,7 +527,6 @@ function KnowledgeCreateView() {
               取消
             </Button>
             <Button
-              size="lg"
               className="gap-2"
               disabled={!name.trim() || !embeddingId || creating}
               onClick={() => void confirmCreate()}
@@ -534,7 +541,7 @@ function KnowledgeCreateView() {
           </div>
         </>
       )}
-    </div>
+    </ListPageLayout>
   );
 }
 
@@ -774,206 +781,219 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-6">
-      <div className="flex shrink-0 items-center justify-between gap-6 border-b border-hairline pb-3">
-        <div className="flex min-w-0 items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="shrink-0 text-muted-foreground hover:text-foreground"
-            onClick={() => router.push("/components/knowledge")}
-            aria-label="返回知识库列表"
-          >
-            <ChevronLeft size={20} />
-          </Button>
-          <EditableTitle value={base.name} onChange={(value) => void renameBase(value)} />
-        </div>
+    <>
+      <TopbarPortal>
+        <div className="flex h-full min-w-0 flex-1 items-center justify-between gap-4 sm:-ml-2 lg:-ml-4">
+          <div className="flex min-w-0 items-center gap-2">
+            <EditorBackButton
+              ariaLabel="返回知识库列表"
+              onClick={() => router.push("/components/knowledge")}
+            />
+            <EditableTitle
+              value={base.name}
+              onChange={(value) => void renameBase(value)}
+              placeholder="未命名知识库"
+              editLabel="知识库名称"
+            />
+            <AssistantIdentity assistantId={knowledgeBaseId} />
+          </div>
 
-        <div className="flex shrink-0 flex-wrap justify-end gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="gap-1.5 border-hairline-strong text-muted-foreground hover:text-foreground"
-            onClick={() => setSearchOpen(true)}
-          >
-            <Search size={14} />
-            检索测试
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="gap-1.5 border-hairline-strong text-muted-foreground hover:text-foreground"
-            onClick={openSettings}
-          >
-            <Settings size={14} />
-            设置
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="sm" className="gap-1.5" disabled={busy}>
-                <Upload size={14} />
-                {busy ? "上传中" : "上传"}
-                <ChevronDown size={14} />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="w-36 rounded-xl border border-hairline bg-popover p-1"
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            {error && (
+              <span
+                role="alert"
+                title={error}
+                className="line-clamp-1 max-w-[min(32vw,420px)] text-right text-xs text-destructive"
+              >
+                {error}
+              </span>
+            )}
+            <Button
+              variant="outline"
+              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              onClick={() => setSearchOpen(true)}
             >
-              <DropdownMenuItem
-                className="rounded-lg"
-                onSelect={() => fileInputRef.current?.click()}
+              <Search size={16} />
+              检索测试
+            </Button>
+            <Button
+              variant="outline"
+              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              onClick={openSettings}
+            >
+              <Settings size={16} />
+              设置
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="gap-2" disabled={busy}>
+                  <Upload size={16} />
+                  {busy ? "上传中" : "上传"}
+                  <ChevronDown size={14} className="opacity-70" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="w-36 rounded-xl border border-hairline bg-popover p-1"
               >
-                <Upload size={14} />
-                上传文件
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="rounded-lg"
-                onSelect={() => setTextOpen(true)}
-              >
-                <FileText size={14} />
-                上传文本
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <input
-            ref={fileInputRef}
-            hidden
-            type="file"
-            accept=".pdf,.docx,.txt,.md,.csv,.json,.html,.htm"
-            disabled={busy}
-            onChange={(event) => {
-              void addFile(event.target.files?.[0]);
-              event.target.value = "";
-            }}
-          />
+                <DropdownMenuItem
+                  className="rounded-lg"
+                  onSelect={() => fileInputRef.current?.click()}
+                >
+                  <Upload size={14} />
+                  上传文件
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="rounded-lg"
+                  onSelect={() => setTextOpen(true)}
+                >
+                  <FileText size={14} />
+                  上传文本
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </TopbarPortal>
+
+      <div
+        data-app-content="full-bleed"
+        className="flex h-full min-h-0 overflow-hidden bg-background"
+      >
+        <div className="scrollbar-subtle min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-none px-4 pb-6 pt-3 sm:px-6 sm:pb-8 lg:px-8 lg:pb-10">
+          <div className="mx-auto max-w-7xl space-y-3">
+            <SectionCard
+              icon={<FileText size={15} />}
+              title="文档"
+              description="上传文件或文本，系统将自动切分并生成向量。"
+            >
+              <div className="relative">
+                <Search
+                  className="absolute left-3 top-2.5 text-muted-foreground"
+                  size={15}
+                />
+                <Input
+                  className="border-hairline-strong bg-background pl-9"
+                  placeholder="搜索文档名称"
+                  value={documentQuery}
+                  onChange={(event) => setDocumentQuery(event.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                {filteredDocuments.length === 0 && (
+                  <p className="py-6 text-center text-sm text-muted-foreground">
+                    暂无文档，点击右上角「上传」开始入库。
+                  </p>
+                )}
+                {filteredDocuments.map((document) => {
+                  const canPreview = document.status === "ready";
+                  return (
+                    <div
+                      key={document.id}
+                      role={canPreview ? "button" : undefined}
+                      tabIndex={canPreview ? 0 : undefined}
+                      onClick={() => {
+                        if (canPreview) void previewDocument(document);
+                      }}
+                      onKeyDown={(event) => {
+                        if (
+                          canPreview &&
+                          (event.key === "Enter" || event.key === " ")
+                        ) {
+                          event.preventDefault();
+                          void previewDocument(document);
+                        }
+                      }}
+                      className={`rounded-xl border border-hairline p-3 transition-colors ${
+                        canPreview
+                          ? "cursor-pointer hover:bg-surface-strong/40"
+                          : ""
+                      }`}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="truncate text-sm font-medium">
+                              {document.name}
+                            </span>
+                            <span
+                              className={`rounded-full px-2 py-0.5 text-xs ${statusClass(document.status)}`}
+                            >
+                              {statusLabel(document.status)}
+                            </span>
+                          </div>
+                          <div className="mt-1 text-xs text-muted-foreground">
+                            {document.sourceType === "file" ? "文件" : "文字"} ·{" "}
+                            {formatBytes(document.sizeBytes)} ·{" "}
+                            {document.chunkCount} 个分块
+                          </div>
+                        </div>
+                        <div
+                          className="flex shrink-0 gap-1"
+                          onClick={(event) => event.stopPropagation()}
+                          onKeyDown={(event) => event.stopPropagation()}
+                        >
+                          {document.status === "failed" && (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="重新处理"
+                              onClick={() => void retryDocument(document.id)}
+                            >
+                              <RefreshCw size={15} />
+                            </Button>
+                          )}
+                          {canPreview && (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="查看分块"
+                              onClick={() => void previewDocument(document)}
+                            >
+                              <Eye size={15} />
+                            </Button>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            title="删除"
+                            onClick={() => void removeDocument(document)}
+                          >
+                            <Trash2 size={15} />
+                          </Button>
+                        </div>
+                      </div>
+                      {document.status === "processing" && (
+                        <div className="mt-2 flex items-center gap-2 text-xs text-amber-600">
+                          <Loader2 className="animate-spin" size={13} />
+                          正在抽取、切分并生成向量…
+                        </div>
+                      )}
+                      {document.errorMessage && (
+                        <p className="mt-2 rounded bg-destructive/5 p-2 text-xs text-destructive">
+                          {document.errorMessage}
+                        </p>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </SectionCard>
+          </div>
         </div>
       </div>
 
-      {error && (
-        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      <Card className="rounded-2xl border-hairline bg-card shadow-sm">
-        <CardHeader>
-          <CardTitle className="text-base">文档</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="relative mb-4">
-            <Search
-              className="absolute left-3 top-2.5 text-muted-foreground"
-              size={15}
-            />
-            <Input
-              className="border-hairline-strong bg-background pl-9"
-              placeholder="搜索文档名称"
-              value={documentQuery}
-              onChange={(event) => setDocumentQuery(event.target.value)}
-            />
-          </div>
-          <div className="space-y-2">
-            {filteredDocuments.length === 0 && (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                暂无文档，点击右上角「上传」开始入库。
-              </p>
-            )}
-            {filteredDocuments.map((document) => {
-              const canPreview = document.status === "ready";
-              return (
-                <div
-                  key={document.id}
-                  role={canPreview ? "button" : undefined}
-                  tabIndex={canPreview ? 0 : undefined}
-                  onClick={() => {
-                    if (canPreview) void previewDocument(document);
-                  }}
-                  onKeyDown={(event) => {
-                    if (
-                      canPreview &&
-                      (event.key === "Enter" || event.key === " ")
-                    ) {
-                      event.preventDefault();
-                      void previewDocument(document);
-                    }
-                  }}
-                  className={`rounded-xl border border-hairline p-3 transition-colors ${
-                    canPreview
-                      ? "cursor-pointer hover:bg-surface-strong/40"
-                      : ""
-                  }`}
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="truncate text-sm font-medium">
-                          {document.name}
-                        </span>
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs ${statusClass(document.status)}`}
-                        >
-                          {statusLabel(document.status)}
-                        </span>
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {document.sourceType === "file" ? "文件" : "文字"} ·{" "}
-                        {formatBytes(document.sizeBytes)} ·{" "}
-                        {document.chunkCount} 个分块
-                      </div>
-                    </div>
-                    <div
-                      className="flex shrink-0 gap-1"
-                      onClick={(event) => event.stopPropagation()}
-                      onKeyDown={(event) => event.stopPropagation()}
-                    >
-                      {document.status === "failed" && (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          title="重新处理"
-                          onClick={() => void retryDocument(document.id)}
-                        >
-                          <RefreshCw size={15} />
-                        </Button>
-                      )}
-                      {canPreview && (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          title="查看分块"
-                          onClick={() => void previewDocument(document)}
-                        >
-                          <Eye size={15} />
-                        </Button>
-                      )}
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        title="删除"
-                        onClick={() => void removeDocument(document)}
-                      >
-                        <Trash2 size={15} />
-                      </Button>
-                    </div>
-                  </div>
-                  {document.status === "processing" && (
-                    <div className="mt-2 flex items-center gap-2 text-xs text-amber-600">
-                      <Loader2 className="animate-spin" size={13} />
-                      正在抽取、切分并生成向量…
-                    </div>
-                  )}
-                  {document.errorMessage && (
-                    <p className="mt-2 rounded bg-destructive/5 p-2 text-xs text-destructive">
-                      {document.errorMessage}
-                    </p>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </CardContent>
-      </Card>
+      <input
+        ref={fileInputRef}
+        hidden
+        type="file"
+        accept=".pdf,.docx,.txt,.md,.csv,.json,.html,.htm"
+        disabled={busy}
+        onChange={(event) => {
+          void addFile(event.target.files?.[0]);
+          event.target.value = "";
+        }}
+      />
 
       <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
         <DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-xl">
@@ -1152,75 +1172,7 @@ function KnowledgeEditView({ knowledgeBaseId }: { knowledgeBaseId: string }) {
           </div>
         </DialogContent>
       </Dialog>
-    </div>
-  );
-}
-
-function EditableTitle({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (editing) {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }
-  }, [editing]);
-
-  function startEdit() {
-    setDraft(value);
-    setEditing(true);
-  }
-
-  function commit() {
-    const next = draft.trim();
-    if (next) onChange(next);
-    setEditing(false);
-  }
-
-  if (editing) {
-    return (
-      <input
-        ref={inputRef}
-        value={draft}
-        onChange={(event) => setDraft(event.target.value)}
-        onBlur={commit}
-        onKeyDown={(event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            commit();
-          } else if (event.key === "Escape") {
-            event.preventDefault();
-            setEditing(false);
-          }
-        }}
-        className="font-display display-sm w-[min(60vw,420px)] border-b border-primary bg-transparent text-ink outline-none"
-      />
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={startEdit}
-      title="点击修改知识库名称"
-      className="group -mx-2 flex min-w-0 items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-surface-strong"
-    >
-      <span className="font-display display-sm truncate text-ink">
-        {value || "未命名知识库"}
-      </span>
-      <Pencil
-        size={16}
-        className="shrink-0 text-muted-soft opacity-0 transition-opacity group-hover:opacity-100"
-      />
-    </button>
+    </>
   );
 }
 
diff --git a/frontend/src/components/pages/ComponentsModelsPage.tsx b/frontend/src/components/pages/ComponentsModelsPage.tsx
index 4ee3218..6cd4054 100644
--- a/frontend/src/components/pages/ComponentsModelsPage.tsx
+++ b/frontend/src/components/pages/ComponentsModelsPage.tsx
@@ -33,7 +33,10 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { DataList } from "@/components/ui/data-list";
-import { PageHeader } from "@/components/ui/page-header";
+import {
+  ListPageLayout,
+  ListPageSection,
+} from "@/components/layout/list-page-layout";
 import { FilterPills } from "@/components/ui/filter-pills";
 import { SearchInput } from "@/components/ui/search-input";
 import { ListToolbar } from "@/components/ui/list-toolbar";
@@ -495,23 +498,18 @@ export function ComponentsModelsPage() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
-      <PageHeader
+    <>
+      <ListPageLayout
         title="模型资源"
         description="接口定义决定能力、鉴权字段和调用参数，表单会随接口类型动态更新。"
         action={
-          <Button
-            size="lg"
-            className="w-full gap-2 sm:w-auto"
-            onClick={openCreate}
-          >
+          <Button className="w-full shrink-0 gap-2 sm:w-auto" onClick={openCreate}>
             <Plus size={16} />
             添加模型
           </Button>
         }
-      />
-
-      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+      >
+        <ListPageSection>
         <ListToolbar
           filters={
             <FilterPills
@@ -702,7 +700,8 @@ export function ComponentsModelsPage() {
             },
           ]}
         />
-      </section>
+      </ListPageSection>
+      </ListPageLayout>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-6xl lg:max-w-[88rem] lg:overflow-hidden">
@@ -895,7 +894,7 @@ export function ComponentsModelsPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/components/pages/ComponentsToolsPage.tsx b/frontend/src/components/pages/ComponentsToolsPage.tsx
index e55706b..18fe86b 100644
--- a/frontend/src/components/pages/ComponentsToolsPage.tsx
+++ b/frontend/src/components/pages/ComponentsToolsPage.tsx
@@ -40,7 +40,10 @@ import {
 import { Input } from "@/components/ui/input";
 import { FilterPills } from "@/components/ui/filter-pills";
 import { ListToolbar } from "@/components/ui/list-toolbar";
-import { PageHeader } from "@/components/ui/page-header";
+import {
+  ListPageLayout,
+  ListPageSection,
+} from "@/components/layout/list-page-layout";
 import { SearchInput } from "@/components/ui/search-input";
 import {
   Select,
@@ -689,14 +692,14 @@ export function ComponentsToolsPage() {
   ];
 
   return (
-    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
-      <PageHeader
+    <>
+      <ListPageLayout
         title="工具资源"
         description="管理可复用的助手工具，并将启用的工具绑定到提示词助手。"
         action={
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button size="lg" className="w-full gap-2 sm:w-auto">
+              <Button className="w-full shrink-0 gap-2 sm:w-auto">
                 <Plus size={16} />
                 添加工具
                 <ChevronDown size={14} className="opacity-70" />
@@ -710,16 +713,18 @@ export function ComponentsToolsPage() {
                 <Plus size={15} />
                 添加普通工具
               </DropdownMenuItem>
-              <DropdownMenuItem className="rounded-lg" onSelect={openCreateMcpServer}>
+              <DropdownMenuItem
+                className="rounded-lg"
+                onSelect={openCreateMcpServer}
+              >
                 <ServerCog size={15} />
                 添加 MCP 服务
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         }
-      />
-
-      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+      >
+        <ListPageSection>
         <ListToolbar
           filters={
             <FilterPills options={toolFilters} value={filter} onChange={changeFilter} />
@@ -758,7 +763,8 @@ export function ComponentsToolsPage() {
                 : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredResources.length)} / 共 ${filteredResources.length} 个工具资源`,
           }}
         />
-      </section>
+      </ListPageSection>
+      </ListPageLayout>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className={TOOL_DIALOG_CONTENT_CLASS}>
@@ -866,7 +872,7 @@ export function ComponentsToolsPage() {
         onOpenChange={setMcpDialogOpen}
         onChanged={loadResources}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/components/pages/HistoryPage.tsx b/frontend/src/components/pages/HistoryPage.tsx
index 3a45310..16cf7ae 100644
--- a/frontend/src/components/pages/HistoryPage.tsx
+++ b/frontend/src/components/pages/HistoryPage.tsx
@@ -31,7 +31,10 @@ import {
 } from "@/components/ui/dialog";
 import { FilterPills } from "@/components/ui/filter-pills";
 import { ListToolbar } from "@/components/ui/list-toolbar";
-import { PageHeader } from "@/components/ui/page-header";
+import {
+  ListPageLayout,
+  ListPageSection,
+} from "@/components/layout/list-page-layout";
 import { SearchInput } from "@/components/ui/search-input";
 import {
   conversationsApi,
@@ -364,13 +367,12 @@ export function HistoryPage() {
   const pageEnd = pageStart + rows.length;
 
   return (
-    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
-      <PageHeader
+    <>
+      <ListPageLayout
         title="历史记录"
         description="查看每次语音或文字会话中最终确认的用户转写和助手回复。"
-      />
-
-      <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+      >
+        <ListPageSection>
         <ListToolbar
           filters={
             <FilterPills
@@ -417,7 +419,8 @@ export function HistoryPage() {
                 : `显示 ${pageStart + 1}-${Math.min(pageEnd, total)} / 共 ${total} 次会话`,
           }}
         />
-      </section>
+      </ListPageSection>
+      </ListPageLayout>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="max-h-[calc(100vh-3rem)] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-4xl">
@@ -522,7 +525,7 @@ export function HistoryPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/components/ui/list-toolbar.tsx b/frontend/src/components/ui/list-toolbar.tsx
index 31f6b6d..e23292e 100644
--- a/frontend/src/components/ui/list-toolbar.tsx
+++ b/frontend/src/components/ui/list-toolbar.tsx
@@ -15,7 +15,7 @@ export function ListToolbar({ filters, search, className }: ListToolbarProps) {
   return (
     <div
       className={cn(
-        "mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
         className,
       )}
     >