Update layout and component structure in Svelte pages
- Adjusted the layout of several Svelte components to ensure consistent spacing and alignment, specifically changing `gap-3` to `gap-4` in multiple instances. - Replaced Card components with DataTableCard in the Mihomo page for improved data presentation. - Enhanced text formatting for better readability across various pages, ensuring consistent use of class attributes.
This commit is contained in:
Denozordec
@@ -516,7 +516,7 @@ $effect(() => {
|
||||
let isDataEmpty = $derived(!loading && totalIpRows === 0 && !err);
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Уникальные IP</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
|
||||
@@ -11,9 +11,11 @@
|
||||
import { formatBytes } from '$lib/format.js';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Badge } from '$lib/components/ui/badge/index.js';
|
||||
import KpiStatCard from '$lib/components/kpi-stat-card.svelte';
|
||||
import DataTableCard from '$lib/components/data-table/data-table-card.svelte';
|
||||
import DataQueryState from '$lib/components/fleet/data-query-state.svelte';
|
||||
import MihomoProxyGroups from '$lib/components/mihomo/mihomo-proxy-groups.svelte';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton/index.js';
|
||||
@@ -189,10 +191,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Mihomo (флот)</h1>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Сводка по нодам и управление прокси. Опрос соединений каждые {POLL_MS / 1000} с.
|
||||
</p>
|
||||
</div>
|
||||
@@ -206,7 +208,7 @@
|
||||
|
||||
<DataQueryState {err} showSkeleton={loading} isEmpty={!loading && rows.length === 0 && !err}>
|
||||
{#snippet empty()}
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
В снимке агрегата нет серверов. Проверьте шлюз и конфигурацию <code class="text-xs">servers</code>.
|
||||
</p>
|
||||
{/snippet}
|
||||
@@ -255,15 +257,11 @@
|
||||
</KpiStatCard>
|
||||
</div>
|
||||
|
||||
<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Ноды</Card.Title>
|
||||
<Card.Description>
|
||||
Контроллер и метрики. Ниже — компактные группы прокси (автозагрузка). «Детально» — обзор с
|
||||
графиками.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="overflow-x-auto px-2 sm:px-6">
|
||||
<DataTableCard
|
||||
title="Ноды"
|
||||
description="Контроллер и метрики. Ниже — компактные группы прокси (автозагрузка). «Детально» — обзор с графиками."
|
||||
>
|
||||
<ScrollArea class="w-full" orientation="both">
|
||||
<Table.Root>
|
||||
<Table.Header class="sticky top-0 z-10 bg-muted">
|
||||
<Table.Row class="border-b border-border/80 hover:bg-transparent">
|
||||
@@ -333,8 +331,8 @@
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</ScrollArea>
|
||||
</DataTableCard>
|
||||
|
||||
<div class="mt-8 space-y-3">
|
||||
<div>
|
||||
@@ -350,8 +348,9 @@
|
||||
{#each rows.filter((r) => r.metaStatus === 'ok') as r (r.alias)}
|
||||
<Card.Root
|
||||
id="mihomo-proxies-{encodeURIComponent(r.alias)}"
|
||||
data-size="sm"
|
||||
class="bg-card min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden py-0 shadow-sm ring-1 ring-border/60"
|
||||
size="sm"
|
||||
density="compact"
|
||||
class="min-h-0 min-w-0 scroll-mt-20 overflow-hidden shadow-sm"
|
||||
>
|
||||
<Card.Header class="border-border/80 border-b px-3 pb-3 pt-3 sm:px-4">
|
||||
<Card.Title class="font-mono text-sm font-semibold leading-none tracking-tight">
|
||||
@@ -413,7 +412,7 @@
|
||||
</Card.Root>
|
||||
{/each}
|
||||
{#if rows.filter((r) => r.metaStatus === 'ok').length === 0}
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Нет нод с настроенным Mihomo — переключать прокси негде. Проверьте конфиг шлюза.
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
let handshakeT = $derived(num(summary?.handshake_timeouts_total));
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Сервер: обзор</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
|
||||
@@ -496,10 +496,10 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Mihomo</h1>
|
||||
<p class="text-muted-foreground text-sm">Обзор и прокси (external-controller)</p>
|
||||
<p class="text-sm text-muted-foreground">Обзор и прокси (external-controller)</p>
|
||||
</div>
|
||||
<Tabs.Root bind:value={tab} class="w-fit shrink-0">
|
||||
<Tabs.List class="min-w-[220px] gap-0.5 p-1">
|
||||
|
||||
@@ -343,7 +343,7 @@ let sumActiveIps = $derived.by(() =>
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
|
||||
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Пользователи (флот)</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
|
||||
Reference in New Issue
Block a user