mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 21:24:10 +00:00

History

MHSanaei f4f0af576a feat(ws): live updates on inbounds/xray/nodes pages, drop polling + manual refresh Replaces the legacy polling + manual-refresh model with WebSocket pushes across the three live-data pages. The hub already broadcast traffic / client_stats / outbounds; this wires the frontend to consume them and adds a new `nodes` channel for the heartbeat job's snapshot. Frontend - new useWebSocket composable: page-scoped singleton WebSocketClient, lifecycle-managed on/off, leaves disconnect to page-unload - inbounds: useInbounds gains applyTrafficEvent / applyClientStatsEvent / applyInvalidate that merge counters and online/lastOnline in place; InboundsPage subscribes; InboundList drops the auto-refresh popover, the refresh button, and the now-unused refreshing prop - xray outbounds: useXraySetting gains applyOutboundsEvent; XrayPage subscribes; OutboundsTab drops the refresh button + emit - nodes: useNodes gains applyNodesEvent and stops the 5s setInterval/visibilitychange polling; NodesPage subscribes; NodeList drops the refresh button and ReloadOutlined import Backend - web/websocket: new MessageTypeNodes + BroadcastNodes notifier - node_heartbeat_job: after wg.Wait(), reload the table once and BroadcastNodes(updated). Gated on websocket.HasClients() so a panel with no open browser doesn't spend the DB read Bug fixes spotted in this pass - websocket.js #buildUrl defaulted basePath to '' when the global was missing (dev mode), producing `ws://host:portws` and a SyntaxError on the WebSocket constructor. Fall back to '/' and ensure leading slash. - vite.config.js: forward /ws to ws://localhost:2053 with ws:true so dev (5173) reaches the Go backend's WebSocket - NodeFormModal: a-input-password's visibilityToggle is Boolean in AntD Vue 4; the v3-era object form (`{ visible, 'onUpdate:visible' }`) triggered a Vue prop-type warning. Drop the override (default true shows the eye icon and toggles internally) and remove the orphaned tokenVisible ref Translations - pages.inbounds.autoRefresh / autoRefreshInterval: removed from all 13 locales (UI gone) - pages.nodes.refresh: removed from all 13 locales (UI gone) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>		2026-05-09 17:30:31 +02:00
..
src	feat(ws): live updates on inbounds/xray/nodes pages, drop polling + manual refresh	2026-05-09 17:30:31 +02:00
.gitignore	build(frontend): Phase 2 — scaffold Vite + Vue 3 + AD-Vue 4	2026-05-08 10:36:03 +02:00
eslint.config.js	build(frontend): bump eslint to 10 + add flat config + clean lint warnings	2026-05-09 02:36:47 +02:00
inbounds.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00
index.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00
login.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00
nodes.html	feat(nodes): multi-node panel orchestration (CRUD, deployment, traffic sync, sub per-node)	2026-05-09 15:25:29 +02:00
package-lock.json	build(frontend): drop deprecated rimraf/glob/inflight transitive deps	2026-05-09 14:22:25 +02:00
package.json	build(frontend): drop deprecated rimraf/glob/inflight transitive deps	2026-05-09 14:22:25 +02:00
README.md	docs(frontend): rewrite README for multi-page Vue 3 layout	2026-05-09 03:58:46 +02:00
settings.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00
subpage.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00
vite.config.js	feat(ws): live updates on inbounds/xray/nodes pages, drop polling + manual refresh	2026-05-09 17:30:31 +02:00
xray.html	revert(frontend): keep entry HTML files at frontend/ root	2026-05-09 02:36:26 +02:00

README.md

3x-ui frontend

Vue 3 + Ant Design Vue 4 + Vite. Multi-page app — one HTML entry per panel route — built into ../web/dist/ and embedded into the Go binary via embed.FS.

Dev

npm install
npm run dev

Vite serves on http://localhost:5173/. API calls and /panel/* routes proxy to the Go panel at http://localhost:2053/, so start the Go panel first (go run main.go) and then Vite.

The proxy auto-rewrites /panel, /panel/settings, /panel/inbounds, /panel/xray to the matching Vite-served HTML in dev mode (see MIGRATED_ROUTES in vite.config.js), so the sidebar's production-style links work without round-tripping through Go.

Production build

npm run build

Outputs to ../web/dist/ (HTML at the root, hashed JS/CSS under assets/). The Go binary embeds this directory at compile time and web/controller/dist.go serves the per-page HTML.

Lint

npm run lint

ESLint 10 with eslint.config.js (flat config) — vue3-recommended plus a few rule overrides for the project's formatting style.

Layout

frontend/
├── *.html                 # Vite entry HTML, one per panel route
├── eslint.config.js
├── vite.config.js
└── src/
    ├── entries/           # Per-page bootstrap (createApp + mount)
    ├── pages/             # One folder per route, each with the page
    │   ├── index/         # component + helpers + sub-components
    │   ├── login/
    │   ├── inbounds/
    │   ├── xray/
    │   ├── settings/
    │   └── sub/
    ├── components/        # Cross-page Vue components
    ├── composables/       # Reusable reactive logic (useTheme, …)
    ├── api/               # Axios setup, CSRF interceptor
    ├── i18n/              # vue-i18n init (locales live in web/translation/)
    ├── models/            # Inbound, Outbound, Status, … domain classes
    └── utils/             # HttpUtil, ObjectUtil, LanguageManager, …

Adding a new page

Add frontend/<page>.html referencing /src/entries/<page>.js.
Add src/entries/<page>.js that imports the page component and mounts it.
Add the page component under src/pages/<page>/.
Register the entry in rollupOptions.input in vite.config.js.
If the page is reachable from the sidebar at /panel/<route>, add it to MIGRATED_ROUTES so the dev proxy serves the Vite HTML.
Wire the Go controller to serveDistPage(c, "<page>.html").