tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-07 18:26:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: tightly pack user and tunnel filters

Browse Source
This commit is contained in:
sagitchu
2026-02-20 19:39:12 +08:00
parent d333d463f6
commit 022e9e3807
1 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/forward.tsx
+36 -34
View File
@@ -1702,46 +1702,48 @@ export default function ForwardPage() {
<div className="px-3 lg:px-6 py-8"> <div className="px-3 lg:px-6 py-8">
{/* 页面头部 */} {/* 页面头部 */}
<div className="flex items-center justify-between mb-6 gap-2"> <div className="flex items-center justify-between mb-6 gap-2">
<div className="flex-1 flex gap-2"> <div className="flex items-center gap-2 flex-shrink-0">
{viewMode === "grouped" && ( {viewMode === "grouped" && (
<> <>
<Select <div className="w-[130px] sm:w-[150px]">
aria-label="筛选用户" <Select
className="w-[130px] sm:w-[150px]" aria-label="筛选用户"
size="sm" size="sm"
variant="bordered" variant="bordered"
selectedKeys={[filterUserId]} selectedKeys={[filterUserId]}
onSelectionChange={(keys) => { onSelectionChange={(keys) => {
const key = Array.from(keys)[0] as string; const key = Array.from(keys)[0] as string;
setFilterUserId(key || "all"); setFilterUserId(key || "all");
}} }}
> >
<SelectItem key="all">全部用户</SelectItem> <SelectItem key="all">全部用户</SelectItem>
{uniqueUsers.map(user => ( {uniqueUsers.map(user => (
<SelectItem key={user.id.toString()}>{user.name}</SelectItem> <SelectItem key={user.id.toString()}>{user.name}</SelectItem>
))} ))}
</Select> </Select>
</div>
<Select <div className="w-[130px] sm:w-[150px]">
aria-label="筛选隧道" <Select
className="w-[130px] sm:w-[150px]" aria-label="筛选隧道"
size="sm" size="sm"
variant="bordered" variant="bordered"
selectedKeys={[filterTunnelId]} selectedKeys={[filterTunnelId]}
onSelectionChange={(keys) => { onSelectionChange={(keys) => {
const key = Array.from(keys)[0] as string; const key = Array.from(keys)[0] as string;
setFilterTunnelId(key || "all"); setFilterTunnelId(key || "all");
}} }}
> >
<SelectItem key="all">全部隧道</SelectItem> <SelectItem key="all">全部隧道</SelectItem>
{tunnels.map(tunnel => ( {tunnels.map(tunnel => (
<SelectItem key={tunnel.id.toString()}>{tunnel.name}</SelectItem> <SelectItem key={tunnel.id.toString()}>{tunnel.name}</SelectItem>
))} ))}
</Select> </Select>
</div>
</> </>
)} )}
</div> </div>
<div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3"> <div className="flex flex-1 flex-wrap items-center justify-end gap-2 sm:gap-3">
{/* 显示模式切换按钮 */} {/* 显示模式切换按钮 */}
<Button <Button
isIconOnly isIconOnly