143 lines
8.1 KiB
Markdown
143 lines
8.1 KiB
Markdown
# 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 изменения.
|
||
|