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

History

MHSanaei 4ce2503c1e refactor(frontend): lift Protocols + TLS_FLOW_CONTROL consts to schemas/primitives Step 4b. The Protocols and TLS_FLOW_CONTROL enums on models/inbound.ts were dragging five page files into that 3,300-line module just to read literal string constants. Lifting them to schemas/primitives lets those pages drop the @/models/inbound import entirely. - schemas/primitives/protocol.ts now exports a Protocols const map alongside the existing ProtocolSchema. TUN stays in the const for parity (legacy panel deployments may have saved TUN inbounds) even though the Go validator no longer accepts it as a new write. - schemas/primitives/flow.ts now exports TLS_FLOW_CONTROL. The empty-string default isn't keyed because the legacy never had a NONE entry — call sites compare against the two real flow values. Updated five consumers: - useInbounds.ts: TRACKED_PROTOCOLS now annotated readonly string[] so .includes(string) keeps narrowing through the array literal - QrCodeModal.tsx, InboundInfoModal.tsx: Protocols - ClientFormModal.tsx, ClientBulkAddModal.tsx: TLS_FLOW_CONTROL Suite: 89 tests across 8 files; typecheck + lint clean. models/inbound.ts is now imported by: - InboundFormModal.tsx (heavy use of Inbound class + getSettings) - test/inbound-link.test.ts + test/shadow.test.ts + test/headers.test.ts (intentional — these are parity tests against the legacy class) OutboundFormModal still imports from models/outbound. Both form modals are the multi-day Pattern A rewrites the plan scopes separately.		2026-05-26 00:51:52 +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	refactor(frontend): lift Protocols + TLS_FLOW_CONTROL consts to schemas/primitives	2026-05-26 00:51:52 +02:00
.gitignore	Vue3 migration (#4198 )	2026-05-09 17:47:35 +02:00
eslint.config.js	Migrate frontend models/api/utils to TypeScript and modernize AntD theming (#4563 )	2026-05-25 14:34:53 +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").