3x-ui/frontend
MHSanaei b078d57692
feat(frontend): add FinalMask UI (TCP/UDP masks + QUIC params) to inbound and outbound
Mirrors web/html/form/stream/stream_finalmask.html as a shared
FinalMaskForm component used by both modals — they share the same
StreamSettings shape (addTcpMask/addUdpMask/finalmask/enableQuicParams)
so a single template handles both. Surfaces:
- TCP masks for raw/tcp/httpupgrade/ws/grpc/xhttp networks: fragment,
  sudoku, and header-custom (with the 2D clients/servers groups, each
  row supporting array/str/hex/base64 packets and a randomize button
  for base64).
- UDP masks for hysteria protocol or kcp network: hysteria gets just
  salamander; kcp gets the full type list (mkcp variants, header-*,
  xdns/xicmp, header-custom with flat client/server lists, and noise).
  Switching to xdns shrinks the kcp MTU to 900 to match the legacy
  panel's behavior.
- QUIC Params for hysteria or xhttp: congestion (incl. brutal up/down
  fields), debug, UDP hop ports/interval, idle/keepalive timeouts,
  path-MTU discovery toggle, and the four receive-window tunables.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-08 17:29:50 +02:00
..
scripts
src feat(frontend): add FinalMask UI (TCP/UDP masks + QUIC params) to inbound and outbound 2026-05-08 17:29:50 +02:00
.gitignore
inbounds.html
index.html
login.html
package-lock.json
package.json
README.md
settings.html
vite.config.js
xray.html

3x-ui frontend

Vue 3 + Ant Design Vue 4 + Vite. Builds into ../web/dist/, which the Go binary will embed via embed.FS once the migration reaches the page handlers (Phase 4+).

This directory exists alongside the legacy web/html/ Vue 2 templates during the migration. Pages will move over one at a time on the vue3-migration branch.

Dev

cd frontend
npm install
npm run dev

The dev server runs on http://localhost:5173/ and proxies API calls to the Go panel at http://localhost:2053/ — start the Go panel first (go run main.go), then start Vite.

Production build

npm run build

Outputs to ../web/dist/. The Go binary picks it up at compile time via embed.FS.

Where things live

  • src/main.js — app entrypoint (createApp, install Antd, mount)
  • src/App.vue — root component (currently a smoke-test placeholder)
  • vite.config.js — build + dev-server config
  • index.html — Vite HTML template

Adding new pages

For each legacy page being migrated, add an entry to vite.config.js rollupOptions.input. Each entry produces its own HTML file in web/dist/, which the Go panel route handler will serve.