Adds first-class Zod schemas for the xray-core DNS block and routing sub-objects (Balancer, Rule) matching the documented shape at https://xtls.github.io/config/dns.html and https://xtls.github.io/config/routing.html, then wires the DnsServerModal and BalancerFormModal up to those schemas. schemas/dns.ts (new): - DnsQueryStrategySchema enum (UseIP/UseIPv4/UseIPv6/UseSystem) - DnsHostsSchema record(string -> string | string[]) - DnsServerObjectInnerSchema + DnsServerObjectSchema (with preprocess to migrate legacy `expectIPs` -> `expectedIPs` alias) - DnsServerEntrySchema = string | DnsServerObject (xray accepts both) - DnsObjectSchema with all documented fields and defaults schemas/routing.ts (new): - RuleProtocolSchema enum (http/tls/quic/bittorrent) - RuleWebhookSchema (url/deduplication/headers) - RuleObjectSchema covering every documented field (domain/ip/port/ sourcePort/localPort/network/sourceIP/localIP/user/vlessRoute/ inboundTag/protocol/attrs/process/outboundTag/balancerTag/ruleTag/ webhook) with type=literal('field').default('field') - BalancerStrategyTypeSchema enum (random/roundRobin/leastPing/leastLoad) - BalancerCostObjectSchema {regexp,match,value} - BalancerStrategySettingsSchema (expected/maxRTT/tolerance/baselines/costs) - BalancerStrategySchema + BalancerObjectSchema schemas/xray.ts: - routing.rules: was loose 3-field object, now z.array(RuleObjectSchema) - routing.balancers: was z.array(z.unknown()), now z.array(BalancerObjectSchema) - dns: was 2-field loose, now full DnsObjectSchema - BalancerFormSchema: strategy now BalancerStrategyTypeSchema (enum) instead of z.string(); fallbackTag defaults to ''; settings? added for leastLoad DnsServerModal (full Pattern A rewrite): - useState/DnsForm interface -> Form.useForm<DnsServerForm>() - manual domain/expectedIP/unexpectedIP list -> Form.List - antdRule on address/port/timeoutMs for inline validation - preserves legacy collapse-to-bare-string behavior on submit BalancerFormModal: - Adds conditional leastLoad sub-form (Expected/MaxRTT/Tolerance/ Baselines/Costs) wired to BalancerStrategySettingsSchema - Strategy options derived from schema enum - Cost rows with regexp/literal switch + match + value - required prop on Tag and Selector for red asterisk visual BalancersTab: - BalancerRecord interface -> type alias to BalancerObject - onConfirm now propagates strategy.settings to wire when leastLoad - Removes useMemo wrapping `columns` array. The memo had deps [t, isMobile] (with an eslint-disable) so the column render functions kept their original closure over `openEdit`. Once a balancer was created and the user clicked the edit button, the stale openEdit fired with empty `rows`, so rows[idx] was undefined and the modal opened blank. Columns are cheap to rebuild each render, so dropping the memo is the right fix. DnsTab + RoutingTab: switch ad-hoc interfaces to schema-derived types. translations (en-US, fa-IR): add the previously-missing pages.xray.balancerTagRequired and pages.xray.balancerSelectorRequired keys so antdRule surfaces a real message instead of the raw i18n key.
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").