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(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( key: K, value: AssistantForm[K], @@ -237,7 +300,7 @@ export function AssistantPage() { /> 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() {
- {filteredAssistants.map((assistant) => ( + {paginatedAssistants.map((assistant) => (
+ +
+
+ {filteredAssistants.length === 0 + ? "没有数据" + : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredAssistants.length)} / 共 ${filteredAssistants.length} 个助手`} +
+ +
+ + + {Array.from({ length: totalPages }, (_, index) => index + 1).map( + (page) => ( + + ), + )} + + +
+
);