Refactor VPN proxy routing logic
This commit is contained in:
142
.interface-design/system.md
Normal file
142
.interface-design/system.md
Normal file
@@ -0,0 +1,142 @@
|
||||
# Windows Client Interface System
|
||||
|
||||
Дата: 2026-07-08
|
||||
|
||||
## Направление
|
||||
|
||||
Это максимально простая Windows-утилита управления службами и их состояниями. Она не должна ощущаться как VPN-dashboard, SaaS-панель или маркетинговый клиент. Главные глаголы интерфейса:
|
||||
|
||||
- проверить состояние;
|
||||
- установить компонент;
|
||||
- удалить компонент;
|
||||
- запустить службу;
|
||||
- остановить службу;
|
||||
- обновить/перепроверить состояние;
|
||||
- добавить приложение/путь;
|
||||
- применить конфигурацию только когда prerequisites готовы.
|
||||
|
||||
Интерфейс должен быть плотным, спокойным, системным и предсказуемым. Пользователь открывает его не для анализа статистики, а чтобы быстро понять "что сейчас установлено, что запущено, что сломано и какую одну кнопку нажать дальше".
|
||||
|
||||
## Домен
|
||||
|
||||
Ключевые понятия: Windows service, installed/running/stopped/missing, install/uninstall, helper/elevation, ProxiFyre, Local sing-box, selected apps, endpoint, generated config, logs, diagnostics, readiness blockers.
|
||||
|
||||
Цветовой мир: темная Windows-оболочка, service console, terminal black, muted slate panels, driver/service green, warning amber, blocked red, focus/navigation blue.
|
||||
|
||||
Сигнатура продукта: `Service Control Row` - компактная строка компонента, где слева состояние службы, в центре человекочитаемый статус и путь/деталь, справа ровно одно главное действие плюс меню дополнительных действий. Эта строка должна быть повторяемым паттерном для ProxiFyre, Local sing-box и будущих компонентов.
|
||||
|
||||
## Визуальная модель
|
||||
|
||||
- Основной layout: fixed header, fixed tabs, scrollable work area, adaptive log/status area.
|
||||
- Основная композиция: не больше одного главного действия на компонент или экран.
|
||||
- Summary должен отвечать "готово / не готово / что сделать дальше", а не показывать длинный dashboard.
|
||||
- Route chain полезен, но он вторичен к service-control модели. Он должен объяснять эффект состояний служб, а не превращать приложение в карту сети.
|
||||
|
||||
## Depth And Surfaces
|
||||
|
||||
Стратегия глубины: borders-only + subtle surface shifts. Без тяжелых shadows.
|
||||
|
||||
- `canvas`: `#101216` - фон приложения.
|
||||
- `surface`: `#131720` - обычные панели.
|
||||
- `surface-raised`: `#151923` - service rows и важные панели.
|
||||
- `surface-control`: `#242a35` - neutral buttons.
|
||||
- `surface-inset`: `#0d1016` - inputs и read-only inset fields.
|
||||
- `border`: `#2b3342`.
|
||||
- `border-strong`: `#343b49`.
|
||||
- `focus`: `#3b82f6`.
|
||||
|
||||
Радиусы: 4px для buttons, inputs, rows, panels; 999px только для pills/dots. Карточки и панели не должны становиться мягкими/крупно-скругленными.
|
||||
|
||||
Spacing base: 4px. Основные значения: 6, 8, 10, 12, 14, 18. Для плотной утилиты 20+ использовать редко, только между большими группами.
|
||||
|
||||
## Typography
|
||||
|
||||
Шрифт: Inter/system stack как сейчас.
|
||||
|
||||
Плотная шкала:
|
||||
|
||||
- caption: 12px / 500-700 / muted;
|
||||
- body: 14px / 400-500 / secondary;
|
||||
- control: 14px / 700 / primary;
|
||||
- section title: 16px / 700;
|
||||
- screen title: 18px / 650-750;
|
||||
- status title: 22px / 700 only for primary readiness state.
|
||||
|
||||
Иерархия должна строиться весом и цветом больше, чем размером. Letter spacing держать `0`.
|
||||
|
||||
## Компонентная база
|
||||
|
||||
### Button
|
||||
|
||||
Все кнопки должны идти через общий компонент и общие variants:
|
||||
|
||||
- `primary`: главное безопасное действие текущего блока. Зеленый использовать только когда действие реально применимо и готово к выполнению.
|
||||
- `neutral`: refresh, open, cancel, secondary action.
|
||||
- `add`: добавление процесса, EXE, папки, target. Иконка + tooltip; текстовая кнопка только когда без текста смысл неясен.
|
||||
- `danger`: stop/uninstall/delete. Не смешивать с neutral.
|
||||
- `icon`: квадрат 40-44px, только иконка, обязательны `aria-label`, `title` или tooltip.
|
||||
|
||||
Button states обязательны: default, hover, active, focus-visible, disabled, loading.
|
||||
|
||||
Loading state не должен выглядеть как зависание: показывать spinner/progress label, менять текст на действие в процессе ("Проверяю", "Устанавливаю", "Останавливаю"), блокировать повторный запуск.
|
||||
|
||||
### Service Control Row
|
||||
|
||||
Повторяемый компонент для служб:
|
||||
|
||||
- left: status dot/icon (`checking`, `missing`, `installed`, `running`, `stopped`, `error`);
|
||||
- center: title + short status + optional path/details;
|
||||
- right: primary action (`Установить`, `Запустить`, `Остановить`, `Обновить`) + overflow menu;
|
||||
- expanded area: setup checklist, diagnostics, paths, generated config.
|
||||
|
||||
В строке не должно быть двух конкурирующих primary actions.
|
||||
|
||||
### Tabs
|
||||
|
||||
Tabs должны быть единым компонентом:
|
||||
|
||||
- role tablist/tab/tabpanel;
|
||||
- arrow-key navigation;
|
||||
- active indicator 3px blue;
|
||||
- height 46px desktop, не меньше 40px narrow;
|
||||
- transition 180-240ms только `opacity` + `transform`;
|
||||
- no layout shift при переключении.
|
||||
|
||||
### Status And Logs
|
||||
|
||||
Status surface должен показывать человеческий текст первым, raw details вторым уровнем.
|
||||
|
||||
- Preview/native command errors: friendly summary in dock, raw error in details.
|
||||
- `aria-live` объявляет только короткий статус.
|
||||
- Narrow width: dock collapses into compact toast/details control.
|
||||
|
||||
### Forms And Inputs
|
||||
|
||||
Inputs are inset:
|
||||
|
||||
- background `surface-inset`;
|
||||
- border `border-strong`;
|
||||
- focus ring 1px `focus`;
|
||||
- validation appears directly below or beside the field;
|
||||
- invalid state disables dependent action and explains exact accepted format.
|
||||
|
||||
### Motion
|
||||
|
||||
Motion должна показывать, что интерфейс живой, но не тормозить повторяющиеся операции.
|
||||
|
||||
- Button press: 100-140ms, `transform: scale(0.98)`.
|
||||
- Tab switch: 180-240ms, `opacity` + `translateX` 12-24px.
|
||||
- Popover/menu: 150-180ms, `opacity` + `scale(0.97 -> 1)`.
|
||||
- Service checking/installing: subtle spinner or border trace, but not decorative glow everywhere.
|
||||
- Respect `prefers-reduced-motion`.
|
||||
|
||||
Не использовать `transition: all`.
|
||||
|
||||
## Implementation Priorities
|
||||
|
||||
1. Создать shared UI layer: `Button`, `IconButton`, `Tabs`, `ServiceControlRow`, `StatusPill`, `LogDock`, `Field`, `ActionMenu`.
|
||||
2. Перевести текущие кнопки на variants, чтобы "обновить", "добавить", "установить", "удалить", "применить" выглядели и вели себя стабильно.
|
||||
3. Ввести readiness blockers для apply actions.
|
||||
4. Свести все анимации к общим duration/easing tokens.
|
||||
5. Проверить keyboard flow и responsive snapshots после каждого крупного UI изменения.
|
||||
|
||||
Reference in New Issue
Block a user