denozord/MikrotikManager
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 104 Wiki Activity

fix(ui): завершить адаптивность оптимизатора маршрутов

Browse Source
This commit is contained in:
Denozordec committed 2026-09-30 23:23:58 +07:00
1 parent 0ee7f02e87
commit fb70d80220
18 files changed
+173 -122
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/data-grids/route-optimizer-comm-recs-data-grid.tsx
+17 -17
View File
@@ -37,7 +37,7 @@ function ProbChip({ prob, best }: { prob: number; best?: boolean }) {
<Chip
color={
best
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
? "bg-success/10 text-success border-success/20"
: "bg-muted text-muted-foreground border-border"
}
>
@@ -105,12 +105,12 @@ function RouteOptimizerCommRecsDataGrid({
if (!r.current) return <span className="text-muted-foreground text-xs">—</span>
return (
<div className="text-xs flex items-center gap-1 flex-wrap">
<span className="font-mono font-medium text-sky-600 dark:text-sky-400">
<span className="font-mono font-medium text-info ">
{r.current.wan}
</span>
<ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
<ArrowRightIcon aria-hidden="true" className="size-3 text-muted-foreground shrink-0" />
<span>{r.current.jh}</span>
<ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
<ArrowRightIcon aria-hidden="true" className="size-3 text-muted-foreground shrink-0" />
<span className="text-muted-foreground">{r.current.exit}</span>
<span className="font-mono text-[10px] text-muted-foreground">
({r.current.gateway})
@@ -133,16 +133,16 @@ function RouteOptimizerCommRecsDataGrid({
<div
className={cn(
"text-xs flex items-center gap-1 flex-wrap",
r.shouldSwitch && !isPinned && "text-amber-600 dark:text-amber-400",
r.shouldSwitch && !isPinned && "text-warning ",
)}
>
<span className="font-mono font-medium">{r.recommended.wan}</span>
<ArrowRightIcon className="size-3 shrink-0 opacity-60" />
<ArrowRightIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
<span>{r.recommended.jh}</span>
<ArrowRightIcon className="size-3 shrink-0 opacity-60" />
<ArrowRightIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
<span>{r.recommended.exit}</span>
{r.shouldSwitch && !isPinned && (
<span className="ml-1 text-[10px] font-bold bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">
<span className="ml-1 text-[10px] font-bold bg-warning/10 border border-warning/20 px-1.5 py-0.5 rounded">
+{(r.recommended.prob ?? 0) - (r.current?.prob ?? 0)} б.
</span>
)}
@@ -192,32 +192,32 @@ function RouteOptimizerCommRecsDataGrid({
const canApply = simulation && r.shouldSwitch && !isPinned && !isApplied
return (
<div className="flex items-center justify-end gap-1.5" onClick={(e) => e.stopPropagation()}>
{isPinned && <PinIcon className="size-3 text-sky-500 fill-sky-500" />}
<Button
{isPinned && <PinIcon aria-hidden="true" className="size-3 text-info fill-info" />}
<Button type="button"
variant="outline"
size="sm"
className={cn("h-7 text-xs", isPinned && "text-sky-600 dark:text-sky-400 border-sky-500/30")}
className={cn("h-7 text-xs", isPinned && "text-info border-info/30")}
onClick={() => onPin(pinKey)}
>
<PinIcon className={cn("size-3", isPinned && "fill-current")} />
<PinIcon aria-hidden="true" className={cn("size-3", isPinned && "fill-current")} />
{isPinned ? "Открепить" : "Закрепить"}
</Button>
{canApply && (
<Button
<Button type="button"
size="sm"
className="h-7 text-xs"
disabled={isApplying}
onClick={() => onApply(r.community, homeId)}
>
{isApplying ? (
<RefreshCwIcon className="size-3 animate-spin" />
<RefreshCwIcon aria-hidden="true" className="size-3 animate-spin" />
) : (
"Симулировать"
)}
</Button>
)}
{isApplied && (
<span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
<span className="text-[10px] text-success font-medium">
✓ симуляция завершена
</span>
)}
@@ -249,8 +249,8 @@ function RouteOptimizerCommRecsDataGrid({
headerRow: "border-b bg-muted/20",
bodyRow: cn(
"group/row hover:bg-muted/30",
"[&:has([data-comm-switch=true])]:bg-amber-500/5",
"[&:has([data-comm-applied=true])]:bg-emerald-500/5",
"[&:has([data-comm-switch=true])]:bg-warning/5",
"[&:has([data-comm-applied=true])]:bg-success/5",
),
}}
tableLayout={{ dense: true }}