mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 20:54:14 +00:00

History

MHSanaei 22e88ec4eb refactor(frontend): port nodes to react+ts Step 4 of the planned vue->react migration. The nodes entry brings in the largest shared-infrastructure batch so far — every authenticated react page from here on can lean on these. New shared pieces (live alongside their .vue counterparts during coexistence): * hooks/useMediaQuery.ts — useState + resize listener * hooks/useWebSocket.ts — wraps WebSocketClient, subscribes on mount and unsubscribes on unmount. The underlying client is a single module-level instance so multiple components on the same page share one socket. * hooks/useNodes.ts — node list state + CRUD + probe/test, including the totals memo (online/offline/avgLatency) used by the summary card. applyNodesEvent is the entry point for the heartbeat-pushed list. * components/CustomStatistic.tsx — thin Statistic wrapper, prefix + suffix slots become props. * components/Sparkline.tsx — the SVG line chart with measured-width axis scaling, gradient fill, tooltip overlay, and per-instance gradient id from React.useId. ResizeObserver lifecycle is in useEffect; the math is unchanged. Pages: * NodesPage — wires hooks + WebSocket together, renders summary card + NodeList, hosts the form modal. Uses Modal.useModal() for the delete confirm so the dialog inherits ConfigProvider theming. * NodeList — desktop renders a Table with expandable history rows; mobile flips to a vertical card list whose actions live in a bottom-right Dropdown. The IP-blur eye toggle persists across both. * NodeFormModal — controlled form (useState object, single setForm per change). The reset-on-open effect computes the next state once and applies it with eslint-disable to satisfy the new react-hooks/set-state-in-effect rule on a legitimate pattern. * NodeHistoryPanel — polls /panel/api/nodes/history/{id}/{metric}/ {bucket} every 15s, renders cpu+mem sparklines side-by-side.		2026-05-21 21:34:46 +02:00
..
src	refactor(frontend): port nodes to react+ts	2026-05-21 21:34:46 +02:00
.gitignore	Vue3 migration (#4198 )	2026-05-09 17:47:35 +02:00
api-docs.html	refactor(frontend): port api-docs to react+ts	2026-05-21 21:26:28 +02:00
clients.html	Feat/multi inbound clients (#4469 )	2026-05-19 12:20:24 +02:00
eslint.config.js	chore(frontend): add react+typescript toolchain alongside vue	2026-05-21 21:19:09 +02:00
inbounds.html	feat(ui): use the host as the browser tab title prefix	2026-05-13 14:23:57 +02:00
index.html	feat(ui): use the host as the browser tab title prefix	2026-05-13 14:23:57 +02:00
login.html	refactor(frontend): port login to react+ts	2026-05-21 21:19:52 +02:00
nodes.html	refactor(frontend): port nodes to react+ts	2026-05-21 21:34:46 +02:00
package-lock.json	chore(frontend): add react+typescript toolchain alongside vue	2026-05-21 21:19:09 +02:00
package.json	chore(frontend): add react+typescript toolchain alongside vue	2026-05-21 21:19:09 +02:00
README.md	Vue3 migration (#4198 )	2026-05-09 17:47:35 +02:00
settings.html	feat(ui): use the host as the browser tab title prefix	2026-05-13 14:23:57 +02:00
subpage.html	refactor(frontend): port subpage to react+ts	2026-05-21 21:19:38 +02:00
tsconfig.json	chore(frontend): add react+typescript toolchain alongside vue	2026-05-21 21:19:09 +02:00
vite.config.js	chore(frontend): add react+typescript toolchain alongside vue	2026-05-21 21:19:09 +02:00
xray.html	feat(ui): use the host as the browser tab title prefix	2026-05-13 14:23:57 +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").