Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 05:04:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5
3x-ui/frontend
History
MHSanaei 2a96ac9721
fix(frontend): qr code collapse — open only first panel, allow toggle 
ClientQrModal and QrCodeModal both used activeKey without onChange,
forcing every panel open and blocking user toggle. Switch to controlled
state initialized to the first item's key on open, with onChange so
clicks update state.

Also remove unused AppBridge.tsx (superseded by per-page message.useMessage
hook).
2026-05-22 03:05:55 +02:00
..
src fix(frontend): qr code collapse — open only first panel, allow toggle 2026-05-22 03:05:55 +02:00
.gitignore Vue3 migration (#4198) 2026-05-09 17:47:35 +02:00
api-docs.html refactor(frontend): port api-docs to react+ts 2026-05-21 21:26:28 +02:00
clients.html refactor(frontend): port clients to react+ts 2026-05-21 22:03:31 +02:00
eslint.config.js refactor(frontend): port inbounds to react+ts and drop vue toolchain 2026-05-21 23:35:23 +02:00
inbounds.html refactor(frontend): port inbounds to react+ts and drop vue toolchain 2026-05-21 23:35:23 +02:00
index.html refactor(frontend): port index dashboard to react+ts 2026-05-21 22:20:09 +02:00
login.html refactor(frontend): port login to react+ts 2026-05-21 21:19:52 +02:00
nodes.html refactor(frontend): port nodes to react+ts 2026-05-21 21:34:46 +02:00
package-lock.json refactor(frontend): port inbounds to react+ts and drop vue toolchain 2026-05-21 23:35:23 +02:00
package.json refactor(frontend): port inbounds to react+ts and drop vue toolchain 2026-05-21 23:35:23 +02:00
README.md Vue3 migration (#4198) 2026-05-09 17:47:35 +02:00
settings.html refactor(frontend): port settings to react+ts 2026-05-21 21:48:15 +02:00
subpage.html refactor(frontend): port subpage to react+ts 2026-05-21 21:19:38 +02:00
tsconfig.json chore(frontend): add react+typescript toolchain alongside vue 2026-05-21 21:19:09 +02:00
vite.config.js refactor(frontend): port inbounds to react+ts and drop vue toolchain 2026-05-21 23:35:23 +02:00
xray.html refactor(frontend): port xray to react+ts 2026-05-21 22:56:36 +02:00

README.md

3x-ui frontend

Vue 3 + Ant Design Vue 4 + Vite. 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.

Lint

npm run lint

ESLint 10 with eslint.config.js (flat config) — vue3-recommended plus a few rule overrides for the project's formatting style.

Layout

frontend/
├── *.html                 # Vite entry HTML, one per panel route
├── eslint.config.js
├── vite.config.js
└── src/
    ├── entries/           # Per-page bootstrap (createApp + mount)
    ├── pages/             # One folder per route, each with the page
    │   ├── index/         # component + helpers + sub-components
    │   ├── login/
    │   ├── inbounds/
    │   ├── xray/
    │   ├── settings/
    │   └── sub/
    ├── components/        # Cross-page Vue components
    ├── composables/       # Reusable reactive logic (useTheme, …)
    ├── api/               # Axios setup, CSRF interceptor
    ├── i18n/              # vue-i18n init (locales live in web/translation/)
    ├── models/            # Inbound, Outbound, Status, … domain classes
    └── utils/             # HttpUtil, ObjectUtil, LanguageManager, …

Adding a new page

  1. Add frontend/<page>.html referencing /src/entries/<page>.js.
  2. Add src/entries/<page>.js that imports the page component and mounts it.
  3. Add the page component under src/pages/<page>/.
  4. Register the entry in rollupOptions.input in vite.config.js.
  5. If the page is reachable from the sidebar at /panel/<route>, add it to MIGRATED_ROUTES so the dev proxy serves the Vite HTML.
  6. Wire the Go controller to serveDistPage(c, "<page>.html").