Implement type filtering functionality in AssistantPage

Added a new type filter feature to the AssistantPage, allowing users to filter assistants by type (全部 or specific types). Introduced a button interface for selecting filters and updated the filtering logic to enhance the search experience. This change improves usability by providing clearer options for narrowing down assistant selections.

src/components/pages/AssistantPage.tsx

@@ -67,6 +67,8 @@ type AssistantForm = {
 
 type AssistantType = "提示词" | "工作流" | "Dify" | "FastGPT";
 
+const assistantTypes: AssistantType[] = ["提示词", "工作流", "Dify", "FastGPT"];
+
 type AssistantTypeOption = {
   type: AssistantType;
   label: string;
@@ -189,6 +191,9 @@ const mockAssistants: AssistantListItem[] = [
   },
 ];
 
+type TypeFilter = "全部" | AssistantType;
+
+const typeFilters: TypeFilter[] = ["全部", ...assistantTypes];
 
 export function AssistantPage() {
   const [form, setForm] = useState<AssistantForm>({
@@ -208,6 +213,7 @@ export function AssistantPage() {
     "list",
   );
   const [searchQuery, setSearchQuery] = useState("");
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("全部");
   const [currentPage, setCurrentPage] = useState(1);
   // choose 步骤的草稿：名称与已选类型，确认后才决定进入哪个构建页
   const [draftName, setDraftName] = useState("");
@@ -235,6 +241,10 @@ export function AssistantPage() {
   }
 
   const filteredAssistants = mockAssistants.filter((assistant) => {
+    if (typeFilter !== "全部" && assistant.type !== typeFilter) {
+      return false;
+    }
+
     const keyword = searchQuery.trim().toLowerCase();
 
     if (!keyword) {
@@ -259,6 +269,11 @@ export function AssistantPage() {
     setCurrentPage(1);
   }
 
+  function handleFilterChange(filter: TypeFilter) {
+    setTypeFilter(filter);
+    setCurrentPage(1);
+  }
+
   function updateForm<K extends keyof AssistantForm>(
     key: K,
     value: AssistantForm[K],
@@ -297,7 +312,8 @@ export function AssistantPage() {
               </div>
               <div className="mt-1 text-sm text-muted-foreground">
                 共 {mockAssistants.length} 个助手
-                {searchQuery.trim() && `，已筛选 ${filteredAssistants.length} 个`}
+                {(searchQuery.trim() || typeFilter !== "全部") &&
+                  `，已筛选 ${filteredAssistants.length} 个`}
               </div>
             </div>
 
@@ -315,6 +331,24 @@ export function AssistantPage() {
             </div>
           </div>
 
+          <div className="mb-5 flex flex-wrap gap-2">
+            {typeFilters.map((filter) => (
+              <Button
+                key={filter}
+                variant={filter === typeFilter ? "default" : "outline"}
+                size="sm"
+                className={
+                  filter === typeFilter
+                    ? "rounded-full"
+                    : "rounded-full border-hairline-strong text-muted-foreground hover:text-foreground"
+                }
+                onClick={() => handleFilterChange(filter)}
+              >
+                {filter}
+              </Button>
+            ))}
+          </div>
+
           <div className="overflow-hidden rounded-xl border border-hairline">
             <div className="hidden items-center gap-4 bg-surface-strong/60 px-5 py-3 md:flex">
               <div className="caption-label flex-1 text-muted-soft">
@@ -404,7 +438,7 @@ export function AssistantPage() {
                     未找到匹配的助手
                   </div>
                   <div className="mt-2 text-sm text-muted-foreground">
-                    请调整关键词后再试。
+                    请调整关键词或筛选条件后再试。
                   </div>
                 </div>
               )}