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:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user