From 398c776238d06bec80f9ef1cfe7af30f6fabdb70 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Tue, 31 Mar 2026 17:10:50 +0700 Subject: [PATCH] Refactor Mihomo proxy groups component for improved layout and functionality - Replaced the lazy loading mechanism with a compact mode for better user experience and performance. - Enhanced the layout of proxy groups to support a more flexible display, accommodating both compact and standard views. - Updated button styles and descriptions for clarity, ensuring a more intuitive interaction with proxy nodes. - Adjusted the overall structure of the Mihomo page to streamline the presentation of proxy data and improve accessibility. --- .../mihomo/mihomo-proxy-groups.svelte | 238 ++++++++++++------ web/src/routes/mihomo/+page.svelte | 26 +- 2 files changed, 175 insertions(+), 89 deletions(-) diff --git a/web/src/lib/components/mihomo/mihomo-proxy-groups.svelte b/web/src/lib/components/mihomo/mihomo-proxy-groups.svelte index 44c7db7..9e1a002 100644 --- a/web/src/lib/components/mihomo/mihomo-proxy-groups.svelte +++ b/web/src/lib/components/mihomo/mihomo-proxy-groups.svelte @@ -5,17 +5,17 @@ import { Badge } from '$lib/components/ui/badge/index.js'; import DataQueryState from '$lib/components/fleet/data-query-state.svelte'; import { Skeleton } from '$lib/components/ui/skeleton/index.js'; + import { cn } from '$lib/utils.js'; let { alias, - lazy = false + /** Плотная сетка мелких ячеек — для флота и списков из многих нод. */ + compact = false }: { alias: string; - /** Не запрашивать /proxies до явного нажатия «Загрузить» / «Обновить». */ - lazy?: boolean; + compact?: boolean; } = $props(); - /** Mihomo hub/route/proxies.go: без query `url` URLTest часто даёт delay=0 → HTTP 503. */ const MIHOMO_DELAY_DEFAULT_URL = 'https://www.gstatic.com/generate_204'; let proxiesLoading = $state(false); @@ -48,11 +48,10 @@ $effect(() => { const a = alias; - if (!a || lazy) return; + if (!a) return; void loadProxies(); }); - /** Группы, у которых есть `all` + `now` и PUT /proxies/{name} переключает узел (как в Clash/Mihomo). */ function isSelectableGroup(p: MihomoProxyEntry) { const t = (p.type ?? '').toLowerCase(); if (t === 'selector' || t === 'urltest' || t === 'fallback') return true; @@ -127,91 +126,178 @@ } -
- {#if lazy && !proxiesData && !proxiesLoading} - - {/if} -
{#snippet skeleton()} -
- {#each Array.from({ length: 6 }) as _, i (i)} - - {/each} -
+ {#if compact} +
+ {#each Array.from({ length: 12 }) as _, i (i)} + + {/each} +
+ {:else} +
+ {#each Array.from({ length: 6 }) as _, i (i)} + + {/each} +
+ {/if} {/snippet} {#snippet children()} {#if proxiesData?.proxies} -
+
{#each Object.entries(proxiesData.proxies).filter(([_, v]) => isSelectableGroup(v)) as [gName, group] (gName)} -
-
-
-

{gName}

-

- Сейчас: {group.now ?? '—'} -

-
- -
-
- {#each group.all ?? [] as nodeName (nodeName)} - {@const node = proxiesData.proxies?.[nodeName]} - {@const d = node ? lastDelay(node) : null} - {@const active = group.now === nodeName} -
- -
- -
+ + → {group.now ?? '—'} +
- {/each} + +
+
+ {#each group.all ?? [] as nodeName (nodeName)} + {@const node = proxiesData.proxies?.[nodeName]} + {@const d = node ? lastDelay(node) : null} + {@const active = group.now === nodeName} +
+ + +
+ {/each} +
-
+ {:else} +
+
+
+

{gName}

+

+ Сейчас: {group.now ?? '—'} +

+
+ +
+
+ {#each group.all ?? [] as nodeName (nodeName)} + {@const node = proxiesData.proxies?.[nodeName]} + {@const d = node ? lastDelay(node) : null} + {@const active = group.now === nodeName} +
+ +
+ +
+
+ {/each} +
+
+ {/if} {/each}
- {:else if !lazy || proxiesLoading} - - {:else} -

Нажмите «Загрузить прокси», чтобы получить список групп.

{/if} {/snippet} diff --git a/web/src/routes/mihomo/+page.svelte b/web/src/routes/mihomo/+page.svelte index 8e2d24a..7670d58 100644 --- a/web/src/routes/mihomo/+page.svelte +++ b/web/src/routes/mihomo/+page.svelte @@ -245,8 +245,8 @@ Ноды - Контроллер и метрики. Ниже на этой же странице — переключение прокси по каждой ноде; «Детально» - ведёт на полный обзор с графиками. + Контроллер и метрики. Ниже — компактные группы прокси (автозагрузка). «Детально» — обзор с + графиками. @@ -322,30 +322,30 @@ -
+
-

Прокси по нодам

-

- Выбор узла в группах Mihomo на месте. Для каждой ноды список загружается по кнопке «Загрузить - прокси», чтобы не запрашивать все конфиги сразу. +

Прокси по нодам

+

+ Список групп подгружается автоматически. Клик по ячейке — выбор узла; «ping» — задержка.

-
+
{#each rows.filter((r) => r.metaStatus === 'ok') as r (r.alias)} - - {r.alias} + + {r.alias} {#if r.meta?.controller_base} - + {r.meta.controller_base} {/if} - - + + {/each}