Simplify client proxy port handling
This commit is contained in:
@@ -13,7 +13,7 @@ curl -fsSL https://git.dokops.ru/dokril/vpn-proxy/raw/branch/master/scripts/inst
|
|||||||
После запуска по умолчанию:
|
После запуска по умолчанию:
|
||||||
|
|
||||||
- UI: `http://127.0.0.1:3456`
|
- UI: `http://127.0.0.1:3456`
|
||||||
- HTTP/SOCKS proxy: `127.0.0.1:8080` по умолчанию; в UI можно выбрать порт из Docker-диапазона `8080–8090`
|
- HTTP/SOCKS proxy: `127.0.0.1:8080` по умолчанию; установщик интерактивно спросит proxy-порт и опубликует только его
|
||||||
|
|
||||||
Установщик интерактивно спросит proxy-порт. Если стандартный UI-порт `3456` занят другим контейнером, установщик попросит выбрать свободный UI-порт. Для неинтерактивного запуска можно задать порты заранее; тогда вопросы не появятся:
|
Установщик интерактивно спросит proxy-порт. Если стандартный UI-порт `3456` занят другим контейнером, установщик попросит выбрать свободный UI-порт. Для неинтерактивного запуска можно задать порты заранее; тогда вопросы не появятся:
|
||||||
|
|
||||||
@@ -376,9 +376,10 @@ UI доступен на `http://<gateway-ip>:3456`.
|
|||||||
| `APP_MODE` | `gateway` | `gateway` или `client`; compose клиента задаёт `client` автоматически |
|
| `APP_MODE` | `gateway` | `gateway` или `client`; compose клиента задаёт `client` автоматически |
|
||||||
| `CLIENT_UI_PORT` | `3456` | Host-порт UI для `docker-compose.client.yml` |
|
| `CLIENT_UI_PORT` | `3456` | Host-порт UI для `docker-compose.client.yml` |
|
||||||
| `VPN_PROXY_CLIENT_UI_PORT` | unset | UI-порт для macOS installer; записывается в `CLIENT_UI_PORT` |
|
| `VPN_PROXY_CLIENT_UI_PORT` | unset | UI-порт для macOS installer; записывается в `CLIENT_UI_PORT` |
|
||||||
| `VPN_PROXY_CLIENT_PORT` | unset | Proxy-порт для macOS installer; записывает `CLIENT_PROXY_PORT_START/END` |
|
| `VPN_PROXY_CLIENT_PORT` | unset | Proxy-порт для macOS installer; записывает `CLIENT_PROXY_PORT` и single-port `CLIENT_PROXY_PORT_START/END` |
|
||||||
| `CLIENT_PROXY_PORT_START` | `8080` | Первый host/container proxy-порт для `docker-compose.client.yml` |
|
| `CLIENT_PROXY_PORT` | `8080` | Единственный host/container proxy-порт для `docker-compose.client.yml` |
|
||||||
| `CLIENT_PROXY_PORT_END` | `8090` | Последний host/container proxy-порт для `docker-compose.client.yml` |
|
| `CLIENT_PROXY_PORT_START` | `8080` | Совместимость со старым env; в client compose считается тем же одиночным proxy-портом |
|
||||||
|
| `CLIENT_PROXY_PORT_END` | same as start | Совместимость со старым env; по умолчанию не расширяет Docker-публикацию в диапазон |
|
||||||
| `SHARED_PROXY_HOST` | unset | Явный host/IP, который gateway отдаёт в `/api/shared-proxy`; если не задан, берётся Host заголовок запроса |
|
| `SHARED_PROXY_HOST` | unset | Явный host/IP, который gateway отдаёт в `/api/shared-proxy`; если не задан, берётся Host заголовок запроса |
|
||||||
| `PORT` | `3456` | Порт веб-интерфейса |
|
| `PORT` | `3456` | Порт веб-интерфейса |
|
||||||
| `BASE_IMAGE` | `debian:bookworm-slim` | Базовый Docker image для сборки; можно заменить на mirror |
|
| `BASE_IMAGE` | `debian:bookworm-slim` | Базовый Docker image для сборки; можно заменить на mirror |
|
||||||
|
|||||||
@@ -9,9 +9,9 @@ services:
|
|||||||
environment:
|
environment:
|
||||||
APP_MODE: client
|
APP_MODE: client
|
||||||
PORT: ${PORT:-3456}
|
PORT: ${PORT:-3456}
|
||||||
PROXY_PORT: ${CLIENT_PROXY_PORT_START:-8080}
|
PROXY_PORT: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
|
||||||
CLIENT_PROXY_PORT_START: ${CLIENT_PROXY_PORT_START:-8080}
|
CLIENT_PROXY_PORT_START: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
|
||||||
CLIENT_PROXY_PORT_END: ${CLIENT_PROXY_PORT_END:-8090}
|
CLIENT_PROXY_PORT_END: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
|
||||||
PROXY_BIND_IP: 0.0.0.0
|
PROXY_BIND_IP: 0.0.0.0
|
||||||
DATA_DIR: /var/lib/vpn-proxy
|
DATA_DIR: /var/lib/vpn-proxy
|
||||||
SING_BOX_CONFIG: /etc/sing-box/config.json
|
SING_BOX_CONFIG: /etc/sing-box/config.json
|
||||||
@@ -29,13 +29,13 @@ services:
|
|||||||
no_proxy: "localhost,127.0.0.1,host.docker.internal"
|
no_proxy: "localhost,127.0.0.1,host.docker.internal"
|
||||||
ports:
|
ports:
|
||||||
- "127.0.0.1:${CLIENT_UI_PORT:-3456}:${PORT:-3456}"
|
- "127.0.0.1:${CLIENT_UI_PORT:-3456}:${PORT:-3456}"
|
||||||
- "127.0.0.1:${CLIENT_PROXY_PORT_START:-8080}-${CLIENT_PROXY_PORT_END:-8090}:${CLIENT_PROXY_PORT_START:-8080}-${CLIENT_PROXY_PORT_END:-8090}"
|
- "127.0.0.1:${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}:${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}"
|
||||||
volumes:
|
volumes:
|
||||||
- vpn-proxy-client-data:/var/lib/vpn-proxy
|
- vpn-proxy-client-data:/var/lib/vpn-proxy
|
||||||
- sing-box-client-cache:/var/lib/sing-box
|
- sing-box-client-cache:/var/lib/sing-box
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "curl", "-fsS", "http://127.0.0.1:${PORT:-3456}/api/state"]
|
test: ["CMD", "curl", "--noproxy", "*", "-fsS", "http://127.0.0.1:${PORT:-3456}/api/state"]
|
||||||
interval: 30s
|
interval: 30s
|
||||||
timeout: 5s
|
timeout: 5s
|
||||||
retries: 3
|
retries: 3
|
||||||
|
|||||||
1752
docs/design/open-design/vpn-proxy-full-mock-prototype.html
Normal file
1752
docs/design/open-design/vpn-proxy-full-mock-prototype.html
Normal file
File diff suppressed because it is too large
Load Diff
774
docs/design/open-design/vpn-proxy-route-console-redesign.html
Normal file
774
docs/design/open-design/vpn-proxy-route-console-redesign.html
Normal file
@@ -0,0 +1,774 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>VPN Proxy Route Console Redesign</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
--bg: oklch(0.965 0.008 232);
|
||||||
|
--surface: oklch(0.986 0.006 232);
|
||||||
|
--surface-2: oklch(0.948 0.009 232);
|
||||||
|
--surface-3: oklch(0.918 0.014 232);
|
||||||
|
--ink: oklch(0.238 0.028 238);
|
||||||
|
--muted: oklch(0.47 0.028 238);
|
||||||
|
--subtle: oklch(0.62 0.022 238);
|
||||||
|
--line: oklch(0.835 0.018 232);
|
||||||
|
--line-strong: oklch(0.72 0.032 232);
|
||||||
|
--blue: oklch(0.56 0.14 244);
|
||||||
|
--blue-soft: oklch(0.915 0.045 244);
|
||||||
|
--green: oklch(0.61 0.13 153);
|
||||||
|
--green-soft: oklch(0.915 0.052 153);
|
||||||
|
--amber: oklch(0.72 0.13 74);
|
||||||
|
--amber-soft: oklch(0.93 0.07 74);
|
||||||
|
--red: oklch(0.58 0.15 27);
|
||||||
|
--radius: 8px;
|
||||||
|
--shadow: 0 18px 42px oklch(0.36 0.035 238 / 0.13);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
max-width: 1320px;
|
||||||
|
min-height: calc(100vh - 48px);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: 0 22px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: oklch(0.978 0.007 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, oklch(0.52 0.13 244), oklch(0.62 0.12 153));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 8px;
|
||||||
|
border: 2px solid oklch(0.985 0.005 232);
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 32px;
|
||||||
|
padding: 0 11px;
|
||||||
|
border: 1px solid oklch(0.73 0.05 153);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--green-soft);
|
||||||
|
color: oklch(0.34 0.08 153);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 650;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill::before {
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 0 13px;
|
||||||
|
border-radius: 7px;
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--ink);
|
||||||
|
font-weight: 650;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.primary {
|
||||||
|
border-color: oklch(0.49 0.13 244);
|
||||||
|
background: var(--blue);
|
||||||
|
color: oklch(0.985 0.005 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 264px minmax(0, 1fr) 312px;
|
||||||
|
gap: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail {
|
||||||
|
padding: 18px 14px;
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
background: oklch(0.956 0.009 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title,
|
||||||
|
.panel-label,
|
||||||
|
.field-label {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 11px;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode.active {
|
||||||
|
border-color: oklch(0.68 0.08 244);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-dot {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin-top: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode.active .mode-dot {
|
||||||
|
background: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail-section {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 7px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 9px 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
background: var(--surface);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-row span {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 22px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 18px;
|
||||||
|
align-items: start;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-head p {
|
||||||
|
max-width: 68ch;
|
||||||
|
margin: 8px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.health {
|
||||||
|
min-width: 210px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid oklch(0.76 0.07 153);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--green-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.health strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health span {
|
||||||
|
color: oklch(0.38 0.07 153);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-strip {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
min-height: 126px;
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node.active {
|
||||||
|
border-color: oklch(0.72 0.075 153);
|
||||||
|
background: var(--green-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node.pending {
|
||||||
|
border-color: oklch(0.8 0.09 74);
|
||||||
|
background: var(--amber-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node small {
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 9px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 0 13px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface-2);
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line b {
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line span {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
|
||||||
|
gap: 14px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
min-height: 50px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input,
|
||||||
|
.select {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 38px;
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: 7px;
|
||||||
|
background: oklch(0.992 0.004 232);
|
||||||
|
color: var(--ink);
|
||||||
|
padding: 0 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 94px minmax(0, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
align-items: baseline;
|
||||||
|
padding: 9px 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row small {
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row strong {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side {
|
||||||
|
padding: 18px 14px;
|
||||||
|
border-left: 1px solid var(--line);
|
||||||
|
background: oklch(0.956 0.009 232);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
background: var(--surface);
|
||||||
|
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-row button {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--blue);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel {
|
||||||
|
margin-top: 18px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity {
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 54px minmax(0, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row time {
|
||||||
|
color: var(--muted);
|
||||||
|
font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row span {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.workspace {
|
||||||
|
grid-template-columns: 220px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-strip,
|
||||||
|
.settings-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.page {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
min-height: calc(100vh - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar,
|
||||||
|
.route-head,
|
||||||
|
.workspace {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-strip,
|
||||||
|
.settings-grid,
|
||||||
|
.control-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main,
|
||||||
|
.side {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="page">
|
||||||
|
<section class="shell" aria-label="VPN Proxy redesign preview">
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="mark" aria-hidden="true"></div>
|
||||||
|
<div>
|
||||||
|
<h1>VPN Proxy Client</h1>
|
||||||
|
<span>Local control panel, macOS Docker mode</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top-actions">
|
||||||
|
<span class="status-pill">sing-box running</span>
|
||||||
|
<button class="btn">Restart</button>
|
||||||
|
<button class="btn primary">Apply route</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="workspace">
|
||||||
|
<aside class="rail" aria-label="Connection modes">
|
||||||
|
<p class="nav-title">Режим подключения</p>
|
||||||
|
<div class="mode-list">
|
||||||
|
<button class="mode" type="button">
|
||||||
|
<span class="mode-dot"></span>
|
||||||
|
<span>
|
||||||
|
<strong>Общий gateway</strong>
|
||||||
|
<span>192.168.50.111:8080</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="mode active" type="button">
|
||||||
|
<span class="mode-dot"></span>
|
||||||
|
<span>
|
||||||
|
<strong>Локальный VPN</strong>
|
||||||
|
<span>Finland 02 selected</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="mode" type="button">
|
||||||
|
<span class="mode-dot"></span>
|
||||||
|
<span>
|
||||||
|
<strong>Напрямую</strong>
|
||||||
|
<span>без VPN и gateway</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="rail-section">
|
||||||
|
<p class="nav-title">Проверки</p>
|
||||||
|
<div class="mini-list">
|
||||||
|
<div class="mini-row"><strong>Docker</strong><span>ready</span></div>
|
||||||
|
<div class="mini-row"><strong>Ports</strong><span>8082 open</span></div>
|
||||||
|
<div class="mini-row"><strong>Config</strong><span>valid</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="main">
|
||||||
|
<div class="route-head">
|
||||||
|
<div>
|
||||||
|
<h2>Текущий маршрут: приложения Mac идут через локальный VPN</h2>
|
||||||
|
<p>
|
||||||
|
Главный экран показывает не настройки как список, а фактический путь трафика:
|
||||||
|
от приложения до интернета, с портом, выбранным режимом и состоянием сервиса.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="health">
|
||||||
|
<strong>42 ms</strong>
|
||||||
|
<span>последняя проверка маршрута</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="route-strip" aria-label="Active route">
|
||||||
|
<div class="node">
|
||||||
|
<small>Источник</small>
|
||||||
|
<strong>Mac apps</strong>
|
||||||
|
<span>браузер, Discord, Telegram</span>
|
||||||
|
</div>
|
||||||
|
<div class="node active">
|
||||||
|
<small>Локальный proxy</small>
|
||||||
|
<strong>127.0.0.1:8082</strong>
|
||||||
|
<span>HTTP и SOCKS5</span>
|
||||||
|
</div>
|
||||||
|
<div class="node active">
|
||||||
|
<small>Режим</small>
|
||||||
|
<strong>Local VPN</strong>
|
||||||
|
<span>Finland 02</span>
|
||||||
|
</div>
|
||||||
|
<div class="node pending">
|
||||||
|
<small>Выход</small>
|
||||||
|
<strong>Internet</strong>
|
||||||
|
<span>проверка 11:04</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-line" aria-label="Route path">
|
||||||
|
<b>Mac apps</b><span>></span><b>127.0.0.1:8082</b><span>></span><b>sing-box</b><span>></span><b>Finland 02</b><span>></span><b>Internet</b>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-grid">
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h3>Настройка выбранного режима</h3>
|
||||||
|
<button class="btn">Load subscription</button>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="form-grid">
|
||||||
|
<label class="field">
|
||||||
|
<span class="field-label">Подписка или VLESS</span>
|
||||||
|
<div class="control-row">
|
||||||
|
<input class="input" value="https://provider.example/subscription" />
|
||||||
|
<button class="btn">Refresh</button>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label class="field">
|
||||||
|
<span class="field-label">VPN-сервер</span>
|
||||||
|
<div class="control-row">
|
||||||
|
<select class="select">
|
||||||
|
<option>Finland 02, 42 ms, 18 GB left</option>
|
||||||
|
</select>
|
||||||
|
<button class="btn primary">Connect</button>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h3>Сводка</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="summary-list">
|
||||||
|
<div class="summary-row"><small>Service</small><strong>running since 10:52</strong></div>
|
||||||
|
<div class="summary-row"><small>Config</small><strong>applied 2 minutes ago</strong></div>
|
||||||
|
<div class="summary-row"><small>Fallback</small><strong>VPN by default</strong></div>
|
||||||
|
<div class="summary-row"><small>Quota</small><strong>18 GB left</strong></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="side" aria-label="Local proxy details">
|
||||||
|
<p class="panel-label">Адреса для приложений</p>
|
||||||
|
<div class="copy-stack">
|
||||||
|
<div class="copy-row"><span>http://127.0.0.1:8082</span><button>Copy</button></div>
|
||||||
|
<div class="copy-row"><span>socks5://127.0.0.1:8082</span><button>Copy</button></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="side-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h3>Порт proxy</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="control-row">
|
||||||
|
<input class="input" value="8082" />
|
||||||
|
<button class="btn">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="side-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h3>Активность</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="activity">
|
||||||
|
<div class="activity-row">
|
||||||
|
<time>11:04</time>
|
||||||
|
<span><strong>Route check passed</strong><span>Finland 02 returned 42 ms</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="activity-row">
|
||||||
|
<time>11:02</time>
|
||||||
|
<span><strong>Port changed</strong><span>8080 was busy, 8082 selected</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="activity-row">
|
||||||
|
<time>10:59</time>
|
||||||
|
<span><strong>Subscription refreshed</strong><span>12 servers available</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,470 @@
|
|||||||
|
# VPN Proxy Client Route Console Redesign Implementation Plan
|
||||||
|
|
||||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||||
|
|
||||||
|
**Goal:** Replace the current macOS client overview with a route-first console that makes the active traffic path, local proxy address, selected mode, and next action obvious at a glance.
|
||||||
|
|
||||||
|
**Architecture:** Keep `resolveClientRoute()` as the single source of truth and keep `ClientOverviewPage` as the orchestrator. Split the screen into small presentational components inside `src/web/components/ClientOverviewPage.jsx`, then replace only the client-mode CSS block in `src/web/styles.css` so gateway and Windows work stay untouched.
|
||||||
|
|
||||||
|
**Tech Stack:** React 19, Vite, Node.js `node:test`, existing CSS variables, Open Design static HTML artifact.
|
||||||
|
|
||||||
|
**Design Artifact:** `docs/design/open-design/vpn-proxy-route-console-redesign.html`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current Findings
|
||||||
|
|
||||||
|
- `src/web/components/ClientOverviewPage.jsx` already has the right model: one overview screen, mutually exclusive `Gateway`, `VPN`, and `Direct` modes, and route state from `resolveClientRoute()`.
|
||||||
|
- `src/web/styles.css` makes the client screen visually separate, but it uses a dark blue-green palette that reads as a monitoring dashboard rather than a macOS setup tool.
|
||||||
|
- The current status panel, route line, mode grid, and proxy panel have similar visual weight. The user must scan several boxes to answer the primary question: where does my traffic go right now?
|
||||||
|
- Copyable proxy addresses sit in the side panel. They are useful, but they are visually separated from the route story.
|
||||||
|
- The three mode buttons look like cards. They work, but they do not communicate that mode selection changes the middle segment of the route.
|
||||||
|
|
||||||
|
## Target Design
|
||||||
|
|
||||||
|
Use a light, restrained operational UI for a normal macOS desktop context: a user has Docker running, a browser open, and is checking why an app uses a certain proxy path. The interface should feel closer to a compact network control console than a server dashboard.
|
||||||
|
|
||||||
|
The first viewport should show:
|
||||||
|
|
||||||
|
- top status: service running, restart, apply route;
|
||||||
|
- left mode rail: Gateway, Local VPN, Direct;
|
||||||
|
- main route strip: `Mac apps > local proxy > selected route > Internet`;
|
||||||
|
- right utility panel: copy proxy addresses, proxy port, recent activity;
|
||||||
|
- settings below route: only the form for the selected mode.
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
- Modify `src/web/components/ClientOverviewPage.jsx`: reorganize render structure into route console subcomponents while preserving props and handlers.
|
||||||
|
- Modify `src/web/styles.css`: replace `.client-*` layout styles from `.client-mode .app-main` through the final client media query.
|
||||||
|
- Test `test/web/client-route.test.js`: extend route state coverage so UI changes do not hide incorrect mode/status combinations.
|
||||||
|
- Keep `docs/design/open-design/vpn-proxy-route-console-redesign.html`: reference artifact for visual decisions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Task 1: Lock Route Contract Before UI Changes
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `test/web/client-route.test.js`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Add tests for all user-visible route statuses**
|
||||||
|
|
||||||
|
Add these cases to `test/web/client-route.test.js`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
test('resolves running local VPN route', () => {
|
||||||
|
const route = resolveClientRoute({
|
||||||
|
state: {
|
||||||
|
singboxRunning: true,
|
||||||
|
configExists: true,
|
||||||
|
proxyPort: 8082,
|
||||||
|
selectedTag: 'finland-02',
|
||||||
|
clientSettings: { homeBypassEnabled: false, sharedProxyEnabled: false },
|
||||||
|
},
|
||||||
|
activeServer: { tag: 'finland-02' },
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.equal(route.mode, 'vpn');
|
||||||
|
assert.equal(route.status, 'connected');
|
||||||
|
assert.equal(route.localProxy, '127.0.0.1:8082');
|
||||||
|
assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8082', 'VPN finland-02', 'Internet']);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('resolves gateway route when shared proxy is enabled', () => {
|
||||||
|
const route = resolveClientRoute({
|
||||||
|
state: {
|
||||||
|
singboxRunning: true,
|
||||||
|
configExists: true,
|
||||||
|
proxyPort: 8082,
|
||||||
|
clientSettings: {
|
||||||
|
sharedProxyEnabled: true,
|
||||||
|
sharedProxy: { host: '192.168.50.111', port: 8080 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.equal(route.mode, 'gateway');
|
||||||
|
assert.equal(route.status, 'connected');
|
||||||
|
assert.equal(route.target, '192.168.50.111:8080');
|
||||||
|
assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8082', 'Gateway 192.168.50.111:8080', 'Internet']);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('resolves direct route when home bypass is enabled', () => {
|
||||||
|
const route = resolveClientRoute({
|
||||||
|
state: {
|
||||||
|
singboxRunning: true,
|
||||||
|
configExists: true,
|
||||||
|
clientSettings: { homeBypassEnabled: true, sharedProxyEnabled: false, proxyPort: 8084 },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.equal(route.mode, 'direct');
|
||||||
|
assert.equal(route.status, 'connected');
|
||||||
|
assert.equal(route.localProxy, '127.0.0.1:8084');
|
||||||
|
assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8084', 'Direct', 'Internet']);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Run the route tests**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm test -- test/web/client-route.test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all existing and new route tests pass.
|
||||||
|
|
||||||
|
- [ ] **Step 3: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add test/web/client-route.test.js
|
||||||
|
git commit -m "test: lock client route display contract"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Task 2: Restructure Client Overview Markup
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/web/components/ClientOverviewPage.jsx`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Replace the route line with route nodes**
|
||||||
|
|
||||||
|
Replace `RouteLine` with:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
function RouteStrip({ route }) {
|
||||||
|
const nodes = [
|
||||||
|
{ label: 'Источник', value: route.path[0], detail: 'приложения Mac' },
|
||||||
|
{ label: 'Локальный proxy', value: route.localProxy, detail: 'HTTP и SOCKS5' },
|
||||||
|
{ label: 'Режим', value: route.target, detail: route.targetDetail, active: route.status === 'connected' },
|
||||||
|
{ label: 'Выход', value: 'Internet', detail: route.status === 'connected' ? 'маршрут активен' : 'ожидает запуска' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="client-route-strip">
|
||||||
|
{nodes.map((node) => (
|
||||||
|
<div className={`client-route-node ${node.active ? 'active' : ''}`} key={node.label}>
|
||||||
|
<small>{node.label}</small>
|
||||||
|
<strong>{node.value}</strong>
|
||||||
|
<span>{node.detail}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RoutePath({ route }) {
|
||||||
|
return (
|
||||||
|
<div className="client-route-path">
|
||||||
|
{route.path.map((item, index) => (
|
||||||
|
<React.Fragment key={`${item}-${index}`}>
|
||||||
|
<strong>{item}</strong>
|
||||||
|
{index < route.path.length - 1 && <span>{'>'}</span>}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Add a mode rail component**
|
||||||
|
|
||||||
|
Add:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
function ModeRail({ route, setupMode, clientSettings, state, busy, onGateway, onVpn, onDirect }) {
|
||||||
|
const modes = [
|
||||||
|
{
|
||||||
|
id: 'gateway',
|
||||||
|
title: 'Общий gateway',
|
||||||
|
subtitle: clientSettings?.sharedProxy
|
||||||
|
? `${clientSettings.sharedProxy.host}:${clientSettings.sharedProxy.port}`
|
||||||
|
: 'серверная proxy',
|
||||||
|
onClick: onGateway,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'vpn',
|
||||||
|
title: 'Локальный VPN',
|
||||||
|
subtitle: state?.selectedTag || 'выбрать сервер',
|
||||||
|
onClick: onVpn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'direct',
|
||||||
|
title: 'Напрямую',
|
||||||
|
subtitle: 'без VPN',
|
||||||
|
onClick: onDirect,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="client-mode-rail">
|
||||||
|
<div className="client-section-label">Режим подключения</div>
|
||||||
|
<div className="client-mode-list">
|
||||||
|
{modes.map((mode) => (
|
||||||
|
<button
|
||||||
|
key={mode.id}
|
||||||
|
type="button"
|
||||||
|
className={`client-rail-mode ${setupMode === mode.id ? 'selected' : ''} ${route.mode === mode.id ? 'active' : ''}`}
|
||||||
|
disabled={busy}
|
||||||
|
onClick={mode.onClick}
|
||||||
|
>
|
||||||
|
<span className="client-mode-dot" />
|
||||||
|
<span>
|
||||||
|
<strong>{mode.title}</strong>
|
||||||
|
<small>{mode.subtitle}</small>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Replace the top-level JSX**
|
||||||
|
|
||||||
|
Use this layout in `ClientOverviewPage`:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
return (
|
||||||
|
<div className="client-console">
|
||||||
|
<ModeRail
|
||||||
|
route={route}
|
||||||
|
setupMode={setupMode}
|
||||||
|
clientSettings={clientSettings}
|
||||||
|
state={state}
|
||||||
|
busy={busy}
|
||||||
|
onGateway={selectGateway}
|
||||||
|
onVpn={selectVpn}
|
||||||
|
onDirect={() => {
|
||||||
|
setSetupMode('direct');
|
||||||
|
enableDirect();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<section className="client-route-workspace">
|
||||||
|
<StatusPanel route={route} state={state} />
|
||||||
|
<RouteStrip route={route} />
|
||||||
|
<RoutePath route={route} />
|
||||||
|
|
||||||
|
<section className="client-mode-panel">
|
||||||
|
{setupMode === 'gateway' && (
|
||||||
|
<GatewaySettings settings={clientSettings} busy={busy} onCheck={onCheckSharedProxy} />
|
||||||
|
)}
|
||||||
|
{setupMode === 'vpn' && (
|
||||||
|
<VpnSettings
|
||||||
|
state={state}
|
||||||
|
servers={servers}
|
||||||
|
subscriptionUrl={subscriptionUrl}
|
||||||
|
setSubscriptionUrl={setSubscriptionUrl}
|
||||||
|
pendingTag={pendingTag}
|
||||||
|
setPendingTag={setPendingTag}
|
||||||
|
busy={busy}
|
||||||
|
onFetchSubscription={onFetchSubscription}
|
||||||
|
onApply={onApply}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{setupMode === 'direct' && <DirectSettings busy={busy} onEnable={enableDirect} />}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ProxySettings state={state} settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: Run build**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: Vite build succeeds.
|
||||||
|
|
||||||
|
- [ ] **Step 5: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/web/components/ClientOverviewPage.jsx
|
||||||
|
git commit -m "refactor: reshape client overview around route console"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Task 3: Replace Client Visual System
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/web/styles.css`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Replace only the client CSS block**
|
||||||
|
|
||||||
|
Replace the CSS from `.client-mode .app-main` through the client media query with the style direction from `docs/design/open-design/vpn-proxy-route-console-redesign.html`. Keep selectors scoped to `.client-*` so gateway screens keep the existing palette.
|
||||||
|
|
||||||
|
Use these token values for the client block:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.app-body.client-mode {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
background: oklch(0.965 0.008 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-mode .topbar {
|
||||||
|
background: oklch(0.978 0.007 232);
|
||||||
|
border-bottom-color: oklch(0.835 0.018 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-mode .app-main {
|
||||||
|
max-width: 1320px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 18px;
|
||||||
|
color: oklch(0.238 0.028 238);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-console {
|
||||||
|
min-height: calc(100vh - var(--topbar-h) - 36px);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 264px minmax(0, 1fr) 312px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: oklch(0.986 0.006 232);
|
||||||
|
border: 1px solid oklch(0.835 0.018 232);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 18px 42px oklch(0.36 0.035 238 / 0.13);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Add responsive behavior**
|
||||||
|
|
||||||
|
Add:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.client-console {
|
||||||
|
grid-template-columns: 220px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-side-panel {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 1px solid oklch(0.835 0.018 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-route-strip {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.client-console,
|
||||||
|
.client-route-strip,
|
||||||
|
.client-inline-form,
|
||||||
|
.client-port-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-mode-rail {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid oklch(0.835 0.018 232);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Verify no banned patterns were introduced**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rg -n "background-clip:\\s*text|border-left:\\s*[2-9]|border-right:\\s*[2-9]|backdrop-filter|letter-spacing:\\s*-" src/web/styles.css
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no matches.
|
||||||
|
|
||||||
|
- [ ] **Step 4: Run build**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: Vite build succeeds.
|
||||||
|
|
||||||
|
- [ ] **Step 5: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/web/styles.css
|
||||||
|
git commit -m "style: apply light route console client theme"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Task 4: Browser Verification
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- No file changes expected.
|
||||||
|
|
||||||
|
- [ ] **Step 1: Start the dev server**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev -- --host 127.0.0.1 --port 4567
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: Vite listens on `http://127.0.0.1:4567`.
|
||||||
|
|
||||||
|
- [ ] **Step 2: Open client mode with representative state**
|
||||||
|
|
||||||
|
Use the browser to open:
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://127.0.0.1:4567
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: the first viewport shows the mode rail, route strip, route path, selected-mode form, and copyable proxy addresses without overlap at desktop width.
|
||||||
|
|
||||||
|
- [ ] **Step 3: Check mobile width**
|
||||||
|
|
||||||
|
Resize to 390px wide.
|
||||||
|
|
||||||
|
Expected: rail, route workspace, and proxy panel stack vertically; long proxy URLs truncate inside their containers; action buttons remain readable.
|
||||||
|
|
||||||
|
- [ ] **Step 4: Run final verification**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm test
|
||||||
|
npm run build
|
||||||
|
git diff --check
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all commands pass.
|
||||||
|
|
||||||
|
- [ ] **Step 5: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/web/components/ClientOverviewPage.jsx src/web/styles.css test/web/client-route.test.js
|
||||||
|
git commit -m "feat: redesign client overview as route console"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Self-Review
|
||||||
|
|
||||||
|
Spec coverage:
|
||||||
|
|
||||||
|
- Current UX assessment is captured in `Current Findings`.
|
||||||
|
- New design direction is captured in `Target Design`.
|
||||||
|
- Open Design artifact is referenced explicitly.
|
||||||
|
- Implementation tasks cover route contract, markup, scoped CSS, and browser verification.
|
||||||
|
|
||||||
|
Placeholder scan:
|
||||||
|
|
||||||
|
- No `TBD`, `TODO`, or unspecified validation steps remain.
|
||||||
|
|
||||||
|
Type consistency:
|
||||||
|
|
||||||
|
- Route fields match `resolveClientRoute()`: `mode`, `status`, `localProxy`, `target`, `targetDetail`, `path`.
|
||||||
@@ -59,15 +59,6 @@ ask_proxy_port() {
|
|||||||
printf '%s\n' "$DEFAULT_PROXY_PORT"
|
printf '%s\n' "$DEFAULT_PROXY_PORT"
|
||||||
}
|
}
|
||||||
|
|
||||||
port_range_end() {
|
|
||||||
local start="$1"
|
|
||||||
local end="$((start + 10))"
|
|
||||||
if [ "$end" -gt 65535 ]; then
|
|
||||||
end=65535
|
|
||||||
fi
|
|
||||||
printf '%s\n' "$end"
|
|
||||||
}
|
|
||||||
|
|
||||||
published_port_conflicts() {
|
published_port_conflicts() {
|
||||||
local port="$1"
|
local port="$1"
|
||||||
local line
|
local line
|
||||||
@@ -82,18 +73,7 @@ published_port_conflicts() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
proxy_port_conflicts() {
|
proxy_port_conflicts() {
|
||||||
local start="$1"
|
published_port_conflicts "$1"
|
||||||
local end
|
|
||||||
local port
|
|
||||||
local conflicts
|
|
||||||
|
|
||||||
end="$(port_range_end "$start")"
|
|
||||||
for port in $(seq "$start" "$end"); do
|
|
||||||
conflicts="$(published_port_conflicts "$port")"
|
|
||||||
if [ -n "$conflicts" ]; then
|
|
||||||
printf 'port %s: %s\n' "$port" "$conflicts"
|
|
||||||
fi
|
|
||||||
done
|
|
||||||
}
|
}
|
||||||
|
|
||||||
assert_proxy_port_available() {
|
assert_proxy_port_available() {
|
||||||
@@ -105,8 +85,8 @@ assert_proxy_port_available() {
|
|||||||
return 0
|
return 0
|
||||||
fi
|
fi
|
||||||
|
|
||||||
printf '[vpn-proxy-client] proxy port range %s-%s is already used:\n%s\n' \
|
printf '[vpn-proxy-client] proxy port %s is already used:\n%s\n' \
|
||||||
"$port" "$(port_range_end "$port")" "$conflicts" >&2
|
"$port" "$conflicts" >&2
|
||||||
die "choose another proxy port with VPN_PROXY_CLIENT_PORT=<port> or stop the conflicting container"
|
die "choose another proxy port with VPN_PROXY_CLIENT_PORT=<port> or stop the conflicting container"
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -170,8 +150,8 @@ choose_ui_port() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
assert_ui_outside_proxy_range() {
|
assert_ui_outside_proxy_range() {
|
||||||
if [ "$UI_PORT" -ge "$PROXY_PORT" ] && [ "$UI_PORT" -le "$PROXY_PORT_END" ]; then
|
if [ "$UI_PORT" = "$PROXY_PORT" ]; then
|
||||||
die "UI port ${UI_PORT} overlaps proxy port range ${PROXY_PORT}-${PROXY_PORT_END}"
|
die "UI port ${UI_PORT} overlaps proxy port"
|
||||||
fi
|
fi
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -181,7 +161,7 @@ wait_for_client_ui() {
|
|||||||
local attempt
|
local attempt
|
||||||
|
|
||||||
for attempt in $(seq 1 30); do
|
for attempt in $(seq 1 30); do
|
||||||
if curl -fsS "$ui_url" >/dev/null 2>&1; then
|
if curl --noproxy "*" -fsS "$ui_url" >/dev/null 2>&1; then
|
||||||
return 0
|
return 0
|
||||||
fi
|
fi
|
||||||
sleep 1
|
sleep 1
|
||||||
@@ -254,7 +234,7 @@ fi
|
|||||||
|
|
||||||
PROXY_PORT="$(ask_proxy_port)"
|
PROXY_PORT="$(ask_proxy_port)"
|
||||||
assert_proxy_port_available "$PROXY_PORT"
|
assert_proxy_port_available "$PROXY_PORT"
|
||||||
PROXY_PORT_END="$(port_range_end "$PROXY_PORT")"
|
PROXY_PORT_END="$PROXY_PORT"
|
||||||
UI_PORT="${REQUESTED_UI_PORT:-$(get_env_value CLIENT_UI_PORT)}"
|
UI_PORT="${REQUESTED_UI_PORT:-$(get_env_value CLIENT_UI_PORT)}"
|
||||||
UI_PORT="${UI_PORT:-3456}"
|
UI_PORT="${UI_PORT:-3456}"
|
||||||
UI_PORT="$(choose_ui_port "$UI_PORT")"
|
UI_PORT="$(choose_ui_port "$UI_PORT")"
|
||||||
@@ -268,7 +248,7 @@ set_env_value CLIENT_PROXY_PORT_END "$PROXY_PORT_END"
|
|||||||
set_env_value PROXY_PORT "$PROXY_PORT"
|
set_env_value PROXY_PORT "$PROXY_PORT"
|
||||||
|
|
||||||
log "UI port: http://127.0.0.1:${UI_PORT}"
|
log "UI port: http://127.0.0.1:${UI_PORT}"
|
||||||
log "proxy port: 127.0.0.1:${PROXY_PORT} (reserved range ${PROXY_PORT}-${PROXY_PORT_END})"
|
log "proxy port: 127.0.0.1:${PROXY_PORT}"
|
||||||
|
|
||||||
log "building and starting Docker client"
|
log "building and starting Docker client"
|
||||||
docker compose -f "$COMPOSE_FILE" up -d --build
|
docker compose -f "$COMPOSE_FILE" up -d --build
|
||||||
@@ -283,7 +263,7 @@ UI:
|
|||||||
|
|
||||||
Proxy:
|
Proxy:
|
||||||
HTTP/SOCKS5 127.0.0.1:${PROXY_PORT}
|
HTTP/SOCKS5 127.0.0.1:${PROXY_PORT}
|
||||||
UI can switch proxy port within the Docker-published ${PROXY_PORT}-${PROXY_PORT_END} range.
|
This is the only Docker-published proxy port. Re-run the installer with VPN_PROXY_CLIENT_PORT=<port> to change it.
|
||||||
|
|
||||||
Useful commands:
|
Useful commands:
|
||||||
cd ~/.vpn-proxy-client
|
cd ~/.vpn-proxy-client
|
||||||
|
|||||||
@@ -1,14 +1,27 @@
|
|||||||
import path from "node:path";
|
import path from "node:path";
|
||||||
|
|
||||||
const dataDir = process.env.DATA_DIR || path.resolve(".vpn-proxy");
|
const dataDir = process.env.DATA_DIR || path.resolve(".vpn-proxy");
|
||||||
|
const parsePort = (value, fallback) => {
|
||||||
|
const parsed = Number.parseInt(value, 10);
|
||||||
|
return Number.isInteger(parsed) ? parsed : fallback;
|
||||||
|
};
|
||||||
|
const proxyPort = parsePort(process.env.PROXY_PORT, 8080);
|
||||||
|
const clientProxyPortStart = parsePort(
|
||||||
|
process.env.CLIENT_PROXY_PORT_START,
|
||||||
|
proxyPort,
|
||||||
|
);
|
||||||
|
const clientProxyPortEnd = parsePort(
|
||||||
|
process.env.CLIENT_PROXY_PORT_END,
|
||||||
|
clientProxyPortStart,
|
||||||
|
);
|
||||||
|
|
||||||
export const settings = {
|
export const settings = {
|
||||||
appMode: process.env.APP_MODE === "client" ? "client" : "gateway",
|
appMode: process.env.APP_MODE === "client" ? "client" : "gateway",
|
||||||
port: Number(process.env.PORT || 3456),
|
port: parsePort(process.env.PORT, 3456),
|
||||||
proxyPort: Number(process.env.PROXY_PORT || 8080),
|
proxyPort,
|
||||||
clientProxyPortStart: Number(process.env.CLIENT_PROXY_PORT_START || 8080),
|
clientProxyPortStart,
|
||||||
clientProxyPortEnd: Number(process.env.CLIENT_PROXY_PORT_END || 8090),
|
clientProxyPortEnd,
|
||||||
tproxyPort: Number(process.env.TPROXY_PORT || 7895),
|
tproxyPort: parsePort(process.env.TPROXY_PORT, 7895),
|
||||||
tproxyChain: process.env.TPROXY_CHAIN || "VPN_PROXY_TPROXY",
|
tproxyChain: process.env.TPROXY_CHAIN || "VPN_PROXY_TPROXY",
|
||||||
tproxySourceBypassChain:
|
tproxySourceBypassChain:
|
||||||
process.env.TPROXY_SOURCE_BYPASS_CHAIN || "VPN_PROXY_SRC_BYPASS",
|
process.env.TPROXY_SOURCE_BYPASS_CHAIN || "VPN_PROXY_SRC_BYPASS",
|
||||||
|
|||||||
@@ -347,7 +347,7 @@ export function buildGatewayConfig(
|
|||||||
includeTransparent: !clientMode,
|
includeTransparent: !clientMode,
|
||||||
}),
|
}),
|
||||||
final: "direct",
|
final: "direct",
|
||||||
auto_detect_interface: true,
|
...(clientMode ? {} : { auto_detect_interface: true }),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -203,6 +203,7 @@ function ProxySettings({ state, settings, busy, onSave }) {
|
|||||||
const parsed = Number.parseInt(draftPort, 10);
|
const parsed = Number.parseInt(draftPort, 10);
|
||||||
const invalid = !Number.isInteger(parsed) || parsed < range.start || parsed > range.end;
|
const invalid = !Number.isInteger(parsed) || parsed < range.start || parsed > range.end;
|
||||||
const dirty = !invalid && parsed !== port;
|
const dirty = !invalid && parsed !== port;
|
||||||
|
const singlePublishedPort = range.start === range.end;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="client-side-panel">
|
<aside className="client-side-panel">
|
||||||
@@ -222,17 +223,20 @@ function ProxySettings({ state, settings, busy, onSave }) {
|
|||||||
min={range.start}
|
min={range.start}
|
||||||
max={range.end}
|
max={range.end}
|
||||||
value={draftPort}
|
value={draftPort}
|
||||||
|
disabled={singlePublishedPort}
|
||||||
onChange={(e) => setDraftPort(e.target.value)}
|
onChange={(e) => setDraftPort(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary"
|
className="btn btn-secondary"
|
||||||
disabled={busy || !dirty}
|
disabled={busy || singlePublishedPort || !dirty}
|
||||||
onClick={() => onSave({ ...settings, proxyPort: parsed })}
|
onClick={() => onSave({ ...settings, proxyPort: parsed })}
|
||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<small className={invalid ? 'field-error' : 'field-hint'}>{range.start}–{range.end}</small>
|
<small className={invalid ? 'field-error' : 'field-hint'}>
|
||||||
|
{singlePublishedPort ? 'Порт задаётся установщиком' : `${range.start}–${range.end}`}
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|||||||
45
test/server/client-config.test.js
Normal file
45
test/server/client-config.test.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import assert from "node:assert/strict";
|
||||||
|
import test from "node:test";
|
||||||
|
|
||||||
|
async function withEnv(patch, fn) {
|
||||||
|
const previous = {};
|
||||||
|
for (const key of Object.keys(patch)) {
|
||||||
|
previous[key] = process.env[key];
|
||||||
|
if (patch[key] === undefined) {
|
||||||
|
delete process.env[key];
|
||||||
|
} else {
|
||||||
|
process.env[key] = patch[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return await fn();
|
||||||
|
} finally {
|
||||||
|
for (const [key, value] of Object.entries(previous)) {
|
||||||
|
if (value === undefined) {
|
||||||
|
delete process.env[key];
|
||||||
|
} else {
|
||||||
|
process.env[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
test("client proxy range defaults to the single configured proxy port", async () => {
|
||||||
|
await withEnv(
|
||||||
|
{
|
||||||
|
PROXY_PORT: "8082",
|
||||||
|
CLIENT_PROXY_PORT_START: "8082",
|
||||||
|
CLIENT_PROXY_PORT_END: undefined,
|
||||||
|
},
|
||||||
|
async () => {
|
||||||
|
const { settings } = await import(
|
||||||
|
`../../src/server/config.js?single-proxy-port=${Date.now()}`
|
||||||
|
);
|
||||||
|
|
||||||
|
assert.equal(settings.proxyPort, 8082);
|
||||||
|
assert.equal(settings.clientProxyPortStart, 8082);
|
||||||
|
assert.equal(settings.clientProxyPortEnd, 8082);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
@@ -44,6 +44,7 @@ test("client mode routes mixed proxy fallback to the selected VPN", () => {
|
|||||||
const config = buildGatewayConfig(subscriptionConfig, "test-vpn");
|
const config = buildGatewayConfig(subscriptionConfig, "test-vpn");
|
||||||
|
|
||||||
assert.deepEqual(config.route.rule_set, []);
|
assert.deepEqual(config.route.rule_set, []);
|
||||||
|
assert.equal(config.route.auto_detect_interface, undefined);
|
||||||
assert.deepEqual(config.route.rules, [
|
assert.deepEqual(config.route.rules, [
|
||||||
{ inbound: ["mixed-in"], outbound: "test-vpn" },
|
{ inbound: ["mixed-in"], outbound: "test-vpn" },
|
||||||
]);
|
]);
|
||||||
@@ -82,7 +83,7 @@ test("client home bypass can build direct proxy without local VPN", () => {
|
|||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("client mode uses selected proxy port from client settings", () => {
|
test("client mode ignores saved proxy port outside the published single port", () => {
|
||||||
fs.rmSync(clientSettingsPath, { force: true });
|
fs.rmSync(clientSettingsPath, { force: true });
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
clientSettingsPath,
|
clientSettingsPath,
|
||||||
@@ -91,7 +92,7 @@ test("client mode uses selected proxy port from client settings", () => {
|
|||||||
|
|
||||||
const config = buildGatewayConfig(subscriptionConfig, "test-vpn");
|
const config = buildGatewayConfig(subscriptionConfig, "test-vpn");
|
||||||
|
|
||||||
assert.equal(config.inbounds[0].listen_port, 8085);
|
assert.equal(config.inbounds[0].listen_port, 8080);
|
||||||
assert.deepEqual(config.route.rules, [
|
assert.deepEqual(config.route.rules, [
|
||||||
{ inbound: ["mixed-in"], outbound: "test-vpn" },
|
{ inbound: ["mixed-in"], outbound: "test-vpn" },
|
||||||
]);
|
]);
|
||||||
|
|||||||
Reference in New Issue
Block a user