From a7eebd8eb24d9d29d35720e3b6336581badb47fa Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Sun, 7 Jun 2026 20:20:15 +0800
Subject: [PATCH] Update layout of AssistantPage and ComponentsModelsPage for
 improved responsiveness

Adjusted the maximum width of the main container in both AssistantPage and ComponentsModelsPage from 1180px to 1440px to enhance layout flexibility. Updated the button and search component arrangements to utilize larger screen sizes effectively, improving the overall user experience and interface consistency across pages.
---
 src/components/pages/AssistantPage.tsx        | 49 +++++++------------
 src/components/pages/ComponentsModelsPage.tsx | 49 +++++++------------
 2 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx
index 40a510e..84a4164 100644
--- a/src/components/pages/AssistantPage.tsx
+++ b/src/components/pages/AssistantPage.tsx
@@ -285,7 +285,7 @@ export function AssistantPage() {
   }
   if (view === "list") {
     return (
-      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
         <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6">
           <div>
             <h1 className="font-display display-lg text-ink">助手列表</h1>
@@ -305,19 +305,26 @@ export function AssistantPage() {
         </div>
 
         <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-          <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div>
-              <div className="text-[18px] font-medium text-foreground">
-                助手列表
-              </div>
-              <div className="mt-1 text-sm text-muted-foreground">
-                共 {mockAssistants.length} 个助手
-                {(searchQuery.trim() || typeFilter !== "全部") &&
-                  `，已筛选 ${filteredAssistants.length} 个`}
-              </div>
+          <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-wrap items-center 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="relative w-full md:w-[320px]">
+            <div className="relative w-full lg:w-[320px]">
               <Search
                 size={15}
                 className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-soft"
@@ -331,24 +338,6 @@ 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">
diff --git a/src/components/pages/ComponentsModelsPage.tsx b/src/components/pages/ComponentsModelsPage.tsx
index adcceb3..5d4405e 100644
--- a/src/components/pages/ComponentsModelsPage.tsx
+++ b/src/components/pages/ComponentsModelsPage.tsx
@@ -265,7 +265,7 @@ export function ComponentsModelsPage() {
   const canSave = form.name.trim() && form.apiUrl.trim();
 
   return (
-    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
+    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
       <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6">
         <div>
           <h1 className="font-display display-lg text-ink">模型资源</h1>
@@ -285,19 +285,26 @@ export function ComponentsModelsPage() {
       </div>
 
       <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-        <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <div className="text-[18px] font-medium text-foreground">
-              模型列表
-            </div>
-            <div className="mt-1 text-sm text-muted-foreground">
-              共 {mockModels.length} 个模型
-              {(searchQuery.trim() || typeFilter !== "全部") &&
-                `，已筛选 ${filteredModels.length} 个`}
-            </div>
+        <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-wrap items-center 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="relative w-full md:w-[320px]">
+          <div className="relative w-full lg:w-[320px]">
             <Search
               size={15}
               className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-soft"
@@ -311,24 +318,6 @@ export function ComponentsModelsPage() {
           </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">模型名称</div>