From d77108d1576cf09384fa36faccf06f01f70b9a1d Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Sun, 7 Jun 2026 08:48:42 +0800
Subject: [PATCH] Enhance AssistantPage with pagination and additional mock
 assistants

Implemented pagination for the assistant list, allowing users to navigate through multiple pages of assistants. Added new mock assistant entries to enrich the data displayed. Updated the search functionality to reset the current page when the search query changes, improving user experience in managing assistants.
---
 src/components/pages/AssistantPage.tsx | 120 ++++++++++++++++++++++++-
 1 file changed, 118 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx
index 89e4304..94591f1 100644
--- a/src/components/pages/AssistantPage.tsx
+++ b/src/components/pages/AssistantPage.tsx
@@ -16,6 +16,8 @@ import {
   Sparkles,
   Trash2,
   Workflow,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -130,6 +132,54 @@ const mockAssistants: AssistantListItem[] = [
     type: "FastGPT",
     updatedAt: "2026-05-29 11:06",
   },
+  {
+    id: "asst_005",
+    name: "医院挂号问询助手",
+    type: "提示词",
+    updatedAt: "2026-05-25 14:30",
+  },
+  {
+    id: "asst_006",
+    name: "政务办事进度助手",
+    type: "工作流",
+    updatedAt: "2026-05-22 10:15",
+  },
+  {
+    id: "asst_007",
+    name: "Dify 智能客服助手",
+    type: "Dify",
+    updatedAt: "2026-05-18 09:02",
+  },
+  {
+    id: "asst_008",
+    name: "FastGPT 智能催收助手",
+    type: "FastGPT",
+    updatedAt: "2026-05-15 17:20",
+  },
+  {
+    id: "asst_009",
+    name: "高校课程咨询助手",
+    type: "提示词",
+    updatedAt: "2026-05-10 12:48",
+  },
+  {
+    id: "asst_010",
+    name: "企业入驻流程助手",
+    type: "工作流",
+    updatedAt: "2026-05-06 08:43",
+  },
+  {
+    id: "asst_011",
+    name: "Dify 政策助手",
+    type: "Dify",
+    updatedAt: "2026-05-01 16:45",
+  },
+  {
+    id: "asst_012",
+    name: "FastGPT 报修助手",
+    type: "FastGPT",
+    updatedAt: "2026-04-28 19:34",
+  },
 ];
 
 
@@ -149,6 +199,7 @@ export function AssistantPage() {
     "list",
   );
   const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
   // choose 步骤的草稿：名称与已选类型，确认后才决定进入哪个构建页
   const [draftName, setDraftName] = useState("");
   const [draftType, setDraftType] = useState<AssistantType | null>(null);
@@ -187,6 +238,18 @@ export function AssistantPage() {
       .includes(keyword);
   });
 
+  const pageSize = 5;
+  const totalPages = Math.max(1, Math.ceil(filteredAssistants.length / pageSize));
+  const safeCurrentPage = Math.min(currentPage, totalPages);
+  const pageStart = (safeCurrentPage - 1) * pageSize;
+  const pageEnd = pageStart + pageSize;
+  const paginatedAssistants = filteredAssistants.slice(pageStart, pageEnd);
+
+  function handleSearchChange(value: string) {
+    setSearchQuery(value);
+    setCurrentPage(1);
+  }
+
   function updateForm<K extends keyof AssistantForm>(
     key: K,
     value: AssistantForm[K],
@@ -237,7 +300,7 @@ export function AssistantPage() {
               />
               <Input
                 value={searchQuery}
-                onChange={(event) => setSearchQuery(event.target.value)}
+                onChange={(event) => handleSearchChange(event.target.value)}
                 className="h-10 border-hairline-strong bg-background pl-9 text-sm text-foreground placeholder:text-muted-soft"
                 placeholder="搜索助手名称、类型或 ID..."
               />
@@ -261,7 +324,7 @@ export function AssistantPage() {
             </div>
 
             <div className="divide-y divide-hairline">
-              {filteredAssistants.map((assistant) => (
+              {paginatedAssistants.map((assistant) => (
                 <div
                   key={assistant.id}
                   className="flex flex-col gap-3 px-5 py-4 text-sm transition-colors hover:bg-surface-strong/40 md:flex-row md:items-center md:gap-4"
@@ -339,6 +402,59 @@ export function AssistantPage() {
               )}
             </div>
           </div>
+
+          <div className="mt-5 flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              {filteredAssistants.length === 0
+                ? "没有数据"
+                : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredAssistants.length)} / 共 ${filteredAssistants.length} 个助手`}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon-sm"
+                className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                disabled={safeCurrentPage <= 1}
+                onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+                aria-label="上一页"
+              >
+                <ChevronLeft size={15} />
+              </Button>
+
+              {Array.from({ length: totalPages }, (_, index) => index + 1).map(
+                (page) => (
+                  <Button
+                    key={page}
+                    variant={page === safeCurrentPage ? "default" : "outline"}
+                    size="sm"
+                    className={[
+                      "h-8 min-w-8 px-2",
+                      page === safeCurrentPage
+                        ? ""
+                        : "border-hairline-strong text-muted-foreground hover:text-foreground",
+                    ].join(" ")}
+                    onClick={() => setCurrentPage(page)}
+                  >
+                    {page}
+                  </Button>
+                ),
+              )}
+
+              <Button
+                variant="outline"
+                size="icon-sm"
+                className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                disabled={safeCurrentPage >= totalPages}
+                onClick={() =>
+                  setCurrentPage((page) => Math.min(totalPages, page + 1))
+                }
+                aria-label="下一页"
+              >
+                <ChevronRight size={15} />
+              </Button>
+            </div>
+          </div>
         </section>
       </div>
     );