mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00

History

MHSanaei 9de527b35f feat(frontend): link import on outbound modal (vmess/vless/trojan/ss/hy2) The legacy outbound modal could import a vmess://, vless://, trojan://, ss://, or hysteria2:// share link via a Convert button on the JSON tab. Restore that UX with a focused pure-function parser. lib/xray/outbound-link-parser.ts: - parseVmessLink: base64 JSON, maps net/tls + per-network params onto the discriminated stream branch. - parseVlessLink: standard URL with type/security/sni/pbk/sid/fp/flow query params, dispatches transport via buildStream + applies security params via applySecurityParams. - parseTrojanLink: same URL pattern, defaults security to tls. - parseShadowsocksLink: both modern (base64 userinfo@host:port) and legacy (base64 of whole thing) ss:// formats. - parseHysteria2Link: accepts both hysteria2:// and hy2:// schemes, uses the hysteria stream branch with version=2 + TLS h3. - parseOutboundLink dispatcher returns the first non-null parser result, or null when no scheme matches. test/outbound-link-parser.test.ts: - 13 cases covering happy paths for each protocol family plus malformed input, ss:// dual-format handling, hy2:// alias. OutboundFormModal.tsx: - Import button on the JSON tab Input.Search; on success, parsed payload flows through rawOutboundToFormValues, the form is reset, and we switch back to the Basic tab. - Tag is preserved when the parsed link does not carry one. Out of scope: advanced fields the legacy parser handled (xmux, padding obfs, reality short IDs, finalmask from fm= param). Power users can finish the import in the form after the basics land.		2026-05-26 13:28:04 +02:00
..
public	feat(frontend): TanStack Query + React Router migration & in-panel API docs (#4541 )	2026-05-24 21:34:52 +02:00
scripts	refactor(frontend): port api-docs/endpoints to TypeScript	2026-05-25 15:29:26 +02:00
src	feat(frontend): link import on outbound modal (vmess/vless/trojan/ss/hy2)	2026-05-26 13:28:04 +02:00
.gitignore	Vue3 migration (#4198 )	2026-05-09 17:47:35 +02:00
eslint.config.js	chore(frontend): enforce no-explicit-any: error + add typecheck/test to CI	2026-05-26 12:31:01 +02:00
index.html	feat(inbound): Advanced XHTTP and external TLS proxy settings (#4491 )	2026-05-24 21:54:26 +02:00
login.html	Frontend rewrite: React + TypeScript with AntD v6 (#4498 )	2026-05-23 15:21:45 +02:00
package-lock.json	test(frontend): vitest harness with golden-file fixtures for inbound protocols	2026-05-25 23:22:12 +02:00
package.json	test(frontend): vitest harness with golden-file fixtures for inbound protocols	2026-05-25 23:22:12 +02:00
README.md	Frontend rewrite: React + TypeScript with AntD v6 (#4498 )	2026-05-23 15:21:45 +02:00
subpage.html	Frontend rewrite: React + TypeScript with AntD v6 (#4498 )	2026-05-23 15:21:45 +02:00
tsconfig.json	Frontend rewrite: React + TypeScript with AntD v6 (#4498 )	2026-05-23 15:21:45 +02:00
vite.config.js	fix(vite): bypass es-toolkit CJS shim for recharts deep imports	2026-05-25 17:33:20 +02:00
vitest.config.ts	refactor(frontend): extract genVmessLink to lib/xray/inbound-link.ts	2026-05-26 00:07:36 +02:00

README.md

3x-ui frontend

React 19 + Ant Design 6 + TypeScript + Vite 8. 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.

Type check and lint

npm run typecheck
npm run lint

tsc --noEmit against tsconfig.json (strict mode, jsx: "react-jsx", @/* → src/* alias). ESLint 10 with eslint.config.js (flat config) — @eslint/js recommended plus typescript-eslint and eslint-plugin-react-hooks rules.

Layout

frontend/
├── *.html                 # Vite entry HTML, one per panel route
├── tsconfig.json
├── eslint.config.js
├── vite.config.js
└── src/
    ├── entries/           # Per-page bootstrap (createRoot + render)
    ├── pages/             # One folder per route, each with the page
    │   ├── index/         # component + helpers + sub-components
    │   ├── login/
    │   ├── inbounds/
    │   ├── clients/
    │   ├── xray/
    │   ├── nodes/
    │   ├── settings/
    │   ├── api-docs/
    │   └── sub/
    ├── components/        # Cross-page React components
    ├── hooks/             # Reusable hooks (useTheme, useWebSocket, …)
    ├── api/               # Axios setup, CSRF interceptor, WebSocket
    ├── i18n/              # react-i18next init (locales live in web/translation/)
    ├── models/            # Inbound, Outbound, Status, … domain classes
    ├── styles/            # Shared CSS modules (page-cards, …)
    └── utils/             # HttpUtil, ObjectUtil, LanguageManager, …

Adding a new page

Add frontend/<page>.html referencing /src/entries/<page>.tsx.
Add src/entries/<page>.tsx that imports the page component and mounts it with createRoot(...).render(...).
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").