From d91667f698940a4d9701defd18e3dd39cf26a2fd Mon Sep 17 00:00:00 2001 From: Denozordec Date: Wed, 8 Apr 2026 14:46:56 +0700 Subject: [PATCH] feat: enhance settings page layout and section management Redesigned the settings page to improve user experience by introducing a section-based layout for managing API keys and BIRD parameters. Added a new type for settings sections and implemented dynamic content rendering based on the selected section. Updated descriptions for clarity and improved the overall structure of the settings interface. --- web/src/routes/settings/+page.svelte | 366 +++++++++++++++------------ 1 file changed, 204 insertions(+), 162 deletions(-) diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte index 07f307a..64f3007 100644 --- a/web/src/routes/settings/+page.svelte +++ b/web/src/routes/settings/+page.svelte @@ -5,7 +5,7 @@ import { apiJSON, apiMutate } from '$lib/api/client.js'; import type { AppSettings } from '$lib/api/types.js'; import { Button } from '$lib/components/ui/button/index.js'; - import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '$lib/components/ui/card/index.js'; + import { Card, CardContent, CardHeader, CardDescription } from '$lib/components/ui/card/index.js'; import { Input } from '$lib/components/ui/input/index.js'; import { Label } from '$lib/components/ui/label/index.js'; import { toast } from 'svelte-sonner'; @@ -39,6 +39,8 @@ | 'bird_bgp_source_ipv6' | 'revision_retention_minutes'; + type SettingsSection = 'token' | 'bird' | 'revisions' | 'additional'; + const knownFieldKeys: KnownFieldKey[] = [ 'bird_router_id', 'bird_local_ipv4', @@ -49,6 +51,15 @@ 'revision_retention_minutes' ]; + let activeSection = $state('token'); + + const sectionItems: Array<{ id: SettingsSection; label: string; description: string }> = [ + { id: 'token', label: 'API-ключ', description: 'Авторизация в UI' }, + { id: 'bird', label: 'BIRD', description: 'Сетевые параметры' }, + { id: 'revisions', label: 'Ревизии', description: 'Хранение истории' }, + { id: 'additional', label: 'Дополнительно', description: 'Ключ-значение' } + ]; + function isValidIPv4(value: string): boolean { const parts = value.split('.'); if (parts.length !== 4) return false; @@ -257,7 +268,7 @@ }); -
+

Настройки

-

Токен доступа и параметры API.

+

+ Управление токеном доступа и глобальными параметрами control plane. +

- - - API-ключ - - Bearer-токен хранится только в localStorage браузера. Для локального демо с - EVOBGP_DEV_INSECURE=1 - используйте токен dev. - - - -
- - -
- - - + +
+
+ {#each sectionItems as section (section.id)} + + {/each} +
- - - - Настройки системы (API) +
+ {#if activeSection === 'token'} +
+
+

API-ключ

+

+ Bearer-токен хранится только в localStorage браузера. Для локального демо с + EVOBGP_DEV_INSECURE=1 + используйте токен dev. +

+
+ +
+ + +
+ + +
+ {:else if loadingSettings} +

Загрузка…

+ {:else if apiSettings === null} + + {:else} +
+ {#if activeSection === 'bird'} +
+

Параметры BIRD

+ +
+ + + {#if knownFieldErrors.bird_router_id} +

{knownFieldErrors.bird_router_id}

+ {/if} +
+ +
+ + + {#if knownFieldErrors.bird_local_ipv4} +

{knownFieldErrors.bird_local_ipv4}

+ {/if} +
+ +
+ + + {#if knownFieldErrors.bird_local_ipv6} +

{knownFieldErrors.bird_local_ipv6}

+ {/if} +
+ +
+ + + {#if knownFieldErrors.bird_local_asn} +

{knownFieldErrors.bird_local_asn}

+ {/if} +
+ +
+ + + {#if knownFieldErrors.bird_bgp_source_ipv4} +

{knownFieldErrors.bird_bgp_source_ipv4}

+ {/if} +
+ +
+ + + {#if knownFieldErrors.bird_bgp_source_ipv6} +

{knownFieldErrors.bird_bgp_source_ipv6}

+ {/if} +
+
+ {:else if activeSection === 'revisions'} +
+

Управление ревизиями

+ +
+ + + {#if knownFieldErrors.revision_retention_minutes} +

{knownFieldErrors.revision_retention_minutes}

+ {/if} +

+ Старые ревизии удаляются автоматически. Последняя раскатанная ревизия не удаляется. +

+
+
+ {:else if activeSection === 'additional'} +
+
+

Дополнительные настройки (KV)

+ +
+ + {#if additionalSettings.length === 0} +

Нет дополнительных параметров.

+ {/if} + +
+ {#each additionalSettings as entry (entry.id)} +
+ + + +
+ {/each} +
+
+ {/if} + + {#if hasValidationErrors} +

+ Есть ошибки в полях. Исправьте их, чтобы сохранить изменения. +

+ {/if} + +
+ +
+
+ {/if} +
+
+ + GET/PATCH /v1/settings — глобальные параметры control plane (хранятся в БД). Требуется роль operator. - - {#if loadingSettings} -

Загрузка…

- {:else if apiSettings !== null} -
-
-

Параметры BIRD

- -
- - - {#if knownFieldErrors.bird_router_id} -

{knownFieldErrors.bird_router_id}

- {/if} -
- -
- - - {#if knownFieldErrors.bird_local_ipv4} -

{knownFieldErrors.bird_local_ipv4}

- {/if} -
- -
- - - {#if knownFieldErrors.bird_local_ipv6} -

{knownFieldErrors.bird_local_ipv6}

- {/if} -
- -
- - - {#if knownFieldErrors.bird_local_asn} -

{knownFieldErrors.bird_local_asn}

- {/if} -
- -
- - - {#if knownFieldErrors.bird_bgp_source_ipv4} -

{knownFieldErrors.bird_bgp_source_ipv4}

- {/if} -
- -
- - - {#if knownFieldErrors.bird_bgp_source_ipv6} -

{knownFieldErrors.bird_bgp_source_ipv6}

- {/if} -
-
- -
-

Управление ревизиями

- -
- - - {#if knownFieldErrors.revision_retention_minutes} -

{knownFieldErrors.revision_retention_minutes}

- {/if} -

- Старые ревизии удаляются автоматически. Последняя раскатанная ревизия не удаляется. -

-
-
- -
-
-

Дополнительные настройки (KV)

- -
- - {#if additionalSettings.length === 0} -

Нет дополнительных параметров.

- {/if} - -
- {#each additionalSettings as entry (entry.id)} -
- - - -
- {/each} -
-
-
- - {#if hasValidationErrors} -

- Есть ошибки в полях. Исправьте их, чтобы сохранить изменения. -

- {/if} - - - {:else} - - {/if} -