refactor(frontend): improve dialog and mobile overflow handling

This commit is contained in:
ZheFox
2026-07-03 11:26:40 +08:00
parent 1ac16005f9
commit 1dcee77055
6 changed files with 130 additions and 33 deletions
@@ -1,16 +1,16 @@
<template>
<div class="hidden xl:block overflow-x-auto">
<Table>
<Table class="min-w-[1040px] table-fixed">
<TableHeader>
<TableRow class="border-b border-border/60 hover:bg-transparent">
<TableHead class="w-[28px] min-w-[28px] max-w-[28px] h-12 p-0 pl-2" />
<TableHead class="w-[160px] h-12 font-semibold">
<TableHead class="w-[150px] h-12 font-semibold">
{{ legacyT('名称') }}
</TableHead>
<TableHead class="w-[180px] h-12 font-semibold">
<TableHead class="w-[190px] h-12 font-semibold">
{{ legacyT('地址') }}
</TableHead>
<TableHead class="w-[100px] h-12 font-semibold">
<TableHead class="w-[90px] h-12 font-semibold">
{{ legacyT('区域') }}
</TableHead>
<SortableTableHead
@@ -32,22 +32,22 @@
/>
</template>
</SortableTableHead>
<TableHead class="w-[100px] h-12 font-semibold text-center">
<TableHead class="w-[86px] h-12 font-semibold text-center">
{{ legacyT('总请求') }}
</TableHead>
<TableHead class="w-[100px] h-12 font-semibold text-center">
<TableHead class="w-[86px] h-12 font-semibold text-center">
{{ legacyT('失败率') }}
</TableHead>
<TableHead class="w-[100px] h-12 font-semibold text-center">
<TableHead class="w-[86px] h-12 font-semibold text-center">
{{ legacyT('延迟') }}
</TableHead>
<TableHead class="w-[120px] h-12 font-semibold text-center">
<TableHead class="w-[90px] h-12 font-semibold text-center">
{{ legacyT('版本') }}
</TableHead>
<TableHead class="w-[160px] h-12 font-semibold">
<TableHead class="w-[130px] h-12 font-semibold">
{{ legacyT('最后心跳') }}
</TableHead>
<TableHead class="w-[140px] h-12 font-semibold text-center">
<TableHead class="w-[120px] h-12 font-semibold text-center">
{{ legacyT('操作') }}
</TableHead>
</TableRow>
@@ -21,9 +21,12 @@
/>
</button>
</TableCell>
<TableCell class="py-4">
<div class="flex items-center gap-1.5">
<span class="text-sm font-semibold">{{ node.name }}</span>
<TableCell class="py-4 min-w-0">
<div class="flex items-center gap-1.5 min-w-0">
<span
class="min-w-0 truncate text-sm font-semibold"
:title="node.name"
>{{ node.name }}</span>
<Badge
v-if="node.is_manual"
variant="outline"
@@ -48,11 +51,17 @@
<HardwareTooltip :node="node" />
</div>
</TableCell>
<TableCell class="py-4">
<code class="text-xs text-muted-foreground">{{ proxyNodeAddress(node) }}</code>
<TableCell class="py-4 min-w-0">
<code
class="block min-w-0 truncate text-xs text-muted-foreground"
:title="proxyNodeAddress(node)"
>{{ proxyNodeAddress(node) }}</code>
</TableCell>
<TableCell class="py-4">
<span class="text-sm text-muted-foreground">{{ legacyT(formatProxyNodeRegion(node.region)) }}</span>
<TableCell class="py-4 min-w-0">
<span
class="block min-w-0 truncate text-sm text-muted-foreground"
:title="legacyT(formatProxyNodeRegion(node.region))"
>{{ legacyT(formatProxyNodeRegion(node.region)) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<Badge
@@ -78,8 +87,8 @@
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ node.is_manual ? '-' : proxyNodeVersion(node) }}</span>
</TableCell>
<TableCell class="py-4">
<span class="text-xs text-muted-foreground">{{ formatProxyNodeTime(node.last_heartbeat_at, locale) }}</span>
<TableCell class="py-4 min-w-0">
<span class="block min-w-0 truncate text-xs text-muted-foreground">{{ formatProxyNodeTime(node.last_heartbeat_at, locale) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<div class="flex items-center justify-center gap-0.5">