refactor: enhance layout of document filters in DocumentList for better responsiveness

This commit is contained in:
mlogclub
2026-06-02 15:44:58 +08:00
parent b64f1a7858
commit 24447d9cdf
@@ -338,8 +338,8 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
/> />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<div className="flex flex-col gap-2 border-b bg-background px-6 py-2"> <div className="flex flex-col gap-2 border-b bg-background px-6 py-2">
<div className="flex gap-2"> <div className="flex min-w-0 gap-2">
<div className="relative flex-1"> <div className="relative min-w-0 flex-1">
<SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={String(draftFilters.title ?? "")} value={String(draftFilters.title ?? "")}
@@ -349,22 +349,26 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
className="h-8 pl-8 text-xs" className="h-8 pl-8 text-xs"
/> />
</div> </div>
<OptionCombobox <div className="w-28 shrink-0">
value={String(draftFilters.status ?? "all")} <OptionCombobox
onChange={handleStatusFilterChange} value={String(draftFilters.status ?? "all")}
options={statusOptions} onChange={handleStatusFilterChange}
placeholder={t("knowledge.allStatus")} options={statusOptions}
searchPlaceholder={t("knowledge.searchStatus")} placeholder={t("knowledge.allStatus")}
emptyText={t("knowledge.emptyStatus")} searchPlaceholder={t("knowledge.searchStatus")}
/> emptyText={t("knowledge.emptyStatus")}
<OptionCombobox />
value={String(draftFilters.indexStatus ?? "all")} </div>
onChange={handleIndexStatusFilterChange} <div className="w-32 shrink-0">
options={indexStatusOptions} <OptionCombobox
placeholder={t("knowledge.allIndexStatus")} value={String(draftFilters.indexStatus ?? "all")}
searchPlaceholder={t("knowledge.searchStatus")} onChange={handleIndexStatusFilterChange}
emptyText={t("knowledge.emptyStatus")} options={indexStatusOptions}
/> placeholder={t("knowledge.allIndexStatus")}
searchPlaceholder={t("knowledge.searchStatus")}
emptyText={t("knowledge.emptyStatus")}
/>
</div>
</div> </div>
</div> </div>
<div className="min-h-0 flex-1"> <div className="min-h-0 flex-1">