71631fd4dc
With the inbound/outbound modal rewrites complete, the cross-check
against the legacy Inbound class has served its purpose. The new
pure-function / Zod-schema paths are the source of truth for production
code; the parity assertions were the migration safety net.
Convert the three parity test files to snapshot-based regression tests:
- headers.test.ts: toHeaders + toV2Headers run against snapshots
captured at the close of the migration (when both new and legacy
were verified byte-equal).
- protocol-capabilities.test.ts: 140 cases (10 fixtures × 14 stream
shapes) snapshot the predicate-result tuple. Was: parity vs legacy
Inbound.canEnableX() class methods.
- inbound-link.test.ts: per-protocol genXxxLink + genInboundLinks
orchestrator output is snapshotted. Was: byte-equality vs legacy
Inbound.genXxxLink() methods.
Also delete shadow.test.ts — its purpose was a dual-parse drift
detector (Inbound.Settings.fromJson vs InboundSettingsSchema.parse).
inbound-full.test.ts already snapshots the Zod parse output, which
covers the same ground without the legacy dependency.
models/inbound.ts and models/outbound.ts stay in the tree for now —
DBInbound still consumes Inbound via its toInbound() method, and
DBInbound migration is out of scope per the migration spec
('Do NOT migrate Status, DBInbound, or AllSetting...'). No
production page imports from @/models/inbound or @/models/outbound
directly anymore.
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>.htmlreferencing/src/entries/<page>.tsx. - Add
src/entries/<page>.tsxthat imports the page component and mounts it withcreateRoot(...).render(...). - Add the page component under
src/pages/<page>/. - Register the entry in
rollupOptions.inputinvite.config.js. - If the page is reachable from the sidebar at
/panel/<route>, add it toMIGRATED_ROUTESso the dev proxy serves the Vite HTML. - Wire the Go controller to
serveDistPage(c, "<page>.html").