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.
This commit is contained in:
Xin Wang
2026-06-07 20:20:15 +08:00
parent d043258453
commit a7eebd8eb2
2 changed files with 38 additions and 60 deletions

View File

@@ -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">

View File

@@ -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>